Drawing Tiles

Tiles can be drawn with multiple approaches, some of which will be discussed below.

h2d.Bitmap

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

h2d.TileGroup

TileGroup allows you to batch-draw Tiles that share the same Texture. You can adjust the tint, position, and transparency of each tile. This class can be used to draw static tiles, but it's not well suited for dynamic movement because it must be cleared and refilled when changes are made.

Pro Tip: With @:privateAccess tileGroup.content, you can access the underlying TileLayerContent instance, and perform advanced geometry operations beyond simple rectangles.

h2d.SpriteBatch

SpriteBatch allows you to batch-render Tiles that share the same Texture. Unlike TileGroup, it updates data every frame and lets you control each SpriteElement individually. Note that, by default, SpriteBatch does not handle the scale or rotation of SpriteElements; it must be enabled with the hasRotationScale flag. The same applies to the update() method of SpriteElement — it will only be called when the hasUpdate flag is set.

h2d.SpriteBatch.BasicElement demonstrates how to use the update() method. This class also provides a basic simulation of gravity, friction, and velocity.

Sample

This example demonstrates how to draw tile layers from a Tiled export file in JSON format. It uses TileGroup for static terrain, Bitmap for a backdrop image, and SpriteBatch for rendering moving sprites.

To recreate this example, place the following files — backdrop.png, bunnies.png, tiles.png, and tiles.json — in the resources (/res) folder. These files are not included in the samples directory.

class Main extends hxd.App {
    static function main() {
        // embed the resources
        hxd.Res.initEmbed();
        new Main();
    }

    override private function init() {
        super.init();

        // Add backdrop Bitmap
        var bitmap = new h2d.Bitmap(hxd.Res.backdrop.toTile(), s2d);

        // parse Tiled json file
        var mapData:TiledMapData = haxe.Json.parse(hxd.Res.tiles_json.entry.getText());

        // get tile image (tiles.png) from resources
        var tileImage  = hxd.Res.tiles_png.toTile();

        // create a TileGroup for fast tile rendering, attach to 2d scene
        var group = new h2d.TileGroup(tileImage, s2d);

        var tw = mapData.tilewidth;
        var th = mapData.tileheight;
        var mw = mapData.width;
        var mh = mapData.height;

        // make sub tiles from tile
        var tiles = [
             for(y in 0 ... Std.int(tileImage.height / th))
             for(x in 0 ... Std.int(tileImage.width / tw))
             tileImage.sub(x * tw, y * th, tw, th)
        ];

        // iterate on all layers
        for(layer in mapData.layers) {
            // iterate on x and y
            for(y in 0 ... mh) for (x in 0 ... mw) {
                // get the tile id at the current position
                var tid = layer.data[x + y * mw];
                if (tid != 0) { // skip transparent tiles
                    // add a tile to the TileGroup
                    group.add(x * tw, y * th, tiles[tid - 1]);
                }
            }
        }

        // Create raining bunnies with SpriteBatch
        var bunnies = hxd.Res.bunnies.toTile();
        var batch = new h2d.SpriteBatch(bunnies, s2d);
        batch.hasRotationScale = true;
        batch.hasUpdate = true;
        // Note: Does not count as a bunnymark.
        for (i in 0...100) {
            var bunny = new Bunny(bunnies);
            batch.add(bunny);
            bunny.reset();
        }
    }
}

class Bunny extends h2d.SpriteBatch.BasicElement {

    public function new(t:h2d.Tile) {
        super(t);
        gravity = 100;
    }

    public function reset() {
        y = -t.height;
        x = Math.random() * (batch.getScene().width - t.width);
        scale = 1 + (Math.random() - 0.5) * .1;
        vx = Math.random() * 60;
    }

    override function update(dt:Float) {
        super.update(dt);
        if (y > batch.getScene().height) reset();
        return true;
    }

}

// simple type definition for Tile map
typedef TiledMapData = { layers:Array<{ data:Array<Int>}>, tilewidth:Int, tileheight:Int, width:Int, height:Int };

---