# Reverse Texture Atlas Animation?

**URL:** <https://phaser.discourse.group/t/reverse-texture-atlas-animation/6023>\
**Category:** Phaser 3\
**Created:** [April 21, 2020, 5:52pm UTC](https://phaser.discourse.group/t/reverse-texture-atlas-animation/6023 "2020-04-21T17:52:45Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Thundros](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/thundros/32/2057_2.png) [@Thundros](https://phaser.discourse.group/u/Thundros)\
**Post date:** [April 21, 2020, 5:52pm UTC](https://phaser.discourse.group/t/reverse-texture-atlas-animation/6023/1 "2020-04-21T17:52:45Z")

</div>

So I’m trying to play a texture atlas animation in reverse, but I just tried `'playReverse ( )'` on my texture atlas animation & it only played forward. What would be the way to do a reverse `'generateFrameNames ( )'` using `'this.anims.create ( )'` on the texture atlas? I tried negative anim speed, that didn’t work. I tried reversing the start & the end frames, that didn’t work.

I’m using a TexturePacker texture atlas. { Not multi-atlas. }

Any & all help is greatly appreciated!

Thank you!

Have a nice day! 🙂

---

<div class="post-metadata">

**Author:** ![BlunT76](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/blunt76/32/1454_2.png) [@BlunT76](https://phaser.discourse.group/u/BlunT76)\
**Post date:** [April 21, 2020, 6:24pm UTC](https://phaser.discourse.group/t/reverse-texture-atlas-animation/6023/2 "2020-04-21T18:24:48Z")

</div>

You can do the anims this way:

```javascript
this.anims.create({
      key: 'player-run',
      frames: [
        { key: 'player', frame: 'player-run_0' },
        { key: 'player', frame: 'player-run_1' },
        { key: 'player', frame: 'player-run_2' },
        { key: 'player', frame: 'player-run_3' },
        { key: 'player', frame: 'player-run_4' },
        { key: 'player', frame: 'player-run_5' },
        { key: 'player', frame: 'player-run_6' },
        { key: 'player', frame: 'player-run_7' },
        { key: 'player', frame: 'player-run_8' },
        { key: 'player', frame: 'player-run_9' },
      ],
      frameRate: 9,
      repeat: -1,
    });

```

And so choose the order of frames

---

<div class="post-metadata">

**Author:** ![Thundros](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/thundros/32/2057_2.png) [@Thundros](https://phaser.discourse.group/u/Thundros)\
**Post date:** [April 21, 2020, 6:41pm UTC](https://phaser.discourse.group/t/reverse-texture-atlas-animation/6023/3 "2020-04-21T18:41:01Z")

</div>

@BlunT76 - I use :

```javascript
this.anims.create ( {
	key : 'player-revive', 
		frames : this.anims.generateFrameNames (
			'player', {
				prefix : '004', 
				start : 0, 
				end : 9, 
				suffix : '.png', 
			}
		), 
		frameRate : 10, 
	repeat : false, 
} );

```

Instead of playing : `'0040 - 0049'`, I need to play : `'0049 - 0040'`

So it would play ;

```javascript
0049
0048
0047
0046
0045
0044
0043
0042
0041
0040

```

---

<div class="post-metadata">

**Author:** ![BlunT76](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/blunt76/32/1454_2.png) [@BlunT76](https://phaser.discourse.group/u/BlunT76)\
**Post date:** [April 21, 2020, 6:58pm UTC](https://phaser.discourse.group/t/reverse-texture-atlas-animation/6023/4 "2020-04-21T18:58:37Z")

</div>

Yes, but if reversing start and end doesn’t work, you can do like me, and choose the order of each frame, my example is not reversed sorry

---

<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:** [April 21, 2020, 7:03pm UTC](https://phaser.discourse.group/t/reverse-texture-atlas-animation/6023/5 "2020-04-21T19:03:21Z")

</div>

[playReverse() works as described](http://labs.phaser.io/view.html?src=src%5Canimation%5Creverse%20animation.js) so I would double-check your code.

If you want to create a separate animation you can use `this.anims.generateFrameNames(…).reverse()`.

---

<div class="post-metadata">

**Author:** ![Thundros](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/thundros/32/2057_2.png) [@Thundros](https://phaser.discourse.group/u/Thundros)\
**Post date:** [April 21, 2020, 11:02pm UTC](https://phaser.discourse.group/t/reverse-texture-atlas-animation/6023/6 "2020-04-21T23:02:16Z")

</div>

how do i use an `if` statement to reverse or not reverse texture atlas animations?

Thank You!

---

<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:** [April 21, 2020, 11:58pm UTC](https://phaser.discourse.group/t/reverse-texture-atlas-animation/6023/7 "2020-04-21T23:58:54Z")

</div>

Depending on whether you created one animation or two,

```javascript
if (cond) { sprite.anims.play('player-revive'); }
else { sprite.anims.playReverse('player-revive'); }

// OR

if (cond) { sprite.anims.play('player-revive'); }
else { sprite.anims.play('player-revive-reverse'); }

```