Tilemap

If you need a big map that is made up of a lot of same and samll images, then you can use qc.Tilemap to display tile-based maps.

Create Tilemap Assets

qc.Tilemap is compliant with the map files created by Tiled Map Editor, "Orientation" is "Orthogonal", "Tile layer format为CSV" is "CSV", and exported as json format.


Import Tilemap Assets

Change the exported json file's subffix to .txt, open the file with any text editor, and change all the tilesets's name property to the name of image asset. the image property in tilesets is useless, Tilemap just use the name property to find image asset.

 {
// ...
    "tilesets":[
        {
         "firstgid":1,
         "image":"/user/local/tiledmap_src.png",
         "imageheight":64,
         "imagewidth":176,
         "margin":0,
         "name":"tiledmap_src"
         // ...
        }
        // ...
    ]
// ...
}
  • Drag text and related images files to import to project's folder
  • Create a Tilemap object from main menu(GameObject/Tilemap) or toolbar's Tilemap button
  • Drag the .bin asset generated from .txt file to the Data property of Tilemap object in Inspector panel
  • Click "Generate Layers" button to generate qc.TileLayer of qc.ObjectLayer objects as children.

The operations above can be done by code as bleow:

var tilemap = game.add.tilemap();
tilemapk.data = game.assets.find('tilemapKey');
tilemap.generateLayers();
tilemap.resetNativeSize();

The operations above create a Tilemap object, and three children:

  • Tilemap - qc.Tilemap object, for manage sub layers
  • Tile Layer 1Tile Layer 2 - qc.TileLayer objects, for display layer map
  • collision - qc.ObjectLayer object, store the objects information for using

Tilemap

  • Data - The Tilemap asset
  • ScrollX - Horizontal scroll distance
  • ScrollY - Vertical scroll distance
  • Generate Layers - Generate sub layers
  • Reset Native Size - Set the Tilemap object to the size of the map
  • Layers - The Array object of sub layers
  • Tilesets - The Array object of image assets

TileLayer

  • Tilemap - The corresponding Tilemap object
  • Layer Index - The layer index
  • ScrollX Ratio - The horizontal scroll ratio, default value is 1
  • ScrollY Ratio - The vertical scroll ratio, default value is 1

The map's offset is determine by tileLayer.scrollXRatio tilemap.scrollX and tileLayer.scrollYRatio tilemap.scrollY, so the different scroll ratio in layers will have the parallax scrolling effect.

ObjectLayer

  • Tilemap - The corresponding Tilemap object
  • Layer Index - The layer index
  • ScrollX Ratio - The horizontal scroll ratio, default value is 1
  • ScrollY Ratio - The vertical scroll ratio, default value is 1

video

API

Demo

Demo