Capstone Blog #7 – From 2D to 3D


So these past two weeks have been some of the most intensive weeks of this production process so far. Long story short: Don’t believe you can make a 2D game 3D over night.

The Situation:

So I’ve mentioned before that our game will be a 2.5D fighter – like the recent street fighters have been. These past two weeks have been a trial in porting code, making adjustments, and proving the art pipeline. It’s been hardwork, but the entire team has been giving it 200% and I’m happy to say that we’ve made it to the other side! While the environment is still a work in progress, this is what our game is looking like now:


It feels so good to see Johnny Fuego fully realized!

As you can see – the camera is a lot closer now, and we have a more fully realized ring to run around it. I had also implemented some dynamic camera work so that the action is always visible – no matter how far away the luchadors are.


He’s probably not going to make that jump…

This makes the both the artists and the designers happy – artists can have their characters and screen proportions well represented, while we can still have a lot of freedom of movement and rope mechanics being displayed at will (Most fighting games block movement off at the camera boundaries).

Perspective vs Orthographic:

Since the game was purely 2D before, I was using an orthographic camera. In the big change, our artists requested to change to a perspective camera, so we could use 3D background and get more rich and easier to make environments. The main challenge this presented however, is how the characters are represented. Since it’s a perspective camera and the 3D characters now have depth, their width on the screen would change depending on their distance to the perspective camera. The issue is that this skewing wouldn’t accurately represent where the hitboxes of moves are – and even if it’s a minor thing, precision in a fighting game is vital.

This is the part where I talked to people and did a lot of research in order to find a good solution. My characters needed to be rendered orthographically while the environment was rendered in perspective. One option, was to write my own camera projection matrix, as explored here: The other option, was to render out the 3d animations into sprite sheets, so that we could have our 3d looking characters without any depth. Both seemed like fairly costly endeavors, until my graphics professor gave me the simplest solution – scale the model’s z value.

flag fuego.PNG

For all intents and purposes, these are now Fuego sprites.

So yeah, we just flattened the models – angled the camera correctly and voila! Problem solved.


Our team found the game feel we really enjoyed and wanted to have with our 2D prototype. Despite it being relatively simple, people had fun – and that’s an amazing sign! During our shift to 3D, certain things felt clunky, and not as crisp and fun as it did in our 2D build. These past two weeks have been spent making the transition, and making sure our game feels just as fun as it did before. I’m happy to say that we’re pretty much there – and then some! We have a bigger environment to fight in, more moves, and I’ve also been implementing some new mechanics on the side. Right now you can currently quick rise, so you can adjust your timing when getting up in order to throw off your opponent. In the next weeks, I’m going to be focusing on the last core features like the parrying system and combo system.

After all that said is done, I’ll be polishing off mechanics and cleaning up whatever I can in order to prepare for the big presentation. I’m feeling extremely confident with our game right now. In my last post I talked about how proud I am of my team, and that definitely hasn’t changed. I feel like we’ve overcome a huge hurdle together, and I’m very excited for the future.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s