Drawing tiles

Tiles can be drawn with multiple approaches, some of which going to be covered by following example.

h2d.Bitmap

Bitmap is a simple container to draw one Tile. It’s the most basic type, but should be used with caution, as each Bitmap causes a draw call.

h2d.TileGroup

TileGroup allows to batch-draw Tiles beloning to same Texture with ability to apply individual tint, transform and alpha to each tile. This class can be used to draw static tiles, but not very well suited for dynamic movement, since it should be cleared and refilled with data each time something should be altered.

TileGroup hacking

With @:privateAccess tileGroup.content it’s possible to access underlying TileLayerContent instance and do more fine-tuned geometry operations other than simple rectangles.

h2d.SpriteBatch

SpriteBatch allows to batch-render Tiles belonging to same Texture, but contrary to TileGroup, it updates batch data each frame and allows to control each SpriteElement individually. Note that by default SpriteBatch does not utilize scale and rotation of SpriteElements and it should be enabled with hasRotationScale flag. Same applies to update method of SpriteElement - it will be called only when hasUpdate flag is set.

BasicElement and updates

h2d.SpriteBatch.BasicElement is a good example of how update method can be utilized. This class provides simple simulation of gravity, friction and velocity.

Sample

This example draws tile layers from a Tiled export file (json) using TileGroup batching, Bitmap for backdrop image and SpriteBatch for batch-rendering of moving sprites.

The example uses a backdrop.png, bunnies.png, tiles.json and tiles.png files, that should be put in the resources (/res) folder. Those files are not included in samples directory.

  1. class Main extends hxd.App {
  2.     static function main() {
  3.         // embed the resources
  4.         hxd.Res.initEmbed();
  5.         new Main();
  6.     }
  8.     override private function init() {
  9.         super.init();
  11.         // Add backdrop Bitmap
  12.         var bitmap = new h2d.Bitmap(hxd.Res.backdrop.toTile(), s2d);
  14.         // parse Tiled json file
  15.         var mapData:TiledMapData = haxe.Json.parse(hxd.Res.tiles_json.entry.getText());
  17.         // get tile image (tiles.png) from resources
  18.         var tileImage  = hxd.Res.tiles_png.toTile();
  20.         // create a TileGroup for fast tile rendering, attach to 2d scene
  21.         var group = new h2d.TileGroup(tileImage, s2d);
  23.         var tw = mapData.tilewidth;
  24.         var th = mapData.tileheight;
  25.         var mw = mapData.width;
  26.         var mh = mapData.height;
  28.         // make sub tiles from tile
  29.         var tiles = [
  30.              for(y in 0 ... Std.int(tileImage.height / th))
  31.              for(x in 0 ... Std.int(tileImage.width / tw))
  32.              tileImage.sub(x * tw, y * th, tw, th)
  33.         ];
  35.         // iterate on all layers
  36.         for(layer in mapData.layers) {
  37.             // iterate on x and y
  38.             for(y in 0 ... mh) for (x in 0 ... mw) {
  39.                 // get the tile id at the current position 
  40.                 var tid = layer.data[x + y * mw];
  41.                 if (tid != 0) { // skip transparent tiles
  42.                     // add a tile to the TileGroup
  43.                     group.add(x * tw, y * mapData.tilewidth, tiles[tid - 1]);
  44.                 }
  45.             }
  46.         }
  48.         // Create raining bunnies with SpriteBatch
  49.         var bunnies = hxd.Res.bunnies.toTile();
  50.         var batch = new h2d.SpriteBatch(s2d);
  51.         batch.hasRotationScale = true;
  52.         batch.hasUpdate = true;
  53.         // Note: Does not count as a bunnymark.
  54.         for (i in 0...100) {
  55.             var bunny = new Bunny(bunnies);
  56.             batch.add(bunny);
  57.             bunny.reset();
  58.         }
  59.     }
  60. }
  62. class Bunny extends h2d.SpriteBatch.SimpleElement {
  64.     public function new(t:h2d.Tile) {
  65.         super(t);
  66.         gravity = 100;
  67.     }
  69.     public function reset() {
  70.         y = -t.height;
  71.         x = Math.random() * (batch.getScene().width - t.width);
  72.         scale = 1 + (Math.random() - 0.5) * .1;
  73.         vx = Math.random() * 60;
  74.     }
  76.     override function update(dt:Float) {
  77.         super.update(dt);
  78.         if (y > batch.getScene().height) reset();
  79.         return true;
  80.     }
  82. }
  84. // simple type definition for Tile map 
  85. typedef TiledMapData = { layers:Array<{ data:Array<Int>}>, tilewidth:Int, tileheight:Int, width:Int, height:Int };