TileMaps - micojs/micojs.github.io GitHub Wiki

Overview

MicoJS has some support for Tiled TMJ maps on all platforms. Tilemaps are a good way to add scenery to your game without wasting space with large bitmaps. They are also much faster than using sprites.

Tiled settings

Not all Tiled settings are compatible with MicoJS. When creating a new map, ensure that:

  • Orientation is set to "Orthogonal".
  • Tile layer format is set to "CSV".
  • Tile render order is set to "Right Down".
  • Map size is "Fixed".
  • The map can have multiple Tile layers.
  • The map can have a single Object layer to define at what depth sprites (image/text/rect) should be drawn.
  • Layers that are hidden (visible == false) will not be exported, but their tile properties will be preserved in layer zero.

When you add a Tileset, ensure that:

  • Put the tileset images in the same folder as the tilemap tmx
  • "Embed in map" is checked
  • "Use transparent color" is unchecked
  • Margin is 0
  • Spacing is 0
  • Tile width and height match the map's tile width and height

To import the tilemap to MicoJS:

  • Select "Export" in the "File" menu
  • Select "JSON map files (*.tmj *.json)"
  • Save the file with a tmj extension
  • Drag-and-drop the saved tmj and its images into the file list of a MicoJS project
  • A corresponding resource will be created for each tmj file (eg, Level-1.tmj will become R.Level1).

MicoJS

To render render the tilemap:

  • call setTileMap(R.Level1);

To stop rendering the tilemap:

  • call setTileMap(null);

To scroll around the map, set the CAMERA_X and CAMERA_Y variables:

  • CAMERA_X = 10; // move view 10 pixels to the right (tilemap moves 10 pixels left)

To read a tile's custom properties, use:

  • const propertyValue = getTileProperty(pixelX, pixelY, "propertyName");

The getTileProperty function always returns an int. If the value is a string, getTileProperty will return the hash of that string:

  • const isWall = getTileProperty(x, y, 'type') == hash('wall');

To find all tiles where the properties match certain values, use:

  • scanTileMap({propertyA:valueA, propertyB:valueB}, (x, y) => { /* do something for tile at x/y */ });

Planned Features

  • Loading maps/textures from SD
  • Support for mirrored/flipped tiles
  • Animated tiles