There are lots of helpful tutorials and example files for Phaser 3. Since I had never worked with this game framework before, the first thing I wanted to do was to see if I could get one of the example games working on my local computer. But, these files are not quite plug-and-play. I needed to make a web server first.
By remembering what I learned from my web development class, I wrote a simple server.js file like so:
Then I added the example files, made double sure that the file paths pointed to the correct locations, ran the server with Node.js, and voila! It worked. I had seen the inner workings of an example game and proved that I had everything I needed to run it locally. I could now move on to the specifics of our own game.
First try at map-making
One of my main tasks in the group is to create the maps for each level of the game. At this point, we still hadn’t decided on a specific art style. So, I browsed OpenGameArt for the best looking tile set and settled on this one, which is from an open-source art competition called the Liberated Pixel Cup.
I imported the tile set into Tiled (a free open-source map editor with a great tutorial series here) and created a draft of the first map.
In this level, enemies march in from the right towards the tower, which will sit in the dirt clearing on the left side. They can choose either the high road or low road, but they must stay on the path. Players can place turrets in any open field. I left some empty space on the right side so that UI elements can appear there in a vertical strip. A couple small elements like health and money indicators can sit in the top-left corner too.
Some things to figure out
Before I go any further with this map, I’ll need to discuss some things with my group. One big concern is figuring out the right resolution and aspect ratio. I had to start somewhere to get some practice with the Tiled software, so for this map I chose the following dimensions:
- Tile size: 32×32 pixels
- Map size: 800×608 pixels or 25×19 tiles
- Aspect ratio: roughly 4:3
It isn’t too difficult to change the map at this point, but it’ll be harder once things like collision boundaries are coded in. We’ll also have to agree on where exactly UI elements will appear, so that enemies and turrets don’t get lost behind a button.
