- tile extruder

Author: Robouste

package-lock.json

@@ -6,7 +6,8 @@
   "scripts": {
     "start": "npm run dev",
     "dev": "node esbuild/dev.server.mjs -w",
-    "build": "node esbuild/build.prod.mjs"
+    "build": "node esbuild/build.prod.mjs",
+    "extrude-tilesets": "tsx tools/tile-extruder.ts"
   },
   "author": "Phaser Studio <[email protected]> (https://phaser.io/)",
   "repository": {
@@ -19,16 +20,18 @@
   "homepage": "https://github.com/phaserjs/template-esbuild-ts#readme",
   "license": "MIT",
   "dependencies": {
-    "phaser": "^3.87.0",
-    "tile-extruder": "^2.1.0"
+    "phaser": "^3.87.0"
   },
   "devDependencies": {
     "@jgoz/esbuild-plugin-livereload": "^2.0.5",
+    "@types/node": "^22.10.7",
     "esbuild": "^0.21.2",
     "esbuild-plugin-clean": "^1.0.1",
     "esbuild-plugin-copy": "^2.1.1",
     "esbuild-plugin-inline-image": "^0.0.9",
     "esbuild-serve": "^1.0.1",
+    "tile-extruder": "^2.1.0",
+    "tsx": "^4.19.2",
     "typescript": "^5.4.5"
   }
 }

package.json

@@ -49,7 +49,7 @@ export class AssetsConfig {
       },
       {
         tag: TilesetTag.FOREST_DECORATIVE,
-        url: "tilemaps/tilesets/decorative-tiles.png",
+        url: "tilemaps/tilesets/extruded/decorative-tiles.png",
       },
       {
         tag: TilesetTag.FOREST_WATER_ANIMATION,

public/assets/tilemaps/forest-map.json

@@ -104,7 +104,11 @@ export class Game extends Scene {
     );
     const decorativeTileset = map.addTilesetImage(
       "decorative-tiles",
-      TilesetTag.FOREST_DECORATIVE
+      TilesetTag.FOREST_DECORATIVE,
+      32,
+      32,
+      1,
+      2
     );
 
     this._colliderGroup = this.physics.add.staticGroup();

public/assets/tilemaps/tilesets/extruded/decorative-tiles.png

@@ -0,0 +1,6 @@
+{
+  "printWidth": 120,
+  "useTabs": false,
+  "tabWidth": 2,
+  "singleQuote": false
+}

src/configs/assets.config.ts

@@ -0,0 +1,17 @@
+import { readdirSync } from "fs";
+import { extrudeTilesetToImage } from "tile-extruder";
+
+async function main() {
+  const basePath = "public/assets/tilemaps/tilesets";
+  const tilesets = readdirSync(basePath).filter((file) => file.endsWith(".png"));
+
+  for (const tileset of tilesets) {
+    await extrudeTilesetToImage(32, 32, `${basePath}/${tileset}`, `${basePath}/extruded/${tileset}`);
+  }
+
+  console.log("Tilesets found: ", tilesets);
+
+  // await extrudeTilesetToImage(32, 32, "", "");
+}
+
+main();