Last year I got my wife a trip to a glass blowing tour in Louisville Kentucky for her birthday. It was to be an awesome experience that showcased mankind’s unique ability to harness the power of heat to blow glass in his image. We were very excited.

On the morning of the tour, I realized I’d accidentally booked tickets to a glass crafts workshop directly across the way from the glass blowing tour. The idea of this workshop was to take pieces of glass that someone broke with a gross hammer and lay them out in a pattern, and then they’ll cook it or whatever and put a magnet on the back of it and you can throw it on your fridge for 30 bucks.

While we were playing with shards of colored glass, we couldn’t help but look over and see the incredible amounts of fun being had in the glass-blowing workshop. We both went home, our strange trinkets in brown paper bags, wondering what kind of cool experience we missed out on that day. I felt a little bad for letting her down.

This year is different. I decided I would like to make a game for my wife. The scope is ambitious, but not impossible:

• I’d like to make a classic Game Boy Color RPG.
• You will be able to traverse a grid (grid movement) and interact with the environment/NPC’s
• There will be dialog
• There will be dungeons.
• There will be item management. Currency, consumables and equipment.
• There will be battles.

I love JavaScript, and I like TypeScript even more. So that’s what I chose to use. It just so happens that there is a github repository with Phaser (a JavaScript/HTML5 game engine) set up to use TypeScript and webpack. Fantastic! Thanks digitsensitive!

I spun up a Trello board, wrote a small design document with the above bullet points, setup a few columns to manage workflow and added a few base todos to get the project rolling.

To create tilemaps for use in the game, I am using tiled, a great little application that takes in a PNG tilemap, and spits out really pretty JSON objects that you can load directly into Phaser. For base tilemaps, I am using stand-ins from Pokemon Gold and Silver, with NPC’s I created in Piskel.

After a bit of messing about, I got a very basic scene of our living room using the tiles in a way I think the original designers never intended.

You can add meta-data directly to the map itself, which your game can then read and create objects from. I am attaching string messages to each object for now, but in the future, the idea is to decouple the metadata from the object, assigning it an ID instead so that you can query a database of objects.

{ "backgroundcolor":"#d4d49f",
 "height":10,
 "infinite":false,
 "layers":[...],// Object, background and foreground layers with associated metadata
 "nextlayerid":8,
 "nextobjectid":18,
 "orientation":"orthogonal",
 "renderorder":"left-down",
 "tiledversion":"1.2.3",
 "tileheight":16,
 "tilesets":[...],//You can choose to have the tilesets used to create the map embedded into the the map.  The tileset's individual tiles can hold their own metadata as well!
 "tilewidth":16,
 "type":"map",
 "version":1.2,
 "width":10
}

Cool!

And as with most side projects, I often can’t wait to get to the dessert before eating my vegetables. I had the idea to replace the standard Phaser loading screen with something a little more…traditional:

More to come in the next installment, where we’ll be discussing grid movement.

Keep up with the development of the game at my github.