| Tags: game development

I've been trying out a few HTML5 game frameworks these holidays, and I'd like to share my particular "Hello World" for game development: a small game that allows me to quickly learn the basics of a 2D game engine or framework.

It is a space shooter, most of it taken from DIV Games Studio's manual, and the rest tweaked to try out more essential features of game development.

You can see the final result at Space Shooter HTML5, which I made using the Phaser library.

Now into the actual steps and why! If you want to give this a try, you can grab the image assets I use from the Github repository.

Step 1: Paint a background

The first step to create this 'hello world' space shooter is to setup a blank new project with the engine or framework of your choice, create a window and paint an image filling the screen. With this we learn how to:

step 1 screenshot

Step 2: Add a ship

The next step is to add the ship the player will be controlling using the arrow keys (or WASD, or whatever you find suitable). The specific goals are:

step 2

Step 3: Make the ship shoot

Now you need to give the player the ability to shoot when she presses a key. Then, a bullet will come out of the ship and will move upwards until it goes out of view. Goals for this step are:

step 3

Step 4: Add enemies

This step is very similar to the previous one, but instead of adding sprites that will move upwards, we will create sprites that will move towards the bottom of the screen. In my version I add some random horizontal movement as well, so they are not "raining". The enemies are also spawned randomly.

The new thing here is that these sprites are animated. I use a minimal spritesheet2 like this one:

Sample spritesheet

So the only new goal here is:

step 4

Step 5: Kill those bastards!

This is the fun part of this game: killing enemies. This step is very interesting because there are different techniques to detect collisions. At this stage, I opt for whatever the framework has implemented, or circular bounding boxes if I have to roll out my own solution.

Once you have the collisions bit sorted out, the destroying part should be easy, since you already did that for the bullets in step #3. So, again, only one goal in this step:

Step 6: Add explosions

Explosions are not really needed, but they provide satisfaction to the player. I take advantage and try more sprite properties here, like alpha (transparency), scale, rotation and blending modes. A method for tweening is needed here, since the idea is to make the explosion grow and vanish with time. The goal:

step 6

Step 7: Display the score

Having a score will give the player motivation to play harder and better. It also give us the chance to learn how to render text within our engine.

There are two approaches for text: either you use actual fonts (TrueType fonts like the ones you have installed in your computer, like Arial or Courier New), or you use what we call bitmap fonts, which are a spritesheet containing the alphabet. It doesn't matter which way you opt for, just take the one your engine supports more easily. The goal is then:

step 7

Step 8: Display an energy bar and add "Game Over"

This game is not fun since there is no way the player is in danger. So here we will make the ship die whenever it takes enough damage from colliding enemies, and then stop the game. This game over could be some text and then restarting the game, or you could just make the application quit.

However, to learn something new here, I like to add an energy bar to display the ship's health. There are several techniques to achieve this, but I opt for image clipping, since it has so many uses in games.

Step 9: Play some samples

We have used image and font assets, but we still haven't learnt how to use audio assets in our game. It is time to fix that, and you will find out that even simple audio assets can greatly improve a game. ALWAYS use audio, even if it's just a prototype or an entry for a 48-hour game jam… it is always worth it!

In this step, grab some audio samples for shots and explosions, load them and play them. If you have a background music track, play it to!

Step 10: Build a release!

Now that the game is finished, it's time to make a release so others can play. This varies deeply depending on the platform, and it can be as easy as uploading some files to a web server, or it can involve signing your game with a developer certificate, or…

  1. This is the time that has passed between the last frame and the current frame. Since you probably want to express an entity's properties in terms of actual seconds (for instance, pixels/seconds for speed), this is a must.
  2. Spritesheets are a popular game development technique. Instead of loading multiple images separately, you build a single image containing the smaller ones, like patchwork. This is much more efficient, and makes things like animation logic easier. If you are into web development, this technique is what "CSS Sprites" are named after.