feat: implement basic map with programmatically added conveyer belt o…

…bjects

package.json

@@ -7,11 +7,13 @@
   "license": "MIT",
   "private": true,
   "scripts": {
+    "extrude": "node scripts/extrude.js",
     "watch": "parcel -p 8080 watch src/ui/index.html"
   },
   "devDependencies": {
     "parcel-bundler": "^1.12.4",
     "sass": "^1.26.10",
+    "tile-extruder": "^2.0.6",
     "typescript": "^3.9.7"
   },
   "dependencies": {

scripts/extrude.js

@@ -0,0 +1,37 @@
+const {
+  extrudeTilesetToImage
+} = require("tile-extruder");
+
+const assetsPath = `${__dirname}/../src/ui/assets`;
+const distPath = `${__dirname}/../dist/assets`;
+
+const extrusionAssets = new Map([
+  [
+    `${assetsPath}/environment.png`,
+    {
+      "tileHeight": 32,
+      "tileWidth": 32
+    }
+  ],
+  [
+    `${assetsPath}/objects1.png`,
+    {
+      "tileHeight": 32,
+      "tileWidth": 32
+    }
+  ]
+]);
+
+for (let [asset, options] of extrusionAssets) {
+  const {
+    tileHeight,
+    tileWidth
+  } = options;
+
+  extrudeTilesetToImage(
+    tileWidth,
+    tileHeight,
+    asset,
+    asset.replace(".png", "-extruded.png")
+  );
+}

src/ui/index.ts

@@ -3,8 +3,51 @@ import {
   Scene
 } from "phaser";
 
+import environmentImage from "./assets/environment-extruded.png";
+import landscapeJson    from "./assets/proto1-landscape.json";
+import objects1Image    from "./assets/objects1.png";
+
 import "./index.scss";
 
+class BootScene extends Scene
+{
+  public constructor()
+  {
+    super("boot");
+  }
+
+  public preload()
+  {
+    // Landscape
+
+    this.load.tilemapTiledJSON(
+      "environmentTilemap",
+      landscapeJson
+    );
+
+    this.load.image(
+      "environmentTileset",
+      environmentImage
+    );
+
+    // Objects
+
+    this.load.spritesheet(
+      "objects1",
+      objects1Image,
+      {
+        "frameHeight" : 32,
+        "frameWidth"  : 32
+      }
+    );
+  }
+
+  public create() : void
+  {
+    this.scene.start("helloWorld");
+  }
+}
+
 class HelloWorldScene extends Scene
 {
   public constructor()
@@ -14,8 +57,65 @@ class HelloWorldScene extends Scene
 
   public create()
   {
-    const helloMessage = this.add.text(this.scale.width / 2, 100, "Hello, World!");
-    helloMessage.setOrigin(0.5);
+    // Landscape
+
+    const tileMap = this.make.tilemap({
+      "key" : "environmentTilemap",
+    });
+
+    const tiles = tileMap.addTilesetImage(
+      "environment",
+      "environmentTileset",
+      32,
+      32,
+      1,
+      2
+    );
+
+    tileMap.createStaticLayer(
+      "Base 1",
+      tiles
+    );
+
+    // Animations
+
+    // Conveyer belt
+    this.anims.create({
+      "key"       : "conveyerBelt",
+      "frameRate" : 6,
+      "repeat"    : -1,
+      "frames"  : this.anims.generateFrameNumbers(
+        "objects1",
+        {
+          "frames"  : [0, 8, 16, 24]
+        }
+      )
+    });
+
+    // Scene
+
+    // Conveyer belts
+    this.placeConveyerBelt(128, 96);
+    this.placeConveyerBelt(160, 96);
+    this.placeConveyerBelt(192, 96);
+    this.placeConveyerBelt(224, 96);
+  }
+
+  private placeConveyerBelt(
+    x : number,
+    y : number
+  ) : void
+  {
+    const conveyerBelt = this.add.sprite(
+      x,
+      y,
+      "objects1",
+      0
+    );
+
+    conveyerBelt.play(
+      "conveyerBelt"
+    );
   }
 }
 
@@ -36,6 +136,7 @@ new Game({
   },
 
   "scene" : [
+    BootScene,
     HelloWorldScene
   ]
 });

tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "downlevelIteration": true,
+    "esModuleInterop": true,
+    "noEmitOnError": true,
+    "noImplicitReturns": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "outDir": "dist",
+    "strict": true,
+    "typeRoots": [
+      "./node_modules/@types",
+      "./types"
+    ]
+  },
+  "include": [
+    "./src/**/*.ts"
+  ]
+}

types/static/index.d.ts

@@ -0,0 +1,2 @@
+declare module "*.png";
+declare module "*.json";