# Animating A Sprite Sheet

**URL:** <https://phaser.discourse.group/t/animating-a-sprite-sheet/14064>\
**Category:** Phaser 3\
**Created:** [March 3, 2024, 7:36pm UTC](https://phaser.discourse.group/t/animating-a-sprite-sheet/14064 "2024-03-03T19:36:01Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![vegancatter](https://avatars.discourse-cdn.com/v4/letter/v/d6d6ee/32.png) [@vegancatter](https://phaser.discourse.group/u/vegancatter)\
**Post date:** [March 3, 2024, 7:36pm UTC](https://phaser.discourse.group/t/animating-a-sprite-sheet/14064/1 "2024-03-03T19:36:01Z")

</div>

I have a _48x16_ pixel **sprite sheet**. Each with _16x16_ frames. I want to **change** these frames and create an **animation** by going through these _3_ frames each lasting a **different** amount of time.

Here are important bits of my code:

```javascript
function preload() {
  this.load.spritesheet('player', 'assets/player-sheet.png', {frameWidth: 16, frameHeight: 16});
}

function create() {
  let player = [];
  player.x = 400;
  player.y = 300;
  player.sprite = this.physics.add.sprite(player.x, player.y, 'player', 0);
  player.sprite.setScale(4);
  player.sprite.smoothed = false;
}

```

Thank You In Advance!

---

<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:** [March 3, 2024, 8:28pm UTC](https://phaser.discourse.group/t/animating-a-sprite-sheet/14064/2 "2024-03-03T20:28:03Z")

</div>

```js
// create()

this.anims.create({
  key: "playerAnimation",
  defaultTextureKey: "player",
  duration: 1, // 1 ms, close enough to 0
  frames: [
    { frame: 0, duration: 100 },
    { frame: 1, duration: 150 },
    { frame: 2, duration: 200 }
  ]
});

```

---

<div class="post-metadata">

**Author:** ![vegancatter](https://avatars.discourse-cdn.com/v4/letter/v/d6d6ee/32.png) [@vegancatter](https://phaser.discourse.group/u/vegancatter)\
**Post date:** [March 3, 2024, 9:07pm UTC](https://phaser.discourse.group/t/animating-a-sprite-sheet/14064/3 "2024-03-03T21:07:22Z")

</div>

thanks that works