Walkable mask painting

2021-05-17 04:26:18 +00:00
parent 0030b63e3a
commit 9d681291cc
43 changed files with 577 additions and 362 deletions
--- a/js/animatable_tile.js
+++ b/js/animatable_tile.js
@@ -1,7 +1,7 @@
 import { Tile } from './tile.js';
 export class AnimatableTile extends Tile {
-    constructor(width, height, animations) {
-        super(width, height);
+    constructor(width, height, masks, animations) {
+        super(width, height, masks);
        this.animations = animations;
    }
    play(name) {
--- a/js/animatable_tile.js.map
+++ b/js/animatable_tile.js.map
@@ -1 +1 @@
-{"version":3,"file":"animatable_tile.js","sourceRoot":"","sources":["../ts/animatable_tile.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAEjC,MAAM,OAAgB,cAAe,SAAQ,IAAI;IAG/C,YAAY,KAAa,EAAE,MAAc,EAAE,UAA6C;QACtF,KAAK,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;QACrB,IAAI,CAAC,UAAU,GAAG,UAAU,CAAC;IAC/B,CAAC;IAED,IAAI,CAAC,IAAY;QACf,MAAM,SAAS,GAAG,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;QAC5C,IAAI,SAAS,EAAE;YACb,OAAO,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,GAAG,SAAS,CAAC,CAAC;SACxC;aAAM;YACL,OAAO,SAAS,CAAC;SAClB;IACH,CAAC;CACF"}
+{"version":3,"file":"animatable_tile.js","sourceRoot":"","sources":["../ts/animatable_tile.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAEjC,MAAM,OAAgB,cAAe,SAAQ,IAAI;IAG/C,YAAY,KAAa,EAAE,MAAc,EAAE,KAAwB,EAAE,UAA6C;QAChH,KAAK,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,CAAC;QAC5B,IAAI,CAAC,UAAU,GAAG,UAAU,CAAC;IAC/B,CAAC;IAED,IAAI,CAAC,IAAY;QACf,MAAM,SAAS,GAAG,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;QAC5C,IAAI,SAAS,EAAE;YACb,OAAO,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,GAAG,SAAS,CAAC,CAAC;SACxC;aAAM;YACL,OAAO,SAAS,CAAC;SAClB;IACH,CAAC;CACF"}
--- a/js/animatable_tile_factory.js
+++ b/js/animatable_tile_factory.js
@@ -7,5 +7,11 @@ export class AnimatableTileFactory extends TileFactory {
    add_animation(name, keyframes, options) {
        this.animations.set(name, [keyframes, options]);
    }
+    animatable_tile_args() {
+        return [
+            ...super.tile_args(),
+            this.animations,
+        ];
+    }
 }
 //# sourceMappingURL=animatable_tile_factory.js.map
--- a/js/animatable_tile_factory.js.map
+++ b/js/animatable_tile_factory.js.map
@@ -1 +1 @@
-{"version":3,"file":"animatable_tile_factory.js","sourceRoot":"","sources":["../ts/animatable_tile_factory.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAEhD,MAAM,OAAgB,qBAAsB,SAAQ,WAAW;IAA/D;;QACE,eAAU,GAAsC,IAAI,GAAG,EAAE,CAAC;IAO5D,CAAC;IALC,aAAa,CAAC,IAAY,EAAE,SAAqB,EAAE,OAAe;QAChE,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC,CAAC;IAClD,CAAC;CAGF"}
+{"version":3,"file":"animatable_tile_factory.js","sourceRoot":"","sources":["../ts/animatable_tile_factory.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAEhD,MAAM,OAAgB,qBAAsB,SAAQ,WAAW;IAA/D;;QACE,eAAU,GAAsC,IAAI,GAAG,EAAE,CAAC;IAc5D,CAAC;IAZC,aAAa,CAAC,IAAY,EAAE,SAAqB,EAAE,OAAe;QAChE,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC,CAAC;IAClD,CAAC;IAED,oBAAoB;QAClB,OAAO;YACL,GAAG,KAAK,CAAC,SAAS,EAAE;YACpB,IAAI,CAAC,UAAU;SAChB,CAAC;IACJ,CAAC;CAGF"}
--- a/js/grid.js
+++ b/js/grid.js
@@ -1,38 +1,20 @@
 import { Layer } from './layer.js';
+import { Mask } from './mask.js';
 export class Grid {
-    constructor(prnt) {
+    constructor(prnt, width, height, tileset, layers, masks) {
        this.layers = new Map();
+        this.masks = new Map();
        this.prnt = prnt;
        this.prnt.style.display = 'grid';
-    }
-    set_size(x, y) {
-        this.height = y;
-        this.prnt.style.gridTemplateColumns = `repeat(${x}, 1fr)`;
-        this.prnt.style.gridTemplateRows = `repeat(${y}, 1fr)`;
-    }
-    set_tileset(set) {
-        this.tileset = set;
-        this.prnt.style.backgroundImage = `url("images/${this.tileset}/land.svg")`;
-        // TODO: Notify layers
-    }
-    set_layers(layers) {
-        const newNames = new Set(layers);
-        for (const name of newNames) {
-            if (!this.layers.has(name)) {
-                const layer = new Layer();
-                layer.set_tileset(this.tileset);
-                this.layers.set(name, layer);
-            }
+        this.prnt.style.gridTemplateColumns = `repeat(${width}, 1fr)`;
+        this.prnt.style.gridTemplateRows = `repeat(${height}, 1fr)`;
+        this.prnt.style.backgroundImage = `url("images/${tileset}/land.svg")`;
+        for (let i = 0; i <= layers.length; i++) {
+            const name = layers[i];
+            this.layers.set(name, new Layer(i * height, tileset));
        }
-        for (const name of this.layers.keys()) {
-            if (!newNames.has(name)) {
-                // TODO: Notify layer to tear down
-                this.layers.delete(name);
-            }
-        }
-        for (let i = 0; i < layers.length; i++) {
-            const layer = this.layers.get(layers[i]);
-            layer.set_level(i * this.height);
+        for (const name of masks) {
+            this.masks.set(name, new Mask(width, height));
        }
    }
    add_tile(tile_factory, x, y) {
@@ -41,6 +23,9 @@ export class Grid {
        tile.elem.style.gridColumnStart = `${x + 1}`;
        tile.elem.style.gridRowStart = `${y + 1}`;
        this.prnt.appendChild(tile.elem);
+        for (const [name, mask] of tile.masks) {
+            this.masks.get(name).update(x, y, mask);
+        }
        return tile;
    }
 }
--- a/js/grid.js.map
+++ b/js/grid.js.map
@@ -1 +1 @@
-{"version":3,"file":"grid.js","sourceRoot":"","sources":["../ts/grid.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAInC,MAAM,OAAO,IAAI;IAMf,YAAY,IAAiB;QAH7B,WAAM,GAAuB,IAAI,GAAG,EAAiB,CAAC;QAIpD,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;QACjB,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;IACnC,CAAC;IAED,QAAQ,CAAC,CAAS,EAAE,CAAS;QAC3B,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC;QAEhB,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,mBAAmB,GAAG,UAAU,CAAC,QAAQ,CAAC;QAC1D,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,gBAAgB,GAAG,UAAU,CAAC,QAAQ,CAAC;IACzD,CAAC;IAED,WAAW,CAAC,GAAW;QACrB,IAAI,CAAC,OAAO,GAAG,GAAG,CAAC;QACnB,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,eAAe,GAAG,eAAe,IAAI,CAAC,OAAO,aAAa,CAAC;QAE3E,sBAAsB;IACxB,CAAC;IAED,UAAU,CAAC,MAAgB;QACzB,MAAM,QAAQ,GAAgB,IAAI,GAAG,CAAS,MAAM,CAAC,CAAC;QAEtD,KAAK,MAAM,IAAI,IAAI,QAAQ,EAAE;YAC3B,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;gBAC1B,MAAM,KAAK,GAAG,IAAI,KAAK,EAAE,CAAC;gBAC1B,KAAK,CAAC,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;gBAChC,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;aAC9B;SACF;QAED,KAAK,MAAM,IAAI,IAAI,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,EAAE;YACrC,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;gBACvB,kCAAkC;gBAClC,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;aAC1B;SACF;QAED,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;YACtC,MAAM,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,CAAE,CAAC;YAC1C,KAAK,CAAC,SAAS,CAAC,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC;SAClC;IACH,CAAC;IAED,QAAQ,CAAC,YAAyB,EAAE,CAAS,EAAE,CAAS;QACtD,MAAM,IAAI,GAAG,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,YAAY,CAAC,UAAU,CAAE,CAAC,QAAQ,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC;QAEjF,sBAAsB;QACtB,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,eAAe,GAAG,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC;QAC7C,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,YAAY,GAAG,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC;QAC1C,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAEjC,OAAO,IAAI,CAAC;IACd,CAAC;CACF"}
+{"version":3,"file":"grid.js","sourceRoot":"","sources":["../ts/grid.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAIjC,MAAM,OAAO,IAAI;IAKf,YAAY,IAAiB,EAAE,KAAa,EAAE,MAAc,EAAE,OAAe,EAAE,MAAgB,EAAE,KAAe;QAHhH,WAAM,GAAuB,IAAI,GAAG,EAAiB,CAAC;QACtD,UAAK,GAAsB,IAAI,GAAG,EAAgB,CAAC;QAGjD,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;QAEjB,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;QACjC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,mBAAmB,GAAG,UAAU,KAAK,QAAQ,CAAC;QAC9D,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,gBAAgB,GAAG,UAAU,MAAM,QAAQ,CAAC;QAC5D,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,eAAe,GAAG,eAAe,OAAO,aAAa,CAAC;QAEtE,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,MAAM,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;YACvC,MAAM,IAAI,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC;YACvB,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,EAAE,IAAI,KAAK,CAAC,CAAC,GAAG,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;SACvD;QAED,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE;YACxB,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,EAAE,IAAI,IAAI,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC;SAC/C;IACH,CAAC;IAED,QAAQ,CAAC,YAAyB,EAAE,CAAS,EAAE,CAAS;QACtD,MAAM,IAAI,GAAG,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,YAAY,CAAC,UAAU,CAAE,CAAC,QAAQ,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC;QAEjF,sBAAsB;QACtB,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,eAAe,GAAG,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC;QAC7C,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,YAAY,GAAG,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC;QAC1C,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAEjC,KAAK,MAAM,CAAC,IAAI,EAAE,IAAI,CAAC,IAAI,IAAI,CAAC,KAAK,EAAE;YACrC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAE,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,EAAE,IAAI,CAAC,CAAC;SAC1C;QAED,OAAO,IAAI,CAAC;IACd,CAAC;CACF"}
--- a/js/layer.js
+++ b/js/layer.js
@@ -1,8 +1,6 @@
 export class Layer {
-    set_level(level) {
+    constructor(level, tileset) {
        this.level = level;
-    }
-    set_tileset(tileset) {
        this.tileset = tileset;
    }
    add_tile(tile_factory, y) {
--- a/js/layer.js.map
+++ b/js/layer.js.map
@@ -1 +1 @@
-{"version":3,"file":"layer.js","sourceRoot":"","sources":["../ts/layer.ts"],"names":[],"mappings":"AAGA,MAAM,OAAO,KAAK;IAIhB,SAAS,CAAC,KAAa;QACrB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;IACrB,CAAC;IAED,WAAW,CAAC,OAAe;QACzB,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;IACzB,CAAC;IAED,QAAQ,CAAC,YAAyB,EAAE,CAAS;QAC3C,MAAM,IAAI,GAAG,YAAY,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QAC9C,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,GAAG,CAAC,EAAE,CAAC;QAC7C,OAAO,IAAI,CAAC;IACd,CAAC;CACF"}
+{"version":3,"file":"layer.js","sourceRoot":"","sources":["../ts/layer.ts"],"names":[],"mappings":"AAGA,MAAM,OAAO,KAAK;IAIhB,YAAY,KAAa,EAAE,OAAe;QACxC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACnB,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;IACzB,CAAC;IAED,QAAQ,CAAC,YAAyB,EAAE,CAAS;QAC3C,MAAM,IAAI,GAAG,YAAY,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QAC9C,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,GAAG,CAAC,EAAE,CAAC;QAC7C,OAAO,IAAI,CAAC;IACd,CAAC;CACF"}
--- a/js/layered_tile.js
+++ b/js/layered_tile.js
@@ -1,7 +1,7 @@
 import { Tile } from './tile.js';
 export class LayeredTile extends Tile {
-    constructor(width, height, tiles) {
-        super(width, height);
+    constructor(width, height, masks, tiles) {
+        super(width, height, masks);
        this.tiles = [];
        this.elem.style.position = 'relative';
        for (let i = 0; i < tiles.length; i++) {
--- a/js/layered_tile.js.map
+++ b/js/layered_tile.js.map
@@ -1 +1 @@
-{"version":3,"file":"layered_tile.js","sourceRoot":"","sources":["../ts/layered_tile.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAEjC,MAAM,OAAO,WAAY,SAAQ,IAAI;IAGnC,YAAY,KAAa,EAAE,MAAc,EAAE,KAAa;QACtD,KAAK,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;QACrB,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;QAEhB,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,UAAU,CAAC;QAEtC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;YACrC,MAAM,IAAI,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC;YACtB,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;YAEtB,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;YACjC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,MAAM,CAAC;YAC/B,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;YAChC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,UAAU,CAAC;YACtC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,GAAG,GAAG,CAAC;YAC1B,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,GAAG,GAAG,CAAC;YAC3B,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,CAAC,EAAE,CAAC;SACjC;IACH,CAAC;IAED,IAAI,CAAC,IAAY;QACf,IAAI,GAAG,GAAG,SAAS,CAAC;QACpB,KAAK,MAAM,IAAI,IAAI,IAAI,CAAC,KAAK,EAAE;YAC7B,GAAG,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,GAAG,CAAC;SAC9B;QACD,OAAO,GAAG,CAAC;IACb,CAAC;CACF"}
+{"version":3,"file":"layered_tile.js","sourceRoot":"","sources":["../ts/layered_tile.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAEjC,MAAM,OAAO,WAAY,SAAQ,IAAI;IAGnC,YAAY,KAAa,EAAE,MAAc,EAAE,KAAwB,EAAE,KAAa;QAChF,KAAK,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,CAAC;QAC5B,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;QAEhB,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,UAAU,CAAC;QAEtC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;YACrC,MAAM,IAAI,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC;YACtB,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;YAEtB,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;YACjC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,MAAM,CAAC;YAC/B,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;YAChC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,UAAU,CAAC;YACtC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,GAAG,GAAG,CAAC;YAC1B,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,GAAG,GAAG,CAAC;YAC3B,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,CAAC,EAAE,CAAC;SACjC;IACH,CAAC;IAED,IAAI,CAAC,IAAY;QACf,IAAI,GAAG,GAAG,SAAS,CAAC;QACpB,KAAK,MAAM,IAAI,IAAI,IAAI,CAAC,KAAK,EAAE;YAC7B,GAAG,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,GAAG,CAAC;SAC9B;QACD,OAAO,GAAG,CAAC;IACb,CAAC;CACF"}
--- a/js/layered_tile_factory.js
+++ b/js/layered_tile_factory.js
@@ -10,7 +10,7 @@ export class LayeredTileFactory extends TileFactory {
        for (const tile_factory of this.tile_factories) {
            tiles.push(tile_factory.build(tileset));
        }
-        return new LayeredTile(this.width, this.height, tiles);
+        return new LayeredTile(...this.tile_args(), tiles);
    }
    copy() {
        return new LayeredTileFactory(this.tile_factories);
--- a/js/layered_tile_factory.js.map
+++ b/js/layered_tile_factory.js.map
@@ -1 +1 @@
-{"version":3,"file":"layered_tile_factory.js","sourceRoot":"","sources":["../ts/layered_tile_factory.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAEhD,MAAM,OAAO,kBAAmB,SAAQ,WAAW;IAGjD,YAAY,cAA6B;QACvC,KAAK,CACH,cAAc,CAAC,CAAC,CAAC,CAAC,UAAU,EAC5B,cAAc,CAAC,CAAC,CAAC,CAAC,KAAK,EACvB,cAAc,CAAC,CAAC,CAAC,CAAC,MAAM,CACzB,CAAC;QACF,IAAI,CAAC,cAAc,GAAG,cAAc,CAAC;IACvC,CAAC;IAED,KAAK,CAAC,OAAe;QACnB,MAAM,KAAK,GAAG,EAAE,CAAC;QAEjB,KAAK,MAAM,YAAY,IAAI,IAAI,CAAC,cAAc,EAAE;YAC9C,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;SACzC;QAED,OAAO,IAAI,WAAW,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;IACzD,CAAC;IAED,IAAI;QACF,OAAO,IAAI,kBAAkB,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;IACrD,CAAC;CACF"}
+{"version":3,"file":"layered_tile_factory.js","sourceRoot":"","sources":["../ts/layered_tile_factory.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAEhD,MAAM,OAAO,kBAAmB,SAAQ,WAAW;IAGjD,YAAY,cAA6B;QACvC,KAAK,CACH,cAAc,CAAC,CAAC,CAAC,CAAC,UAAU,EAC5B,cAAc,CAAC,CAAC,CAAC,CAAC,KAAK,EACvB,cAAc,CAAC,CAAC,CAAC,CAAC,MAAM,CACzB,CAAC;QACF,IAAI,CAAC,cAAc,GAAG,cAAc,CAAC;IACvC,CAAC;IAED,KAAK,CAAC,OAAe;QACnB,MAAM,KAAK,GAAG,EAAE,CAAC;QAEjB,KAAK,MAAM,YAAY,IAAI,IAAI,CAAC,cAAc,EAAE;YAC9C,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;SACzC;QAED,OAAO,IAAI,WAAW,CAAC,GAAG,IAAI,CAAC,SAAS,EAAE,EAAE,KAAK,CAAC,CAAC;IACrD,CAAC;IAED,IAAI;QACF,OAAO,IAAI,kBAAkB,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;IACrD,CAAC;CACF"}
--- a/js/sequence_tile.js
+++ b/js/sequence_tile.js
@@ -1,7 +1,7 @@
 import { AnimatableTile } from './animatable_tile.js';
 export class SequenceTile extends AnimatableTile {
-    constructor(width, height, animations, tiles, delay, repeat) {
-        super(width, height, animations);
+    constructor(width, height, masks, animations, tiles, delay, repeat) {
+        super(width, height, masks, animations);
        this.elem.style.position = 'relative';
        const tile_chunk = 1 / tiles.length;
        let animation = null;
--- a/js/sequence_tile.js.map
+++ b/js/sequence_tile.js.map
@@ -1 +1 @@
-{"version":3,"file":"sequence_tile.js","sourceRoot":"","sources":["../ts/sequence_tile.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAGtD,MAAM,OAAO,YAAa,SAAQ,cAAc;IAC9C,YAAY,KAAa,EAAE,MAAc,EAAE,UAA6C,EAAE,KAAa,EAAE,KAAa,EAAE,MAAe;QACrI,KAAK,CAAC,KAAK,EAAE,MAAM,EAAE,UAAU,CAAC,CAAC;QAEjC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,UAAU,CAAC;QAEtC,MAAM,UAAU,GAAG,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC;QACpC,IAAI,SAAS,GAAG,IAAI,CAAC;QAErB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;YACrC,MAAM,IAAI,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC;YAEtB,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;YACjC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,MAAM,CAAC;YAC/B,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;YAChC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,UAAU,CAAC;YACtC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,GAAG,GAAG,CAAC;YAC1B,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,GAAG,GAAG,CAAC;YAC3B,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,GAAG,QAAQ,CAAC;YAEtC,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC,OAAO,CAC3B;gBACE;oBACE,QAAQ,EAAE,CAAC;oBACX,QAAQ,EAAE,UAAU;oBACpB,YAAY,EAAE,QAAQ;iBACvB;gBACD;oBACE,QAAQ,EAAE,CAAC,GAAG,UAAU;oBACxB,QAAQ,EAAE,UAAU;oBACpB,YAAY,EAAE,SAAS;iBACxB;gBACD;oBACE,QAAQ,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,UAAU;oBAC9B,YAAY,EAAE,QAAQ;iBACvB;aACF,EACD;gBACE,UAAU,EAAE,KAAK,CAAC,MAAM,GAAG,KAAK;gBAChC,YAAY,EAAE,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;aACpC,CACF,CAAC;SACH;QAED,IAAI,CAAC,MAAM,EAAE;YACX,SAAU,CAAC,QAAQ,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;SACpD;IACH,CAAC;IAED,IAAI,CAAC,CAAS;QACZ,OAAO,SAAS,CAAC;IACnB,CAAC;CACF"}
+{"version":3,"file":"sequence_tile.js","sourceRoot":"","sources":["../ts/sequence_tile.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAItD,MAAM,OAAO,YAAa,SAAQ,cAAc;IAC9C,YAAY,KAAa,EAAE,MAAc,EAAE,KAAwB,EAAE,UAA6C,EAAE,KAAa,EAAE,KAAa,EAAE,MAAe;QAC/J,KAAK,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,UAAU,CAAC,CAAC;QAExC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,UAAU,CAAC;QAEtC,MAAM,UAAU,GAAG,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC;QACpC,IAAI,SAAS,GAAG,IAAI,CAAC;QAErB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;YACrC,MAAM,IAAI,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC;YAEtB,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;YACjC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,MAAM,CAAC;YAC/B,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;YAChC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,UAAU,CAAC;YACtC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,GAAG,GAAG,CAAC;YAC1B,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,GAAG,GAAG,CAAC;YAC3B,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,GAAG,QAAQ,CAAC;YAEtC,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC,OAAO,CAC3B;gBACE;oBACE,QAAQ,EAAE,CAAC;oBACX,QAAQ,EAAE,UAAU;oBACpB,YAAY,EAAE,QAAQ;iBACvB;gBACD;oBACE,QAAQ,EAAE,CAAC,GAAG,UAAU;oBACxB,QAAQ,EAAE,UAAU;oBACpB,YAAY,EAAE,SAAS;iBACxB;gBACD;oBACE,QAAQ,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,UAAU;oBAC9B,YAAY,EAAE,QAAQ;iBACvB;aACF,EACD;gBACE,UAAU,EAAE,KAAK,CAAC,MAAM,GAAG,KAAK;gBAChC,YAAY,EAAE,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;aACpC,CACF,CAAC;SACH;QAED,IAAI,CAAC,MAAM,EAAE;YACX,SAAU,CAAC,QAAQ,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;SACpD;IACH,CAAC;IAED,IAAI,CAAC,CAAS;QACZ,OAAO,SAAS,CAAC;IACnB,CAAC;CACF"}
--- a/js/sequence_tile_factory.js
+++ b/js/sequence_tile_factory.js
@@ -12,7 +12,7 @@ export class SequenceTileFactory extends AnimatableTileFactory {
        for (const tile_factory of this.tile_factories) {
            tiles.push(tile_factory.build(tileset));
        }
-        return new SequenceTile(this.width, this.height, this.animations, tiles, this.delay, this.repeat);
+        return new SequenceTile(...this.animatable_tile_args(), tiles, this.delay, this.repeat);
    }
    copy() {
        return new SequenceTileFactory(this.tile_factories, this.delay, this.repeat);
--- a/js/sequence_tile_factory.js.map
+++ b/js/sequence_tile_factory.js.map
@@ -1 +1 @@
-{"version":3,"file":"sequence_tile_factory.js","sourceRoot":"","sources":["../ts/sequence_tile_factory.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,8BAA8B,CAAC;AACrE,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAGlD,MAAM,OAAO,mBAAoB,SAAQ,qBAAqB;IAK5D,YAAY,cAA6B,EAAE,KAAa,EAAE,MAAe;QACvE,KAAK,CACH,cAAc,CAAC,CAAC,CAAC,CAAC,UAAU,EAC5B,cAAc,CAAC,CAAC,CAAC,CAAC,KAAK,EACvB,cAAc,CAAC,CAAC,CAAC,CAAC,MAAM,CACzB,CAAC;QACF,IAAI,CAAC,cAAc,GAAG,cAAc,CAAC;QACrC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACnB,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;IACvB,CAAC;IAED,KAAK,CAAC,OAAe;QACnB,MAAM,KAAK,GAAG,EAAE,CAAC;QAEjB,KAAK,MAAM,YAAY,IAAI,IAAI,CAAC,cAAc,EAAE;YAC9C,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;SACzC;QAED,OAAO,IAAI,YAAY,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,UAAU,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;IACpG,CAAC;IAED,IAAI;QACF,OAAO,IAAI,mBAAmB,CAAC,IAAI,CAAC,cAAc,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;IAC/E,CAAC;CACF"}
+{"version":3,"file":"sequence_tile_factory.js","sourceRoot":"","sources":["../ts/sequence_tile_factory.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,8BAA8B,CAAC;AACrE,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAGlD,MAAM,OAAO,mBAAoB,SAAQ,qBAAqB;IAK5D,YAAY,cAA6B,EAAE,KAAa,EAAE,MAAe;QACvE,KAAK,CACH,cAAc,CAAC,CAAC,CAAC,CAAC,UAAU,EAC5B,cAAc,CAAC,CAAC,CAAC,CAAC,KAAK,EACvB,cAAc,CAAC,CAAC,CAAC,CAAC,MAAM,CACzB,CAAC;QACF,IAAI,CAAC,cAAc,GAAG,cAAc,CAAC;QACrC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACnB,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;IACvB,CAAC;IAED,KAAK,CAAC,OAAe;QACnB,MAAM,KAAK,GAAG,EAAE,CAAC;QAEjB,KAAK,MAAM,YAAY,IAAI,IAAI,CAAC,cAAc,EAAE;YAC9C,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;SACzC;QAED,OAAO,IAAI,YAAY,CAAC,GAAG,IAAI,CAAC,oBAAoB,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;IAC1F,CAAC;IAED,IAAI;QACF,OAAO,IAAI,mBAAmB,CAAC,IAAI,CAAC,cAAc,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;IAC/E,CAAC;CACF"}
--- a/js/simple_tile.js
+++ b/js/simple_tile.js
@@ -1,7 +1,7 @@
 import { AnimatableTile } from './animatable_tile.js';
 export class SimpleTile extends AnimatableTile {
-    constructor(width, height, image_url, animations) {
-        super(width, height, animations);
+    constructor(width, height, masks, animations, image_url) {
+        super(width, height, masks, animations);
        this.elem.style.backgroundImage = `url('${encodeURIComponent(image_url)}')`;
        this.elem.style.backgroundSize = 'cover';
    }
--- a/js/simple_tile.js.map
+++ b/js/simple_tile.js.map
@@ -1 +1 @@
-{"version":3,"file":"simple_tile.js","sourceRoot":"","sources":["../ts/simple_tile.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAEtD,MAAM,OAAO,UAAW,SAAQ,cAAc;IAC5C,YAAY,KAAa,EAAE,MAAc,EAAE,SAAiB,EAAE,UAA6C;QACzG,KAAK,CAAC,KAAK,EAAE,MAAM,EAAE,UAAU,CAAC,CAAC;QAEjC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,eAAe,GAAG,QAAQ,kBAAkB,CAAC,SAAS,CAAC,IAAI,CAAC;QAC5E,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,cAAc,GAAG,OAAO,CAAC;IAC3C,CAAC;CACF"}
+{"version":3,"file":"simple_tile.js","sourceRoot":"","sources":["../ts/simple_tile.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAGtD,MAAM,OAAO,UAAW,SAAQ,cAAc;IAC5C,YAAY,KAAa,EAAE,MAAc,EAAE,KAAwB,EAAE,UAA6C,EAAE,SAAiB;QACnI,KAAK,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,UAAU,CAAC,CAAC;QAExC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,eAAe,GAAG,QAAQ,kBAAkB,CAAC,SAAS,CAAC,IAAI,CAAC;QAC5E,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,cAAc,GAAG,OAAO,CAAC;IAC3C,CAAC;CACF"}
--- a/js/simple_tile_factory.js
+++ b/js/simple_tile_factory.js
@@ -6,7 +6,7 @@ export class SimpleTileFactory extends AnimatableTileFactory {
        this.name = name;
    }
    build(tileset) {
-        return new SimpleTile(this.width, this.height, `images/${this.name.replace('{tileset}', tileset)}`, this.animations);
+        return new SimpleTile(...this.animatable_tile_args(), `images/${this.name.replace('{tileset}', tileset)}`);
    }
    copy() {
        const stf = new SimpleTileFactory(this.layer_name, this.width, this.height, this.name);
@@ -16,28 +16,4 @@ export class SimpleTileFactory extends AnimatableTileFactory {
        return stf;
    }
 }
-/*
-function string_to_mask(mask_string: string): boolean[][] {
-  // mask_string: '\n+++\n+++\n'
-
-  const rows = mask_string.trim().split('\n');
-  // rows: ['+++', '+++']
-
-  const mask = [];
-  for (let x = 0; x < rows[0].length; x++) {
-    mask[x] = Array(rows.length);
-  }
-  // mask: [ [ empty, empty ], [ empty, empty ], [ empty, empty ] ]
-
-  for (let y = 0; y < rows.length; y++) {
-    const row = rows[y];
-    for (let x = 0; x < row.length; x++) {
-      const cell = row[x];
-      mask[x][y] = (cell.toUpperCase() == 'X');
-    }
-  }
-
-  return mask;
-}
-*/
 //# sourceMappingURL=simple_tile_factory.js.map
--- a/js/simple_tile_factory.js.map
+++ b/js/simple_tile_factory.js.map
@@ -1 +1 @@
-{"version":3,"file":"simple_tile_factory.js","sourceRoot":"","sources":["../ts/simple_tile_factory.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,qBAAqB,EAAE,MAAM,8BAA8B,CAAC;AAErE,MAAM,OAAO,iBAAkB,SAAQ,qBAAqB;IAG1D,YAAY,UAAkB,EAAE,KAAa,EAAE,MAAc,EAAE,IAAY;QACzE,KAAK,CAAC,UAAU,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC;QACjC,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;IACnB,CAAC;IAED,KAAK,CAAC,OAAe;QACnB,OAAO,IAAI,UAAU,CACnB,IAAI,CAAC,KAAK,EACV,IAAI,CAAC,MAAM,EACX,UAAU,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW,EAAE,OAAO,CAAC,EAAE,EACnD,IAAI,CAAC,UAAU,CAChB,CAAC;IACJ,CAAC;IAED,IAAI;QACF,MAAM,GAAG,GAAG,IAAI,iBAAiB,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;QACvF,KAAK,MAAM,CAAC,IAAI,EAAE,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC,IAAI,IAAI,CAAC,UAAU,EAAE;YAC1D,GAAG,CAAC,aAAa,CAAC,IAAI,EAAE,SAAS,EAAE,OAAO,CAAC,CAAC;SAC7C;QACD,OAAO,GAAG,CAAC;IACb,CAAC;CACF;AAED;;;;;;;;;;;;;;;;;;;;;;;EAuBE"}
+{"version":3,"file":"simple_tile_factory.js","sourceRoot":"","sources":["../ts/simple_tile_factory.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,qBAAqB,EAAE,MAAM,8BAA8B,CAAC;AAErE,MAAM,OAAO,iBAAkB,SAAQ,qBAAqB;IAG1D,YAAY,UAAkB,EAAE,KAAa,EAAE,MAAc,EAAE,IAAY;QACzE,KAAK,CAAC,UAAU,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC;QACjC,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;IACnB,CAAC;IAED,KAAK,CAAC,OAAe;QACnB,OAAO,IAAI,UAAU,CACnB,GAAG,IAAI,CAAC,oBAAoB,EAAE,EAC9B,UAAU,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW,EAAE,OAAO,CAAC,EAAE,CACpD,CAAC;IACJ,CAAC;IAED,IAAI;QACF,MAAM,GAAG,GAAG,IAAI,iBAAiB,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;QACvF,KAAK,MAAM,CAAC,IAAI,EAAE,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC,IAAI,IAAI,CAAC,UAAU,EAAE;YAC1D,GAAG,CAAC,aAAa,CAAC,IAAI,EAAE,SAAS,EAAE,OAAO,CAAC,CAAC;SAC7C;QACD,OAAO,GAAG,CAAC;IACb,CAAC;CACF"}
--- a/js/tile.js
+++ b/js/tile.js
@@ -1,8 +1,12 @@
 export class Tile {
-    constructor(width, height) {
+    constructor(width, height, masks) {
+        this.masks = masks;
        this.elem = document.createElement('div');
        this.elem.style.gridColumnEnd = `span ${width}`;
        this.elem.style.gridRowEnd = `span ${height}`;
+        // Hack to avoid floating point stitching gaps
+        this.elem.style.width = 'calc(100% + 1px)';
+        this.elem.style.height = 'calc(100% + 1px)';
    }
    remove() {
        this.elem.remove();
--- a/js/tile.js.map
+++ b/js/tile.js.map
@@ -1 +1 @@
-{"version":3,"file":"tile.js","sourceRoot":"","sources":["../ts/tile.ts"],"names":[],"mappings":"AAAA,MAAM,OAAgB,IAAI;IAGxB,YAAY,KAAa,EAAE,MAAc;QACvC,IAAI,CAAC,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAC1C,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,aAAa,GAAG,QAAQ,KAAK,EAAE,CAAC;QAChD,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,GAAG,QAAQ,MAAM,EAAE,CAAC;IAChD,CAAC;IAID,MAAM;QACJ,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC;IACrB,CAAC;CACF"}
+{"version":3,"file":"tile.js","sourceRoot":"","sources":["../ts/tile.ts"],"names":[],"mappings":"AAEA,MAAM,OAAgB,IAAI;IAIxB,YAAY,KAAa,EAAE,MAAc,EAAE,KAAwB;QACjE,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QAEnB,IAAI,CAAC,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAC1C,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,aAAa,GAAG,QAAQ,KAAK,EAAE,CAAC;QAChD,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,GAAG,QAAQ,MAAM,EAAE,CAAC;QAC9C,8CAA8C;QAC9C,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,kBAAkB,CAAC;QAC3C,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,kBAAkB,CAAC;IAC9C,CAAC;IAID,MAAM;QACJ,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC;IACrB,CAAC;CACF"}
--- a/js/tile_factory.js
+++ b/js/tile_factory.js
@@ -1,8 +1,19 @@
 export class TileFactory {
    constructor(layer_name, width, height) {
+        this.masks = new Map();
        this.layer_name = layer_name;
        this.width = width;
        this.height = height;
    }
+    add_mask(name, mask) {
+        this.masks.set(name, mask);
+    }
+    tile_args() {
+        return [
+            this.width,
+            this.height,
+            this.masks,
+        ];
+    }
 }
 //# sourceMappingURL=tile_factory.js.map
--- a/js/tile_factory.js.map
+++ b/js/tile_factory.js.map
@@ -1 +1 @@
-{"version":3,"file":"tile_factory.js","sourceRoot":"","sources":["../ts/tile_factory.ts"],"names":[],"mappings":"AAEA,MAAM,OAAgB,WAAW;IAK/B,YAAY,UAAkB,EAAE,KAAa,EAAE,MAAc;QAC3D,IAAI,CAAC,UAAU,GAAG,UAAU,CAAC;QAC7B,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACnB,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;IACvB,CAAC;CAKF"}
+{"version":3,"file":"tile_factory.js","sourceRoot":"","sources":["../ts/tile_factory.ts"],"names":[],"mappings":"AAGA,MAAM,OAAgB,WAAW;IAM/B,YAAY,UAAkB,EAAE,KAAa,EAAE,MAAc;QAF7D,UAAK,GAAsB,IAAI,GAAG,EAAgB,CAAC;QAGjD,IAAI,CAAC,UAAU,GAAG,UAAU,CAAC;QAC7B,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACnB,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;IACvB,CAAC;IAED,QAAQ,CAAC,IAAY,EAAE,IAAU;QAC/B,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;IAC7B,CAAC;IAED,SAAS;QACP,OAAO;YACL,IAAI,CAAC,KAAK;YACV,IAAI,CAAC,MAAM;YACX,IAAI,CAAC,KAAK;SACX,CAAC;IACJ,CAAC;CAKF"}
--- a/js/tiles.js
+++ b/js/tiles.js
@@ -1,35 +1,139 @@
 import { LayeredTileFactory } from './layered_tile_factory.js';
+import { Mask } from './mask.js';
 import { SequenceTileFactory } from './sequence_tile_factory.js';
 import { SimpleTileFactory } from './simple_tile_factory.js';
 // Straig
-export const ROAD_LR = new SimpleTileFactory('road', 6, 4, '{tileset}/road-lr.svg');
-export const ROAD_TB = new SimpleTileFactory('road', 4, 6, '{tileset}/road-tb.svg');
+export const ROAD_LR = new SimpleTileFactory('road', 12, 8, '{tileset}/road-lr.svg');
+ROAD_LR.add_mask('walkable', Mask.from_string(`
+............
+............
+XXXXXXXXXXXX
+XXXXXXXXXXXX
+XXXXXXXXXXXX
+XXXXXXXXXXXX
+............
+............
+`));
+export const ROAD_TB = new SimpleTileFactory('road', 8, 12, '{tileset}/road-tb.svg');
+ROAD_TB.add_mask('walkable', Mask.from_string(`
+..XXXX..
+..XXXX..
+..XXXX..
+..XXXX..
+..XXXX..
+..XXXX..
+..XXXX..
+..XXXX..
+..XXXX..
+..XXXX..
+..XXXX..
+..XXXX..
+..XXXX..
+`));
 // Elbow
-export const ROAD_BL = new SimpleTileFactory('road', 6, 6, '{tileset}/road-bl.svg');
-export const ROAD_BR = new SimpleTileFactory('road', 6, 6, '{tileset}/road-br.svg');
-export const ROAD_TL = new SimpleTileFactory('road', 6, 6, '{tileset}/road-tl.svg');
-export const ROAD_TR = new SimpleTileFactory('road', 6, 6, '{tileset}/road-tr.svg');
+export const ROAD_BL = new SimpleTileFactory('road', 12, 12, '{tileset}/road-bl.svg');
+ROAD_BL.add_mask('walkable', Mask.from_string(`
+............
+............
+XXX.........
+XXXXX.......
+XXXXXXX.....
+XXXXXXXX....
+..XXXXXX....
+....XXXXX...
+.....XXXX...
+.....XXXXX..
+......XXXX..
+......XXXX..
+`));
+export const ROAD_BR = new SimpleTileFactory('road', 12, 12, '{tileset}/road-br.svg');
+ROAD_BR.add_mask('walkable', Mask.from_string(`
+............
+............
+.........XXX
+.......XXXXX
+.....XXXXXXX
+....XXXXXXXX
+....XXXXXX..
+...XXXXX....
+...XXXX.....
+..XXXXX.....
+..XXXX......
+..XXXX......
+`));
+export const ROAD_TL = new SimpleTileFactory('road', 12, 12, '{tileset}/road-tl.svg');
+ROAD_TL.add_mask('walkable', Mask.from_string(`
+......XXXX..
+......XXXX..
+.....XXXXX..
+.....XXXX...
+....XXXXX...
+..XXXXXX....
+XXXXXXXX....
+XXXXXXX.....
+XXXXX.......
+XXX.........
+............
+............
+`));
+export const ROAD_TR = new SimpleTileFactory('road', 12, 12, '{tileset}/road-tr.svg');
+ROAD_TR.add_mask('walkable', Mask.from_string(`
+..XXXX......
+..XXXX......
+..XXXXX.....
+...XXXX.....
+...XXXXX....
+....XXXXXX..
+....XXXXXXXX
+.....XXXXXXX
+.......XXXXX
+.........XXX
+............
+............
+`));
 // T
-export const ROAD_BLR = new SimpleTileFactory('road', 8, 6, '{tileset}/road-blr.svg');
-export const ROAD_TLR = new SimpleTileFactory('road', 8, 6, '{tileset}/road-tlr.svg');
-export const ROAD_LTB = new SimpleTileFactory('road', 6, 8, '{tileset}/road-ltb.svg');
-export const ROAD_RTB = new SimpleTileFactory('road', 6, 8, '{tileset}/road-rtb.svg');
+export const ROAD_BLR = new SimpleTileFactory('road', 16, 12, '{tileset}/road-blr.svg');
+// TODO: add_mask(walkable)
+export const ROAD_TLR = new SimpleTileFactory('road', 16, 12, '{tileset}/road-tlr.svg');
+// TODO: add_mask(walkable)
+export const ROAD_LTB = new SimpleTileFactory('road', 12, 16, '{tileset}/road-ltb.svg');
+// TODO: add_mask(walkable)
+export const ROAD_RTB = new SimpleTileFactory('road', 12, 16, '{tileset}/road-rtb.svg');
+// TODO: add_mask(walkable)
 // +
-export const ROAD_TBLR = new SimpleTileFactory('road', 8, 8, '{tileset}/road-tblr.svg');
+export const ROAD_TBLR = new SimpleTileFactory('road', 16, 16, '{tileset}/road-tblr.svg');
+ROAD_TBLR.add_mask('walkable', Mask.from_string(`
+......XXXX......
+......XXXX......
+......XXXX......
+.....XXXXXX.....
+....XXXXXXXX....
+...XXXXXXXXXX...
+XXXXXXXXXXXXXXXX
+XXXXXXXXXXXXXXXX
+XXXXXXXXXXXXXXXX
+XXXXXXXXXXXXXXXX
+...XXXXXXXXXX...
+....XXXXXXXX....
+.....XXXXXX.....
+......XXXX......
+......XXXX......
+......XXXX......
+`));
 // Tower base
-export const EMPTY = new SimpleTileFactory('road', 4, 2, '{tileset}/empty.svg');
+export const EMPTY = new SimpleTileFactory('road', 8, 4, '{tileset}/empty.svg');
 // Straight
-export const RIVER_LR = new SimpleTileFactory('water', 6, 4, '{tileset}/river-lr.svg');
-export const RIVER_TB = new SimpleTileFactory('water', 4, 6, '{tileset}/river-tb.svg');
+export const RIVER_LR = new SimpleTileFactory('water', 12, 8, '{tileset}/river-lr.svg');
+export const RIVER_TB = new SimpleTileFactory('water', 8, 12, '{tileset}/river-tb.svg');
 // Elbow
-export const RIVER_BR = new SimpleTileFactory('water', 6, 6, '{tileset}/river-br.svg');
-export const RIVER_BL = new SimpleTileFactory('water', 6, 6, '{tileset}/river-bl.svg');
-export const RIVER_TR = new SimpleTileFactory('water', 6, 6, '{tileset}/river-tr.svg');
-export const RIVER_TL = new SimpleTileFactory('water', 6, 6, '{tileset}/river-tl.svg');
-export const BRIDGE_LR = new SimpleTileFactory('bridge', 6, 4, '{tileset}/bridge-lr.svg');
-const tower_fireball1_back = new SimpleTileFactory('surface', 4, 4, 'tower/fireball1-back.svg');
-const tower_fireball1 = new SimpleTileFactory('surface', 4, 4, 'tower/fireball1.svg');
-const tower_fireball1_front = new SimpleTileFactory('surface', 4, 4, 'tower/fireball1-front.svg');
+export const RIVER_BR = new SimpleTileFactory('water', 12, 12, '{tileset}/river-br.svg');
+export const RIVER_BL = new SimpleTileFactory('water', 12, 12, '{tileset}/river-bl.svg');
+export const RIVER_TR = new SimpleTileFactory('water', 12, 12, '{tileset}/river-tr.svg');
+export const RIVER_TL = new SimpleTileFactory('water', 12, 12, '{tileset}/river-tl.svg');
+export const BRIDGE_LR = new SimpleTileFactory('bridge', 12, 8, '{tileset}/bridge-lr.svg');
+const tower_fireball1_back = new SimpleTileFactory('surface', 8, 8, 'tower/fireball1-back.svg');
+const tower_fireball1 = new SimpleTileFactory('surface', 8, 8, 'tower/fireball1.svg');
+const tower_fireball1_front = new SimpleTileFactory('surface', 8, 8, 'tower/fireball1-front.svg');
 for (const tile_factory of [tower_fireball1_back, tower_fireball1_front]) {
    tile_factory.add_animation('fire', [
        {
@@ -56,18 +160,18 @@ export const TOWER_FIREBALL1 = new LayeredTileFactory([
    tower_fireball1,
    tower_fireball1_front,
 ]);
-export const FIREBALL = new SimpleTileFactory('projectile', 2, 2, 'tower/fireball.svg');
+export const FIREBALL = new SimpleTileFactory('projectile', 4, 4, 'tower/fireball.svg');
 export const FIREBALL_IMPACT = new SequenceTileFactory([
-    new SimpleTileFactory('surface', 2, 2, 'tower/fireball-impact1.svg'),
-    new SimpleTileFactory('surface', 2, 2, 'tower/fireball-impact2.svg'),
-    new SimpleTileFactory('surface', 2, 2, 'tower/fireball-impact3.svg'),
-    new SimpleTileFactory('surface', 2, 2, 'tower/fireball-impact4.svg'),
-    new SimpleTileFactory('surface', 2, 2, 'tower/fireball-impact5.svg'),
-    new SimpleTileFactory('surface', 2, 2, 'tower/fireball-impact6.svg'),
-    new SimpleTileFactory('surface', 2, 2, 'tower/fireball-impact7.svg'),
-    new SimpleTileFactory('surface', 2, 2, 'tower/fireball-impact8.svg'),
+    new SimpleTileFactory('surface', 4, 4, 'tower/fireball-impact1.svg'),
+    new SimpleTileFactory('surface', 4, 4, 'tower/fireball-impact2.svg'),
+    new SimpleTileFactory('surface', 4, 4, 'tower/fireball-impact3.svg'),
+    new SimpleTileFactory('surface', 4, 4, 'tower/fireball-impact4.svg'),
+    new SimpleTileFactory('surface', 4, 4, 'tower/fireball-impact5.svg'),
+    new SimpleTileFactory('surface', 4, 4, 'tower/fireball-impact6.svg'),
+    new SimpleTileFactory('surface', 4, 4, 'tower/fireball-impact7.svg'),
+    new SimpleTileFactory('surface', 4, 4, 'tower/fireball-impact8.svg'),
 ], 50, false);
-const greenaxe_axe = new SimpleTileFactory('surface', 3, 3, 'monster/greenaxe/axe.svg');
+const greenaxe_axe = new SimpleTileFactory('surface', 6, 6, 'monster/greenaxe/axe.svg');
 greenaxe_axe.add_animation('walk', [
    {
        'transform': 'scaleX(1.01) scaleY(1.014) translateX(-0.45%) translateY(0.01%) rotate(0.1deg)',
@@ -92,7 +196,7 @@ greenaxe_axe.add_animation('walk', [
    'iterations': Infinity,
    'direction': 'alternate',
 });
-const greenaxe_rightleg = new SimpleTileFactory('surface', 3, 3, 'monster/greenaxe/rightleg.svg');
+const greenaxe_rightleg = new SimpleTileFactory('surface', 6, 6, 'monster/greenaxe/rightleg.svg');
 greenaxe_rightleg.add_animation('walk', [
    {
        'transform': 'rotate(4.6deg) scaleX(1.025) scaleY(1) translateX(3.11%) translateY(1%)',
@@ -117,7 +221,7 @@ greenaxe_rightleg.add_animation('walk', [
    'iterations': Infinity,
    'direction': 'alternate',
 });
-const greenaxe_leftleg = new SimpleTileFactory('surface', 3, 3, 'monster/greenaxe/leftleg.svg');
+const greenaxe_leftleg = new SimpleTileFactory('surface', 6, 6, 'monster/greenaxe/leftleg.svg');
 greenaxe_leftleg.add_animation('walk', [
    {
        'transform': 'rotate(-1deg) scaleX(1.024) scaleY(1.005) translateX(-0.7%) translateY(-0.16%)',
@@ -142,7 +246,7 @@ greenaxe_leftleg.add_animation('walk', [
    'iterations': Infinity,
    'direction': 'alternate',
 });
-const greenaxe_torso = new SimpleTileFactory('surface', 3, 3, 'monster/greenaxe/torso.svg');
+const greenaxe_torso = new SimpleTileFactory('surface', 6, 6, 'monster/greenaxe/torso.svg');
 greenaxe_torso.add_animation('walk', [
    {
        'transform': 'rotate(1.3deg) scaleX(1.021) scaleY(1) translateX(0.61%) translateY(0.67%)',
@@ -167,7 +271,7 @@ greenaxe_torso.add_animation('walk', [
    'iterations': Infinity,
    'direction': 'alternate',
 });
-const greenaxe_head = new SimpleTileFactory('surface', 3, 3, 'monster/greenaxe/head.svg');
+const greenaxe_head = new SimpleTileFactory('surface', 6, 6, 'monster/greenaxe/head.svg');
 greenaxe_head.add_animation('walk', [
    {
        'transform': 'rotate(-0.8deg) scaleX(1.027) scaleY(0.993) translateX(0.44%) translateY(-0.35%)',
@@ -192,7 +296,7 @@ greenaxe_head.add_animation('walk', [
    'iterations': Infinity,
    'direction': 'alternate',
 });
-const greenaxe_rightarm = new SimpleTileFactory('surface', 3, 3, 'monster/greenaxe/rightarm.svg');
+const greenaxe_rightarm = new SimpleTileFactory('surface', 6, 6, 'monster/greenaxe/rightarm.svg');
 greenaxe_rightarm.add_animation('walk', [
    {
        'transform': 'rotate(1.1deg) scaleX(1) scaleY(1.009) translateX(0.12%) translateY(0.54%)',
@@ -217,7 +321,7 @@ greenaxe_rightarm.add_animation('walk', [
    'iterations': Infinity,
    'direction': 'alternate',
 });
-const greenaxe_leftarm = new SimpleTileFactory('surface', 3, 3, 'monster/greenaxe/leftarm.svg');
+const greenaxe_leftarm = new SimpleTileFactory('surface', 6, 6, 'monster/greenaxe/leftarm.svg');
 greenaxe_leftarm.add_animation('walk', [
    {
        'transform': 'rotate(0deg) scaleX(1) scaleY(1) translateX(0%) translateY(0%)',
--- a/js/tiles.js.map
+++ b/js/tiles.js.map
--- a/js/tower.js
+++ b/js/tower.js
@@ -18,77 +18,93 @@ export function main() {
    real.style.position = 'relative';
    real.style.top = 'calc((-8 / 70) * min(140vw, 175vh))';
    real.style.left = 'calc((-10 / 70) * min(140vw, 175vh))';
-    const grid = new Grid(real);
-    grid.set_size(70, 56);
-    grid.set_tileset('wasteland');
-    grid.set_layers(['road', 'water', 'bridge', 'surface', 'projectile']);
-    grid.add_tile(tiles.ROAD_TB, 20, 46);
-    grid.add_tile(tiles.ROAD_BL, 18, 40);
-    grid.add_tile(tiles.ROAD_TR, 12, 38);
-    grid.add_tile(tiles.ROAD_BR, 12, 32);
-    grid.add_tile(tiles.ROAD_TL, 18, 30);
-    grid.add_tile(tiles.ROAD_BL, 18, 24);
-    grid.add_tile(tiles.ROAD_TR, 12, 22);
-    grid.add_tile(tiles.ROAD_BR, 12, 16);
-    grid.add_tile(tiles.ROAD_LR, 18, 16);
-    grid.add_tile(tiles.ROAD_TBLR, 24, 14);
-    grid.add_tile(tiles.ROAD_TB, 26, 2);
-    grid.add_tile(tiles.ROAD_TB, 26, 8);
-    grid.add_tile(tiles.ROAD_TB, 26, 22);
-    grid.add_tile(tiles.ROAD_TB, 26, 28);
-    grid.add_tile(tiles.ROAD_TB, 26, 34);
-    grid.add_tile(tiles.ROAD_TB, 26, 40);
-    grid.add_tile(tiles.ROAD_TB, 26, 46);
-    grid.add_tile(tiles.ROAD_BL, 32, 16);
-    grid.add_tile(tiles.ROAD_TB, 34, 22);
-    grid.add_tile(tiles.ROAD_TB, 34, 28);
-    grid.add_tile(tiles.ROAD_TB, 34, 34);
-    grid.add_tile(tiles.ROAD_TR, 34, 40);
-    grid.add_tile(tiles.ROAD_LR, 40, 42);
-    grid.add_tile(tiles.ROAD_LR, 46, 42);
-    grid.add_tile(tiles.ROAD_TL, 52, 40);
-    grid.add_tile(tiles.ROAD_BL, 52, 34);
-    grid.add_tile(tiles.ROAD_LR, 46, 34);
-    grid.add_tile(tiles.ROAD_TR, 40, 32);
-    grid.add_tile(tiles.ROAD_BR, 40, 26);
-    grid.add_tile(tiles.ROAD_LR, 46, 26);
-    grid.add_tile(tiles.ROAD_TL, 52, 24);
-    grid.add_tile(tiles.ROAD_BL, 52, 18);
-    grid.add_tile(tiles.ROAD_LR, 46, 18);
-    grid.add_tile(tiles.ROAD_TR, 40, 16);
-    grid.add_tile(tiles.ROAD_BR, 40, 10);
-    grid.add_tile(tiles.ROAD_LR, 46, 10);
-    grid.add_tile(tiles.ROAD_LR, 52, 10);
-    grid.add_tile(tiles.ROAD_LR, 58, 10);
-    grid.add_tile(tiles.EMPTY, 30, 20);
-    grid.add_tile(tiles.RIVER_TB, 47, 46);
-    grid.add_tile(tiles.RIVER_TB, 47, 40);
-    grid.add_tile(tiles.RIVER_TB, 47, 34);
-    grid.add_tile(tiles.RIVER_TB, 47, 28);
-    grid.add_tile(tiles.RIVER_TB, 47, 22);
-    grid.add_tile(tiles.RIVER_TB, 47, 16);
-    grid.add_tile(tiles.RIVER_TB, 47, 10);
-    grid.add_tile(tiles.RIVER_TB, 47, 4);
-    grid.add_tile(tiles.BRIDGE_LR, 46, 42);
-    grid.add_tile(tiles.BRIDGE_LR, 46, 34);
-    grid.add_tile(tiles.BRIDGE_LR, 46, 26);
-    grid.add_tile(tiles.BRIDGE_LR, 46, 18);
-    grid.add_tile(tiles.BRIDGE_LR, 46, 10);
+    const grid = new Grid(real, 140, 112, 'wasteland', ['road', 'water', 'bridge', 'surface', 'projectile'], ['walkable', 'not-flyable']);
+    grid.add_tile(tiles.ROAD_TB, 40, 92);
+    grid.add_tile(tiles.ROAD_BL, 36, 80);
+    grid.add_tile(tiles.ROAD_TR, 24, 76);
+    grid.add_tile(tiles.ROAD_BR, 24, 64);
+    grid.add_tile(tiles.ROAD_TL, 36, 60);
+    grid.add_tile(tiles.ROAD_BL, 36, 48);
+    grid.add_tile(tiles.ROAD_TR, 24, 44);
+    grid.add_tile(tiles.ROAD_BR, 24, 32);
+    grid.add_tile(tiles.ROAD_LR, 36, 32);
+    grid.add_tile(tiles.ROAD_TBLR, 48, 28);
+    grid.add_tile(tiles.ROAD_TB, 52, 4);
+    grid.add_tile(tiles.ROAD_TB, 52, 16);
+    grid.add_tile(tiles.ROAD_TB, 52, 44);
+    grid.add_tile(tiles.ROAD_TB, 52, 56);
+    grid.add_tile(tiles.ROAD_TB, 52, 68);
+    grid.add_tile(tiles.ROAD_TB, 52, 80);
+    grid.add_tile(tiles.ROAD_TB, 52, 92);
+    grid.add_tile(tiles.ROAD_BL, 64, 32);
+    grid.add_tile(tiles.ROAD_TB, 68, 44);
+    grid.add_tile(tiles.ROAD_TB, 68, 56);
+    grid.add_tile(tiles.ROAD_TB, 68, 68);
+    grid.add_tile(tiles.ROAD_TR, 68, 80);
+    grid.add_tile(tiles.ROAD_LR, 80, 84);
+    grid.add_tile(tiles.ROAD_LR, 92, 84);
+    grid.add_tile(tiles.ROAD_TL, 104, 80);
+    grid.add_tile(tiles.ROAD_BL, 104, 68);
+    grid.add_tile(tiles.ROAD_LR, 92, 68);
+    grid.add_tile(tiles.ROAD_TR, 80, 64);
+    grid.add_tile(tiles.ROAD_BR, 80, 52);
+    grid.add_tile(tiles.ROAD_LR, 92, 52);
+    grid.add_tile(tiles.ROAD_TL, 104, 48);
+    grid.add_tile(tiles.ROAD_BL, 104, 36);
+    grid.add_tile(tiles.ROAD_LR, 92, 36);
+    grid.add_tile(tiles.ROAD_TR, 80, 32);
+    grid.add_tile(tiles.ROAD_BR, 80, 20);
+    grid.add_tile(tiles.ROAD_LR, 92, 20);
+    grid.add_tile(tiles.ROAD_LR, 104, 20);
+    grid.add_tile(tiles.ROAD_LR, 116, 20);
+    grid.add_tile(tiles.EMPTY, 60, 40);
+    grid.add_tile(tiles.RIVER_TB, 94, 92);
+    grid.add_tile(tiles.RIVER_TB, 94, 80);
+    grid.add_tile(tiles.RIVER_TB, 94, 68);
+    grid.add_tile(tiles.RIVER_TB, 94, 56);
+    grid.add_tile(tiles.RIVER_TB, 94, 44);
+    grid.add_tile(tiles.RIVER_TB, 94, 32);
+    grid.add_tile(tiles.RIVER_TB, 94, 20);
+    grid.add_tile(tiles.RIVER_TB, 94, 8);
+    grid.add_tile(tiles.BRIDGE_LR, 92, 84);
+    grid.add_tile(tiles.BRIDGE_LR, 92, 68);
+    grid.add_tile(tiles.BRIDGE_LR, 92, 52);
+    grid.add_tile(tiles.BRIDGE_LR, 92, 36);
+    grid.add_tile(tiles.BRIDGE_LR, 92, 20);
+    {
+        const m = grid.masks.get('walkable').mask;
+        for (let x = 0; x < m.length; x++) {
+            for (let y = 0; y < m[x].length; y++) {
+                if (!m[x][y]) {
+                    continue;
+                }
+                const div = document.createElement('div');
+                real.appendChild(div);
+                div.style.gridColumnStart = `${x + 1}`;
+                div.style.gridRowStart = `${y + 1}`;
+                div.style.gridColumnEnd = 'span 1';
+                div.style.gridRowEnd = 'span 1';
+                div.style.backgroundColor = 'orange';
+                div.style.opacity = '0.3';
+                div.style.zIndex = '1000000';
+            }
+        }
+    }
    function rand(min, max) {
        return Math.round(Math.random() * (max - min) + min);
    }
-    const tower = grid.add_tile(tiles.TOWER_FIREBALL1, 30, 28);
+    const tower = grid.add_tile(tiles.TOWER_FIREBALL1, 60, 56);
    setInterval(() => {
        tower.play('fire');
-        const target_relative_x = rand(-20, 20);
-        const target_relative_y = rand(-10, 20);
+        const target_relative_x = rand(-40, 40);
+        const target_relative_y = rand(-20, 40);
        const factory = new ProjectileTileFactory(tiles.FIREBALL, target_relative_x, target_relative_y, 5, 1.5, 5);
-        grid.add_tile(factory, 31, 27);
+        grid.add_tile(factory, 62, 54);
        setTimeout(() => {
-            grid.add_tile(tiles.FIREBALL_IMPACT, 31 + target_relative_x, 27 + target_relative_y);
+            grid.add_tile(tiles.FIREBALL_IMPACT, 62 + target_relative_x, 54 + target_relative_y);
        }, factory.duration);
    }, 3250);
-    const greenaxe = grid.add_tile(tiles.GREENAXE, 30, 16);
+    const greenaxe = grid.add_tile(tiles.GREENAXE, 60, 32);
    greenaxe.play('walk');
    greenaxe.elem.style.transitionProperty = 'top,left';
    greenaxe.elem.style.transitionDuration = '25s';
--- a/js/tower.js.map
+++ b/js/tower.js.map
--- a/ts/animatable_tile.ts
+++ b/ts/animatable_tile.ts
@@ -1,10 +1,11 @@
+import { Mask } from './mask.js';
 import { Tile } from './tile.js';

 export abstract class AnimatableTile extends Tile {
  animations: Map<string, [Keyframe[], object]>;

-  constructor(width: number, height: number, animations: Map<string, [Keyframe[], object]>) {
-    super(width, height);
+  constructor(width: number, height: number, masks: Map<string, Mask>, animations: Map<string, [Keyframe[], object]>) {
+    super(width, height, masks);
    this.animations = animations;
  }

--- a/ts/animatable_tile_factory.ts
+++ b/ts/animatable_tile_factory.ts
@@ -1,3 +1,4 @@
+import { Mask } from './mask.js';
 import { TileFactory } from './tile_factory.js';

 export abstract class AnimatableTileFactory extends TileFactory {
@@ -7,5 +8,12 @@ export abstract class AnimatableTileFactory extends TileFactory {
    this.animations.set(name, [keyframes, options]);
  }

+  animatable_tile_args(): [number, number, Map<string, Mask>, Map<string, [Keyframe[], object]>] {
+    return [
+      ...super.tile_args(),
+      this.animations,
+    ];
+  }
+
  abstract copy(): AnimatableTileFactory;
 }
--- a/ts/grid.ts
+++ b/ts/grid.ts
@@ -1,53 +1,28 @@
 import { Layer } from './layer.js';
+import { Mask } from './mask.js';
 import { Tile } from './tile.js';
 import { TileFactory } from './tile_factory.js';

 export class Grid {
  prnt: HTMLElement;
-  tileset: string;
  layers: Map<string, Layer> = new Map<string, Layer>();
-  height: number;
+  masks: Map<string, Mask> = new Map<string, Mask>();

-  constructor(prnt: HTMLElement) {
+  constructor(prnt: HTMLElement, width: number, height: number, tileset: string, layers: string[], masks: string[]) {
    this.prnt = prnt;
+
    this.prnt.style.display = 'grid';
-  }
+    this.prnt.style.gridTemplateColumns = `repeat(${width}, 1fr)`;
+    this.prnt.style.gridTemplateRows = `repeat(${height}, 1fr)`;
+    this.prnt.style.backgroundImage = `url("images/${tileset}/land.svg")`;

-  set_size(x: number, y: number) {
-    this.height = y;
-
-    this.prnt.style.gridTemplateColumns = `repeat(${x}, 1fr)`;
-    this.prnt.style.gridTemplateRows = `repeat(${y}, 1fr)`;
-  }
-
-  set_tileset(set: string) {
-    this.tileset = set;
-    this.prnt.style.backgroundImage = `url("images/${this.tileset}/land.svg")`;
-
-    // TODO: Notify layers
-  }
-
-  set_layers(layers: string[]) {
-    const newNames: Set<string> = new Set<string>(layers);
-
-    for (const name of newNames) {
-      if (!this.layers.has(name)) {
-        const layer = new Layer();
-        layer.set_tileset(this.tileset);
-        this.layers.set(name, layer);
-      }
+    for (let i = 0; i <= layers.length; i++) {
+      const name = layers[i];
+      this.layers.set(name, new Layer(i * height, tileset));
    }

-    for (const name of this.layers.keys()) {
-      if (!newNames.has(name)) {
-        // TODO: Notify layer to tear down
-        this.layers.delete(name);
-      }
-    }
-
-    for (let i = 0; i < layers.length; i++) {
-      const layer = this.layers.get(layers[i])!;
-      layer.set_level(i * this.height);
+    for (const name of masks) {
+      this.masks.set(name, new Mask(width, height));
    }
  }

@@ -59,6 +34,10 @@ export class Grid {
    tile.elem.style.gridRowStart = `${y + 1}`;
    this.prnt.appendChild(tile.elem);

+    for (const [name, mask] of tile.masks) {
+      this.masks.get(name)!.update(x, y, mask);
+    }
+
    return tile;
  }
 }
--- a/ts/layer.ts
+++ b/ts/layer.ts
@@ -5,11 +5,8 @@ export class Layer {
  level: number;
  tileset: string;

-  set_level(level: number) {
+  constructor(level: number, tileset: string) {
    this.level = level;
-  }
-
-  set_tileset(tileset: string) {
    this.tileset = tileset;
  }

--- a/ts/layered_tile.ts
+++ b/ts/layered_tile.ts
@@ -1,10 +1,11 @@
+import { Mask } from './mask.js';
 import { Tile } from './tile.js';

 export class LayeredTile extends Tile {
  tiles: Tile[];

-  constructor(width: number, height: number, tiles: Tile[]) {
-    super(width, height);
+  constructor(width: number, height: number, masks: Map<string, Mask>, tiles: Tile[]) {
+    super(width, height, masks);
    this.tiles = [];

    this.elem.style.position = 'relative';
--- a/ts/layered_tile_factory.ts
+++ b/ts/layered_tile_factory.ts
@@ -20,7 +20,7 @@ export class LayeredTileFactory extends TileFactory {
      tiles.push(tile_factory.build(tileset));
    }

-    return new LayeredTile(this.width, this.height, tiles);
+    return new LayeredTile(...this.tile_args(), tiles);
  }

  copy(): LayeredTileFactory {
--- a/ts/sequence_tile.ts
+++ b/ts/sequence_tile.ts
@@ -1,9 +1,10 @@
 import { AnimatableTile } from './animatable_tile.js';
+import { Mask } from './mask.js';
 import { Tile } from './tile.js';

 export class SequenceTile extends AnimatableTile {
-  constructor(width: number, height: number, animations: Map<string, [Keyframe[], object]>, tiles: Tile[], delay: number, repeat: boolean) {
-    super(width, height, animations);
+  constructor(width: number, height: number, masks: Map<string, Mask>, animations: Map<string, [Keyframe[], object]>, tiles: Tile[], delay: number, repeat: boolean) {
+    super(width, height, masks, animations);

    this.elem.style.position = 'relative';

--- a/ts/sequence_tile_factory.ts
+++ b/ts/sequence_tile_factory.ts
@@ -25,7 +25,7 @@ export class SequenceTileFactory extends AnimatableTileFactory {
      tiles.push(tile_factory.build(tileset));
    }

-    return new SequenceTile(this.width, this.height, this.animations, tiles, this.delay, this.repeat);
+    return new SequenceTile(...this.animatable_tile_args(), tiles, this.delay, this.repeat);
  }

  copy(): SequenceTileFactory {
--- a/ts/simple_tile.ts
+++ b/ts/simple_tile.ts
@@ -1,8 +1,9 @@
 import { AnimatableTile } from './animatable_tile.js';
+import { Mask } from './mask.js';

 export class SimpleTile extends AnimatableTile {
-  constructor(width: number, height: number, image_url: string, animations: Map<string, [Keyframe[], object]>) {
-    super(width, height, animations);
+  constructor(width: number, height: number, masks: Map<string, Mask>, animations: Map<string, [Keyframe[], object]>, image_url: string) {
+    super(width, height, masks, animations);

    this.elem.style.backgroundImage = `url('${encodeURIComponent(image_url)}')`;
    this.elem.style.backgroundSize = 'cover';
--- a/ts/simple_tile_factory.ts
+++ b/ts/simple_tile_factory.ts
@@ -11,10 +11,8 @@ export class SimpleTileFactory extends AnimatableTileFactory {

  build(tileset: string): SimpleTile {
    return new SimpleTile(
-      this.width,
-      this.height,
+      ...this.animatable_tile_args(),
      `images/${this.name.replace('{tileset}', tileset)}`,
-      this.animations,
    );
  }

@@ -26,28 +24,3 @@ export class SimpleTileFactory extends AnimatableTileFactory {
    return stf;
  }
 }
-
-/*
-function string_to_mask(mask_string: string): boolean[][] {
-  // mask_string: '\n+++\n+++\n'
-
-  const rows = mask_string.trim().split('\n');
-  // rows: ['+++', '+++']
-
-  const mask = [];
-  for (let x = 0; x < rows[0].length; x++) {
-    mask[x] = Array(rows.length);
-  }
-  // mask: [ [ empty, empty ], [ empty, empty ], [ empty, empty ] ]
-
-  for (let y = 0; y < rows.length; y++) {
-    const row = rows[y];
-    for (let x = 0; x < row.length; x++) {
-      const cell = row[x];
-      mask[x][y] = (cell.toUpperCase() == 'X');
-    }
-  }
-
-  return mask;
-}
-*/
--- a/ts/tile.ts
+++ b/ts/tile.ts
@@ -1,10 +1,18 @@
+import { Mask } from './mask.js';
+
 export abstract class Tile {
  elem: HTMLElement;
+  masks: Map<string, Mask>;
+
+  constructor(width: number, height: number, masks: Map<string, Mask>) {
+    this.masks = masks;

-  constructor(width: number, height: number) {
    this.elem = document.createElement('div');
    this.elem.style.gridColumnEnd = `span ${width}`;
    this.elem.style.gridRowEnd = `span ${height}`;
+    // Hack to avoid floating point stitching gaps
+    this.elem.style.width = 'calc(100% + 1px)';
+    this.elem.style.height = 'calc(100% + 1px)';
  }

  abstract play(name: string): Animation | undefined;
--- a/ts/tile_factory.ts
+++ b/ts/tile_factory.ts
@@ -1,9 +1,11 @@
+import { Mask } from './mask.js';
 import { Tile } from './tile.js';

 export abstract class TileFactory {
  layer_name: string;
  width: number;
  height: number;
+  masks: Map<string, Mask> = new Map<string, Mask>();

  constructor(layer_name: string, width: number, height: number) {
    this.layer_name = layer_name;
@@ -11,6 +13,18 @@ export abstract class TileFactory {
    this.height = height;
  }

+  add_mask(name: string, mask: Mask) {
+    this.masks.set(name, mask);
+  }
+
+  tile_args(): [number, number, Map<string, Mask>] {
+    return [
+      this.width,
+      this.height,
+      this.masks,
+    ];
+  }
+
  abstract build(tileset: string): Tile;

  abstract copy(): TileFactory;
--- a/ts/tiles.ts
+++ b/ts/tiles.ts
@@ -1,44 +1,152 @@
 import { LayeredTileFactory } from './layered_tile_factory.js';
+import { Mask } from './mask.js';
 import { SequenceTileFactory } from './sequence_tile_factory.js';
 import { SimpleTileFactory } from './simple_tile_factory.js';

 // Straig
-export const ROAD_LR = new SimpleTileFactory('road', 6, 4, '{tileset}/road-lr.svg');
-export const ROAD_TB = new SimpleTileFactory('road', 4, 6, '{tileset}/road-tb.svg');
+export const ROAD_LR = new SimpleTileFactory('road', 12, 8, '{tileset}/road-lr.svg');
+ROAD_LR.add_mask('walkable', Mask.from_string(`
+............
+............
+XXXXXXXXXXXX
+XXXXXXXXXXXX
+XXXXXXXXXXXX
+XXXXXXXXXXXX
+............
+............
+`));
+
+export const ROAD_TB = new SimpleTileFactory('road', 8, 12, '{tileset}/road-tb.svg');
+ROAD_TB.add_mask('walkable', Mask.from_string(`
+..XXXX..
+..XXXX..
+..XXXX..
+..XXXX..
+..XXXX..
+..XXXX..
+..XXXX..
+..XXXX..
+..XXXX..
+..XXXX..
+..XXXX..
+..XXXX..
+..XXXX..
+`));

 // Elbow
-export const ROAD_BL = new SimpleTileFactory('road', 6, 6, '{tileset}/road-bl.svg');
-export const ROAD_BR = new SimpleTileFactory('road', 6, 6, '{tileset}/road-br.svg');
-export const ROAD_TL = new SimpleTileFactory('road', 6, 6, '{tileset}/road-tl.svg');
-export const ROAD_TR = new SimpleTileFactory('road', 6, 6, '{tileset}/road-tr.svg');
+export const ROAD_BL = new SimpleTileFactory('road', 12, 12, '{tileset}/road-bl.svg');
+ROAD_BL.add_mask('walkable', Mask.from_string(`
+............
+............
+XXX.........
+XXXXX.......
+XXXXXXX.....
+XXXXXXXX....
+..XXXXXX....
+....XXXXX...
+.....XXXX...
+.....XXXXX..
+......XXXX..
+......XXXX..
+`));
+
+export const ROAD_BR = new SimpleTileFactory('road', 12, 12, '{tileset}/road-br.svg');
+ROAD_BR.add_mask('walkable', Mask.from_string(`
+............
+............
+.........XXX
+.......XXXXX
+.....XXXXXXX
+....XXXXXXXX
+....XXXXXX..
+...XXXXX....
+...XXXX.....
+..XXXXX.....
+..XXXX......
+..XXXX......
+`));
+
+export const ROAD_TL = new SimpleTileFactory('road', 12, 12, '{tileset}/road-tl.svg');
+ROAD_TL.add_mask('walkable', Mask.from_string(`
+......XXXX..
+......XXXX..
+.....XXXXX..
+.....XXXX...
+....XXXXX...
+..XXXXXX....
+XXXXXXXX....
+XXXXXXX.....
+XXXXX.......
+XXX.........
+............
+............
+`));
+
+export const ROAD_TR = new SimpleTileFactory('road', 12, 12, '{tileset}/road-tr.svg');
+ROAD_TR.add_mask('walkable', Mask.from_string(`
+..XXXX......
+..XXXX......
+..XXXXX.....
+...XXXX.....
+...XXXXX....
+....XXXXXX..
+....XXXXXXXX
+.....XXXXXXX
+.......XXXXX
+.........XXX
+............
+............
+`));

 // T
-export const ROAD_BLR = new SimpleTileFactory('road', 8, 6, '{tileset}/road-blr.svg');
-export const ROAD_TLR = new SimpleTileFactory('road', 8, 6, '{tileset}/road-tlr.svg');
-export const ROAD_LTB = new SimpleTileFactory('road', 6, 8, '{tileset}/road-ltb.svg');
-export const ROAD_RTB = new SimpleTileFactory('road', 6, 8, '{tileset}/road-rtb.svg');
+export const ROAD_BLR = new SimpleTileFactory('road', 16, 12, '{tileset}/road-blr.svg');
+// TODO: add_mask(walkable)
+export const ROAD_TLR = new SimpleTileFactory('road', 16, 12, '{tileset}/road-tlr.svg');
+// TODO: add_mask(walkable)
+export const ROAD_LTB = new SimpleTileFactory('road', 12, 16, '{tileset}/road-ltb.svg');
+// TODO: add_mask(walkable)
+export const ROAD_RTB = new SimpleTileFactory('road', 12, 16, '{tileset}/road-rtb.svg');
+// TODO: add_mask(walkable)

 // +
-export const ROAD_TBLR = new SimpleTileFactory('road', 8, 8, '{tileset}/road-tblr.svg');
+export const ROAD_TBLR = new SimpleTileFactory('road', 16, 16, '{tileset}/road-tblr.svg');
+ROAD_TBLR.add_mask('walkable', Mask.from_string(`
+......XXXX......
+......XXXX......
+......XXXX......
+.....XXXXXX.....
+....XXXXXXXX....
+...XXXXXXXXXX...
+XXXXXXXXXXXXXXXX
+XXXXXXXXXXXXXXXX
+XXXXXXXXXXXXXXXX
+XXXXXXXXXXXXXXXX
+...XXXXXXXXXX...
+....XXXXXXXX....
+.....XXXXXX.....
+......XXXX......
+......XXXX......
+......XXXX......
+`));

 // Tower base
-export const EMPTY = new SimpleTileFactory('road', 4, 2, '{tileset}/empty.svg');
+export const EMPTY = new SimpleTileFactory('road', 8, 4, '{tileset}/empty.svg');

 // Straight
-export const RIVER_LR = new SimpleTileFactory('water', 6, 4, '{tileset}/river-lr.svg');
-export const RIVER_TB = new SimpleTileFactory('water', 4, 6, '{tileset}/river-tb.svg');
+export const RIVER_LR = new SimpleTileFactory('water', 12, 8, '{tileset}/river-lr.svg');
+export const RIVER_TB = new SimpleTileFactory('water', 8, 12, '{tileset}/river-tb.svg');

 // Elbow
-export const RIVER_BR = new SimpleTileFactory('water', 6, 6, '{tileset}/river-br.svg');
-export const RIVER_BL = new SimpleTileFactory('water', 6, 6, '{tileset}/river-bl.svg');
-export const RIVER_TR = new SimpleTileFactory('water', 6, 6, '{tileset}/river-tr.svg');
-export const RIVER_TL = new SimpleTileFactory('water', 6, 6, '{tileset}/river-tl.svg');
+export const RIVER_BR = new SimpleTileFactory('water', 12, 12, '{tileset}/river-br.svg');
+export const RIVER_BL = new SimpleTileFactory('water', 12, 12, '{tileset}/river-bl.svg');
+export const RIVER_TR = new SimpleTileFactory('water', 12, 12, '{tileset}/river-tr.svg');
+export const RIVER_TL = new SimpleTileFactory('water', 12, 12, '{tileset}/river-tl.svg');

-export const BRIDGE_LR = new SimpleTileFactory('bridge', 6, 4, '{tileset}/bridge-lr.svg');
+export const BRIDGE_LR = new SimpleTileFactory('bridge', 12, 8, '{tileset}/bridge-lr.svg');

-const tower_fireball1_back = new SimpleTileFactory('surface', 4, 4, 'tower/fireball1-back.svg');
-const tower_fireball1 = new SimpleTileFactory('surface', 4, 4, 'tower/fireball1.svg');
-const tower_fireball1_front = new SimpleTileFactory('surface', 4, 4, 'tower/fireball1-front.svg');
+const tower_fireball1_back = new SimpleTileFactory('surface', 8, 8, 'tower/fireball1-back.svg');
+const tower_fireball1 = new SimpleTileFactory('surface', 8, 8, 'tower/fireball1.svg');
+const tower_fireball1_front = new SimpleTileFactory('surface', 8, 8, 'tower/fireball1-front.svg');

 for (const tile_factory of [tower_fireball1_back, tower_fireball1_front]) {
  tile_factory.add_animation(
@@ -75,20 +183,20 @@ export const TOWER_FIREBALL1 = new LayeredTileFactory([
  tower_fireball1_front,
 ]);

-export const FIREBALL = new SimpleTileFactory('projectile', 2, 2, 'tower/fireball.svg');
+export const FIREBALL = new SimpleTileFactory('projectile', 4, 4, 'tower/fireball.svg');

 export const FIREBALL_IMPACT = new SequenceTileFactory([
-  new SimpleTileFactory('surface', 2, 2, 'tower/fireball-impact1.svg'),
-  new SimpleTileFactory('surface', 2, 2, 'tower/fireball-impact2.svg'),
-  new SimpleTileFactory('surface', 2, 2, 'tower/fireball-impact3.svg'),
-  new SimpleTileFactory('surface', 2, 2, 'tower/fireball-impact4.svg'),
-  new SimpleTileFactory('surface', 2, 2, 'tower/fireball-impact5.svg'),
-  new SimpleTileFactory('surface', 2, 2, 'tower/fireball-impact6.svg'),
-  new SimpleTileFactory('surface', 2, 2, 'tower/fireball-impact7.svg'),
-  new SimpleTileFactory('surface', 2, 2, 'tower/fireball-impact8.svg'),
+  new SimpleTileFactory('surface', 4, 4, 'tower/fireball-impact1.svg'),
+  new SimpleTileFactory('surface', 4, 4, 'tower/fireball-impact2.svg'),
+  new SimpleTileFactory('surface', 4, 4, 'tower/fireball-impact3.svg'),
+  new SimpleTileFactory('surface', 4, 4, 'tower/fireball-impact4.svg'),
+  new SimpleTileFactory('surface', 4, 4, 'tower/fireball-impact5.svg'),
+  new SimpleTileFactory('surface', 4, 4, 'tower/fireball-impact6.svg'),
+  new SimpleTileFactory('surface', 4, 4, 'tower/fireball-impact7.svg'),
+  new SimpleTileFactory('surface', 4, 4, 'tower/fireball-impact8.svg'),
 ], 50, false);

-const greenaxe_axe = new SimpleTileFactory('surface', 3, 3, 'monster/greenaxe/axe.svg');
+const greenaxe_axe = new SimpleTileFactory('surface', 6, 6, 'monster/greenaxe/axe.svg');
 greenaxe_axe.add_animation(
  'walk',
  [
@@ -118,7 +226,7 @@ greenaxe_axe.add_animation(
  },
 );

-const greenaxe_rightleg = new SimpleTileFactory('surface', 3, 3, 'monster/greenaxe/rightleg.svg');
+const greenaxe_rightleg = new SimpleTileFactory('surface', 6, 6, 'monster/greenaxe/rightleg.svg');
 greenaxe_rightleg.add_animation(
  'walk',
  [
@@ -148,7 +256,7 @@ greenaxe_rightleg.add_animation(
  },
 );

-const greenaxe_leftleg = new SimpleTileFactory('surface', 3, 3, 'monster/greenaxe/leftleg.svg');
+const greenaxe_leftleg = new SimpleTileFactory('surface', 6, 6, 'monster/greenaxe/leftleg.svg');
 greenaxe_leftleg.add_animation(
  'walk',
  [
@@ -178,7 +286,7 @@ greenaxe_leftleg.add_animation(
  },
 );

-const greenaxe_torso = new SimpleTileFactory('surface', 3, 3, 'monster/greenaxe/torso.svg');
+const greenaxe_torso = new SimpleTileFactory('surface', 6, 6, 'monster/greenaxe/torso.svg');
 greenaxe_torso.add_animation(
  'walk',
  [
@@ -208,7 +316,7 @@ greenaxe_torso.add_animation(
  },
 );

-const greenaxe_head = new SimpleTileFactory('surface', 3, 3, 'monster/greenaxe/head.svg');
+const greenaxe_head = new SimpleTileFactory('surface', 6, 6, 'monster/greenaxe/head.svg');
 greenaxe_head.add_animation(
  'walk',
  [
@@ -238,7 +346,7 @@ greenaxe_head.add_animation(
  },
 );

-const greenaxe_rightarm = new SimpleTileFactory('surface', 3, 3, 'monster/greenaxe/rightarm.svg');
+const greenaxe_rightarm = new SimpleTileFactory('surface', 6, 6, 'monster/greenaxe/rightarm.svg');
 greenaxe_rightarm.add_animation(
  'walk',
  [
@@ -268,7 +376,7 @@ greenaxe_rightarm.add_animation(
  },
 );

-const greenaxe_leftarm = new SimpleTileFactory('surface', 3, 3, 'monster/greenaxe/leftarm.svg');
+const greenaxe_leftarm = new SimpleTileFactory('surface', 6, 6, 'monster/greenaxe/leftarm.svg');
 greenaxe_leftarm.add_animation(
  'walk',
  [
--- a/ts/tower.ts
+++ b/ts/tower.ts
@@ -22,83 +22,106 @@ export function main() {
  real.style.top = 'calc((-8 / 70) * min(140vw, 175vh))';
  real.style.left = 'calc((-10 / 70) * min(140vw, 175vh))';

-  const grid = new Grid(real);
-  grid.set_size(70, 56);
-  grid.set_tileset('wasteland');
-  grid.set_layers(['road', 'water', 'bridge', 'surface', 'projectile']);
+  const grid = new Grid(
+    real,
+    140, 112,
+    'wasteland',
+    ['road', 'water', 'bridge', 'surface', 'projectile'],
+    ['walkable', 'not-flyable'],
+  );

-  grid.add_tile(tiles.ROAD_TB, 20, 46);
-  grid.add_tile(tiles.ROAD_BL, 18, 40);
-  grid.add_tile(tiles.ROAD_TR, 12, 38);
-  grid.add_tile(tiles.ROAD_BR, 12, 32);
-  grid.add_tile(tiles.ROAD_TL, 18, 30);
-  grid.add_tile(tiles.ROAD_BL, 18, 24);
-  grid.add_tile(tiles.ROAD_TR, 12, 22);
-  grid.add_tile(tiles.ROAD_BR, 12, 16);
-  grid.add_tile(tiles.ROAD_LR, 18, 16);
-  grid.add_tile(tiles.ROAD_TBLR, 24, 14);
-  grid.add_tile(tiles.ROAD_TB, 26, 2);
-  grid.add_tile(tiles.ROAD_TB, 26, 8);
-  grid.add_tile(tiles.ROAD_TB, 26, 22);
-  grid.add_tile(tiles.ROAD_TB, 26, 28);
-  grid.add_tile(tiles.ROAD_TB, 26, 34);
-  grid.add_tile(tiles.ROAD_TB, 26, 40);
-  grid.add_tile(tiles.ROAD_TB, 26, 46);
-  grid.add_tile(tiles.ROAD_BL, 32, 16);
-  grid.add_tile(tiles.ROAD_TB, 34, 22);
-  grid.add_tile(tiles.ROAD_TB, 34, 28);
-  grid.add_tile(tiles.ROAD_TB, 34, 34);
-  grid.add_tile(tiles.ROAD_TR, 34, 40);
-  grid.add_tile(tiles.ROAD_LR, 40, 42);
-  grid.add_tile(tiles.ROAD_LR, 46, 42);
-  grid.add_tile(tiles.ROAD_TL, 52, 40);
-  grid.add_tile(tiles.ROAD_BL, 52, 34);
-  grid.add_tile(tiles.ROAD_LR, 46, 34);
-  grid.add_tile(tiles.ROAD_TR, 40, 32);
-  grid.add_tile(tiles.ROAD_BR, 40, 26);
-  grid.add_tile(tiles.ROAD_LR, 46, 26);
-  grid.add_tile(tiles.ROAD_TL, 52, 24);
-  grid.add_tile(tiles.ROAD_BL, 52, 18);
-  grid.add_tile(tiles.ROAD_LR, 46, 18);
-  grid.add_tile(tiles.ROAD_TR, 40, 16);
-  grid.add_tile(tiles.ROAD_BR, 40, 10);
-  grid.add_tile(tiles.ROAD_LR, 46, 10);
-  grid.add_tile(tiles.ROAD_LR, 52, 10);
-  grid.add_tile(tiles.ROAD_LR, 58, 10);
-  grid.add_tile(tiles.EMPTY, 30, 20);
+  grid.add_tile(tiles.ROAD_TB, 40, 92);
+  grid.add_tile(tiles.ROAD_BL, 36, 80);
+  grid.add_tile(tiles.ROAD_TR, 24, 76);
+  grid.add_tile(tiles.ROAD_BR, 24, 64);
+  grid.add_tile(tiles.ROAD_TL, 36, 60);
+  grid.add_tile(tiles.ROAD_BL, 36, 48);
+  grid.add_tile(tiles.ROAD_TR, 24, 44);
+  grid.add_tile(tiles.ROAD_BR, 24, 32);
+  grid.add_tile(tiles.ROAD_LR, 36, 32);
+  grid.add_tile(tiles.ROAD_TBLR, 48, 28);
+  grid.add_tile(tiles.ROAD_TB, 52, 4);
+  grid.add_tile(tiles.ROAD_TB, 52, 16);
+  grid.add_tile(tiles.ROAD_TB, 52, 44);
+  grid.add_tile(tiles.ROAD_TB, 52, 56);
+  grid.add_tile(tiles.ROAD_TB, 52, 68);
+  grid.add_tile(tiles.ROAD_TB, 52, 80);
+  grid.add_tile(tiles.ROAD_TB, 52, 92);
+  grid.add_tile(tiles.ROAD_BL, 64, 32);
+  grid.add_tile(tiles.ROAD_TB, 68, 44);
+  grid.add_tile(tiles.ROAD_TB, 68, 56);
+  grid.add_tile(tiles.ROAD_TB, 68, 68);
+  grid.add_tile(tiles.ROAD_TR, 68, 80);
+  grid.add_tile(tiles.ROAD_LR, 80, 84);
+  grid.add_tile(tiles.ROAD_LR, 92, 84);
+  grid.add_tile(tiles.ROAD_TL, 104, 80);
+  grid.add_tile(tiles.ROAD_BL, 104, 68);
+  grid.add_tile(tiles.ROAD_LR, 92, 68);
+  grid.add_tile(tiles.ROAD_TR, 80, 64);
+  grid.add_tile(tiles.ROAD_BR, 80, 52);
+  grid.add_tile(tiles.ROAD_LR, 92, 52);
+  grid.add_tile(tiles.ROAD_TL, 104, 48);
+  grid.add_tile(tiles.ROAD_BL, 104, 36);
+  grid.add_tile(tiles.ROAD_LR, 92, 36);
+  grid.add_tile(tiles.ROAD_TR, 80, 32);
+  grid.add_tile(tiles.ROAD_BR, 80, 20);
+  grid.add_tile(tiles.ROAD_LR, 92, 20);
+  grid.add_tile(tiles.ROAD_LR, 104, 20);
+  grid.add_tile(tiles.ROAD_LR, 116, 20);
+  grid.add_tile(tiles.EMPTY, 60, 40);

-  grid.add_tile(tiles.RIVER_TB, 47, 46);
-  grid.add_tile(tiles.RIVER_TB, 47, 40);
-  grid.add_tile(tiles.RIVER_TB, 47, 34);
-  grid.add_tile(tiles.RIVER_TB, 47, 28);
-  grid.add_tile(tiles.RIVER_TB, 47, 22);
-  grid.add_tile(tiles.RIVER_TB, 47, 16);
-  grid.add_tile(tiles.RIVER_TB, 47, 10);
-  grid.add_tile(tiles.RIVER_TB, 47, 4);
+  grid.add_tile(tiles.RIVER_TB, 94, 92);
+  grid.add_tile(tiles.RIVER_TB, 94, 80);
+  grid.add_tile(tiles.RIVER_TB, 94, 68);
+  grid.add_tile(tiles.RIVER_TB, 94, 56);
+  grid.add_tile(tiles.RIVER_TB, 94, 44);
+  grid.add_tile(tiles.RIVER_TB, 94, 32);
+  grid.add_tile(tiles.RIVER_TB, 94, 20);
+  grid.add_tile(tiles.RIVER_TB, 94, 8);

-  grid.add_tile(tiles.BRIDGE_LR, 46, 42);
-  grid.add_tile(tiles.BRIDGE_LR, 46, 34);
-  grid.add_tile(tiles.BRIDGE_LR, 46, 26);
-  grid.add_tile(tiles.BRIDGE_LR, 46, 18);
-  grid.add_tile(tiles.BRIDGE_LR, 46, 10);
+  grid.add_tile(tiles.BRIDGE_LR, 92, 84);
+  grid.add_tile(tiles.BRIDGE_LR, 92, 68);
+  grid.add_tile(tiles.BRIDGE_LR, 92, 52);
+  grid.add_tile(tiles.BRIDGE_LR, 92, 36);
+  grid.add_tile(tiles.BRIDGE_LR, 92, 20);
+
+  {
+    const m = grid.masks.get('walkable')!.mask;
+    for (let x = 0; x < m.length; x++) {
+      for (let y = 0; y < m[x].length; y++) {
+        if (!m[x][y]) {
+          continue;
+        }
+        const div = document.createElement('div');
+        real.appendChild(div);
+        div.style.gridColumnStart = `${x + 1}`;
+        div.style.gridRowStart = `${y + 1}`;
+        div.style.gridColumnEnd = 'span 1';
+        div.style.gridRowEnd = 'span 1';
+        div.style.backgroundColor = 'orange';
+        div.style.opacity = '0.3';
+        div.style.zIndex = '1000000';
+      }
+    }
+  }

  function rand(min: number, max: number): number {
      return Math.round(Math.random() * (max - min) + min);
  }

-  const tower = grid.add_tile(tiles.TOWER_FIREBALL1, 30, 28);
+  const tower = grid.add_tile(tiles.TOWER_FIREBALL1, 60, 56);
  setInterval(() => {
    tower.play('fire');
-    const target_relative_x = rand(-20, 20);
-    const target_relative_y = rand(-10, 20);
+    const target_relative_x = rand(-40, 40);
+    const target_relative_y = rand(-20, 40);
    const factory = new ProjectileTileFactory(tiles.FIREBALL, target_relative_x, target_relative_y, 5, 1.5, 5);
-    grid.add_tile(factory, 31, 27);
+    grid.add_tile(factory, 62, 54);
    setTimeout(() => {
-      grid.add_tile(tiles.FIREBALL_IMPACT, 31 + target_relative_x, 27 + target_relative_y);
+      grid.add_tile(tiles.FIREBALL_IMPACT, 62 + target_relative_x, 54 + target_relative_y);
    }, factory.duration);
  }, 3250);

-  const greenaxe = grid.add_tile(tiles.GREENAXE, 30, 16);
+  const greenaxe = grid.add_tile(tiles.GREENAXE, 60, 32);
  greenaxe.play('walk');
  greenaxe.elem.style.transitionProperty = 'top,left';
  greenaxe.elem.style.transitionDuration = '25s';
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -20,6 +20,7 @@
    "ts/layered_tile.ts",
    "ts/layered_tile_factory.ts",
    "ts/layer.ts",
+    "ts/mask.ts",
    "ts/projectile_tile_factory.ts",
    "ts/sequence_tile.ts",
    "ts/sequence_tile_factory.ts",