• Register

The game you are trying to view has ceased development and consequently been archived. If you are a member of this game, can demonstrate that it is being actively developed and will be able to keep this profile up to date with the latest news, images, videos and downloads, please contact us with all details and we will consider its re-activation.

A demake of Vampire the Masquerade: Bloodlines in 2D pixelart.

Report RSS Bloodhunt - 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 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.

Posted by on

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:

  1. In Photoshop I just draw the scenario, laying out the main shapes and colors and maybe some characters for reference.
  2. Then I go a tile editor to lay out the collisions using tiles of 24x24 pixels.
  3. The level editor saves a CSV file containing 0s and 1s to indicate the positions that can be walked by the character.
  4. Then I go back to Photoshop to position the items in the scenario.
  5. 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:

  1. In photoshop I draw the scenario and the items.
  2. 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.
  3. 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.


Oh! It's rotated 90ยบ but you get the idea.

Post a comment

Your comment will be anonymous unless you join the community. Or sign in with your social account: