Devlog #1
Welcome to this new series of articles dedicated to my devlogs!
In this series, I will share some behind-the-scenes secrets of my journey through game development. The prototype I will present is a browser turn based multiplayer isometric RPG. The engine I am using for the prototype is Phaser 3.js, a web based 2D game engine and Javascript framework.
The purpose of these articles is not to teach development. If you encounter difficulties understanding the technical aspects, feel free to consult tutorials and videos on web development and the Phaser.js 3 game engine.
In this article, we will focus on the design of the isometric view using the Tiled tool. I refer you to the sources if you want to learn more about Tiled.
Tiled is a software that allows you to create and export 2D maps by importing what are called tilesets. Tilesets are sets of small squares that are arranged on a grid to create a 2D map. A tile is the basic unit of a map.
Tiled
Here is the map of the first level. You can see that I have imported a tileset, a set of tiles, which I have arranged on a 50x50 grid, meaning 50 tiles in length and 50 tiles in width.
To obtain an isometric map, you must first have isometric tiles. I used a free tileset from opengameart, which offers isometric tiles sized 64 pixels by 64 pixels.
Now that we have our map, we can place our tiles on it. But if we place all our tiles without distinction, the player will be able to move on water, move off the map, or even walk through walls.
To differentiate our various tiles, we will create layers.
For example, the ground will be the ground layer, where the player can move. The boundaries layer will contain the level’s walls, so the player does not move into infinity. We also have the water layer, which represents water, and the walls and structures in layer 1. We can create other layers as well.
The order of the layers is very important because they will be displayed in order. The highest layer will be above the lowest layer. Thanks to this, we can create roofs, for example, or place structures on the ground.
We then need to manage the detection of the different layers in our game. Layers where the player cannot move will be imported as “static.” Characters will collide with all the tiles in these layers. This way, they will have a physical body, unlike the ground which has no physics, so you can walk on it.
Here, you can see with the mouse that we can detect the tiles the player cannot move on, and the selection square no longer appears.
Tile-by-Tile Movement
Once we have our isometric map, we need to move on it, tile by tile.
I won’t lie, this was the hardest part to manage (really!), to move the player and make them land in the middle of each isometric tile.
After many weeks of failures, complications and maths, I finally found the formula to move the characters tile by tile and stop the movement at the exact center of the tile.
In the case of point-and-click, there is a path the character follows to reach the destination. We repeat the movement and stop for each tile along the path to the destination.
The A* Pathfinding Algorithm
To move the player to a destination, we need to find the shortest path to the coordinates.
No worries, I’ll give you the trick. We use the A Star algorithm. It is a widely used algorithm, especially in video games, to find the shortest path among several possible paths.
Unfortunately, I don’t have in-depth knowledge to detail the algorithm, but once again, we have everything we need to implement the algorithm without pulling our hair out. There are javascript libraries allowing us to use the algorithm with a grid representing the map. We input the starting point and the destination point in the grid, and the algorithm gives us the shortest path as a list of coordinates to traverse to reach the destination.
Thanks to this, we now have our tile-by-tile movement. The player can reach a destination, and the NPCs and mobs can move towards the player.
Collisions
Once we can move, and the NPCs can move, they need to interact with the player, or we need to interact with them. For this, we detect the collision between characters.
You can see here in the game in debug mode. The squares correspond to the bodies of the game objects.
The blue squares around the NPCs are collision detectors. If the player collides with an NPC or boss’s square, an event can be triggered: a dialogue or a battle.
With all these elements, we get an isometric game ✨.
👌
So, we have seen how to create an isometric map with Tiled and how to create and manage tiles in different layers, then how to manage tile-by-tile movement with the A* pathfinding algorithm, and then handle collisions between characters to trigger events.
I hope this devlog has taught you a bit more, and I’m happy to share my web game development experience 👨💻.
In the next devlog, we will focus on the turn based combat system, super fun but probably the most complex part of the entire game!
See you next time!
