# Animation Problem

**URL:** <https://phaser.discourse.group/t/animation-problem/13902>\
**Category:** Phaser 3\
**Created:** [January 18, 2024, 2:52pm UTC](https://phaser.discourse.group/t/animation-problem/13902 "2024-01-18T14:52:00Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![yunusemreagdin](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/yunusemreagdin/32/7737_2.png) [@yunusemreagdin](https://phaser.discourse.group/u/yunusemreagdin)\
**Post date:** [January 18, 2024, 2:52pm UTC](https://phaser.discourse.group/t/animation-problem/13902/1 "2024-01-18T14:52:00Z")

</div>

**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…**

```javascript
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:**

```javascript
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:

```javascript
{
    "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):

![64_walk_up](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/f/ffc880646fe12a31333cfda4497c2648133eda7f.png)

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [January 18, 2024, 4:04pm UTC](https://phaser.discourse.group/t/animation-problem/13902/2 "2024-01-18T16:04:05Z")

</div>

Add

```js
super.preUpdate(time, delta);

```

---

<div class="post-metadata">

**Author:** ![yunusemreagdin](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/yunusemreagdin/32/7737_2.png) [@yunusemreagdin](https://phaser.discourse.group/u/yunusemreagdin)\
**Post date:** [January 19, 2024, 8:25am UTC](https://phaser.discourse.group/t/animation-problem/13902/3 "2024-01-19T08:25:40Z")

</div>

Didn’t work

---

<div class="post-metadata">

**Author:** ![yunusemreagdin](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/yunusemreagdin/32/7737_2.png) [@yunusemreagdin](https://phaser.discourse.group/u/yunusemreagdin)\
**Post date:** [January 19, 2024, 9:09am UTC](https://phaser.discourse.group/t/animation-problem/13902/4 "2024-01-19T09:09:16Z")

</div>

this.anims.play(“walkUp”, true);  
It worked when I did it this way.