Thursday, September 29, 2011

Space Dodgers Development - Real-time Image Layering

Since all the images in a game are positioned in real time, it is incredibly important that they are layered correctly or things would go wrong fairly quickly. Images could end up hidden or displayed improperly if not ordered in the right way.

For Space Dodgers (Visit Market) specifically, this is how my images are ordered:

1. The bottom layer is strictly black to create the effect of space.

2. The next layer up consists of white lines (each with a randomized opacity, size, speed, etc.) flashing across the screen in the -x direction to create the illusion of character movement through space (the lines represent stars).

3. The enemy particle system (with randomly generated colors and sizes based on the enemy type) is then drawn, this way it will be behind the enemies and not in front of them.

4. The enemies are then drawn above their particle systems based on their individual x/y coordinates.



5. After the enemies, the bonuses are then drawn above them.





6. The player's particle system is then drawn in respect to the player's position; this way, like the enemies, it appears to be behind the actual player.





7. The player is then drawn with it's respective x/y coordinates. The selected player image is entirely based on what is currently happening in the game at that time. Shifting through the images creates the illusion of animation (IE. the red one will appear for 300 ms (.3 seconds) when the player is hit, giving the illusion of damage).

8. Finally, other text (such as current/high scores) is then drawn on the top-most layer.

The ordering of the layers is incredibly important. For instance, if the enemies were drawn behind the background, the player would end up colliding with enemies that they couldn't even see.

The point is: order matters.

No comments:

Post a Comment