components architecture added to prefabs, traits interface and compon…

…ent added, loader component added

scripts/generate-spritesheet-json-map.js

@@ -3,6 +3,8 @@ import fs from 'fs';
 const numberOfMaxLayers = 9;
 const possibleLayers = [ ... Array(numberOfMaxLayers)].map((_, i) => ++i);
 
+//const c = {};
+
 fs.writeFileSync(`public/spritesheets/spritesheet-map.json`, JSON.stringify(fs.readdirSync('public/sheet_definitions')
     .filter(file => file.includes('.json'))
     .map(file => {
@@ -14,7 +16,12 @@ fs.writeFileSync(`public/spritesheets/spritesheet-map.json`, JSON.stringify(fs.r
         const newData = {};
         Object.entries(data)
           .filter(([key, value]) => !key.includes("layer_"))
-          .forEach(([key, value]) => newData[key] = value);
+          .forEach(([key, value]) => {
+            newData[key] = value;
+            //key === "type_name" ? c[value] = value : null; 
+        });
         return { ... newData, ... { layers }};
     })
-, null, 4));
+, null, 4));
+
+//console.log(c);

src/interfaces/SpritesheetMap.ts

@@ -20,4 +20,88 @@ export interface ISpritesheetMap {
     layers: ILayer[];
 };
 
-export type BodyTypes = "male" | "muscular" | "female" | "child" | "teen" | "pregnant" | "skeleton" | "zombie";
+export type BodyTypes = "male" | "muscular" | "female" | "child" | "teen" | "pregnant" | "skeleton" | "zombie";
+
+export enum CharacterTraitsType {
+    Arms = "arms",
+    Bracers = "bracers",
+    Bauldron = "bauldron",
+    Beard = "beard",
+    Belt = "belt",
+    Sash = "sash",
+    Body = "body",
+    Buckles = "buckles",
+    Cape = "cape",
+    Cape_Trim = "cape_trim",
+    Vest = "vest",
+    Dress = "dress",
+    Eyes = "eyes",
+    Facial = "facial",
+    Earring = "earring",
+    Eyepatch = "eyepatch",
+    Shoes = "shoes",
+    Gloves = "gloves",
+    Hair = "hair",
+    Accessory = "accessory",
+    Hat = "hat",
+    Bandana = "bandana",
+    Visor = "visor",
+    Headcover = "headcover",
+    Ears = "ears",
+    Fins = "fins",
+    Horns = "horns",
+    Nose = "nose",
+    Wrinkes = "wrinkes",
+    Head = "head",
+    Legs = "legs",
+    Apron = "apron",
+    Neck = "neck",
+    Necklace = "necklace",
+    Prosthesis_Hand = "prosthesis_hand",
+    Prosthesis_Leg = "prosthesis_leg",
+    Quiver = "quiver",
+    Shadow = "shadow",
+    Shield = "shield",
+    Shoulders = "shoulders",
+    Tail = "tail",
+    Weapon = "weapon",
+    Overalls = "overalls",
+    Armour = "armour",
+    Bandages = "bandages",
+    Chainmail = "chainmail",
+    Clothes = "clothes",
+    Jacket = "jacket",
+    JacketTrim = "jacket_trim",
+    JacketCollar = "jacket_collar",
+    JacketPockets = "jacket_pockets",
+    WeaponMagicCrystal = "weapon_magic_crystal",
+    Ammo = "ammo",
+    Wings = "wings",
+    WoundArm = "wound_arm",
+    WoundBrain = "wound_brain",
+    WoundEye = "wound_eye",
+    WoundMouth = "wound_mouth",
+    WoundRibs = "wound_ribs",
+    Wrists = "wrists",
+};
+
+
+/**
+ * size per frame (width and height) = 64 pixels
+ * each column have 13 frames
+ * example: `WalkAnimation.Up`, `WalkAnimation.Down` and etc will represents the row
+ */
+
+export enum WalkAnimation {
+    Frames = 8,
+    FrameRate = 9,
+    Up = 9,
+    Left = 10,
+    Down = 11,
+    Right = 12,
+};
+
+/**
+ * @description It will be always `0` considering the Character LPC metrics 
+ */
+export const ANIMATION_FIRST_FRAME = 0;

src/prefabs/CharacterLPC.ts

@@ -1,30 +1,19 @@
 import Phaser from "phaser";
 
-import { ISpritesheetMap, BodyTypes } from "../interfaces/SpritesheetMap";
+import { ISpritesheetMap, BodyTypes, CharacterTraitsType, WalkAnimation, ANIMATION_FIRST_FRAME } from "../interfaces/SpritesheetMap";
 
-/**
- * size per frame (width and height) = 64 pixels
- * each column have 13 frames
- */
 
-
-// their respective rows
-enum Animation {
-    WalkUp = 9,
-    WalkLeft = 10,
-    WalkDown = 11,
-    WalkRight = 12,
-}
-
-const animLength = 8;
 const universalFrameSize = 64;
 const columns = 13;
 
-const directions = [Animation.WalkDown, Animation.WalkUp, Animation.WalkRight, Animation.WalkLeft];
+const directions = [WalkAnimation.Down, WalkAnimation.Up, WalkAnimation.Right, WalkAnimation.Left];
+
+export default class CharacterLPC extends Phaser.GameObjects.Container {
+
+    traits: Map<CharacterTraitsType, Phaser.GameObjects.Sprite> = new Map();
 
-export default class CharacterLPC extends Phaser.GameObjects.Sprite {
     constructor (scene: Phaser.Scene, x: number, y: number) {
-        super(scene, x, y, "");
+        super(scene, x, y);
     }
 
     async loadAssets (bodyType: BodyTypes, variant: string) {
@@ -34,23 +23,24 @@ export default class CharacterLPC extends Phaser.GameObjects.Sprite {
         this.scene.load.spritesheet(`lpc-character-${bodyType}-${variant}-${anim}`, "spritesheets/" + spritesheetMap?.layers[0][bodyType] + variant + ".png", { frameWidth: universalFrameSize, frameHeight: universalFrameSize });
         this.scene.load.start();
         await once(this.scene, `filecomplete-spritesheet-lpc-character-${bodyType}-${variant}-${anim}`);
-        this.setTexture(`lpc-character-${bodyType}-${variant}-${anim}`);
-        const base = this.getRow(anim, 0).name;
-        this.setFrame(base);
+        this.traits.set(CharacterTraitsType.Body, this.scene.add.sprite(0, 0, `lpc-character-${bodyType}-${variant}-${anim}`));
+        this.add(this.traits.get(CharacterTraitsType.Body));
+        //this.setTexture(`lpc-character-${bodyType}-${variant}-${anim}`);
+        const base = this.getRow(anim, ANIMATION_FIRST_FRAME).name;
+        this.traits.get(CharacterTraitsType.Body).setFrame(base);
         this.scene.anims.create({
             key: `${bodyType}-${variant}-${anim}`,
-            frames: this.scene.anims.generateFrameNumbers(`lpc-character-${bodyType}-${variant}-${anim}`, { frames: [ ... Array(animLength)].map((_, num) => base + (num + 1)) }),
+            frames: this.scene.anims.generateFrameNumbers(`lpc-character-${bodyType}-${variant}-${anim}`, { frames: [ ... Array(WalkAnimation.Frames)].map((_, num) => base + (num + 1)) }),
             repeat: -1,
             frameRate: 9
         });
-        this.play(`${bodyType}-${variant}-${anim}`);
+        this.traits.get(CharacterTraitsType.Body).play(`${bodyType}-${variant}-${anim}`);
         this.scene.add.existing(this);
     }
 
-
     getRow(row: number, col: number): any {
         const position = (row - 1) * columns + (col - 1);
-        return (this.scene.textures.getFrame(this.texture.key).texture.frames as any)[position];
+        return (this.scene.textures.getFrame(this.traits.get(CharacterTraitsType.Body).texture.key).texture.frames as any)[position];
     }
 };
 

src/prefabs/components/Loader.ts

@@ -0,0 +1,7 @@
+import Phaser from "phaser";
+
+export default class Loader extends Phaser.Events.EventEmitter {};
+
+async function once (scene: Phaser.Scene, event: string) {
+    return new Promise(resolve => scene.load.once(event, resolve));
+};

src/prefabs/components/Traits.ts

@@ -0,0 +1,7 @@
+import Phaser from "phaser";
+
+import { CharacterTraitsType } from "../../interfaces/SpritesheetMap";
+
+export default class Traits extends Phaser.Events.EventEmitter {
+    map: Map<CharacterTraitsType, Phaser.GameObjects.Sprite> = new Map();
+};