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.

Prototyping Project – Production Diary

My prototype is for a 2D platformer game where you play as a robot (Tyler) and its’ inventor (Mike). Tyler has the ability to take on properties of objects which allows him to remove obstacles from Mike’s path to the end of the level.


Today I worked on the character sprites, the initial level design, and the movement/switch functions. I got some basic boxes in to represent the characters, and on paper I created a sketch of how I want the level to look, and what obstacles the player may encounter. Tomorrow I will continue on the switch function.
Currently, it changes the value in the switch function, and where it is called from, but not globally, which is a major issue. The movement left and right for Tyler is effective, but I’ve been unable to test it for Mike so far.


Despite being ill today, I completed the implementation of the character switch function, allowing me to test the movement for Mike. The reason why it wasn’t working yesterday was that I had used a single equals sign in an if statement, where instead I needed to use 2.


Today I found a tile sheet map to use for my platforms that was freely available online at:
I also began work on the jump function for Tyler. I have got him moving up and back down again when you press the jump key, but it happens so quickly that you can’t see it, however, I still have tomorrow before his movement needs to be complete.


Using a branch on Github, I restarted work on the jump function for the robot today. I mostly scrapped what I did in terms of physics yesterday, and started over through implementing gravity to ensure the player would fall to a platform. This meant I also had to edit the second character’s movement, but it was quick and easy to update.


Today I implemented my level design I had done on paper earlier in the week and I worked on collision detection for the platforms throughout the level. It’s not quite working yet, but I have planned for it to be completed it for tomorrow.


I got lots done today in the computer lab before my afternoon session and during it. I implemented the lava, well and exit objects. I also made it so that the lava can be turned to stone when Tyler is carrying water. I started working on the bush game bonus, but I didn’t quite get to finish it. Finally, I created a game over state for if Mike fell into lava and a game won state for if Mike reached the exit.


I have completed a reflective journal entry on the first week of this project, which can be found here.

I also completed the bush bonus object, so that you can water it to make it grow or burn it down using lava. Once I completed that, I created a level reader that took in an array of numbers from a file and stored them in the map and collision_map arrays to allow new levels to be loaded and played.


On paper I started designing a second level for the game, then I transferred it into two txt files to be read from by the game. Finally, I tweaked a few functions so that they were compatible with different level layouts, such as filling out the collision function. This needed to be done as I had only set up specific cases for the function, rather than fleshing it out completely to work for all cases.


In our session today we tested out each other’s prototypes, and I gained valuable feedback on my game which I will use in my write-up.