On Roguelike Map Generation, Pathfinding and Trajectory Plugins

In this article we will use the roguelike blueprint to show you how to use the map generator, pathfinding, ai & trajectory plugins.

All the code snippets are taken from playState.js.

Map Generator Plugin

The map generator plugin depends on the Tilemap class, so give the Creating TileMaps: Only Code tutorial a read to familirize yourself with how kiwi.js handles tilemaps.

If you just want to use it as-is to create some random levels for your game, the main functions of interest in the mapgenerator plugin are Kiwi.Plugins.MapGenerator.randomMap and Kiwi.Plugins.MapGenerator.dungeonMap. The former is the simplest possible map generator – randomly place walls and floors, and is good for forest maps. The latter is a traditional dungeon levels with rooms and corridors (if you want to dive deeper into the technical details of how the random dungeon generator was implemented, read original dungeon-generator tutorial at http://bigbadwofl.me/random-dungeon-generator/).

Both of these functions return a 2d array of characters, with “#” representing a wall, “.” a floor & ” ” (space character) for area outside the map (only the dungeon has area “outside” the level).

In the roguelike blueprint you can see we randomly pick which kind of map we want to create in the PlayState.initMap function:

You can see how this data is used to draw a graphical and an ascii map in the PlayState.initScreen & PlayState.drawMap functions:

This is the spritesheet I used for the map graphics (you can see how I changed the characters to the spritesheet cell indeces in initMap):


They are all released under Creative Commons here, so feel free to use them yourself.

Pathfinding Plugin

These related plugins deal with moving enemies on a TileMap level:

In its initilizing Graph function, the pathfinding plugin receives a 2d array of integers, each representing a blocking or walkable cell in the tilemap.

Once that has been executed, the search function can be used to return an array of <x,y> pairs representing the steps needed to be taken to get from a starting point to a destination.

If you just want to use it to let a charcter find a path to the player, you don’t have to use the pathfinding plugin at all and simply make use of the smartAiAct function in the AI plugin. this.moveTo is the callback function you need to pass in the init function.

AI Plugin

The AI plugin implements three simple AI types: random, simple & smart.

We’ve covered the smart type above – it uses the pathfinding plugin to navigate around barriers in the map. The random ai (as its name imply) walks in a random direction everystep and the simple ai walk in the general direction of the player, disregarding obstacles.

The first thing we need to do in order to be able to use the AI plugin in our game is to initilize it using the init function and 2d array of integers discussed above for the pathfinding plugin. Let’s look at PlayState.initMap where this is done:

we just told the AI plugin which tiles are walkable and which aren’t before we use it.

In PlayState.initEntities we create random enemies each with their own attributes and AI type:

Setting that ai field is all it takes to determine which kind of AI our enemies will use. Then when it’s their turn to take a step we call the aiAct fucntion, as in PlayState.enemiesTurn:

this tells enemy e to take one step in persuing their target (this.player). That’s it – as simple as that!!

Trajectory Plugin

The trajectory plugin allows you to easily trace a line in a TileMap, which can be used for ranged combat as in the roguelike blueprint.

the shoot takes the following parameters:

  • origin – the point where the shot begins
  • target – the point the shot would end at if no obstacles are met on the way
  • isWallBlocking – a callback function that gets an <x,y> coordinate and returns of a wall is blocking in that location
  • isActorBlocking – same as the above but for actors
  • hitWall – callback to execute when a wall is hit
  • hitActor – callback to execute when an actor is hit


We use the PlayState.shoot to wrap both the actual shooting in the trajectory plugin as well as the visual effect of the bolt flying:

The aforementioned callbacks are defined in processMouseInput where we call the shoot function once the player taps an enemy:

And that’s all you need to do in order to add ranged combat to your TileMap based game!

Share the joy
Comments 2

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">