Basic Problems With Animations

[Mark]

I've used Texture Packer to bundle up a set of sprites, and loaded them into the game object:

 

game.load.atlasJSONHash("assets", "assets/textures/assets.png", "assets/textures/assets.json");

 

Then added a sprite, referencing the atlas:

 

player = game.add.sprite(200, 200, "assets");

 

When I next come to try and add an animation, I always receive the following error:

 

[07:19:26.573] TypeError: this.currentFrame is null

 

I probably am missing something basic!

 

 

[Tjkoopa]

Where are you doing atlasJSONHash() and what does your JSON look like?

[Mark]

atlasJSONHash is in preload

 

{"frames": {

"ammo/bullet-gun.png":
{
    "frame": {"x":168,"y":88,"w":10,"h":5},
    "rotated": true,
    "trimmed": false,
    "spriteSourceSize": {"x":0,"y":0,"w":10,"h":5},
    "sourceSize": {"w":10,"h":5}
},
"player/fire-standing/pistol/player-fire-1-00.png":
{
    "frame": {"x":2,"y":55,"w":71,"h":81},
    "rotated": true,
    "trimmed": true,
    "spriteSourceSize": {"x":9,"y":4,"w":71,"h":81},
    "sourceSize": {"w":85,"h":85}
},
"player/fire-standing/pistol/player-fire-1-01.png":
{
    "frame": {"x":176,"y":85,"w":75,"h":81},
    "rotated": false,
    "trimmed": true,
    "spriteSourceSize": {"x":5,"y":4,"w":75,"h":81},
    "sourceSize": {"w":85,"h":85}
},
"player/fire-standing/pistol/player-fire-1-02.png":
{
    "frame": {"x":85,"y":151,"w":55,"h":81},
    "rotated": true,
    "trimmed": true,
    "spriteSourceSize": {"x":10,"y":4,"w":55,"h":81},
    "sourceSize": {"w":85,"h":85}
},
"player/idle/player-idle-1.png":
{
    "frame": {"x":2,"y":55,"w":71,"h":81},
    "rotated": true,
    "trimmed": true,
    "spriteSourceSize": {"x":9,"y":4,"w":71,"h":81},
    "sourceSize": {"w":85,"h":85}
},
"player/walking/pistol/player-walk-1-00.png":
{
    "frame": {"x":89,"y":45,"w":41,"h":85},
    "rotated": true,
    "trimmed": true,
    "spriteSourceSize": {"x":24,"y":0,"w":41,"h":85},
    "sourceSize": {"w":85,"h":85}
},
"player/walking/pistol/player-walk-1-01.png":
{
    "frame": {"x":2,"y":2,"w":51,"h":85},
    "rotated": true,
    "trimmed": true,
    "spriteSourceSize": {"x":24,"y":0,"w":51,"h":85},
    "sourceSize": {"w":85,"h":85}
},
"player/walking/pistol/player-walk-1-02.png":
{
    "frame": {"x":2,"y":128,"w":55,"h":81},
    "rotated": true,
    "trimmed": true,
    "spriteSourceSize": {"x":20,"y":4,"w":55,"h":81},
    "sourceSize": {"w":85,"h":85}
},
"player/walking/pistol/player-walk-1-03.png":
{
    "frame": {"x":2,"y":185,"w":51,"h":81},
    "rotated": true,
    "trimmed": true,
    "spriteSourceSize": {"x":24,"y":4,"w":51,"h":81},
    "sourceSize": {"w":85,"h":85}
},
"player/walking/pistol/player-walk-1-04.png":
{
    "frame": {"x":89,"y":2,"w":41,"h":85},
    "rotated": true,
    "trimmed": true,
    "spriteSourceSize": {"x":24,"y":0,"w":41,"h":85},
    "sourceSize": {"w":85,"h":85}
},
"player/walking/pistol/player-walk-1-05.png":
{
    "frame": {"x":168,"y":168,"w":45,"h":81},
    "rotated": true,
    "trimmed": true,
    "spriteSourceSize": {"x":20,"y":4,"w":45,"h":81},
    "sourceSize": {"w":85,"h":85}
},
"player/walking/pistol/player-walk-1-06.png":
{
    "frame": {"x":85,"y":88,"w":61,"h":81},
    "rotated": true,
    "trimmed": true,
    "spriteSourceSize": {"x":14,"y":4,"w":61,"h":81},
    "sourceSize": {"w":85,"h":85}
},
"player/walking/pistol/player-walk-1-07.png":
{
    "frame": {"x":176,"y":2,"w":75,"h":81},
    "rotated": false,
    "trimmed": true,
    "spriteSourceSize": {"x":5,"y":4,"w":75,"h":81},
    "sourceSize": {"w":85,"h":85}
},
"zombie-a/zombie-a-0-00.png":
{
    "frame": {"x":2,"y":238,"w":55,"h":75},
    "rotated": true,
    "trimmed": true,
    "spriteSourceSize": {"x":20,"y":10,"w":55,"h":75},
    "sourceSize": {"w":85,"h":85}
},
"zombie-a/zombie-a-0-01.png":
{
    "frame": {"x":156,"y":356,"w":45,"h":75},
    "rotated": true,
    "trimmed": true,
    "spriteSourceSize": {"x":25,"y":10,"w":45,"h":75},
    "sourceSize": {"w":85,"h":85}
},
"zombie-a/zombie-a-0-02.png":
{
    "frame": {"x":2,"y":342,"w":45,"h":75},
    "rotated": true,
    "trimmed": true,
    "spriteSourceSize": {"x":25,"y":10,"w":45,"h":75},
    "sourceSize": {"w":85,"h":85}
},
"zombie-a/zombie-a-0-03.png":
{
    "frame": {"x":2,"y":389,"w":41,"h":75},
    "rotated": true,
    "trimmed": true,
    "spriteSourceSize": {"x":29,"y":10,"w":41,"h":75},
    "sourceSize": {"w":85,"h":85}
},
"zombie-a/zombie-a-0-04.png":
{
    "frame": {"x":79,"y":312,"w":45,"h":75},
    "rotated": true,
    "trimmed": true,
    "spriteSourceSize": {"x":25,"y":10,"w":45,"h":75},
    "sourceSize": {"w":85,"h":85}
},
"zombie-a/zombie-a-0-05.png":
{
    "frame": {"x":156,"y":309,"w":45,"h":75},
    "rotated": true,
    "trimmed": true,
    "spriteSourceSize": {"x":25,"y":10,"w":45,"h":75},
    "sourceSize": {"w":85,"h":85}
},
"zombie-a/zombie-a-1-00.png":
{
    "frame": {"x":85,"y":208,"w":55,"h":75},
    "rotated": true,
    "trimmed": true,
    "spriteSourceSize": {"x":20,"y":10,"w":55,"h":75},
    "sourceSize": {"w":85,"h":85}
},
"zombie-a/zombie-a-1-01.png":
{
    "frame": {"x":2,"y":295,"w":45,"h":75},
    "rotated": true,
    "trimmed": true,
    "spriteSourceSize": {"x":25,"y":10,"w":45,"h":75},
    "sourceSize": {"w":85,"h":85}
},
"zombie-a/zombie-a-1-02.png":
{
    "frame": {"x":79,"y":265,"w":45,"h":75},
    "rotated": true,
    "trimmed": true,
    "spriteSourceSize": {"x":25,"y":10,"w":45,"h":75},
    "sourceSize": {"w":85,"h":85}
},
"zombie-a/zombie-a-1-03.png":
{
    "frame": {"x":79,"y":359,"w":41,"h":75},
    "rotated": true,
    "trimmed": true,
    "spriteSourceSize": {"x":29,"y":10,"w":41,"h":75},
    "sourceSize": {"w":85,"h":85}
},
"zombie-a/zombie-a-1-04.png":
{
    "frame": {"x":162,"y":262,"w":45,"h":75},
    "rotated": true,
    "trimmed": true,
    "spriteSourceSize": {"x":25,"y":10,"w":45,"h":75},
    "sourceSize": {"w":85,"h":85}
},
"zombie-a/zombie-a-1-05.png":
{
    "frame": {"x":162,"y":215,"w":45,"h":75},
    "rotated": true,
    "trimmed": true,
    "spriteSourceSize": {"x":25,"y":10,"w":45,"h":75},
    "sourceSize": {"w":85,"h":85}
}},
"meta": {
    "app": "http://www.codeandweb.com/texturepacker ",
    "version": "1.0",
    "image": "assets.png",
    "format": "RGBA8888",
    "size": {"w":256,"h":512},
    "scale": "1",
    "smartupdate": "$TexturePacker:SmartUpdate:2ef761bf919d23ae5b740b5f9be3b5e0:1/1$"
}
}
 

[Tjkoopa]

I believe your JSON is in the wrong format for atlasJSONHash, when you export from TexturePacker there should be a 'JSON (hash)' option that you would want to use.

[rich]

What code are you using the set-up and playback the animation?

 

Also is this the dev branch version or the master branch?

[Mark]

Master branch.

 

In create()

 

player.animations.add('idle', ['player/idle/player-idle-1.png'], 10, false, false);

 

And data format in Texture Packer is set to JSON (Hash)

[rich]

Could I suggest you try the dev branch please? It contains the latest 1.1 build which we're going live with tomorrow, so is very close to final, and a lot has changed regarding atlas loading. I would recommend you use JSON (Array) format as well, then you just use game.load.atlas().

 

Your animation structure looks fine though. If it still doesn't work on dev then upload the json + png here and I'll take a look.

[Mark]

Thanks Richard.

[Mark]

Switched to dev branch, all now is well! Thanks chaps.

[Arlefreak]

Hi i tried also to move from my sprite sheet to Texture Atlas, i am using TexturePacker  as well but whe i try to add the texture in the preload i get this error:

Error: Texture Error: frame does not fit inside the base Texture dimensions 

I'm using the current phaser.js from dev branch inside the build folder, what am i doing wrong ? 

[Arlefreak]

Well i found what it was ... https://github.com/GoodBoyDigital/pixi.js/issues/282 you need to uncheck 'Allow Rotation' so hope it helps somebody