As of December the 14th, I’ve started work on my own platformer game on Phaser. To start myself off I created some sprites for the player as well as some tiles to use.
Using my knowledge on spritesheets, I created some player animations using Piskel, which is a browser based editing software which specializes in pixel art animations.
This site is particularly handy to use as described, you are able to see a preview of your sprite’s animation on the fly, as well as easily being able to export sheets into columns.
“Piskel is an easy-to-use sprite editor. It can be used to create game sprites, animations, pixel-art… It is the editor used in piskelapp.com.”
Using this software, I created a whole spritesheet containing all the necessary player animations I’ll need for the platformer; this includes idle sprites, walking sprites, jumping sprites and even a death sprite.
You can see the whole spritesheet on figure 1, and a preview of all the animations on figure 2. Each frame on the spritesheet is around 16×16 pixels in size, although depending on the game I may have to make the sprites bigger so that the player is more easily visible – however I can also move the camera to a smaller resolution.
As shown on figure 3, I’ve also created a simple small tilesheet containing mostly square tiles that were 16×16, these are what I plan to be on the collision layer of the game which is the surface the player will be able to collide with.
Included on the far right are also some details, which will be on a details layer and won’t collide with the player.
On Figure 4, using Tiled I created a simple layout for the first level, as you can see I’ve also created some separate layers for the tiles on the right for both solids and details.
I’ve also included an objects layer, which contains the player and goal’s spawn. The purpose of these is to add some extra information to our tilemap which will prove useful later on during our coding.
This enables us to easily place a player spawn point precisely where we want without having to specify coordinates in our code for the placements of our objects.
“Using objects you can add a great deal of information to your map for use in your game. They can replace tedious alternatives like hardcoding coordinates (like spawn points) in your source code or maintaining additional data files for storing gameplay elements.”
Tiled stable (2019)
For the purpose of this game, I will be using this feature for the player spawns as well as many other objects. This will help save more time for the project in an albeit more efficient way as well.
As you can see in-game, I’ve managed to get the tilesheet to load in-game as well as getting the player and goal spawns to work (See Figure 5).
How I managed to do this was at first I had to make sure the tilesheet and json file for the level I’d created in Tiled were preloaded into the game.
Afterwards once the game starts and the program creates our objects, the code would then try to search for a point within SceneA (Which is our first level) and look for some of the key points we inserted into our Tiled level earlier, such as the spawn and goal points we had on our objects layer.
As shown from Figure 6, the bottom part shows how the code tries to find a spawn point for the player.
At first it searches through our objects layer on our Tiled level and looks for our “playerSpawn” entity with the same name, once it finds this, it then adds the player’s sprite to the starting point.
Descottes, J., 2020. Piskel – Free Online Sprite Editor. [online] Piskelapp.com. Available at: https://www.piskelapp.com/ [Accessed 26 December 2020].
Doc.mapeditor.org. 2019. Working With Objects — Tiled 1.4.2 Documentation. [online] Available at: https://doc.mapeditor.org/en/stable/manual/objects/ [Accessed 27 December 2020].