implemented an animation manager

front/src/Entities/Player.ts

@@ -0,0 +1,51 @@
+import {AnimationData} from "../Interfaces/AnimationData";
+import {manageCaracterWalkAnimation} from "../Managers/Animation.manager";
+
+let playerSprit: Phaser.GameObjects.Sprite = null;
+
+export enum PlayerAnimationNames {
+    WalkDown = 'down',
+    WalkLeft = 'left',
+    WalkUp = 'up',
+    WalkRight = 'right',
+}
+
+export const getPlayerAnimations = (): AnimationData[] => {
+    return [{
+        key: PlayerAnimationNames.WalkDown,
+        frameModel: 'player',
+        frameStart: 0,
+        frameEnd: 2,
+        frameRate: 10,
+        repeat: -1
+    }, {
+        key: PlayerAnimationNames.WalkLeft,
+        frameModel: 'player',
+        frameStart: 3,
+        frameEnd: 5,
+        frameRate: 10,
+        repeat: -1
+    }, {
+        key: PlayerAnimationNames.WalkRight,
+        frameModel: 'player',
+        frameStart: 6,
+        frameEnd: 8,
+        frameRate: 10,
+        repeat: -1
+    }, {
+        key: PlayerAnimationNames.WalkUp,
+        frameModel: 'player',
+        frameStart: 9,
+        frameEnd: 11,
+        frameRate: 10,
+        repeat: -1
+    }];
+}
+
+export const instantiate = (sprit: Phaser.GameObjects.Sprite) => {
+    playerSprit = sprit
+}
+
+export const move = (direction: string): void => {
+    //todo: implement player movement here
+}

front/src/GameScene.ts

@@ -1,4 +1,5 @@
 import {RESOLUTION} from "./Enum/EnvironmentVariable";
+import {getAllAnimationsData, manageCaracterWalkAnimation} from "./Managers/Animation.manager";
 
 export class GameScene extends Phaser.Scene {
     private player: Phaser.GameObjects.Sprite;
@@ -60,32 +61,13 @@ export class GameScene extends Phaser.Scene {
         let topLayer = this.Mappy.createStaticLayer("Calque 2", [terrain], 0, 0);
 
         // Let's manage animations of the player
-        this.anims.create({
+        getAllAnimationsData().forEach(d => {
-            key: 'down',
+            this.anims.create({
-            frames: this.anims.generateFrameNumbers('player', { start: 0, end: 2 }),
+                key: d.key,
-            frameRate: 10,
+                frames: this.anims.generateFrameNumbers(d.frameModel, { start: d.frameStart, end: d.frameEnd }),
-            repeat: -1
+                frameRate: d.frameRate,
-        });
+                repeat: d.repeat
-
+            });
-        this.anims.create({
-            key: 'left',
-            frames: this.anims.generateFrameNumbers('player', { start: 3, end: 5 }),
-            frameRate: 10,
-            repeat: -1
-        });
-
-        this.anims.create({
-            key: 'right',
-            frames: this.anims.generateFrameNumbers('player', { start: 6, end: 8 }),
-            frameRate: 10,
-            repeat: -1
-        });
-
-        this.anims.create({
-            key: 'up',
-            frames: this.anims.generateFrameNumbers('player', { start: 9, end: 11 }),
-            frameRate: 10,
-            repeat: -1
         });
 
         //let player = this.add.sprite(450, 450, 'player');
@@ -104,7 +86,7 @@ export class GameScene extends Phaser.Scene {
         let speedMultiplier = this.keyShift.isDown ? 5 : 1;
 
         if (this.keyZ.isDown || this.keyUp.isDown) {
-            this.managePlayerAnimation('up');
+            manageCaracterWalkAnimation(this.player, 'up');
             if (this.player.y > 0) {
                 this.player.setY(this.player.y - 2);
             } else {
@@ -120,7 +102,7 @@ export class GameScene extends Phaser.Scene {
             }
         } else if (this.keyQ.isDown || this.keyLeft.isDown) {
 
-            this.managePlayerAnimation('left');
+            manageCaracterWalkAnimation(this.player, 'left');
             if (this.player.x > 0) {
                 this.player.setX(this.player.x - 2);
             } else {
@@ -136,7 +118,7 @@ export class GameScene extends Phaser.Scene {
             }
         } else if (this.keyS.isDown || this.keyDown.isDown) {
 
-            this.managePlayerAnimation('down');
+            manageCaracterWalkAnimation(this.player, 'down');
             if (this.Mappy.heightInPixels > this.player.y) {
                 this.player.setY(this.player.y + 2);
             } else {
@@ -152,7 +134,7 @@ export class GameScene extends Phaser.Scene {
             }
         } else if (this.keyD.isDown || this.keyRight.isDown) {
 
-            this.managePlayerAnimation('right');
+            manageCaracterWalkAnimation(this.player, 'right');
             if (this.Mappy.widthInPixels > this.player.x) {
                 this.player.setX(this.player.x + 2)
             } else {
@@ -167,19 +149,11 @@ export class GameScene extends Phaser.Scene {
                 this.cameras.main.scrollX = (this.Mappy.widthInPixels - (window.innerWidth / RESOLUTION));
             }
         } else {
-            this.managePlayerAnimation('none');
+            manageCaracterWalkAnimation(this.player, 'none');
         }
         /*this.cameras.main.scrollX = Math.floor(300 + 300 * Math.cos(this.angle));
         this.cameras.main.scrollY = Math.floor(300 + 300 * Math.sin(this.angle));
 
         this.angle = dt * 0.0001;*/
     }
-    
-    managePlayerAnimation(direction: string) {
-        if (!this.player.anims.currentAnim || this.player.anims.currentAnim.key !== direction) {
-            this.player.anims.play(direction);
-        } else if (direction === 'none' && this.player.anims.currentAnim) {
-            this.player.anims.currentAnim.destroy();
-        } 
-    }
 }

front/src/Interfaces/AnimationData.ts

@@ -0,0 +1,8 @@
+export interface AnimationData {
+    key: string;
+    frameRate: number;
+    repeat: number;
+    frameModel: string; //todo use an enum
+    frameStart: number;
+    frameEnd: number;
+}

front/src/Managers/Animation.manager.ts

@@ -0,0 +1,16 @@
+import {AnimationData} from "../Interfaces/AnimationData";
+import {getPlayerAnimations} from "../Entities/Player";
+
+export const getAllAnimationsData = (): AnimationData[] => {
+    return [
+        ...getPlayerAnimations()
+    ]
+};
+
+export const manageCaracterWalkAnimation = (caracter: Phaser.GameObjects.Sprite, direction: string) => {
+    if (!caracter.anims.currentAnim || caracter.anims.currentAnim.key !== direction) {
+        caracter.anims.play(direction);
+    } else if (direction === 'none' && caracter.anims.currentAnim) {
+        caracter.anims.currentAnim.destroy();
+    }
+}