BDS Software

Making Maze Number 1 (Using the Tiled Map Editor) - Page 1 of 5



Most of what I program (i.e. "code") here is pure Javascript. I generally don't use libraries like jQuery, or the Dojo Toolkit, or other similar packages, primarily because I'm learning modern Javascript as I go along. (Until this year - 2018 - my exposure to Javascript had been limited to form validation in the browser, and nothing more.)

But, making mazes involves making tiled level maps, and that can be both tedious and error prone to do by hand. Please don't ask me how I know this :-(. So, I decided to use a tool dedicated to such tasks, in order to speed and streamline the making of such maps.

The (pretty much industry standard) tool for making such maps is the Tiled Map Editor by Thorbj⌀rn Lindeijer.

I'm not going to give you a tutorial on Tiled - Thorbj⌀rn's Documentation does that far better than I can. Instead, I'm going to show you how I used Tiled to prepare the base map image and associated map arrays for my Maze Number 1.

I began in Tiled by creating a new map, 20 tiles width and 20 tiles height, with each tile 32px width and 32px height. This produces a 640x640px map which will be my standard map size for mazes in Tiled.

In Corel Paint Shop Pro 9, I constructed two tileset images, one for the maze floors and walls, and the other for the maze items and avatars. The Floors and Walls Tileset is:


Tiled automatically numbered the tileset images 1 through 50 with tile #1 at the upper left and tile #50 at the lower right:

● Tile 1 ==> Blank Square
● Tile 2 ==> Hatch Up to the Level Above (not used in Maze #1)
● Tile 3 ==> Hole Down to the Level Below (not used in Maze #1)
● Tile 6 ==> Start Square
● Tile 7 ==> Text = Blank Square
● Tile 8 ==> Text = Blank Square
● Tile 11 ==> Finish Square
● Tile 12 ==> Text = Blank Square
● Tile 13 ==> Text = Blank Square
● Tile 16 ==> Door to the Next Cavern North (not used in Maze #1)
● Tile 17 ==> Door to the Next Cavern East (not used in Maze #1)
● Tile 18 ==> Door to the Next Cavern South (not used in Maze #1)
● Tile 19 ==> Door to the Next Cavern West (not used in Maze #1)
● Tiles 41 through 50 ==> Wall Squares

The Start Tile 6, and Text Tiles 7, 8, 12, and 13 function the same as Blank Tile 1. Hatch Tile 2, Hole Tile 3, and Door Tiles 16, 17, 18, and 19 also function the same as Blank Tile 1 when the player does not elect to use the tiles' special features, e.g. the player can walk right across a Hole Tile 3 without falling into the hole. The player only goes down the hole when the choice is consciously made to do so.

All the other tiles (those marked "D") are dummy tiles. They just provide spaces where additional new tile types can be added in the future.

The Items and Avatars Tileset is:


Tiled automatically numbered these tileset images 51 through 100 with tile #51 at the upper left and tile #100 at the lower right:

● Tile 51 ==> The Player's Avatar
● Tile 100 ==> A Power Pill

Again, all the other tiles (those marked "D") are dummy tiles for future use.

In Tiled, it's important to load these two tilesets in "Floors first" - "Items second" order. Otherwise the tile numbering will be reversed, e.g. the Floor tiles will be numbered 51-100 instead of 1-50.


-----

Note:

● You might have noticed that the tilesets show black borders except on the bottom and right sides of the tileset. This is a result of the individual tiles being 32x32px with a 1px top border and a 1px left border, to allow a 31x31px "interior" with a well-defined center pixel. See Square Sizes.


-----



                                                                                                                                                                M.D.J. 2018/08/19