The Lost Pathfinder Game

The Lost Pathfinder is a new online game which requires players to connect a path from one side of map to the other.

At the beginning of each round of The Lost Pathfinder you are presented with an isometric grid on which all the road tiles have been mixed up. All you have to do is to rearrange the road tiles in order to complete a path from one side of the map to the other. To help you restore the correct path you can rotate individual roads by clicking on the individual tiles on the map.

In truth The Lost Pathfinder isn't the most exciting game in the world. However for me it is the first step in creating an isometric game engine for the Leaflet.js mapping library. Isometric tiles are widely used in computer games to create a pseudo-3D effect while maintaining the simplicity of 2D graphics. By creating an interactive isometric grid map in Leaflet I hope to be able to go on to create more complicated games - for example simulation games like Theme Park, Sim City, or Transport Manager.

To create this new isometric game engine for Leaflet I have devised two initial maps: the Isometric Tile Creator and the Isometric Level Editor.

The Isometric Tile Creator

The Isometric Tile Creator allows me to draw and create the graphics for a game in the form of individual isometric tiles. The tile creator consists of a 10x10 grid of empty isometric tiles. Users can color each of these tiles individually to create their own isometric map tiles. When completed the map tile can then be downloaded as a PNG image and used in an isometric game.

By default the Isometric Tile Creator can only be used to create low resolution isometric map tiles (there are only 100 isometric polygons in the 10x10 grid). But it can be adjusted (in Glitch) to contain more polygons. Or it is possible to add isometric images instead of colors to the individual tiles on the editor to create higher resolution isometric map tiles. However if you do want more polygons or to add images then you will need to edit the Isometric Tile Creator yourself by cloning its Glitch page.

The Isometric Level Editor

I have also created an Isometric Level Editor. This is a 10x10 isometric grid on which you can add isometric map tiles to create a map for an isometric game. When you have completed designing a map level for your game you can download the results as a GeoJSON file.

At the moment the level editor allows you to add various road tiles to the map (in order for me to create levels for The Lost Pathfinder game). However you can change these options to any isometric map tile image by cloning and editing the level editor's Glitch page.

For example if I want to create a Tower Defence game I could use the Isometric Tile Creator to create weapon and road graphics for the game. I could then use the Isometric Level Editor with these images to design the individual level maps to be used in the game. 

BTW - I do want to create a Tower Defence game. Here is my work in progress (I only started today so this is very basic. You can click on the map to add weapons - but they haven't been armed yet so the towers can't fire missiles)