Working tile rendering! 🎉

res/map.tmx

@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<map version="1.10" tiledversion="1.10.2" orientation="orthogonal" renderorder="right-down" width="30" height="20" tilewidth="32" tileheight="32" infinite="0" nextlayerid="4" nextobjectid="11">
+ <editorsettings>
+  <chunksize width="32" height="32"/>
+ </editorsettings>
+ <tileset firstgid="1" name="tiles" tilewidth="32" tileheight="32" tilecount="1428" columns="42">
+  <image source="tiles.png" width="1344" height="1088"/>
+ </tileset>
+ <layer id="1" name="space" width="30" height="20">
+  <data encoding="base64" compression="zlib">
+   eJztz1tWgVEAgNFfKMklkaKYgHtFIXfF/EdkP3gygOPlfGvtAXypJEluSJMhyy135LgnzwMFipQo80iFJ6rUeKbOC680aPLGOy3adOjSo8+AISM++OSLMRO++WHKjDm/LFiyYs2GLTv2/PHPgSOp82+oLn9DFX/DFH/DFH/DFH/DFH/DdO3fEwisEtM=
+  </data>
+ </layer>
+ <layer id="2" name="ship" width="30" height="20">
+  <data encoding="base64" compression="zlib">
+   eJzl1UlPFEEch+Gq7uakhqOyiihgwmUOsh1VGHBBlkQPHlTgjsJFEg6CURPlC4iMgpiYiKIkyEkBN3AbD7IYbrh9AEQSgor6dqonXSMzPYvGC5086eqq6vqlu/+pFmJ9HoVSiCMiugaPsXjn+OTa3Hl04LymU2t34ZxBGxcMd+wi7UvoQrul+gK4imvoRZ+z1nyE57X7bsvIBqXKvcva9zCEXEsZpn0fI05uKudJ5j7HC7zEK6TJ5HMHTK5NN3MD/RuxCe2myvVhgblfsIivWPrL3BnWntVyi+gvRolU13buUaRznYFMZCFbeufeNJQZ5szinXT7Vqzw8X7ON4zwOXO0H+AJnuIZJhDEY4/cn9L1S2t3irXtIDlvjPB7bPb3beZ8EqfQgtYYz/tNuu8wGfmWWv8yunEFPQj8p9xE6/lf5SZaz9Fqxt6HluOoK59TVw8xijGM41GcdRWqmVANrZpqLzsr3P0rNOctpjCNQlPVVTn3VMCPSlTF+L4tPFOr9t5Oow0FGGD8jiY05zs5P7CKw2Zy9dzDOgEt9zr6UQc/Ukzvb3vGyU20nie4d1Jb6zWCzj4UT+4tJ/c97Q/4iE/4bEXPnfb4D9p7lV1Xsf6DKzHmzEX4D25OEWIL0pCODGQiC9nYihxsQy62YwfykI8C7EQZdqEIxShBqdNv+/PYTd8e7EU5KuBHJaqwD/txAAdRjUOoQS3qUI8mHMNxnEADGp3+Ji33N5Vt4oc=
+  </data>
+ </layer>
+ <objectgroup id="3" name="hotspots">
+  <object id="5" name="storage" x="352" y="96" width="256" height="128"/>
+  <object id="7" name="medical" x="96" y="96" width="224" height="128"/>
+  <object id="8" name="generator" x="96" y="416" width="192" height="128"/>
+  <object id="9" name="quarters" x="320" y="416" width="288" height="128"/>
+  <object id="10" name="hangar" x="640" y="128" width="224" height="416"/>
+ </objectgroup>
+</map>

src/Const.hx

@@ -0,0 +1,6 @@
+class Const {
+
+	public static inline var W = 960;
+	public static inline var H = 640;
+	
+}

src/Game.hx

@@ -0,0 +1,17 @@
+import Const;
+
+@:publicFields
+class Game extends hxd.App {
+	public var scene : h2d.Scene;
+	public var font : h2d.Font;
+	public var world : World;
+	
+	override function init() {
+		scene = s2d;
+		s2d.setFixedSize(Const.W, Const.H + 12);
+		world = new World(Res.map, Res.tiles);
+		s2d.add(world.root, 0);
+	}
+
+	public static var inst : Game;
+}

src/Main.hx

@@ -41,6 +41,9 @@ class Main extends hxd.App {
 		onResize();
 		var root = new ContainerComp(Right, center);
 
+		root.btnNewGame.onClick = function() {
+			Game.inst = new Game();
+		}
 		root.btnContinueGame.onClick = function() {
 			root.btnContinueGame.dom.addClass("highlight");
 		}

src/Res.hx

@@ -0,0 +1 @@
+typedef Res = hxd.Res;

src/World.hx

@@ -0,0 +1,54 @@
+class World {
+
+	var game : Game;
+	var map : hxd.res.TiledMap.TiledMapData;
+	public var root : h2d.Object;
+	var layers : Map < String, { name : String, data : Array<Int>, g : h2d.TileGroup, alpha : Float } > ;
+	var tiles : Array<h2d.Tile>;
+	public var width : Int;
+	public var height : Int;
+
+	public function new( r : hxd.res.TiledMap, tiles : hxd.res.Image )  {
+		game = Game.inst;
+		root = new h2d.Object();
+		map = r.toMap();
+		root = new h2d.Object();
+		width = map.width;
+		height = map.height;
+		var t = tiles.toTile();
+		layers = new Map();
+		var font : h2d.Font = hxd.res.DefaultFont.get();
+		this.tiles = [for( y in 0...Std.int(t.height) >> 5 ) for( x in 0...Std.int(t.width) >> 5 ) t.sub(x * 32, y * 32, 32, 32)];
+		for( ld in map.layers ) {
+			if( ld.name == "hotspots") continue;
+			var l = {
+				name : ld.name,
+				data : ld.data,
+				g : new h2d.TileGroup(t, root),
+				alpha : ld.opacity,
+			}
+			// l.g.colorKey = 0x1D8700;
+			l.g.alpha = ld.opacity;
+			layers.set(ld.name, l);
+			rebuildLayer(ld.name);
+		}
+	}
+
+	function rebuildLayer( name : String ) {
+		var l = layers.get(name);
+		if( l == null ) return;
+		var pos = 0;
+		var g = l.g;
+		g.clear();
+		while( g.numChildren > 0 )
+			g.getChildAt(0).remove();
+
+		for( y in 0...height )
+			for( x in 0...width ) {
+				var t = l.data[pos++] - 1;
+				if( t < 0 ) continue;
+				g.add(x * 32, y * 32, tiles[t]);
+			}
+	}
+
+}