boxdox-marvel.v2: The React experiment? And a scripting surprize?

So far I have spent some time adding some neat features to boxdox.v2, and in doing so I have been able to learn more about doing things the “React Way” vs the “Angular Way”, and I am starting to see how I would build larger, more complex apps with React. There are still a lot of things I need to learn about component state and component lifecycles though. JSX is an interesting way to combine HTML and Javascript, but I can see that it’s very easy to write bad, messy JSX.

 

And, in making the webapp better, I have discovered something very important about how its scripting works. Up until this point, I understood the scripting to work in this fashion. Each script has sets of commands, each command tied to a frame counter for that state. So far, in those sets of commands, we had assumed that execution goes from top to bottom, i.e. all commands are run in order, once each.

Continue reading boxdox-marvel.v2: The React experiment? And a scripting surprize?

Saturday+Sunday Coding: boxdox-marvel.v2

A while back I launched boxdox-marvel, it was an experiment into new technology. Instead of using things I usually use to make sites, I tried out two static site generators, Hugo and Hexo. Static site generators are neat in the sense that all the processing happens offline, leaving you with static html that can easily be distributed, archived, etc.

However, in the process of making boxdox-marvel.v1, I quickly learned that static site generators were not the right tool for the job. boxdox-style sites are just data viewers are heart, so I thought the static nature of the data was a good fit for a static site generator, but in reality, I underestimated the speed and complexity of creating the kinds of views I wanted to make.

How did boxdox.v1 work

A script written in python scanned data files from the game, dumping all data into structured JSON. These python data files were used by the static site generator to generate an html page showing a table containing the data. This worked fine, although the page generation times worked against me in terms of rapid iteration.

As I began to add features like making the table dynamically filterable and sortable, I realized that for almost everything I needed to do, I needed the data in JSON structure anyways. The DataTables jQuery extension I was using could work from HTML, but a lot of the features were going to be harder to implement unless I passed the JSON to it raw.

Now if my site is processing JSON files on the fly to render a table, its not really that static anymore is it? Sure, it doesn’t rely on any server side functionality, but it still requires javascript.

Learning a new framework

All of the previous boxdox’s were either Angular 1 or Angular 2 apps. I wanted to hop the fence and learn React. React is an web framework that was created by engineers at Facebook. One of my favorite things about being a programmer is knowing what the right tool for the job is, and its hard to do that without constantly building new products with new tools.

React is a little confusing coming from Angular. Angular is more of a full framework, while React focuses on just the view layer of a traditional MVC framework.

Learning a new CSS framework?

Almost every website I have made in the past few years has been built on Bootstrap 3 in some way, and lately I have been trying out Bootstrap 4 in preparation for the future. However, sometimes Bootstrap gets in my way, so I decided to try out a new CSS framework called PureCSS.

Well it turns out I use more of the default Bootstrap styling than I thought!

The reason I chose PureCSS was because I didn’t want to have to override a ton of styles on a site that only has so many different kinds of content to style anyways. However, I found myself missing some of that built in styling in practice, as it helps immediately give the site a more consistent look and feel.

In addition to this, via the dantarion-bootstrap repo I published on github, I normally am able to share styling between all the boxdox sites, so that the colors and UI are shared between them all.

With PureCSS, I am left with a site that is functional but needs more work in terms of look and feel.

Its not PureCSS’s fault, I am just lazy!

Anyways, here it is!

 

 

 

Friday Night Coding: Marvel RTE

 

Ultimate Marvel vs Capcom 3 is out on Steam! At first I wasn’t sure about doing any modding for this game, the window between the Steam release and the MvC:I release seemed a bit tight for anything cool to happen, and also almost too tight, as any community mod project could be seen as competing with Infinite. The thing that changed my mind was seeing the progress being made by the community without my involvement. A new name I hadn’t heard of, SixFortyFive, was doing data research and documenting data structures, my ol SF4Remix buddy anotak was working on a GUI tool for UMVC3, just like when we worked on Ono!, the Street Fighter 4 editor, and a Discord of new faces were all working together and sharing information on tinkering with the game.

I wanted in!

Now the most important thing when a game is in the early stage of being modded is the turnaround time in terms of testing out edits. Back in the early days of modding Brawl on the Wii, you had to burn a DVD just to try an edit. That limits how much experimentation you are willing to do and cuts into how quickly you can discover how a game engine works.

For Marvel,the current process involves the following:

  1.  Extracting a file from a container
  2. Modifying it with a gui tool
  3. Packing it back into the container
  4. Return to character select
  5. Reselect characters
  6. Wait for game to load
  7. Test modification

Its not as bad as burning a DVD, but I think we can do better!

The holy grail: Real Time Editing!

What if we could just have our tool directly interface with the game and allow for testing for edits within seconds!. Well, thats what I did Friday Night! I built it!

Heres how it works!

  1. Frida.Re is used to inject javascript into the game that hooks the games resource loading and unloading functions
  2. As files are loading, the javascript tracks what files are loaded, where they are in memory, and where the pointers are stored that the game uses to access the movesets during gameplay
  3. When a file is changed externally by the preexisting edit tool (https://github.com/anotak/MarvelEditTool) the program loads the updated file into a new area in the games memory, and points the game to the updated moveset`
  4. When resources are unloaded, malloc‘d memory is free d appropiately to prevent memory leaks.

Round trip from save to seeing the result ingame? ~30 frames.

Whats next? Improving the tool until its not just a bunch of numbers and buttons 😀

GDC Recap 1: Getting to SF and getting my GDC on!

This year I attended GDC, the Game Developers Conference. It is the largest conference for those involved in the game development industry and it is seen as a fantastic resource to learn skills, network with peers, and see where the industry is headed. Its not really a place for those that want to play games, but there are tons of interesting things for those who want to know how games are made.

Getting There.

GDC is in San Francisco. I do not live in San Francisco. Getting to GDC involved a long bus ride from southern California all the way up to the bay area. I could fly, but I actually like the relaxed feel of riding the bus over the panic of airports. I always fill my phone up with game podcasts and game devs podcasts to get myself in the zone, and try to plan out what things I will be doing each day using the GDC app.

This year I picked out a hotel that was much nicer and much closer to Moscone Center than the place I stayed last year. I learned my lesson booking last minute. Last year I was unprepared. I didn’t give myself enough time to relax, and I planned an activity for every minute of every day. I didn’t know about the importance of EventBrite RSVP’s for getting into events, and I didn’t know what to expect when it came to networking with people around me. This year turned out a lot better!

Day 1

AI Arborist: Proper Cultivation and Care for Your Behavior Trees
More “I”, Less “A” in AI Interviews
Math for Game Programmers: Ranking Systems: Elo, TrueSkill and Your Own
How Defold Helps Indie Devs Perform Live Updates with AWS (Presented by Amazon)

Highlight of this day was Upload VR’s party! I couldn’t RSVP for it because I waited too late, but then later in the day a person on the GDC app linked to a post by the CEO about extra invites.  A few minutes later, I had one! The party was an interesting mix of music, dancing, booze, food, and all things VR. There were about 6 full green room stages for shooting VR/AR video, and each one had a unique demo to experience. There were multiple live performances using VR, including a demo where two ballerinas in motion tracking suits performed a dance with CGI rendered backup dancers mimicking their movement. There was also a live demo of a surgery training VR exercise.

 

Note: I know these posts are coming very late, I have been very busy lately and I'm gonna do my best to catch up!

Open Source…works!: bbtools success story!

So, some of my funner recent projects have been bbtools and boxdox-bb. These tools were aimed at reverse engineering ArcSys games, most notably the Guilty Gear Xrd and Blazblue series of games. As with any of my projects, at some point they were my primary daily focus, but over time, I have moved onto other things.

boxdox-bb is public and updated to the most recent version of Blazblue Central Fiction, the Xrd files are updated to the current version of Revelator. As far as I am concerned, the projects are live and workable.

bbtools’ source code is public on Github. This means that anyone can see the code I used, fork the project if I disappear and continue it, etc. This takes a lot of work for me. I have to stop working on the project itself, ensure that all code and dependencies are properly accounted for, write a README, and keep the online source code repository up to date.

With bbtools, several users have gone out of their way to add features and help with what I started.

This is the holy grail of open source as far as I am concerned.

I got started by picking apart the work of others and learning what I could. Being able to provide similar opportunities and mentorship towards people that are interested in reverse engineering games is important to me.

For example bbtools has code in it to support taking character moveset scripts for Blazblue Chronophantasma and recompiling them to and from Python to help users make custom movesets. At the time, I didn’t bother doing this for Xrd because Revelator wasn’t out on PC yet, so interest was very low.

However Github user Labreezy had something else in mind, and implemented this feature for Xrd for themselves. Now, in a closed-sourced world, maybe Lazbreezy would have given up. Maybe they would have built their own tool for themselves. But instead, they have submitted their changes as a pull request, sharing it with the world, so everyone gets this new feature I didn’t have time to make myself!

Github user suShirow has been helping out as well, updating command databases bbtools relies on with findings from our Discord and independant research!

Others have done this and honestly nothing makes me happier than seeing other people dive into the code alongside me and head into battle!

 

Automating Framedata: How they do it.


Sometimes I feel like the way framedata works is just as abstract and random as this video about plumbuses. Anyways, lets start from the beginning.

Note: This article was sponsored by my Patrons: To help support the creation of more content like this, please consider becoming a Patron here

What is Framedata Anyways?

When people talk about framedata, they are generally talking about a specific set of properties associated with a attack in a fighting game. Knowledge of these properties can be used to understand how fast a move is, what combos after said move, and how safe the attacker is when the move is blocked. This data is essentially what dictates the flow of the game.

Startup – How many frames does the attack take to become active
Active – How many frames does the attack remain active
Recovery – How many frames until the character can move or block after the move is over.
Hitstun – How many frames is the opponent stunned when the attack hits
Blockstun – How many frames is the opponent stunned when the attack is blocked.

To give an example of a situation where framedata is effective, lets say you are playing SF5, and its a mirror match; Ryu vs Ryu, the classic matchup. You opponent keeps doing st.MP followed by st.MP, hadouken on block. You keep feeling like you have to just sit back and watch it happen, as pushing any button just ends up with you being counterhit by the second st.MP.

Ryu’s st.MP is +1 on block. It has a 5 frame startup. This means that you have a 4 frame gap to do a move before the second st.MP hits. Using a list of framedata allows you to come to this conclusion, and then look for 4 frame or less moves to counter your opponents simple blockstring.

Continue reading Automating Framedata: How they do it.

Introducing StreamGen!

StreamGen: Because dantarion is Lazy

So, I have found myself wanting to not only make more youtube videos, but also enter the Twitch/Hitbox arena. Now,  one of the things that makes my streaming efforts a lot different than others is that I have a LOT of things I need to display at once for my stream to work, other than just game, cam, and a blurb of info.

When I stream KenBot, id like to show the game itself, the GUI of the bot, and possibly the monitor I am using to code. Now, OBS is perfectly capable of doing what I want, but when it comes time to polish it and make overlays+backdrops, I found myself annoyed.

I am perfectly capable of opening up Photoshop, creating something that looks amazing, and then using that on my stream. However, one thing that bugs me is that if I wanted say, lower the gamesize by 20% and increase everything else in my stream layout to match, I’d have to go through the following process.

  1. Make whatever adjustments I need to do in my PSD in photoshop.
  2. Export to PNG
  3. Move around sources in OBS and resize them to fit perfectly on the new layout
  4. Stream

Now, this is fine for  a streamer that only has a couple different layouts, but I wanted a bit more flexibility! I am a web developer by trade, so my initial thought was, why not HTML!

Continue reading Introducing StreamGen!

KenBot: C# has yield!?! and other relvalations

So, it just hit me that the yield keyword that I wanted to use to use to implement a bot in Python can actually be used in C# in an iterator. This has inspired me to update my design to use yield.

Let me explain what I mean. Now, normally, my bot goes through a loop like this.

  1. Collect information about current game state.
  2. Check and see if something is happening that requires the bot to stop what it is doing to react
  3. Continue doing what the bot was doing.

I implemented this using a simple state framework, where each state has variables it uses to store how far it is along doing whatever its doing. Each frame the state is called, and it presses what every buttons it needs to press that frame. The annoying part about this is that if you wanted to make a state that say, presses D, F, D, F, HP, you would have to write it so that it’s a function that gets called 5 times, and inputs the proper button on each frame. That would look something like this.

int i = 0;
function example()
{
 if(i == 0)
      press("D");
 if(i == 1)
      press("F");
 ........
 i++;
}

I don’t like this, and it was the primary thing that made me get annoyed working on KenBot.

Now, the yield keyword isn’t normally used the way I am preparing to use it, but it actually solves more than one issue. The updated code will work like this.

function example()
{
    press("D");
    yield "I just pressed D";
    press("F");
    yield "Oh yeah, just pressed F";
    ....
}

In this example, it may seem like its the same about of glue code in between the code for each button press,  but there’s normally a lot more decision making and programming going on than this.

I am going to try to refactor my code this weekend and see how far I get into this and see if it helps anything.

KenBot: Postmortem or New Beginnings?

So, I put a lot of work into the most recent framework for KenBot, and I created something that was usable for more than just me. I brought it to EVO, but I wanted to spend more time enjoying EVO than sitting around babysitting a Kenbot station,  so not many people got a chance to play it. The code repository I published has been used by multiple people to create SF4 playing bots for different characters, to the point where I consider it to be a success.

However, I am not satisfied with the framework. It is clunky to use, and I want to make something that I can modify and use for any game, period. To do this, I need to abstract some major features out of my current codebase.

Continue reading KenBot: Postmortem or New Beginnings?

Scheduling.

So, for the rest of this year at least, I want to try to keep myself to a pedigree. One Blog Post a day.

This would be hard if I really wanted every post to be a indepth article about game modding, or programming, or an opinion  piece, so I am opening up my blog to a bunch of new topics, bringing it more in line with a personal blog than just a dev one.

Heres a few ideas I want to do.

Reviews.

Not just game reviews, or media reviews, ANYTHING. I plan on trying to review one thing a week, weather that is a game, movie, TV dinner, hair product, piece of clothing, microcontrollers from Adafruit, etc.

Reflections.

There are a lot of obscure and interesting things that shaped who I am as a person today, and I think it would be nice to reflect on some of these things, people, etc, and write a bit about how they affected me.

Dev Progress Update

I want to take one day a week after work and focus on either working on, or releasing source code to one of my many, many unfinished products that I have accumulated over the years. I want to put all my code on either Github or Google Code so that others can take my projects and fork them if they want to continue development on it in the future.

Project Dantarion Update

I also want to post once a week about progress being made on the rewrite of my game prototype using Lua and UE4.

Cool Link

This is kinda the “I don’t have time” post that I want to do, rather than go a day without posting. These will just be a link to something, like a page, a song, a video, etc, and a shot paragraph about why I think its cool or interesting. I have no excuse not to be able to do one of these even if time is short, I could even post them from my phone.

Photography!

I live in a beautiful place. I want to try to post a picture once a week of something, even if its just my roommates cat, or the sunset.