Sunday, April 13, 2014

Refactoring Payback: Localization, Collisions and Level Design

Cleaning up your mess usually pays back in a myriad of ways. Of course, cleaning up your game code (which is known in the programming jargon as refactoring) pays back too. After just one week of refactoring Bloodhunt there're so many improvements I don't really know where to start, so let's follow the order of the title.

Localization.
In a story-driven RPG such as Bloodhunt it is of vital importance to fully understand all game dialogs and texts. And the best way to achieve it is through localization, i.e. translating all game texts to different languages. Therefore, I just needed a simple way of including different languages in the game with a minimal effort. And this is how I have approached it. When the game starts, there's a service that reads an XML file that contains all game texts in the different languages. The service chooses a language based on the player settings and stores all the translated texts in a language model that can be used throughout the game. For now, I've just added English and Spanish, but since it's a plain and simple XML file, you can add your language too. I hope maybe some day in the future the community translates the game to other languages. It would be awesome!

And here we have a GIF of the character creation screen translated to Spanish.

Collisions
In the last part of the previous GIF we can see the Ventrue character walking though the Santa Monica apartment room. Even though it moves way too fast and the framerate of the recording is a bit sloppy, we can see some collisions and z-ordering happening. I've implemented a pretty simple collision system that allows the player to move in the room hitting walls and objects in the environment (the bed, the desk, etc.) Also, there's a quick z-ordeding that sorts all game objects onscreen to create the illusion that the characters walks before and behind the desk. These are not the most beautiful implementations but it's not bad for a first approach.

Level Editing
Another important aspect of the game is creating new scenarios. Before refactoring, the process of creating a game location was tedious and required different external tools. This was the old process:

In Photoshop I just draw the scenario, laying out the main shapes and colors and maybe some characters for reference.

Then I go a tile editor to lay out the collisions using tiles of 24x24 pixels.

The level editor saves a CSV file containing 0s and 1s to indicate the positions that can be walked by the character.

Then I go back to Photoshop to position the items in the scenario.

At last, I code the scenario adding by hand all the positions of the items, adding shadows for collision, etc.

After refactoring, I've added a dynamic CSV generator so I can get rid of steps 2 and 3 since it automatically generates the 0s and 1s from the floor layer. Also, the gameplay view automatically adds all item in their positions, just reading the graphics generated in Flash. So now the process is as follows:

In photoshop I draw the scenario and the items.

In Flash I can drag and drop all the elements in their specific layers, draw the floor layer, position the items, add shadows and everything.

The code does the automatic magic and the sceneario is playable.

Here's a screenshot of step 2, drawing the floor layer in Flash.

And step 3, the dynamic CSV generator. If you just concentrate in the 1s, you can see the red shape of the floor layer above.