New layering

src/HistoryElement.ts

@@ -12,8 +12,8 @@ class HistoryElement {
 	undo() {
 		console.log("Undo", this.type);
 		if (this.type == "tile") {
-			for (let tile of this.data as {pos: Vec2, solid: boolean, oldSolid: boolean, palette: number, oldPalette: number}[])
+			for (let tile of this.data as {pos: Vec2, lastWall: number, wall: number}[])
-				this.scene.map.setSolid(tile.pos.x, tile.pos.y, tile.oldPalette, tile.oldSolid);
+				this.scene.map.setWall(tile.pos.x, tile.pos.y, tile.lastWall);
 		}
 		else if (this.type == "token_modify") {
 			let data = this.data as { old: string, new: string };
@@ -44,8 +44,8 @@ class HistoryElement {
 	redo() {
 		console.log("Redo", this.type);
 		if (this.type == "tile") {
-			for (let tile of this.data as {pos: Vec2, solid: boolean, wasSolid: boolean, palette: number, oldPalette: number}[])
+			for (let tile of this.data as {pos: Vec2, lastWall: number, wall: number}[])
-				this.scene.map.setSolid(tile.pos.x, tile.pos.y, tile.palette, tile.solid);
+				this.scene.map.setWall(tile.pos.x, tile.pos.y, tile.wall);
 		}
 		else if (this.type == "token_modify") {
 			let data = this.data as { old: string, new: string };

src/Tilemap.ts

@@ -1,46 +1,48 @@
 class Tilemap {
 	scene: MainScene;
+	map: Phaser.Tilemaps.Tilemap;
+	dimensions: Vec2 = new Vec2();
 
-	key: string;
+	manager: TilesetManager;
-	dimensions: {x: number, y: number};
+	layers: {[key: number]: {wall: Phaser.Tilemaps.DynamicTilemapLayer, ground: Phaser.Tilemaps.DynamicTilemapLayer}} = {};
 
 	SOLID: number = 10;
 
-	map: Phaser.Tilemaps.Tilemap;
+	groundAt: number[][];
-	layers: (Phaser.Tilemaps.DynamicTilemapLayer | null)[] = [];
+	wallAt:   number[][];
-
-	solid_at: boolean[][];
-	palette_at: number[][];
 
 	constructor(key: string, scene: MainScene, xwid: number, ywid: number) {
-		this.key = key;
 		this.scene = scene;
-		this.dimensions = {x: xwid, y: ywid};
+		this.dimensions = new Vec2(xwid, ywid);
 
-		this.solid_at = [];
+		this.groundAt = [];
-		this.palette_at = [];
+		this.wallAt = [];
 		for (let i = 0; i < xwid; i++) {
-			this.solid_at[i] = [];
+			this.groundAt[i] = [];
-			this.palette_at[i] = [];
+			this.wallAt[i] = [];
 			for (let j = 0; j < ywid; j++) {
-				this.solid_at[i][j] = false;
+				this.groundAt[i][j] = -1;
-				this.palette_at[i][j] = 1;
+				this.wallAt[i][j] = -1;
 			}
 		}
 
+		this.manager = new TilesetManager(scene);
+		for (let tileset of WALLS  ) this.manager.addTileset(tileset.key, true);
+		for (let tileset of GROUNDS) this.manager.addTileset(tileset.key, false);
+
 		this.map = this.scene.add.tilemap(null, 16, 16, 0, 0);
 
-		for (let i = 0; i < this.scene.TILESET_COUNT; i++) {
+		for (let res of Object.keys(this.manager.tilesets)) this.createLayers(parseInt(res));
-			let tileset = this.map.addTilesetImage("tileset_" + i, "tileset_" + i, 16, 16, 0, 0);
 
-			this.layers[i] = null;
+		for (let x = 0; x < this.dimensions.x; x ++) {
+			for (let y = 0; y < this.dimensions.y; y ++) {
+				this.layers[16].ground.putTileAt(3, x, y);
+			}
 		}
-		this.createLayer(0);
-		this.layers[0].setInteractive();
 		
 		this.map.addTilesetImage("grid_tile", "grid_tile", 16, 16, 0, 0);
 		this.map.setLayer("grid");
-		let gridlayer = this.map.createBlankDynamicLayer("grid", "grid_tile", 0, 0, 50*16, 50*16, 16, 16);
+		let gridlayer = this.map.createBlankDynamicLayer("grid", "grid_tile", 0, 0, this.dimensions.x, this.dimensions.y, 16, 16);
 		gridlayer.setScale(4, 4);
 		gridlayer.setDepth(500);
 		for (let i = 0; i < xwid; i++) {
@@ -48,167 +50,192 @@ class Tilemap {
 				if ((j % 2 == 0 && i % 2 == 0) || (j % 2 != 0 && i % 2 != 0)) gridlayer.putTileAt(0, i, j);
 			}
 		}
-
-		for (let x = 0; x < this.dimensions.x; x ++) {
-			for (let y = 0; y < this.dimensions.y; y ++) {
-				this.setTile(x, y, 1, 13);
-			}
-		}
 	}
 
-	private createLayer(palette: number) {
+	private createLayers(res: number) {
-		this.map.setLayer("layer_" + palette);
+		this.map.addTilesetImage("tileset_" + res + "_ground", "tileset_" + res + "_ground", res, res, 0, 0);
-		this.layers[palette] = this.map.createBlankDynamicLayer("layer_" + palette, "tileset_" + palette, 0, 0, 50*16, 50*16, 16, 16);
+		this.map.addTilesetImage("tileset_" + res + "_wall", "tileset_" + res + "_wall", res, res, 0, 0);
-		this.layers[palette].setScale(4, 4);
+
-		this.layers[palette].setDepth(-500 + palette);
+		this.map.setLayer("layer_" + res + "_ground");
+		let ground = this.map.createBlankDynamicLayer("layer_" + res + "_ground", 
+			"tileset_" + res + "_ground", 0, 0, this.dimensions.x, this.dimensions.y, res, res);
+		ground.setScale(4 / (res / 16), 4 / (res / 16));
+		ground.setDepth(-1000 + res);
+
+		this.map.setLayer("layer_" + res + "_wall");
+		let wall = this.map.createBlankDynamicLayer("layer_" + res + "_wall", 
+			"tileset_" + res + "_wall", 0, 0, this.dimensions.x, this.dimensions.y, res, res);
+		wall.setScale(4 / (res / 16), 4 / (res / 16));
+		wall.setDepth(-500 + res);
+
+		this.layers[res] = { ground: ground, wall: wall };
 	}
 
-	setSolid(x: number, y: number, palette: number, solid: boolean): boolean {
+	setWall(x: number, y: number, tileset: number): boolean {
 		if (x < 0 || y < 0 || x > this.dimensions.x - 1 || y > this.dimensions.y - 1) return false;
 
-		let oldPalette = this.palette_at[x][y];
+		if (this.wallAt[x][y] == tileset) return false;
-		let wasSolid 	 = this.solid_at[x][y];
 
-		if (wasSolid == solid && palette == oldPalette) return false;
+		if (this.wallAt[x][y] != -1) {
+			this.layers[this.manager.locations[this.wallAt[x][y]].res].wall.removeTileAt(x, y, true);
+			this.wallAt[x][y] = -1;
+		}
+
+		if (tileset != -1) {
+			this.layers[this.manager.locations[tileset].res].wall.putTileAt(
+				this.manager.tilesets[this.manager.locations[tileset].res].wall.getGlobalIndex(54, tileset), x, y);
+			this.wallAt[x][y] = tileset;
+		}
 		
-		this.setTile(x, y, palette, (solid ? this.SOLID : 13));
+		this.calculateSmartTilesAround(x, y);
-		this.calculateEdgesAround(x, y);
-
 		return true;
 	}
 
-	getSolid(x: number, y: number): number {
+	private setWallRaw(x: number, y: number, tileset: number, tile: number) {
-		if (x < 0 || y < 0 || x > this.dimensions.x - 1 || y > this.dimensions.y - 1) return -1;
+		if (this.wallAt[x][y] != -1) {
-		return (this.solid_at[x][y]) ? this.palette_at[x][y] : -1;
+			this.layers[this.manager.locations[tileset].res].wall.removeTileAt(x, y, true);
+			this.wallAt[x][y] = -1;
+		}
+
+		this.layers[this.manager.locations[tileset].res].wall.putTileAt(
+			this.manager.tilesets[this.manager.locations[tileset].res].wall.getGlobalIndex(tile, tileset), x, y);
+		this.wallAt[x][y] = tileset;
 	}
 
-	getPalette(x: number, y: number): number {
+	getWall(x: number, y: number): number {
-		if (x < 0 || y < 0 || x > this.dimensions.x - 1 || y > this.dimensions.y - 1) return -1;
+		return this.wallAt[clamp(x, 0, this.dimensions.x - 1)][clamp(y, 0, this.dimensions.y - 1)];
-		return this.palette_at[x][y];
 	}
 
-	private setTile(x: number, y: number, palette: number, tid: number): void {
+	getGround(x: number, y: number): number {
-		if (this.layers[palette] == null) this.createLayer(palette);
+		return this.groundAt[clamp(x, 0, this.dimensions.x - 1)][clamp(y, 0, this.dimensions.y - 1)];
-
-		this.layers[this.palette_at[x][y]].removeTileAt(x, y, true);
-		this.layers[palette].putTileAt(tid, x, y);
-		this.palette_at[x][y] = palette;
-		this.solid_at[x][y] = tid == this.SOLID;
 	}
 
-	private calculateEdgesAround(x: number, y: number) {
+	private calculateSmartTilesAround(x: number, y: number) {
 		for (let i = clamp(x - 1, this.dimensions.x - 1, 0); i <= clamp(x + 1, this.dimensions.x - 1, 0); i++) {
 			for (let j = clamp(y - 1, this.dimensions.y - 1, 0); j <= clamp(y + 1, this.dimensions.y - 1, 0); j++) {
 				let tile = this.calculateSmartTile(i, j);
-				if (tile != -1) this.setTile(i, j, this.palette_at[i][j], tile);
+				if (tile != -1) this.setWallRaw(i, j, this.wallAt[i][j], tile);
 			}
 		}
 	}
 
-	private getSurroundingSolid(x: number, y: number): boolean[] {
+	private getWallsAround(x: number, y: number): boolean[] {
 		let solid: boolean[] = [];
 		for (let i = -1; i <= 1; i++) {
 			for (let j = -1; j <= 1; j++) {
-				solid.push(this.getSolid(x + j, y + i) != -1);
+				solid.push(this.getWall(x + j, y + i) != -1);
 			}
 		}
 		return solid;
 	}
 
 	private calculateSmartTile(x: number, y: number): number {
-		if (this.getSolid(x, y) != -1) return -1;
+		let wall = this.getWall(x, y); 
+		if (wall == -1) return -1;
 
-		let adjacents = this.getSurroundingSolid(x, y);
+		const TL = 0, T = 1, TR = 2, L = 3, C = 4, R = 5, BL = 6, B = 7, BR = 8;
-		let tile = 13;
 
-		if (adjacents[7] /*Bottom*/) { 
+		let empty = this.getWallsAround(x, y).map(b => !b);
-		 	if (adjacents[1] /*Top*/) {
+		let tile = 54;
-		 		if (adjacents[5] /*Right*/) { 
+
-		 			if (adjacents[3] /*Left*/) tile = 49;
+		if (empty[T]) {
-		 			else tile = 59;
+			if (empty[B]) {
-		 		}
+				if (empty[L]) {
-		 		else if (adjacents[3] /*Left*/) tile = 57;
+					if (empty[R]) tile = 33;
-		 		else tile = 58;
+					else tile = 15; 
-		 	}
+				}
-			else if (adjacents[3] /*Left*/) {
+				else if (empty[R]) tile = 5;
-				if (adjacents[5] /*Right*/) tile = 48;
+				else tile = 2;
-				else if (adjacents[2] /*Top right*/) tile = 45;
-				else tile = 21;
 			}
-			else if (adjacents[5] /*Right*/) {
+			else if (empty[L]) {
-				if (adjacents[0] /*Top left*/) tile = 47;
+				if (empty[R]) tile = 14;
-				else tile = 23;
+				else if (empty[BR]) tile = 0;
+				else tile = 7;
 			}
-			else if (adjacents[0] /*Top left*/) {
+			else if (empty[R]) {
-				if (adjacents[2] /*Top Right*/) tile = 46;
+				if (empty[BL]) tile = 1;
-				else tile = 41;
+				else tile = 8;
+			}
+			else {
+				if (empty[BL]) {
+					if (empty[BR]) tile = 3;
+					else tile = 40;
+				}
+				else if (empty[BR]) tile = 41;
+				else tile = 31;
 			}
-			else if (adjacents[2] /*Top Right*/) tile = 40;
-		 	else tile = 1;
 		}
-		else if (adjacents[1] /*Top*/) {
+		else if (empty[B]) {
-			if (adjacents[3] /*Left*/) {
+			if (empty[L]) {
-				if (adjacents[5] /*Right*/) tile = 30;
+				if (empty[R]) tile = 6;
-				else if (adjacents[8] /*Bottom right*/) tile = 27;
+				else if (empty[TR]) tile = 9;
-				else tile = 3;
+				else tile = 16;
 			}
-			else if (adjacents[5] /*Right*/) {
+			else if (empty[R]) {
-				if (adjacents[6] /*Bottom left*/) tile = 29; 
+				if (empty[TL]) tile = 10;
-				else tile = 5;
+				else tile = 17;
 			}
-			else if (adjacents[6] /*Bottom left*/) {
+			else {
-				if (adjacents[8] /*Bottom right*/) tile = 28;
+				if (empty[TL]) {
+					if (empty[TR]) tile = 4;
+					else tile = 49;
+				}
+				else if (empty[TR]) tile = 50;
 				else tile = 32;
 			}
-			else if (adjacents[8] /*Bottom right*/) tile = 31;
+		}
+		else if (empty[L]) {
+			if (empty[R]) tile = 11;
+			else {
+				if (empty[TR]) {
+					if (empty[BR]) tile = 12;
+					else tile = 38;
+				}
+				else if (empty[BR]) tile = 47;
+				else tile = 22;
+			}
+		}
+		else if (empty[R]) {
+			if (empty[TL]) {
+				if (empty[BL]) tile = 13;
+				else tile = 39;
+			}
+			else if (empty[BL]) tile = 48;
+			else tile = 23;
+		}
+		else if (empty[TL]) {
+			if (empty[TR]) {
+				if (empty[BL]) {
+					if (empty[BR]) tile = 25;
+					else tile = 36;
+				}
+				else if (empty[BR]) tile = 37; 
+				else tile = 21;
+			}
+			else if (empty[BL]) {
+				if (empty[BR]) tile = 45;
+				else tile = 30;
+			}
+			else if (empty[BR]) tile = 51;
+			else tile = 21;
+		}
+		else if (empty[TR]) {
+			if (empty[BL]) {
+				if (empty[BR]) tile = 46;
+				else tile = 42;
+			}
+			else if (empty[BR]) tile = 29;
+			else tile = 27;
+		}
+		else if (empty[BL]) {
+			if (empty[BR]) tile = 20;
 			else tile = 19;
 		}
-		else if (adjacents[3] /*Left*/) {
+		else if (empty[BR]) tile = 18;
-			if (adjacents[5] /*Right*/) tile = 39;
+		else {
-			else if (adjacents[2] /*Top right*/) {
+			if (wall >= 54 && wall <= 60) return -1;
-				if (adjacents[8] /*Bottom right*/) tile = 36;
+			tile = 54 + Math.floor(Math.random() * 6);
-				else tile = 51;
-			}
-			else if (adjacents[8] /*Bottom right*/) tile = 42;
-			else tile = 11;
 		}
-		else if (adjacents[5] /*Right*/) {
-			if (adjacents[0] /*Top left*/) {
-				if (adjacents[6] /*Bottom left*/) tile = 38;
-				else tile = 52;
-			}
-			else if (adjacents[6] /*Bottom left*/) tile = 43;
-			else tile = 9;
-		}
-		else if (adjacents[0] /*Top Left*/) {
-			if (adjacents[2] /*Top right*/) {
-				if (adjacents[6] /*Bottom left*/) {
-					if (adjacents[8] /*Bottom right*/) tile = 37;
-					else tile = 6;
-				}
-				else if (adjacents[8] /*Bottom right*/) tile = 7;
-				else tile = 4;
-			}
-			else if (adjacents[6] /*Bottom left*/) {
-				if (adjacents[8] /*Bottom right*/) tile = 15;
-				else tile = 12;
-			}
-			else if (adjacents[8] /*Bottom right*/) tile = 33;
-			else tile = 20;
-		}
-		else if (adjacents[2] /*Top right*/) {
-			if (adjacents[6] /*Bottom left*/) {
-				if (adjacents[8] /*Bottom right*/) tile = 16;
-				else tile = 34;
-			}
-			else if (adjacents[8] /*Bottom right*/) tile = 14;
-			else tile = 18; 
-		}
-		else if (adjacents[6] /*Bottom left*/) {
-			if (adjacents[8] /*Bottom Right*/) tile = 22;
-			else tile = 2;
-		}
-		else if (adjacents[8] /*Bottom right*/) tile = 0;
 
 		return tile;
 	}

src/TilesetCanvas.ts

@@ -14,10 +14,11 @@ class TilesetCanvas {
 		this.manager = manager;
 
 		this.res = res;
-		this.width = Math.floor(1024 / (9*this.res));
+		this.width = Math.floor(1024 / this.res / 9);
-		this.height = Math.floor(1024 / (7*this.res));
+		this.height = Math.floor(1024 / this.res / 7);
 
-		this.canvas = manager.scene.textures.createCanvas("tileset_" + res + (wall ? "_wall" : "_ground"), 1024, 1024);
+		this.canvas = manager.scene.textures.createCanvas("tileset_" + res + (wall ? "_wall" : "_ground"), 
+			this.width * 9 * this.res, this.height * 7 * this.res);
 	}
 
 	addTileset(key: string) {
@@ -28,4 +29,17 @@ class TilesetCanvas {
 		this.indMap[this.manager.currentInd] = this.indexes.length;
 		this.indexes.push(this.manager.currentInd++);
 	}
+
+	getGlobalIndex(local: number, tileset: number) {
+		const lX = local % 9;
+		const lY = Math.floor(local / 9);
+		const gX = tileset % this.width;
+		const gY = Math.floor(tileset / this.width);
+
+		const xx = lX + gX * 9;
+		const yy = lY + gY * 9;
+
+		// console.log(lX, lY, this.width);
+		return yy * this.width * 9 + xx;
+	}
 }

src/UIView.ts

@@ -30,9 +30,6 @@ class UIView {
 
 		this.tileSidebar = new UITileSidebar(this.scene, 0, 0);
 		this.o.add(this.tileSidebar);
-		this.tileSidebar.addPalette(0);
-		this.tileSidebar.addPalette(1);
-		this.tileSidebar.addPalette(2);
 
 	}
 

src/data/TILESETS.ts

@@ -0,0 +1,16 @@
+interface TilesetFileProps {
+	name: string,
+	key: string,
+	file: string,
+	res: number
+}
+
+const WALLS: TilesetFileProps[] = [
+	{ name: "Dungeon Wall", 										key: "wall_dungeon", 								file: "res/tileset/wall_dungeon", 			res: 16 },
+	{ name: "Wood Wall",												key: "wall_wood", 									file: "res/tileset/wall_wood", 					res: 16 },
+];
+
+const GROUNDS: TilesetFileProps[] = [
+	{ name: "Cave Floor",	 											key: "ground_cave", 								file: "res/tileset/ground_cave",		 		res: 16 },
+	{ name: "Lawn",															key: "ground_wood", 								file: "res/tileset/ground_grass", 			res: 16 },
+];

src/manip/ArchitectMode.ts

@@ -10,7 +10,7 @@ class ArchitectMode {
 	pointerDown: boolean = false;
 	pointerPrimaryDown: boolean = false;
 
-	manipulated: {pos: Vec2, solid: boolean, oldSolid: boolean, palette: number, oldPalette: number}[] = [];
+	manipulated: {pos: Vec2, lastWall: number, wall: number}[] = [];
 
 	constructor(scene: MainScene) {
 		this.scene = scene;
@@ -183,20 +183,19 @@ class ArchitectMode {
 	}
 
 	placeTileAndPushManip(manipPos: Vec2, solid: boolean) {
-		let wasSolid 		= this.scene.map.getSolid  (manipPos.x, manipPos.y) != -1;
+		let tile = solid ? 1 : -1;
-		let lastPalette = this.scene.map.getPalette(manipPos.x, manipPos.y);
 
+		let lastWall = this.scene.map.getWall(manipPos.x, manipPos.y);
+		if (tile == lastWall) return;
 
-		let changed = this.scene.map.setSolid(manipPos.x, manipPos.y, this.scene.activePalette, solid); 
+		this.scene.map.setWall(manipPos.x, manipPos.y, tile);
-		if (!changed) return;
 
 		this.manipulated.push({
 			pos: manipPos, 
-			solid: solid,
+			lastWall: lastWall, 
-			oldSolid: wasSolid, 
+			wall: tile
-			palette: this.scene.activePalette, 
-			oldPalette: lastPalette
 		});
+
 	}
 
 	cleanup() {

src/scene/LoadScene.ts

@@ -10,7 +10,6 @@ class LoadScene extends Phaser.Scene {
 
 		this.load.bitmapFont('font1x', '/res/font/font1.png', '/res/font/font1.fnt');
 		this.load.bitmapFont('font2x', '/res/font/font2.png', '/res/font/font2.fnt');
-		this.load.bitmapFont('font3x', '/res/font/font3.png', '/res/font/font3.fnt');
 
 		for (let s of this.cache.text.get("assets").split("\n")) {
 			let tokens = s.split(" ");
@@ -22,6 +21,14 @@ class LoadScene extends Phaser.Scene {
 			if (t.split_by != undefined) this.load.spritesheet(t.key, t.file + ".png", {frameWidth: t.split_by, frameHeight: t.split_by});
 			else this.load.image(t.key, t.file + ".png");
 		}
+
+		for (let t of WALLS) {
+			this.load.image(t.key, t.file + ".png");
+		}
+
+		for (let t of GROUNDS) {
+			this.load.image(t.key, t.file + ".png");
+		}
 	}
 
 	create(): void {

src/scene/MainScene.ts

@@ -72,23 +72,6 @@ class MainScene extends Phaser.Scene {
 
 		this.architect = new ArchitectMode(this);
 		this.token = new TokenMode(this);
-
-		// let tileset = new TilesetCanvas(this, 16, 16);
-		// tileset.addPalette("tileset_ground_dirt");
-		// tileset.addPalette("tileset_ground_grass");
-		// tileset.addPalette("tileset_wall_wood");
-		// tileset.addPalette("tileset_wall_stone");
-		// // this.add.sprite(-300, 0, "cursor");
-		// setTimeout(() => this.add.sprite(-300, 0, "tileset_16"), 100);
-
-		let map = new TilesetManager(this);
-		map.addTileset("tileset_ground_dirt", false);
-		map.addTileset("tileset_ground_grass", false);
-		map.addTileset("tileset_wall_stone", true);
-		map.addTileset("tileset_wall_wood", true);
-
-		this.add.sprite(-300, 0, "tileset_16_ground");
-		this.add.sprite(-800, 0, "tileset_16_wall");
 	}
 
 	update(time: number, delta: number): void {

src/ui/UITileSidebar.ts

@@ -2,22 +2,30 @@ class UITileSidebar extends UISidebar {
 	
 	constructor(scene: MainScene, x: number, y: number) {
 		super(scene, x, y);
+
+		for (let tileset of WALLS) {
+			this.addTileset(tileset.key);
+		}
+
+		for (let tileset of GROUNDS) {
+			this.addTileset(tileset.key);
+		}
 	}
 
 	elemClick(x: number, y: number): void {
 		this.scene.activePalette = this.elems[x + y * 3];
 	}
 
-	addPalette(tile: number) {
+	addTileset(tileset: string) {
 		let p = this.elems.length;
 		let x = p % 3;
 		let y = Math.floor(p / 3);
-		this.elems.push(tile);
+		this.elems.push(tileset);
 
-		let spr = new Phaser.GameObjects.Sprite(this.scene, 12 + x * 21 * 3 - 22 * 2, 12 + y * 21 * 3 - 22 * 2, "tileset_" + tile);
+		let spr = new Phaser.GameObjects.Sprite(this.scene, 12 + x * 21 * 3 - 187, 12 + y * 21 * 3 - 2, tileset);
 		spr.setOrigin(0, 0);
-		spr.setCrop(21, 21, 26, 26);
+		spr.setCrop(112, 0, 32, 32);
-		spr.setScale(2);
+		spr.setScale(1.65);
 		this.sprites.push(spr);
 		this.list.push(spr);
 		let spr2 = new Phaser.GameObjects.Sprite(this.scene, 9 + x * 21 * 3, 9 + y * 21 * 3, "ui_sidebar_overlay");

tool.js

@@ -140,7 +140,7 @@ var HistoryElement = /** @class */ (function () {
         if (this.type == "tile") {
             for (var _i = 0, _a = this.data; _i < _a.length; _i++) {
                 var tile = _a[_i];
-                this.scene.map.setSolid(tile.pos.x, tile.pos.y, tile.oldPalette, tile.oldSolid);
+                this.scene.map.setWall(tile.pos.x, tile.pos.y, tile.lastWall);
             }
         }
         else if (this.type == "token_modify") {
@@ -173,7 +173,7 @@ var HistoryElement = /** @class */ (function () {
         if (this.type == "tile") {
             for (var _i = 0, _a = this.data; _i < _a.length; _i++) {
                 var tile = _a[_i];
-                this.scene.map.setSolid(tile.pos.x, tile.pos.y, tile.palette, tile.solid);
+                this.scene.map.setWall(tile.pos.x, tile.pos.y, tile.wall);
             }
         }
         else if (this.type == "token_modify") {
@@ -296,33 +296,45 @@ var TextInput = /** @class */ (function (_super) {
     }
     return TextInput;
 }(ChatBox));
-var TileMap = /** @class */ (function () {
+var Tilemap = /** @class */ (function () {
-    function TileMap(key, scene, xwid, ywid) {
+    function Tilemap(key, scene, xwid, ywid) {
+        this.dimensions = new Vec2();
+        this.layers = {};
         this.SOLID = 10;
-        this.layers = [];
-        this.key = key;
         this.scene = scene;
-        this.dimensions = { x: xwid, y: ywid };
+        this.dimensions = new Vec2(xwid, ywid);
-        this.solid_at = [];
+        this.groundAt = [];
-        this.palette_at = [];
+        this.wallAt = [];
         for (var i = 0; i < xwid; i++) {
-            this.solid_at[i] = [];
+            this.groundAt[i] = [];
-            this.palette_at[i] = [];
+            this.wallAt[i] = [];
             for (var j = 0; j < ywid; j++) {
-                this.solid_at[i][j] = false;
+                this.groundAt[i][j] = -1;
-                this.palette_at[i][j] = 1;
+                this.wallAt[i][j] = -1;
             }
         }
-        this.map = this.scene.add.tilemap(null, 16, 16, 0, 0);
+        this.manager = new TilesetManager(scene);
-        for (var i = 0; i < this.scene.TILESET_COUNT; i++) {
+        for (var _i = 0, WALLS_1 = WALLS; _i < WALLS_1.length; _i++) {
-            var tileset = this.map.addTilesetImage("tileset_" + i, "tileset_" + i, 16, 16, 0, 0);
+            var tileset = WALLS_1[_i];
-            this.layers[i] = null;
+            this.manager.addTileset(tileset.key, true);
+        }
+        for (var _a = 0, GROUNDS_1 = GROUNDS; _a < GROUNDS_1.length; _a++) {
+            var tileset = GROUNDS_1[_a];
+            this.manager.addTileset(tileset.key, false);
+        }
+        this.map = this.scene.add.tilemap(null, 16, 16, 0, 0);
+        for (var _b = 0, _c = Object.keys(this.manager.tilesets); _b < _c.length; _b++) {
+            var res = _c[_b];
+            this.createLayers(parseInt(res));
+        }
+        for (var x = 0; x < this.dimensions.x; x++) {
+            for (var y = 0; y < this.dimensions.y; y++) {
+                this.layers[16].ground.putTileAt(3, x, y);
+            }
         }
-        this.createLayer(0);
-        this.layers[0].setInteractive();
         this.map.addTilesetImage("grid_tile", "grid_tile", 16, 16, 0, 0);
         this.map.setLayer("grid");
-        var gridlayer = this.map.createBlankDynamicLayer("grid", "grid_tile", 0, 0, 50 * 16, 50 * 16, 16, 16);
+        var gridlayer = this.map.createBlankDynamicLayer("grid", "grid_tile", 0, 0, this.dimensions.x, this.dimensions.y, 16, 16);
         gridlayer.setScale(4, 4);
         gridlayer.setDepth(500);
         for (var i = 0; i < xwid; i++) {
@@ -331,207 +343,223 @@ var TileMap = /** @class */ (function () {
                     gridlayer.putTileAt(0, i, j);
             }
         }
-        for (var x = 0; x < this.dimensions.x; x++) {
-            for (var y = 0; y < this.dimensions.y; y++) {
-                this.setTile(x, y, 1, 13);
-            }
-        }
     }
-    TileMap.prototype.createLayer = function (palette) {
+    Tilemap.prototype.createLayers = function (res) {
-        this.map.setLayer("layer_" + palette);
+        this.map.addTilesetImage("tileset_" + res + "_ground", "tileset_" + res + "_ground", res, res, 0, 0);
-        this.layers[palette] = this.map.createBlankDynamicLayer("layer_" + palette, "tileset_" + palette, 0, 0, 50 * 16, 50 * 16, 16, 16);
+        this.map.addTilesetImage("tileset_" + res + "_wall", "tileset_" + res + "_wall", res, res, 0, 0);
-        this.layers[palette].setScale(4, 4);
+        this.map.setLayer("layer_" + res + "_ground");
-        this.layers[palette].setDepth(-500 + palette);
+        var ground = this.map.createBlankDynamicLayer("layer_" + res + "_ground", "tileset_" + res + "_ground", 0, 0, this.dimensions.x, this.dimensions.y, res, res);
+        ground.setScale(4 / (res / 16), 4 / (res / 16));
+        ground.setDepth(-1000 + res);
+        this.map.setLayer("layer_" + res + "_wall");
+        var wall = this.map.createBlankDynamicLayer("layer_" + res + "_wall", "tileset_" + res + "_wall", 0, 0, this.dimensions.x, this.dimensions.y, res, res);
+        wall.setScale(4 / (res / 16), 4 / (res / 16));
+        wall.setDepth(-500 + res);
+        this.layers[res] = { ground: ground, wall: wall };
     };
-    TileMap.prototype.setSolid = function (x, y, palette, solid) {
+    Tilemap.prototype.setWall = function (x, y, tileset) {
         if (x < 0 || y < 0 || x > this.dimensions.x - 1 || y > this.dimensions.y - 1)
             return false;
-        var oldPalette = this.palette_at[x][y];
+        if (this.wallAt[x][y] == tileset)
-        var wasSolid = this.solid_at[x][y];
-        if (wasSolid == solid && palette == oldPalette)
             return false;
-        this.setTile(x, y, palette, (solid ? this.SOLID : 13));
+        if (this.wallAt[x][y] != -1) {
-        this.calculateEdgesAround(x, y);
+            this.layers[this.manager.locations[this.wallAt[x][y]].res].wall.removeTileAt(x, y, true);
+            this.wallAt[x][y] = -1;
+        }
+        if (tileset != -1) {
+            this.layers[this.manager.locations[tileset].res].wall.putTileAt(this.manager.tilesets[this.manager.locations[tileset].res].wall.getGlobalIndex(54, tileset), x, y);
+            this.wallAt[x][y] = tileset;
+        }
+        this.calculateSmartTilesAround(x, y);
         return true;
     };
-    TileMap.prototype.getSolid = function (x, y) {
+    Tilemap.prototype.setWallRaw = function (x, y, tileset, tile) {
-        if (x < 0 || y < 0 || x > this.dimensions.x - 1 || y > this.dimensions.y - 1)
+        if (this.wallAt[x][y] != -1) {
-            return -1;
+            this.layers[this.manager.locations[tileset].res].wall.removeTileAt(x, y, true);
-        return (this.solid_at[x][y]) ? this.palette_at[x][y] : -1;
+            this.wallAt[x][y] = -1;
+        }
+        this.layers[this.manager.locations[tileset].res].wall.putTileAt(this.manager.tilesets[this.manager.locations[tileset].res].wall.getGlobalIndex(tile, tileset), x, y);
+        this.wallAt[x][y] = tileset;
     };
-    TileMap.prototype.getPalette = function (x, y) {
+    Tilemap.prototype.getWall = function (x, y) {
-        if (x < 0 || y < 0 || x > this.dimensions.x - 1 || y > this.dimensions.y - 1)
+        return this.wallAt[clamp(x, 0, this.dimensions.x - 1)][clamp(y, 0, this.dimensions.y - 1)];
-            return -1;
-        return this.palette_at[x][y];
     };
-    TileMap.prototype.setTile = function (x, y, palette, tid) {
+    Tilemap.prototype.getGround = function (x, y) {
-        if (this.layers[palette] == null)
+        return this.groundAt[clamp(x, 0, this.dimensions.x - 1)][clamp(y, 0, this.dimensions.y - 1)];
-            this.createLayer(palette);
-        this.layers[this.palette_at[x][y]].removeTileAt(x, y, true);
-        this.layers[palette].putTileAt(tid, x, y);
-        this.palette_at[x][y] = palette;
-        this.solid_at[x][y] = tid == this.SOLID;
     };
-    TileMap.prototype.calculateEdgesAround = function (x, y) {
+    Tilemap.prototype.calculateSmartTilesAround = function (x, y) {
         for (var i = clamp(x - 1, this.dimensions.x - 1, 0); i <= clamp(x + 1, this.dimensions.x - 1, 0); i++) {
             for (var j = clamp(y - 1, this.dimensions.y - 1, 0); j <= clamp(y + 1, this.dimensions.y - 1, 0); j++) {
-                var tile = this.calculateEdges(i, j);
+                var tile = this.calculateSmartTile(i, j);
                 if (tile != -1)
-                    this.setTile(i, j, this.palette_at[i][j], tile);
+                    this.setWallRaw(i, j, this.wallAt[i][j], tile);
             }
         }
     };
-    TileMap.prototype.getSurroundingSolid = function (x, y) {
+    Tilemap.prototype.getWallsAround = function (x, y) {
         var solid = [];
         for (var i = -1; i <= 1; i++) {
             for (var j = -1; j <= 1; j++) {
-                solid.push(this.getSolid(x + j, y + i) != -1);
+                solid.push(this.getWall(x + j, y + i) != -1);
             }
         }
         return solid;
     };
-    TileMap.prototype.calculateEdges = function (x, y) {
+    Tilemap.prototype.calculateSmartTile = function (x, y) {
-        if (this.getSolid(x, y) != -1)
+        var wall = this.getWall(x, y);
+        if (wall == -1)
             return -1;
-        var adjacents = this.getSurroundingSolid(x, y);
+        var TL = 0, T = 1, TR = 2, L = 3, C = 4, R = 5, BL = 6, B = 7, BR = 8;
-        var tile = 13;
+        var empty = this.getWallsAround(x, y).map(function (b) { return !b; });
-        if (adjacents[7] /*Bottom*/) {
+        var tile = 54;
-            if (adjacents[1] /*Top*/) {
+        if (empty[T]) {
-                if (adjacents[5] /*Right*/) {
+            if (empty[B]) {
-                    if (adjacents[3] /*Left*/)
+                if (empty[L]) {
-                        tile = 49;
+                    if (empty[R])
+                        tile = 33;
                     else
-                        tile = 59;
+                        tile = 15;
                 }
-                else if (adjacents[3] /*Left*/)
+                else if (empty[R])
-                    tile = 57;
-                else
-                    tile = 58;
-            }
-            else if (adjacents[3] /*Left*/) {
-                if (adjacents[5] /*Right*/)
-                    tile = 48;
-                else if (adjacents[2] /*Top right*/)
-                    tile = 45;
-                else
-                    tile = 21;
-            }
-            else if (adjacents[5] /*Right*/) {
-                if (adjacents[0] /*Top left*/)
-                    tile = 47;
-                else
-                    tile = 23;
-            }
-            else if (adjacents[0] /*Top left*/) {
-                if (adjacents[2] /*Top Right*/)
-                    tile = 46;
-                else
-                    tile = 41;
-            }
-            else if (adjacents[2] /*Top Right*/)
-                tile = 40;
-            else
-                tile = 1;
-        }
-        else if (adjacents[1] /*Top*/) {
-            if (adjacents[3] /*Left*/) {
-                if (adjacents[5] /*Right*/)
-                    tile = 30;
-                else if (adjacents[8] /*Bottom right*/)
-                    tile = 27;
-                else
-                    tile = 3;
-            }
-            else if (adjacents[5] /*Right*/) {
-                if (adjacents[6] /*Bottom left*/)
-                    tile = 29;
-                else
                     tile = 5;
+                else
+                    tile = 2;
             }
-            else if (adjacents[6] /*Bottom left*/) {
+            else if (empty[L]) {
-                if (adjacents[8] /*Bottom right*/)
+                if (empty[R])
-                    tile = 28;
+                    tile = 14;
+                else if (empty[BR])
+                    tile = 0;
+                else
+                    tile = 7;
+            }
+            else if (empty[R]) {
+                if (empty[BL])
+                    tile = 1;
+                else
+                    tile = 8;
+            }
+            else {
+                if (empty[BL]) {
+                    if (empty[BR])
+                        tile = 3;
+                    else
+                        tile = 40;
+                }
+                else if (empty[BR])
+                    tile = 41;
+                else
+                    tile = 31;
+            }
+        }
+        else if (empty[B]) {
+            if (empty[L]) {
+                if (empty[R])
+                    tile = 6;
+                else if (empty[TR])
+                    tile = 9;
+                else
+                    tile = 16;
+            }
+            else if (empty[R]) {
+                if (empty[TL])
+                    tile = 10;
+                else
+                    tile = 17;
+            }
+            else {
+                if (empty[TL]) {
+                    if (empty[TR])
+                        tile = 4;
+                    else
+                        tile = 49;
+                }
+                else if (empty[TR])
+                    tile = 50;
                 else
                     tile = 32;
             }
-            else if (adjacents[8] /*Bottom right*/)
+        }
-                tile = 31;
+        else if (empty[L]) {
+            if (empty[R])
+                tile = 11;
+            else {
+                if (empty[TR]) {
+                    if (empty[BR])
+                        tile = 12;
+                    else
+                        tile = 38;
+                }
+                else if (empty[BR])
+                    tile = 47;
+                else
+                    tile = 22;
+            }
+        }
+        else if (empty[R]) {
+            if (empty[TL]) {
+                if (empty[BL])
+                    tile = 13;
+                else
+                    tile = 39;
+            }
+            else if (empty[BL])
+                tile = 48;
+            else
+                tile = 23;
+        }
+        else if (empty[TL]) {
+            if (empty[TR]) {
+                if (empty[BL]) {
+                    if (empty[BR])
+                        tile = 25;
+                    else
+                        tile = 36;
+                }
+                else if (empty[BR])
+                    tile = 37;
+                else
+                    tile = 21;
+            }
+            else if (empty[BL]) {
+                if (empty[BR])
+                    tile = 45;
+                else
+                    tile = 30;
+            }
+            else if (empty[BR])
+                tile = 51;
+            else
+                tile = 21;
+        }
+        else if (empty[TR]) {
+            if (empty[BL]) {
+                if (empty[BR])
+                    tile = 46;
+                else
+                    tile = 42;
+            }
+            else if (empty[BR])
+                tile = 29;
+            else
+                tile = 27;
+        }
+        else if (empty[BL]) {
+            if (empty[BR])
+                tile = 20;
             else
                 tile = 19;
         }
-        else if (adjacents[3] /*Left*/) {
+        else if (empty[BR])
-            if (adjacents[5] /*Right*/)
+            tile = 18;
-                tile = 39;
+        else {
-            else if (adjacents[2] /*Top right*/) {
+            if (wall >= 54 && wall <= 60)
-                if (adjacents[8] /*Bottom right*/)
+                return -1;
-                    tile = 36;
+            tile = 54 + Math.floor(Math.random() * 6);
-                else
-                    tile = 51;
-            }
-            else if (adjacents[8] /*Bottom right*/)
-                tile = 42;
-            else
-                tile = 11;
         }
-        else if (adjacents[5] /*Right*/) {
-            if (adjacents[0] /*Top left*/) {
-                if (adjacents[6] /*Bottom left*/)
-                    tile = 38;
-                else
-                    tile = 52;
-            }
-            else if (adjacents[6] /*Bottom left*/)
-                tile = 43;
-            else
-                tile = 9;
-        }
-        else if (adjacents[0] /*Top Left*/) {
-            if (adjacents[2] /*Top right*/) {
-                if (adjacents[6] /*Bottom left*/) {
-                    if (adjacents[8] /*Bottom right*/)
-                        tile = 37;
-                    else
-                        tile = 6;
-                }
-                else if (adjacents[8] /*Bottom right*/)
-                    tile = 7;
-                else
-                    tile = 4;
-            }
-            else if (adjacents[6] /*Bottom left*/) {
-                if (adjacents[8] /*Bottom right*/)
-                    tile = 15;
-                else
-                    tile = 12;
-            }
-            else if (adjacents[8] /*Bottom right*/)
-                tile = 33;
-            else
-                tile = 20;
-        }
-        else if (adjacents[2] /*Top right*/) {
-            if (adjacents[6] /*Bottom left*/) {
-                if (adjacents[8] /*Bottom right*/)
-                    tile = 16;
-                else
-                    tile = 34;
-            }
-            else if (adjacents[8] /*Bottom right*/)
-                tile = 14;
-            else
-                tile = 18;
-        }
-        else if (adjacents[6] /*Bottom left*/) {
-            if (adjacents[8] /*Bottom Right*/)
-                tile = 22;
-            else
-                tile = 2;
-        }
-        else if (adjacents[8] /*Bottom right*/)
-            tile = 0;
         return tile;
     };
-    return TileMap;
+    return Tilemap;
 }());
 var TilesetCanvas = /** @class */ (function () {
     function TilesetCanvas(manager, res, wall) {
@@ -539,9 +567,9 @@ var TilesetCanvas = /** @class */ (function () {
         this.indMap = [];
         this.manager = manager;
         this.res = res;
-        this.width = Math.floor(1024 / (9 * this.res));
+        this.width = Math.floor(1024 / this.res / 9);
-        this.height = Math.floor(1024 / (7 * this.res));
+        this.height = Math.floor(1024 / this.res / 7);
-        this.canvas = manager.scene.textures.createCanvas("tileset_" + res + (wall ? "_wall" : "_ground"), 1024, 1024);
+        this.canvas = manager.scene.textures.createCanvas("tileset_" + res + (wall ? "_wall" : "_ground"), this.width * 9 * this.res, this.height * 7 * this.res);
     }
     TilesetCanvas.prototype.addTileset = function (key) {
         var x = this.indexes.length % this.width;
@@ -550,6 +578,16 @@ var TilesetCanvas = /** @class */ (function () {
         this.indMap[this.manager.currentInd] = this.indexes.length;
         this.indexes.push(this.manager.currentInd++);
     };
+    TilesetCanvas.prototype.getGlobalIndex = function (local, tileset) {
+        var lX = local % 9;
+        var lY = Math.floor(local / 9);
+        var gX = tileset % this.width;
+        var gY = Math.floor(tileset / this.width);
+        var xx = lX + gX * 9;
+        var yy = lY + gY * 9;
+        // console.log(lX, lY, this.width);
+        return yy * this.width * 9 + xx;
+    };
     return TilesetCanvas;
 }());
 var TilesetManager = /** @class */ (function () {
@@ -678,9 +716,6 @@ var UIView = /** @class */ (function () {
         }
         this.tileSidebar = new UITileSidebar(this.scene, 0, 0);
         this.o.add(this.tileSidebar);
-        this.tileSidebar.addPalette(0);
-        this.tileSidebar.addPalette(1);
-        this.tileSidebar.addPalette(2);
     };
     UIView.prototype.update = function () {
         this.uiActive = false;
@@ -879,6 +914,14 @@ var WorldView = /** @class */ (function () {
     };
     return WorldView;
 }());
+var WALLS = [
+    { name: "Dungeon Wall", key: "wall_dungeon", file: "res/tileset/wall_dungeon", res: 16 },
+    { name: "Wood Wall", key: "wall_wood", file: "res/tileset/wall_wood", res: 16 },
+];
+var GROUNDS = [
+    { name: "Cave Floor", key: "ground_cave", file: "res/tileset/ground_cave", res: 16 },
+    { name: "Lawn", key: "ground_wood", file: "res/tileset/ground_grass", res: 16 },
+];
 var TOKENS = [
     { name: "Armor 1", key: "tkn_armor_1", file: "res/token/armor_1", split_by: 18 },
     { name: "Cadin 1", key: "tkn_cadin_1", file: "res/token/cadin_1", split_by: 18 },
@@ -1071,17 +1114,15 @@ var ArchitectMode = /** @class */ (function () {
         }
     };
     ArchitectMode.prototype.placeTileAndPushManip = function (manipPos, solid) {
-        var wasSolid = this.scene.map.getSolid(manipPos.x, manipPos.y) != -1;
+        var tile = solid ? 1 : -1;
-        var lastPalette = this.scene.map.getPalette(manipPos.x, manipPos.y);
+        var lastWall = this.scene.map.getWall(manipPos.x, manipPos.y);
-        var changed = this.scene.map.setSolid(manipPos.x, manipPos.y, this.scene.activePalette, solid);
+        if (tile == lastWall)
-        if (!changed)
             return;
+        this.scene.map.setWall(manipPos.x, manipPos.y, tile);
         this.manipulated.push({
             pos: manipPos,
-            solid: solid,
+            lastWall: lastWall,
-            oldSolid: wasSolid,
+            wall: tile
-            palette: this.scene.activePalette,
-            oldPalette: lastPalette
         });
     };
     ArchitectMode.prototype.cleanup = function () {
@@ -1223,7 +1264,6 @@ var LoadScene = /** @class */ (function (_super) {
         this.add.sprite(this.cameras.main.width / 2, this.cameras.main.height / 2, "splash");
         this.load.bitmapFont('font1x', '/res/font/font1.png', '/res/font/font1.fnt');
         this.load.bitmapFont('font2x', '/res/font/font2.png', '/res/font/font2.fnt');
-        this.load.bitmapFont('font3x', '/res/font/font3.png', '/res/font/font3.fnt');
         for (var _i = 0, _a = this.cache.text.get("assets").split("\n"); _i < _a.length; _i++) {
             var s = _a[_i];
             var tokens = s.split(" ");
@@ -1239,6 +1279,14 @@ var LoadScene = /** @class */ (function (_super) {
             else
                 this.load.image(t.key, t.file + ".png");
         }
+        for (var _c = 0, WALLS_2 = WALLS; _c < WALLS_2.length; _c++) {
+            var t = WALLS_2[_c];
+            this.load.image(t.key, t.file + ".png");
+        }
+        for (var _d = 0, GROUNDS_2 = GROUNDS; _d < GROUNDS_2.length; _d++) {
+            var t = GROUNDS_2[_d];
+            this.load.image(t.key, t.file + ".png");
+        }
     };
     LoadScene.prototype.create = function () {
         var _this = this;
@@ -1298,23 +1346,9 @@ var MainScene = /** @class */ (function (_super) {
         this.ui.createElements();
         this.chat = new Chat(this, -10000 + this.cameras.main.width - 309, this.cameras.main.height - 9);
         this.add.existing(this.chat);
-        this.map = new TileMap("gameMap", this, 300, 300);
+        this.map = new Tilemap("gameMap", this, 300, 300);
         this.architect = new ArchitectMode(this);
         this.token = new TokenMode(this);
-        // let tileset = new TilesetCanvas(this, 16, 16);
-        // tileset.addPalette("tileset_ground_dirt");
-        // tileset.addPalette("tileset_ground_grass");
-        // tileset.addPalette("tileset_wall_wood");
-        // tileset.addPalette("tileset_wall_stone");
-        // // this.add.sprite(-300, 0, "cursor");
-        // setTimeout(() => this.add.sprite(-300, 0, "tileset_16"), 100);
-        var map = new TilesetManager(this);
-        map.addTileset("tileset_ground_dirt", false);
-        map.addTileset("tileset_ground_grass", false);
-        map.addTileset("tileset_wall_stone", true);
-        setTimeout(function () { return map.addTileset("tileset_wall_wood", true); }, 1000);
-        this.add.sprite(-300, 0, "tileset_16_ground");
-        this.add.sprite(-800, 0, "tileset_16_wall");
     };
     MainScene.prototype.update = function (time, delta) {
         this.world.update();
@@ -1659,20 +1693,29 @@ var UITileSelector = /** @class */ (function (_super) {
 var UITileSidebar = /** @class */ (function (_super) {
     __extends(UITileSidebar, _super);
     function UITileSidebar(scene, x, y) {
-        return _super.call(this, scene, x, y) || this;
+        var _this = _super.call(this, scene, x, y) || this;
+        for (var _i = 0, WALLS_3 = WALLS; _i < WALLS_3.length; _i++) {
+            var tileset = WALLS_3[_i];
+            _this.addTileset(tileset.key);
+        }
+        for (var _a = 0, GROUNDS_3 = GROUNDS; _a < GROUNDS_3.length; _a++) {
+            var tileset = GROUNDS_3[_a];
+            _this.addTileset(tileset.key);
+        }
+        return _this;
     }
     UITileSidebar.prototype.elemClick = function (x, y) {
         this.scene.activePalette = this.elems[x + y * 3];
     };
-    UITileSidebar.prototype.addPalette = function (tile) {
+    UITileSidebar.prototype.addTileset = function (tileset) {
         var p = this.elems.length;
         var x = p % 3;
         var y = Math.floor(p / 3);
-        this.elems.push(tile);
+        this.elems.push(tileset);
-        var spr = new Phaser.GameObjects.Sprite(this.scene, 12 + x * 21 * 3 - 22 * 2, 12 + y * 21 * 3 - 22 * 2, "tileset_" + tile);
+        var spr = new Phaser.GameObjects.Sprite(this.scene, 12 + x * 21 * 3 - 187, 12 + y * 21 * 3 - 2, tileset);
         spr.setOrigin(0, 0);
-        spr.setCrop(21, 21, 26, 26);
+        spr.setCrop(112, 0, 32, 32);
-        spr.setScale(2);
+        spr.setScale(1.65);
         this.sprites.push(spr);
         this.list.push(spr);
         var spr2 = new Phaser.GameObjects.Sprite(this.scene, 9 + x * 21 * 3, 9 + y * 21 * 3, "ui_sidebar_overlay");