Wrapping Up


At this point the game is a suitable demonstration of the #tilemap and #plugin features of #Phaser. The #JavaScript code is all cleaned up with lots of comments and all the console.log statements removed.

Lab Tour


A look at the completed Lab 2 scene. A hidden script layer in #Tiled provides collision borders and a key name. Appropriate text is stored in a #JavaScript object and displayed via the dialog plugin in the #Phaser game.

Lab 2 Map


Back in #Tiled to finish the #tilemap of the #Area51 saucer lab. Each ship in the lab has an associated Script layer object to attach a collider. This allows the character to comment on the scene as they explore.

Scripted Dialog


Added a simple script system for dialog. An object layer in the #Tiled map defines interactive locations by assigning a key. The collision detector in the #Phaser game looks for the key in a script object and displays associated text. Space bar cancels the dialog box.

Area51 Map


The complete map for #Area51 in #Tiled. It’s broken up into 3 layers: A non-interactive Background, an Interactive layer for collision handling, and a Rooftop layer that sits above the player to walk behind.

Underground Lab Map


I stole some underground lab tile art from OpenGameArt.org to create some simple rooms fast in #Tiled.

Terrain Editing


The terrain brush in #Tiled makes setting up the map a breeze. Here I set up sand and pavement brushes to create the runway, and a road around the base. Threw in some building tiles for reference.

Area51 Tile Set


To create the #Area51 tiles I started with the desert tile set from the open source project #Tuxemon. I changed it a bit to include the pavement terrain I’ll need for the runway. And added a generic army base building.