Jump to content

Phaser Animation JSON


omnione
 Share

Recommended Posts

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!

 

 

 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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!!!

Link to comment
Share on other sites

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);

Link to comment
Share on other sites

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);

Link to comment
Share on other sites

  • 11 months later...

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 ?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...