Animating spritesheet ??Help Needed

[blindnero]

grayfox.json:
https://ufile.io/fyvqo

grayfox.png:
https://ufile.io/5bn5x

 

Above are the files im trying to load into phaser I cant figure out how to load the png & json file and step through frames to get the ideal animation for

idle, walk, default attack ( which i would like to have 3 stages:{thrust; high slash; low slash} for each time the attack button is hit), & death. Any insight/advice/solution would be greatly appreciate I've been at it for more than almost 2 days XD

[AndreasLoew]

Please take a look at this tutorial: https://www.codeandweb.com/texturepacker/tutorials/how-to-create-sprite-sheets-for-phaser3

It explains how to create and use sprite sheets in Phaser 3 in a simple scene. Skip the part about sprite sheet creation.

You'll have to exchange the loader code in the preload() function to something like this because you are using the older atlas format:

      this.load.atlas('grayfox, 'grayfox.png', 'grayfox.json');

It would be better to give your sprites more descriptive names instead of "0.png"... this makes the animation setup much easier.

Assuming that your frames are named

• walk-0001.png
• walk-0002.png
• ...
• walk-0008.png

and so on you can use the following code to get the frames:

var walkFrames = this.anims.generateFrameNames('grayfox', {
                         start: 1, end: 8, zeroPad: 4,
                         prefix: 'walk-', suffix: '.png'
                     });

var walkFrames = this.anims.generateFrameNames('grayfox', {
                         start: 1, end: 8, zeroPad: 4,
                         prefix: 'jump-', suffix: '.png'
                     });