TexturePacker and PhaserJS

[BeachBum]

I keep reading that TexturePacker can create SpriteSheets for Phaser and I can get it to create the PNG sheet but I can't seem to get Phaser to read any of the formats that TexturePacker saves to.

 

Here is my preload code:

this.load.atlasXML('robot', 'images/spritesheets/robot.png', 'images/spritesheets/robot.xml');

This is the Animation add code:

r.animations.add('Idle', this.game.math.numberArray(1,3));

The Xml that TexturePacker is saving is odd, it's creating "Sprite" nodes instead of the "SubTexture" node I would have expected.

Here is the XML:

<TextureAtlas imagePath="robot.png" width="206" height="36">    <sprite n="Generic-1.png" x="2" y="2" w="32" h="32" pX="0.5" pY="0.5"/>    <sprite n="Generic-2.png" x="36" y="2" w="32" h="32" pX="0.5" pY="0.5"/>    <sprite n="Generic-3.png" x="70" y="2" w="32" h="32" pX="0.5" pY="0.5"/>    <sprite n="Generic-hit-1.png" x="104" y="2" w="32" h="32" pX="0.5" pY="0.5"/>    <sprite n="Generic-hit-2.png" x="138" y="2" w="32" h="32" pX="0.5" pY="0.5"/>    <sprite n="Generic-hit-4.png" x="172" y="2" w="32" h="32" pX="0.5" pY="0.5"/></TextureAtlas>

The error I get is "No FrameData available for Phaser.Animation Idle"

 

I think this is probably a missed setting in TexturePacker but I have hope that some of you are using TexturePacker and will know what I'm doing wrong.

 

 

 

 

[BeachBum]

I figured it out, thought I would share in case anyone else could be helped:

 

In TexturePacker use the Sparrow / Starling Data format.

 

The rest was pretty straight forward but here it is in case:

//Preloadthis.load.atlasXML('robot', 'images/spritesheets/robot.png', 'images/spritesheets/robot.xml'); // I was loading this as a group item so this is what I'm using, should be adaptable to a single sprite easily enoughvar r = this.redGroup.create(30, this.rnd.integerInRange(this.world.height-180, this.world.height-60), 'robot', 'Idle-1');  // Note Idle-1 is the name of the subtexture in the XMLr.animations.add('Idle', this.game.math.numberArray(0,2));r.animations.add('Hit', this.game.math.numberArray(3,5));

[rich]

Or use either the JSON Array or JSON Hash formats. Especially if you want to deploy to mobile.

[TheRegge]

Can you describe Texture Packer settings that work for phaser? I using an atlas using the JSON hash format to place objects in my game... they are not even animated. But I am getting many "Cannot set frameName: someimage.gif" errors... what am i doing wrong?

TexturePacker settings:

 

Data:

------

Data Format: json (hash)

 

Texture

---------

Texture format: PNG

Pixel format: RGBA8888

 

Layout

--------

Max size W/H: 4096

Size constraints: POT (Power of Two)

Force squared: on

Allow Rotation: off

Detect identical Sprites: on

 

Sprites

--------

Trim mode: Trim

Trim/Crop Threshold: 1

Pivot Point: Center

Extrude: 0

Border padding: 0

Shape padding: 0

Inner Padding: 0

Common divisor x: 1 y: 1

 

and nothing else turned on...

[rich]

Open the json file Texture Packer is creating and look at the frame names for yourself - do they match what you're expecting and putting in your code?

[TheRegge]

Open the json file Texture Packer is creating and look at the frame names for yourself - do they match what you're expecting and putting in your code?

Thank you! I was trying to set the frameName to filename.gif when it was .png!!! looking through the json file made me discover it!