Bitmap sprites and animations

[rephus]

Hello everyone, I'm new on this forum and in Phaser. 

First, I have to say that I've enjoyed using this framework so far, feels very complete; you don't have to implement all the boiler plate for yourself in every game (even sprite already has a `health` attribute), unlike LibGDX (which I have also used in the past). And almost every problem is solved either on this forum, or in examples.

But I got a problem in my code that I don't seem able to solve, it might not even be possible to solve, so here it goes.

I'm trying to create a sprite from a bitmapData, but then trying to add animations. The reason why I use bitmap is because I want to take advantage of the function replaceRGB and replace some colors (to make different teams), and add the sprite later.

If I do this, it works:

sprite = game.add.sprite(x, y, 'player');
sprite.animations.add('stand', Phaser.Animation.generateFrameNames('stand/', 1, 1, '.png', 3), 10, true, false);
sprite.animations.play('stand');

But, if I try to set the bitmap, it fails on animations.play with this error:

phaser.js:69099 Uncaught TypeError: Cannot read property 'index' of undefined
    at Phaser.Animation.updateCurrentFrame (http://localhost:8000/assets/javascript/lib/phaser.js:69099:36)
    at Phaser.Animation.play (http://localhost:8000/assets/javascript/lib/phaser.js:68796:14)

var bmd = game.make.bitmapData();
bmd.load('player');
bmd.replaceRGB(255,255,255, 255, 250, 0, 0, 255);

sprite = game.add.sprite(x, y, bmd);
sprite.animations.add('stand', Phaser.Animation.generateFrameNames('stand/', 1, 1, '.png', 3), 10, true, false);
sprite.animations.play('stand');

If you inspect the object sprite.animations, will notice that currentFrame is undefined.

Is there any way to add the currentFrame afterwards ? or bitmaps are incompatible with animations

By the way, my player is a atlasJSONHash

game.load.atlasJSONHash('player', 'assets/img/player.png', 'assets/img/player.json');

Thanks in advance.

[stupot]

Hi,

Paste

Phaser.Animation.generateFrameNames('stand/', 1, 1, '.png', 3)

into your browser console (with the game loaded) and look at the result, you will get the following

[
  "stand/001.png"
]

your code is trying to set an animation sequence against your sprite of 1 frame called "stand/001.png", is that right?

if it is right, then check your .json file for an entry that matches this

[rephus]

Yes, you're right, I get [ "stand/001.png"] in the console. And the JSON looks fine.

"stand/001.png":
{
    "frame": {"x":31,"y":66,"w":22,"h":24},
    "rotated": false,
    "trimmed": false,
    "spriteSourceSize": {"x":0,"y":0,"w":22,"h":24},
    "sourceSize": {"w":22,"h":24}
}

Again, if I don't use bitmap, the animation plays ok, so I don't think is a problem with the JSON, right ? 

[stupot]

ok, just checking as an animation of 1 frame isn't really an animation... in case that was something to do with your problem

when you create a sprite using the key 'player' it inherits all the frame data, ie all the frame definitions from the atlas .json, so when you create an animation using those frame names it works.

but when you create a sprite using a bitmapData as the source, it doesn't inherit all the frame data, it's only interested in copying the texture, so it points at the same source atlas texture but gets a single frame definition describing it all of the texture, thus any animations using the original atlas frame names will fail.

after creating your sprite from the bmd, you'll have to copy the frame data from the source atlas manualy

sprite.animations._frameData is what you should be investigating

[rephus]

Hi, you were right, and the BMD doesn't contain any animation info, and it only comes with one frame.

 I've been looking into this problem, even in the sourcecode library on Phaser, trying to understand how it worked and I found this interesting piece of code.

  if (cache.hasFrameData(key.key, Phaser.Cache.BITMAPDATA))
            {
                setFrame = !this.animations.loadFrameData(cache.getFrameData(key.key, Phaser.Cache.BITMAPDATA), frame);
            }
            else
            {
                setFrame = !this.animations.loadFrameData(key.frameData, 0);
            }

It seems that the function `cache.hasFrameData` returns False, because there is no _cacheMap details about that frame (in getItem).

I've already spent too much time on this, so I'd better use separate sprites instead of trying to colour them using bitmaps. Thanks anyway for your help.