enchant.js | Maps and Tiles

Maps and Tiles

This section uses images from Ubiquitous Entertainment Inc. that are not licenced for unlimitted use.

• A tileset is a collection of images for use in a game.
  • All images in a tileset are typically the same size and square.
  • Each image is called a tile.
• A tilesheet is a composite image of tiles from a tileset.
• Tilesheets are usually used by mapping one of the sub-images to some other resource.
• Tilesheet example:
  

Surfaces and tiles

Download starter project

In enchant.js, Surface objects are often used with tilesheets to create complex backgrounds.

• Copy one tile from a tilesheet onto a Surface and use that Surface as a background image.

• Copy a different tile from the tilesheet onto the Surface.

• Use a loop to fill the top row of the surface with the same tile.

• Making a constant that has the size of the tile makes it easier to locate specific tiles and makes it harder to make mistakes in calling surface.draw.

• Using a nested loop, we can fill the entire surface with the same tile.

• We can then come back and draw over with specialized tiles.

Interactive maps

The example developed here is a simplified version of an example presented in McInnis, Brandon, Ryo Shimizu, Hidekazu Furukawa, Ryohei Fushimi, Ryo Tanaka, and Kevin Kratzer. "Advanced Features of enchant.js." In HTML5 game programming with enchant.js. Berkely, Calif.: Apress, 2013. 89-97, and uses images that are not licenced for unlimited use. As such, it may be subject to copyright or other intellectual property conditions that are different from the other resources used here.

Download starter project

Maps in enchant.js can be used for composing backgrounds with tiles and for creating more interesting kinds of interactions with an environment. In the trail below, we develop a simple maze game using a map. In all the examples below, map0.png refers to the following tilesheet:

Maps for backgrounds

• In enchant.js, you create maps with Map objects.
• The mapping of which tile goes where is specifed with the Map's loadData method.
• Yes, it's a little ugly.
• It gets worse.

Adding an overlay layer

• Passing an additional 2D array to the Map's loadData method will layer the tiles over the tiles specified in the first 2D array.

Add a player

• We add a simple player that can go anywhere.

Establishing boundaries

• Keeping things within boundaries requires the use of data set with the Map's collisionsData property along with its hitTest() method.
• Note that collisionsData is a property while loadData is a method.

Offsetting the player

• Satisfying interaction with the boundaries often requires offsetting the "hit" detection.

Real player, real prize

• Making the player a real character and adding a goal: reaching the treasure.