Hello, my animation is not working right now. It gets the first frame of the animation correctly but it stays that way. I tried to run it in Uptade and I get the same result again…
import { Direction } from "@games/common/enums";
import { ActorProps, IDieable, IMoveable } from "@games/common/interfaces";
import { Actor } from "@games/common/objects";
import GameManager from "../managers/gameManager";
import { Position } from "./enemy/types";
import { GameEvents } from "../events";
import { frameGenerator } from "../utils";
export default class Player extends Actor implements IMoveable, IDieable {
public declare body: Phaser.Physics.Arcade.Body;
declare direction: Direction;
declare velocity: number;
declare initialPos: Position;
constructor(props: ActorProps) {
super(props);
this.direction = Direction.NONE;
this.createAnimations();
this.anims.play("walkUp");
this.velocity = 200;
this.scene.physics.add.existing(this);
this.body.setCircle(31.9).setFriction(0);
this.initialPos = { x: this.x, y: this.y };
this.resetPosition = this.resetPosition.bind(this);
}
protected preUpdate(time: number, delta: number): void {
this.checkInput();
this.move(delta);
}
checkInput(): void {
if (GameManager.instance.gamepad.LEFT) {
this.direction = Direction.LEFT;
} else if (GameManager.instance.gamepad.UP) {
this.direction = Direction.UP;
} else if (GameManager.instance.gamepad.RIGHT) {
this.direction = Direction.RIGHT;
} else if (GameManager.instance.gamepad.DOWN) {
this.direction = Direction.DOWN;
}
}
move(delta: number): void {
// TODO setAngle
switch (this.direction) {
case Direction.LEFT:
this.body.setVelocityX(-this.velocity);
break;
case Direction.UP:
this.body.setVelocityY(-this.velocity);
break;
case Direction.RIGHT:
this.body.setVelocityX(+this.velocity);
break;
case Direction.DOWN:
this.body.setVelocityY(+this.velocity);
break;
}
}
resetPosition(): void {
this.setPosition(this.initialPos.x, this.initialPos.y);
this.direction = Direction.NONE;
}
die(...props: any[]): void {
this.resetPosition();
GameManager.instance.resetGamepad();
GameManager.instance.lives -= 1;
if (GameManager.instance.lives === 0) {
this.scene.game.events.emit(GameEvents.GAMEOVER);
} else {
this.scene.game.events.emit(GameEvents.RESTART_LEVEL);
}
}
createAnimations() {
this.anims.create(
frameGenerator("walkDown", "playerAtlasDown", "walk-down", [
"00000",
"00001",
"00002",
"00003",
"00004",
"00005",
"00006",
"00007",
"00008",
])
);
this.anims.create(
frameGenerator("walkUp", "playerAtlasUp", "walk-up", [
"00000",
"00001",
"00002",
"00003",
"00004",
"00005",
"00006",
"00007",
"00008",
])
);
this.anims.create(
frameGenerator("walkLeft", "playerAtlasLeft", "walk-left", [
"00000",
"00001",
"00002",
"00003",
"00004",
"00005",
"00006",
"00007",
"00008",
])
);
this.anims.create(
frameGenerator("walkRight", "playerAtlasRight", "walk-right", [
"00000",
"00001",
"00002",
"00003",
"00004",
"00005",
"00006",
"00007",
"00008",
])
);
}
}
THIS IS MY frame-genetaror CLASS:
export default function frameGenerator(
key: string,
assetKey: string,
framePrefix: string,
framePostfix: string[] | number[],
frameRate: number = 9,
repeat: number = -1
) {
const frames = framePostfix.map((postfix) => {
return {
key: assetKey,
frame: `${framePrefix}${postfix.toString()}`,
};
});
return {
key,
frameRate,
repeat,
frames,
};
}
this is my json file for animation:
{
"frames": [
{
"filename": "walk-up00000",
"frame": {
"w": 64,
"h": 64,
"x": 0,
"y": 0
},
"anchor": {
"x": 0.5,
"y": 0.5
}
},
{
"filename": "walk-up00001",
"frame": {
"w": 64,
"h": 64,
"x": 64,
"y": 0
},
"anchor": {
"x": 0.5,
"y": 0.5
}
},
{
"filename": "walk-up00002",
"frame": {
"w": 64,
"h": 64,
"x": 128,
"y": 0
},
"anchor": {
"x": 0.5,
"y": 0.5
}
},
{
"filename": "walk-up00003",
"frame": {
"w": 64,
"h": 64,
"x": 192,
"y": 0
},
"anchor": {
"x": 0.5,
"y": 0.5
}
},
{
"filename": "walk-up00004",
"frame": {
"w": 64,
"h": 64,
"x": 256,
"y": 0
},
"anchor": {
"x": 0.5,
"y": 0.5
}
},
{
"filename": "walk-up00005",
"frame": {
"w": 64,
"h": 64,
"x": 320,
"y": 0
},
"anchor": {
"x": 0.5,
"y": 0.5
}
},
{
"filename": "walk-up00006",
"frame": {
"w": 64,
"h": 64,
"x": 384,
"y": 0
},
"anchor": {
"x": 0.5,
"y": 0.5
}
},
{
"filename": "walk-up00007",
"frame": {
"w": 64,
"h": 64,
"x": 448,
"y": 0
},
"anchor": {
"x": 0.5,
"y": 0.5
}
},
{
"filename": "walk-up00008",
"frame": {
"w": 64,
"h": 64,
"x": 512,
"y": 0
},
"anchor": {
"x": 0.5,
"y": 0.5
}
}
],
"meta": {
"description": "Atlas generado con Atlas Packer Gamma V2",
"web": "https://gammafp.github.io/atlas-packer-phaser/"
}
}
this is my png file for animation (spritesheet):
