2D Games Formats – Side-scrolling

You can find this game slice here

The theme of the game slice was inspired by jetpac on the Z X Spectrum. In Jetpac you must pick up fuel cells that fall from the sky and carry them one-by-one to your ship, which you must also construct. Enemies fly across the screen, and you must dodge them or lose a life. The key elements of the game I wanted to use were collecting fuel to take off, and different level platforms on which the fuel cells can be.

During the creation of this game slice, I encountered several different stumbling blocks at various stages, each with their own set of problems and solutions. From the list of recommended features, I managed to achieve:

  • Movement, collision and physics
  • Using Tiled for level design
  • Scaling, camera management and parallax scrolling
  • Background audio and sound effects
  • Collectables
  • Spritesheet animations

The first task that I completed was using Tiled to create the level design. I have used the software in the past while performing work experience in industry, so I was excited to have an opportunity to use it to create my own game. I created two foreground, collision, parallax and two background layers. By doubling up on foreground and background layers, I could create extra depth with my level design.

I then exported my tiled level to a JSON file so that it could be read by Phaser, however, when I was creating the level I forgot to embed the tileset. This resulted in a rather long headache of trying to figure out how to do so, before realising it was a tiny button in the bottom right corner of the screen. On the positive side, I know to immediately embed my tileset before beginning any level designs in the future.

The next error that I encountered was that my collision set-up function was not working correctly. After going over my code by talking through it at my debugging buddy (a stuffed alligator) I discovered that I had forgotten to use the .call method when invoking the function.

function create_col(map) {
    var col_layer = map.getLayer("col").tilemapLayer;
    col_layer.setCollisionBetween(0, 1000);

    this.physics.add.collider(player, col_layer);
    this.physics.add.collider(player, fuel_cells, pick_up_fuel);
    this.physics.add.collider(spaceship, col_layer);

This is important to use when you are creating your own functions outside of the main Phaser ones of preload, create and update. Once I changed how I called the function, I made significant progress. In the same coding session, I managed to add music, collectables and player movement.

The last features that I added to the game were scaling and resizing the game window, as well as vertical parallax scrolling. To add parallax to the game, you need to use the setScrollFactor method to set the x and y scroll factors. A scroll factor of 1 means that the layer doesn’t scroll in that direction.

map.createStaticLayer("para", alien_world, 0, 0).setScrollFactor(1, -0.2);

In working on this game slice, I pulled together several different techniques that we had covered that I am interested in using more in the future. I particularly liked adding sound effects to the game, now my player character makes a sound when jumping and picking up a collectable. If I were to continue with this project, I would add some enemies moving along set paths, as well as adding in the code that would allow the player to use a controller.