feat: switch character

@types/phaser/index.d.ts

@@ -0,0 +1,4 @@
+// @types/phaser/index.d.ts
+/// <reference path="../../node_modules/phaser/types/SpineFile.d.ts" />
+/// <reference path="../../node_modules/phaser/types/SpineGameObject.d.ts" />
+/// <reference path="../../node_modules/phaser/types/SpinePlugin.d.ts" />

src/characters/player.ts

@@ -13,26 +13,34 @@ export class Player extends Phaser.GameObjects.GameObject {
   private keys!: any;
   private dir: AnimationDirection = "front";
   public instance: any;
+  public characterType: CharacterType = "neko";
 
-  constructor(public characterType: CharacterType, public scene: Phaser.Scene) {
+  constructor(public scene: Phaser.Scene, characterType?: CharacterType) {
     super(scene, "player");
+    if (characterType) {
+      this.characterType = characterType;
+    }
+    this.load();
     this.cursors = scene.input.keyboard.createCursorKeys();
     this.keys = scene.input.keyboard.addKeys("W,A,S,D,Shift");
+  }
 
-    // @ts-ignore
-    scene.load.spine(
-      "player",
-      `assets/${characterType}/char.json`,
-      `assets/${characterType}/char.atlas`
-    );
+  load() {
+    ["fukuro", "ghost-neko", "neko", "tv-head"].forEach((char) => {
+      this.scene.load.spine(
+        `${char}-character`,
+        `assets/${char}/char.json`,
+        `assets/${char}/char.atlas`
+      );
+    });
   }
 
-  spawn(config: any) {
-    if (this.instance) return this.instance;
-    // @ts-ignore
+  spawn(config: any = {}) {
+    this.characterType = config.character ?? this.characterType;
+    this.instance?.destroy();
     this.instance = this.scene.make.spine({
       ...config,
-      key: "player",
+      key: `${this.characterType}-character`,
       skinName: "char_default",
       animationName: getBasicAnimation("idle", "front"),
       loop: true,

src/globals.d.ts

@@ -0,0 +1,3 @@
+declare interface Window {
+  SpinePlugin: any;
+}

src/main.ts

@@ -18,7 +18,7 @@ const config: Phaser.Types.Core.GameConfig = {
     scene: [
       {
         key: "SpinePlugin",
-        plugin: (window as any).SpinePlugin,
+        plugin: window.SpinePlugin,
         mapping: "spine",
       },
     ],

src/scenes/Game.ts

@@ -6,6 +6,7 @@ import { Building, buildings } from "../objects/Building";
 export default class Game extends Phaser.Scene {
   private player!: Player;
   private sprites: any[] = [];
+  private keys!: any;
 
   constructor() {
     super({
@@ -22,8 +23,23 @@ export default class Game extends Phaser.Scene {
     });
   }
 
+  spawnPlayer(character?: string) {
+    const player = this.player.spawn({
+      x: 200,
+      y: 200,
+      scale: 0.3,
+      character,
+    });
+    this.matter.add.gameObject(player);
+    player.setFixedRotation(0);
+    this.cameras.main.startFollow(player, true);
+
+    player.body.position.y = player.body.position.y * 1.15;
+  }
+
   preload() {
-    this.player = new Player("neko", this);
+    this.player = new Player(this);
+    this.keys = this.input.keyboard.addKeys("H,J,K,L");
   }
 
   create() {
@@ -36,31 +52,9 @@ export default class Game extends Phaser.Scene {
     const floorTileset = map.addTilesetImage("floor", "floor");
     map.createLayer("Ground", floorTileset, 0, 0);
 
-    const player = this.player.spawn({
-      x: 200,
-      y: 200,
-      scale: 0.3,
-    });
-    this.matter.add.gameObject(player);
-    player.setFixedRotation(0);
-    this.cameras.main.startFollow(player, true);
-
-    // const airportTileset = map.addTilesetImage("airport", "airport");
-    // const buildingsLayer = map.createLayer("Buildings", airportTileset, 0, 0);
-    // this.matter.world.convertTilemapLayer(map.objects);
-
-    // const shapes = this.cache.json.get("airport-shapes");
-    // const object = this.matter.add.sprite(500, 500, "airport", "airport", {
-    //   // @ts-ignore
-    //   shape: shapes.airport,
-    //   isStatic: true,
-    // });
-    // object.setDepth(object.y);
-    // this.buildings.push(object);
-
-    player.body.position.y = player.body.position.y * 1.15;
+    this.spawnPlayer();
 
-    // Test Buildings
+    // Buildings
     const buildingTilesets: Phaser.Tilemaps.Tileset[] = [];
     buildings.forEach((building) => {
       const object = new Building({ game: this, map, ...building });
@@ -77,6 +71,16 @@ export default class Game extends Phaser.Scene {
       return;
     }
 
+    if (this.keys.H.isDown) {
+      this.spawnPlayer("neko");
+    } else if (this.keys.J.isDown) {
+      this.spawnPlayer("fukuro");
+    } else if (this.keys.K.isDown) {
+      this.spawnPlayer("ghost-neko");
+    } else if (this.keys.L.isDown) {
+      this.spawnPlayer("tv-head");
+    }
+
     // Check player vs buildings overlap
     // FIXME: Should have some preliminary check to avoid performance struggle. We don't want
     // to check for overlap every round of render, on every building

tsconfig.json

@@ -14,7 +14,8 @@
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "noImplicitReturns": true,
-    "skipLibCheck": true
+    "skipLibCheck": true,
+    "typeRoots": ["@types", "node_modules/@types", "node_modules/phaser/@types"]
   },
   "include": ["src"]
 }