Phaser Animation JSON

[omnione]

Hello, I am sorry if this question has been asked before.

 

I am having trouble understanding how to create my own sprite sheet and JSON file for custom animations. I've looked at examples at: http://examples.phaser.io/ but I can't seem to figure out what each property in the JSON file stand for. Can someone point me in the right direction? Thanks a lot!

 

 

 

[lewster32]

This isn't normally done by hand - there are programs which will take a load of separate images and turn them into a texture atlas, such as TexturePacker.

[eguneys]

@lewster32 what do you suggest, for old style spritesheets where frames are not evenly sized boxes.

[lewster32]

Exactly this - a texture atlas is what you need when you have unevenly sized frames.

[omnione]

This isn't normally done by hand - there are programs which will take a load of separate images and turn them into a texture atlas, such as TexturePacker.

I took a look into this. Thanks a lot! Do you know how each frame is numbered when I drag a sprite onto the spritesheet? 

[j0hnskot]

When you create a texture atlas you will get an image  and an instructions file (for example .json) .

You reference each frame by its file name ( for example 'player_1.png')

[jouniii]

Frame naming depends on the json format. If you use JSONArray, they are indexed. JSONData references by filename. TexturePacker can strip file extension names and prepend with subpaths which allows frame naming like 'jump/00001' 'explode/00001' in same atlas.

 

TexturePacker is worth it's price, pretty much essential tool you "need" for texture atlas files.

[lewster32]

This is another (free) tool that will do the job: http://renderhjs.net/shoebox/

[cvshepherd]

This is another (free) tool that will do the job: http://renderhjs.net/shoebox/

 

We've had good experiences using Shoebox. It's really quite neat, but after outsourcing our asset design we opted for automatic sprite sheet / texture atlas creation with Glue (http://glue.readthedocs.org/en/latest/).

[Sebi]

There's also http://www.mokgames.com/texturepacker/ for spritesheets.

[omnione]

Thanks for all the great replies guys! 

 

I'm going by this example: http://examples.phaser.io/_site/view_full.html?d=animation&f=looped+animation.js&t=looped%20animation

but, I'm stumped with this error: "Uncaught Error: Texture Error: frame does not fit inside the base Texture dimensions [object Object]"

 

The problem that the debugger says is that my "trim" is null? 

 

My code looks like this:

 

preload: function() {
this.game.load.atlasJSONHash('bombermanLeft', 'assets/Animations/Bomberman/bombermanAnimation.png', 'assets/Animations/Bomberman/bombermanAnimation.json');

}

 

my sprite:

var sprite =  world.add.sprite(0,0, bombermanLeft)

 

I verified that file paths are correct and I'm still still looking into what my problem is. Any ideas?

[omnione]

Thanks for all the great replies guys! 

 

I'm going by this example: http://examples.phaser.io/_site/view_full.html?d=animation&f=looped+animation.js&t=looped%20animation

but, I'm stumped with this error: "Uncaught Error: Texture Error: frame does not fit inside the base Texture dimensions [object Object]"

 

The problem that the debugger says is that my "trim" is null? 

 

My code looks like this:

 

preload: function() {

this.game.load.atlasJSONHash('bombermanLeft', 'assets/Animations/Bomberman/bombermanAnimation.png', 'assets/Animations/Bomberman/bombermanAnimation.json');

}

 

my sprite:

var sprite =  world.add.sprite(0,0, bombermanLeft)

 

I verified that file paths are correct and I'm still still looking into what my problem is. Any ideas?

 

NVM, i found the answer: http://www.html5gamedevs.com/topic/5410-non-square-atlas-texturepacker/

 

Rotation was set.... You guys are the best!!!

[omnione]

Strange, after running the command line, TexturePacker bomberman.tps -- trim-sprite-names, to remove the file extensions the above "Uncaught Error: Texture Error: frame does not fit inside the base Texture dimensions [object Object]" has returned.

 

this is how I am setting my animations:

 

this.Sprite.animations.add('left', Phaser.Animation.generateFrameNames('left', 1, 8, '', 0), 30, true);

[omnione]

Strange, after running the command line, TexturePacker bomberman.tps -- trim-sprite-names, to remove the file extensions the above "Uncaught Error: Texture Error: frame does not fit inside the base Texture dimensions [object Object]" has returned.

 

this is how I am setting my animations:

 

this.Sprite.animations.add('left', Phaser.Animation.generateFrameNames('left', 1, 8, '', 0), 30, true);

 

I could not figure out what went wrong with the trim names. if anyone has an explanation, I would definitely like to know.

 

I ended up exporting my JSON/Texture file with the extension and changing my animation to take in a suffix of ".png"

 

code:

=

this.Sprite.animations.add('left', Phaser.Animation.generateFrameNames('left', 1, 8, '.png', 0), 30, true);

[jouniii]

That error is usually related (my experience) browser caching and json data and image data not matching (ie. not same data texture packer generated).

[kawanua]

Hi,

 

Im new around here and just learning to use Phaser.

 

I just tried texturepacker and I tried to redo the multiple animation on Phaser example (http://phaser.io/examples/v2/animation/multiple-anims). When I input the seacreature_json.png to texturepacker  and publish it, the output JSON file only recognise the whole png as one.

 

I realise in an example by texturepacker (https://www.codeandweb.com/blog/2014/12/17/creating-spritesheets-for-phaser-with-texturepacker), the PNG for each animation is separated. Does that mean each animation frame has to be on individual file ? What if I created an animation and produce a spritesheet with Piskel ?

[Skeptron]

Then TexturePacker won't help. Usually the artist will generate several images (with Spriter or equivalent), with names that evoke the order of the sequence ("run_001.png", "run_002.png" etc.), and once dumped into TexturePacker, the JSON will be generated.

 

If you put the whole animations as one image in TexturePacker, it has no way of understanding what it its and will consider it is just one frame of your animation.

 

What you need is a tool that splits your animation into frames. This might do the job : http://www.alferdspritesheetunpacker.forkandbeard.co.uk/forkandBeard/apps/AlferdSpritesheetUnpacker/Details.aspx

 

But you should really have a look at your software (Piskel) and see if it can export multiple frames in the first place.

[kawanua]

Hi Skeptron,

 

Thank you. Any software (preferably free) that can create sprite / spritesheet, split spritesheet and create JSON output (for Phaser) ?

[Skeptron]

TexturePacker is awesome for creating spritesheets (and the appropriate JSON for Phaser), and its free version can do quite a lot : https://www.codeandweb.com/texturepacker

 

For splitting a spritesheet, this should work : http://www.alferdspritesheetunpacker.forkandbeard.co.uk/forkandBeard/apps/AlferdSpritesheetUnpacker/Details.aspx

[kawanua]

Thank you !