{"id":31,"date":"2021-10-14T21:25:54","date_gmt":"2021-10-14T21:25:54","guid":{"rendered":"https:\/\/blogs.oregonstate.edu\/selfisnotdefined\/?p=31"},"modified":"2021-10-14T21:25:54","modified_gmt":"2021-10-14T21:25:54","slug":"now-we-can-start-coding","status":"publish","type":"post","link":"https:\/\/blogs.oregonstate.edu\/selfisnotdefined\/2021\/10\/14\/now-we-can-start-coding\/","title":{"rendered":"Now we can start coding"},"content":{"rendered":"\n

There are lots of helpful tutorials<\/a> and example files<\/a> for Phaser 3.\u00a0 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.\u00a0 But, these files are not quite plug-and-play.\u00a0 I needed to make a web server first.<\/p>\n\n\n\n

By remembering what I learned from my web development class, I wrote a simple server.js file like so:<\/p>\n\n\n\n

\"server.js
A simple web server using Node.js and Express<\/figcaption><\/figure>\n\n\n\n

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<\/em>!\u00a0 It worked.\u00a0 I had seen the inner workings of an example game and proved that I had everything I needed to run it locally.\u00a0 I could now move on to the specifics of our own game.<\/p>\n\n\n\n

First try at map-making<\/h2>\n\n\n\n

One of my main tasks in the group is to create the maps for each level of the game.\u00a0 At this point, we still hadn\u2019t decided on a specific art style.\u00a0 So, I browsed OpenGameArt<\/a> for the best looking tile set and settled on this one<\/a>, which is from an open-source art competition called the Liberated Pixel Cup<\/a>.<\/p>\n\n\n\n

\"LPC_terrain\"
Terrain tile set created for the LPC. Attribution found here<\/a>.<\/figcaption><\/figure>\n\n\n\n

I imported the tile set into Tiled <\/a>(a free open-source map editor with a great tutorial series here<\/a>) and created a draft of the first map.<\/p>\n\n\n\n

\"level01-v1\"
My first draft of the first level of our tower defense game.<\/figcaption><\/figure>\n\n\n\n

In this level, enemies march in from the right towards the tower, which will sit in the dirt clearing on the left side.\u00a0 They can choose either the high road or low road, but they must stay on the path.\u00a0 Players can place turrets in any open field.\u00a0 I left some empty space on the right side so that UI elements can appear there in a vertical strip.\u00a0 A couple small elements like health and money indicators can sit in the top-left corner too.<\/p>\n\n\n\n

Some things to figure out<\/h2>\n\n\n\n

Before I go any further with this map, I\u2019ll need to discuss some things with my group.\u00a0 One big concern is figuring out the right resolution and aspect ratio.\u00a0 I had to start somewhere to get some practice with the Tiled software, so for this map I chose the following dimensions:<\/p>\n\n\n\n