I started a browser based game development project called Tile-fighter. Objective of the project is to investigate pixi.js capabilities for game development.

I had earlier experience of pure WebGL, but it was too clumsy for fast moving game development project. Tile-fighter project is going to be an isometric strategy game with turn based combat like Jagged Alliance or XCOM.

Map generation

First objective was to generate 2.5D isometric tilemap. I chose tiles over hexes due to simpler implementation. First iteration of this feature simply used pixi.js’s sprite skewing function, which skew the square to rhombus.

I quickly find out this wasn’t going to end up well and did some googling how the isometric tilemap should be done properly.

It turned out that it was easier to use tile sprites that were already skewed. I found current tileset from opengameart.org. I translated the coordinate system origin to top of the map so that left side was -x, right side +x and y values were all negative then I mapped tiles as 64x64 tilemap in double for loop. Roads and lakes are currently semi randomly (starting point is fixed) generated via seed value.

Pathfinding

Pathfinding has been the technically hardest part of the project so far. Quick github search resulted a javascript-astar library, which implemented A* Search algorithm with weighted tiles. Performance and code quality looked fine so I decided to try it. I converted it to ES6 code and dropped unneeded features like diagonal path finding. Library was is to drop into project and I discarded the own pathfinding implementation. Tile-fighter currently has four types of tiles grass-, dirt road-, wood- and lake tiles. Pathfinding function takes care that wood and lake tiles are impassable and character goes around them and refuses to move into those tiles. Character sprites were also taken from opengameart.org. I would like to replace the current asset files with tailor made graphics in future.

TypeScript conversion

JavaScript implementation quickly came error-prone due dynamic typing. I decided to try TypeScript, which I had used earlier in work projects. TypeScript adds static typing to JavaScript and compiles to ES5 just like Babel. TypeScript doesn’t come without problems, but I can manage with those issues. Quality of off-the-shelf typings various a lot. I’m currently using off-the-shelf typings of the Definetely typed project. TypeScript compilation takes also more time than Babel and it produces bigger bundle files. Currently only way to use Browserify and commonjs module system in browser with TypeScript is to add tsify transpiler to Browserify.

Future

There’s still much to do and maybe we will see second part to this blog series in near future. Checkout current status of tile-fighter in Github https://github.com/Laastine/tile-fighter

Master branch in March 2016

Try it out