backup have made cuz i'm getting struggled in the implementation of …

…the animation of 4 walk sides
ivopc · Dec 30, 2023 · e5e946c · e5e946c
1 parent 02ae926
commit e5e946c
Show file tree

Hide file tree

Showing 8 changed files with 193 additions and 27 deletions.
diff --git a/src/Test.ts b/src/Test.ts
@@ -11,13 +11,17 @@ export default class extends Phaser.Scene {
     create () {
         const spritesheetMap = (this.cache.json.get("spritesheet-map") as ISpritesheetMap[]).find(spritesheetMap => spritesheetMap.name === "Body color") as ISpritesheetMap;
         const bodyTypes = ["male", "muscular", "female", "child", "teen", "pregnant", "skeleton", "zombie"];
-        [... Array(200)].forEach(() => {
+        [... Array(1)].forEach(() => {
             const x = Phaser.Math.Between(0, this.cameras.main.width);
             const y = Phaser.Math.Between(0, this.cameras.main.height);
-            new CharacterLPC(this, x, y).setScale(1.5).loadAssets(
+            new CharacterLPC(
+                this, 
                 bodyTypes[Math.floor(Math.random() * bodyTypes.length)] as any, 
                 spritesheetMap.variants[Math.floor(Math.random() * spritesheetMap.variants.length)]
-            );
+            )
+                .setPosition(x, y)
+                .setScale(Phaser.Math.FloatBetween(1, 4))
+                .loadAssets();
         });
     }
 };
diff --git a/src/TestBackup.ts b/src/TestBackup.ts
@@ -0,0 +1,23 @@
+import Phaser from "phaser";
+
+import CharacterLPCBackup from "./prefabs/CharacterLPCBackup";
+import { ISpritesheetMap } from "./interfaces/SpritesheetMap";
+
+export default class extends Phaser.Scene {
+    preload () {
+        this.load.json("spritesheet-map", "spritesheets/spritesheet-map.json");
+    }
+
+    create () {
+        const spritesheetMap = (this.cache.json.get("spritesheet-map") as ISpritesheetMap[]).find(spritesheetMap => spritesheetMap.name === "Body color") as ISpritesheetMap;
+        const bodyTypes = ["male", "muscular", "female", "child", "teen", "pregnant", "skeleton", "zombie"];
+        [... Array(500)].forEach(() => {
+            const x = Phaser.Math.Between(0, this.cameras.main.width);
+            const y = Phaser.Math.Between(0, this.cameras.main.height);
+            new CharacterLPCBackup(this, x, y).setScale(Phaser.Math.FloatBetween(1, 4)).loadAssets(
+                bodyTypes[Math.floor(Math.random() * bodyTypes.length)] as any, 
+                spritesheetMap.variants[Math.floor(Math.random() * spritesheetMap.variants.length)]
+            );
+        });
+    }
+};
diff --git a/src/main.ts b/src/main.ts
@@ -1,6 +1,6 @@
 import Phaser from "phaser";
-import Test from "./Test";
+import TestBackup from "./TestBackup";
 
 new Phaser.Game({
-  scene: [Test]
+  scene: [TestBackup]
 });
diff --git a/src/prefabs/CharacterLPC.ts b/src/prefabs/CharacterLPC.ts
@@ -12,30 +12,56 @@ export default class CharacterLPC extends Phaser.GameObjects.Container {
 
     traits: Map<CharacterTraitsType, Phaser.GameObjects.Sprite> = new Map();
 
-    constructor (scene: Phaser.Scene, x: number, y: number) {
-        super(scene, x, y);
+    bodyType: BodyTypes; 
+    variant: string;
+
+    constructor (scene: Phaser.Scene, bodyType: BodyTypes, variant: string) {
+        super(scene, 0, 0);
+        this.bodyType = bodyType;
+        this.variant = variant;
     }
 
-    async loadAssets (bodyType: BodyTypes, variant: string) {
+    async loadAssets () {
         const anim = directions[Math.floor(Math.random() * directions.length)]; 
+        this.traits.set(CharacterTraitsType.Body, this.scene.add.sprite(0, 0, `lpc-character-${this.bodyType}-${this.variant}-${anim}`));
+        this.add(this.traits.get(CharacterTraitsType.Body));
+        await this.load();
+        this.facing = anim;
+        //this.setTexture(`lpc-character-${bodyType}-${variant}-${anim}`);
+        //const base = this.getRow(anim, ANIMATION_FIRST_FRAME).name;
+        //this.traits.get(CharacterTraitsType.Body).setFrame(base);
+        //this.traits.get(CharacterTraitsType.Body);
+        this.scene.add.existing(this);
+    }
+
+    async load () {
         const spritesheetMaps = this.scene.cache.json.get("spritesheet-map") as ISpritesheetMap[];
         const spritesheetMap = spritesheetMaps.find(spritesheetMap => spritesheetMap.name === "Body color");
-        this.scene.load.spritesheet(`lpc-character-${bodyType}-${variant}-${anim}`, "spritesheets/" + spritesheetMap?.layers[0][bodyType] + variant + ".png", { frameWidth: universalFrameSize, frameHeight: universalFrameSize });
+        console.log(spritesheetMap, "spritesheets/" + spritesheetMap?.layers[0][this.bodyType] + this.variant + ".png");
+        directions.forEach(direction => {
+            this.scene.load.spritesheet(`lpc-character-${this.bodyType}-${this.variant}-${direction}`, "spritesheets/" + spritesheetMap?.layers[0][this.bodyType] + this.variant + ".png", { frameWidth: universalFrameSize, frameHeight: universalFrameSize });
+        });
         this.scene.load.start();
-        await once(this.scene, `filecomplete-spritesheet-lpc-character-${bodyType}-${variant}-${anim}`);
-        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(WalkAnimation.Frames)].map((_, num) => base + (num + 1)) }),
-            repeat: -1,
-            frameRate: 9
+        await Promise.all(directions.map(direction => once(this.scene, `filecomplete-spritesheet-lpc-character-${this.bodyType}-${this.variant}-${direction}`)));
+        console.log("tratratra");
+
+        directions.forEach(direction => {
+            console.log("direction get row", this.getRow(direction, ANIMATION_FIRST_FRAME));
+
+            const row = this.getRow(direction, ANIMATION_FIRST_FRAME).name;
+            this.scene.anims.create({
+                key: `${this.bodyType}-${this.variant}-${direction}`,
+                frames: this.scene.anims.generateFrameNumbers(`lpc-character-${this.bodyType}-${this.variant}-${direction}`, { frames: [ ... Array(WalkAnimation.Frames)].map((_, num) => row + (num + 1)) }),
+                repeat: -1,
+                frameRate: WalkAnimation.FrameRate
+            });
         });
-        this.traits.get(CharacterTraitsType.Body).play(`${bodyType}-${variant}-${anim}`);
-        this.scene.add.existing(this);
+    }
+
+    set facing (direction: WalkAnimation) {
+        this.traits.get(CharacterTraitsType.Body)
+            .setTexture(`lpc-character-${this.bodyType}-${this.variant}-${direction}`)
+            .play(`${this.bodyType}-${this.variant}-${direction}`);
     }
 
     getRow(row: number, col: number): any {

diff --git a/src/prefabs/CharacterLPCBackup.ts b/src/prefabs/CharacterLPCBackup.ts
@@ -0,0 +1,49 @@
+import Phaser from "phaser";
+
+import { ISpritesheetMap, BodyTypes, CharacterTraitsType, WalkAnimation, ANIMATION_FIRST_FRAME } from "../interfaces/SpritesheetMap";
+
+
+const universalFrameSize = 64;
+const columns = 13;
+
+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();
+
+    constructor (scene: Phaser.Scene, x: number, y: number) {
+        super(scene, x, y);
+    }
+
+    async loadAssets (bodyType: BodyTypes, variant: string) {
+        const anim = directions[Math.floor(Math.random() * directions.length)]; 
+        const spritesheetMaps = this.scene.cache.json.get("spritesheet-map") as ISpritesheetMap[];
+        const spritesheetMap = spritesheetMaps.find(spritesheetMap => spritesheetMap.name === "Body color");
+        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.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(WalkAnimation.Frames)].map((_, num) => base + (num + 1)) }),
+            repeat: -1,
+            frameRate: WalkAnimation.FrameRate
+        });
+        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.traits.get(CharacterTraitsType.Body).texture.key).texture.frames as any)[position];
+    }
+};
+
+async function once (scene: Phaser.Scene, event: string) {
+    return new Promise(resolve => scene.load.once(event, resolve));
+};
diff --git a/src/prefabs/components/Animator.ts b/src/prefabs/components/Animator.ts
@@ -0,0 +1,5 @@
+import Phaser from "phaser";
+
+export interface AnimatorEvents {};
+
+export default class Loader extends Phaser.Events.EventEmitter {};
diff --git a/src/prefabs/components/Loader.ts b/src/prefabs/components/Loader.ts
@@ -1,7 +1,5 @@
 import Phaser from "phaser";
 
-export default class Loader extends Phaser.Events.EventEmitter {};
+export interface LoaderEvents {};
 
-async function once (scene: Phaser.Scene, event: string) {
-    return new Promise(resolve => scene.load.once(event, resolve));
-};
+export default class Loader extends Phaser.Events.EventEmitter {};
diff --git a/src/prefabs/components/Traits.ts b/src/prefabs/components/Traits.ts
@@ -1,7 +1,68 @@
 import Phaser from "phaser";
 
-import { CharacterTraitsType } from "../../interfaces/SpritesheetMap";
+import { ISpritesheetMap, BodyTypes, CharacterTraitsType, WalkAnimation, ANIMATION_FIRST_FRAME } from "../../interfaces/SpritesheetMap";
+import CharacterLPC from "../CharacterLPC";
+
+const universalFrameSize = 64;
+const columns = 13;
+
+const directions = [WalkAnimation.Down, WalkAnimation.Up, WalkAnimation.Right, WalkAnimation.Left];
+
+interface ConstructorParams {
+    parent: CharacterLPC;
+    bodyType: BodyTypes;
+    variant: string;
+};
 
 export default class Traits extends Phaser.Events.EventEmitter {
     map: Map<CharacterTraitsType, Phaser.GameObjects.Sprite> = new Map();
+    bodyType: BodyTypes;
+    variant: string;
+    parent: CharacterLPC;
+    scene: Phaser.Scene;
+
+    constructor (scene: Phaser.Scene, params: ConstructorParams) {
+        super();
+        this.scene = scene;
+        this.parent = params.parent; 
+        this.bodyType = params.bodyType;
+        this.variant = params.variant;
+    }
+
+    create (trait: CharacterTraitsType) {
+        const anim = directions[Math.floor(Math.random() * directions.length)]; 
+        const spritesheetMaps = this.scene.cache.json.get("spritesheet-map") as ISpritesheetMap[];
+        const spritesheetMap = spritesheetMaps.find(spritesheetMap => spritesheetMap.name === "Body color");
+        this.scene.load.spritesheet(`lpc-character-${this.bodyType}-${this.variant}-${anim}`, "spritesheets/" + spritesheetMap?.layers[0][this.bodyType] + this.variant + ".png", { frameWidth: universalFrameSize, frameHeight: universalFrameSize });
+        this.scene.load.start();
+        await once(this.scene, `filecomplete-spritesheet-lpc-character-${this.bodyType}-${this.variant}-${anim}`);
+        this.map.set(trait, this.scene.add.sprite(0, 0, `lpc-character-${this.bodyType}-${this.variant}-${anim}`));
+        this.parent.add(this.get(CharacterTraitsType.Body));
+        //this.setTexture(`lpc-character-${bodyType}-${variant}-${anim}`);
+        const base = this.getRow(anim, ANIMATION_FIRST_FRAME).name;
+        this..get(CharacterTraitsType.Body).setFrame(base);
+        this.scene.anims.create({
+            key: `${bodyType}-${variant}-${anim}`,
+            frames: this.scene.anims.generateFrameNumbers(`lpc-character-${this.bodyType}-${this.variant}-${anim}`, { frames: [ ... Array(WalkAnimation.Frames)].map((_, num) => base + (num + 1)) }),
+            repeat: -1,
+            frameRate: WalkAnimation.FrameRate
+        });
+        this.get(CharacterTraitsType.Body).play(`${this.bodyType}-${this.variant}-${anim}`);
+        this.scene.add.existing(this);
+    }
+
+    async load () {}
+
+    get (trait: CharacterTraitsType): Phaser.GameObjects.Sprite {
+        return this.map.get(trait) as Phaser.GameObjects.Sprite ;
+    }
+
+    getRow(row: number, col: number): any {
+        const position = (row - 1) * columns + (col - 1);
+        return (this.scene.textures.getFrame(this.traits.get(CharacterTraitsType.Body).texture.key).texture.frames as any)[position];
+    }
+};
+
+async function once (scene: Phaser.Scene, event: string) {
+    return new Promise(resolve => scene.load.once(event, resolve));
 };