Jump to content

TexturePacker and PhaserJS


Recommended Posts

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.





Link to comment
Share on other sites

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));
Link to comment
Share on other sites

  • 2 weeks later...

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 Format: json (hash)




Texture format: PNG

Pixel format: RGBA8888




Max size W/H: 4096

Size constraints: POT (Power of Two)

Force squared: on

Allow Rotation: off

Detect identical Sprites: on




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

Link to comment
Share on other sites

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!

Link to comment
Share on other sites


  • Recently Browsing   0 members

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