Spritesheet Animation feedback

[Karma Octopus]

First of all I'd like to say that Phaser 3 seems very nice, flexible and lightweight.

I got it to work but I get two errors in the console when I create a new Phaser game (I use the newly released alpha version):
Uncaught TypeError: Cannot read property 'createTexture' of null
    at new TextureSource (TextureSource.js:119)
    at new Texture (Texture.js:58)
    at TextureManager.create (TextureManager.js:252)
    at Image.image.onload (TextureManager.js:45)

Edit: this is in Chrome. In FF the error is:
TypeError: game.renderer is null
TextureSource
Texture
create
addBase64/image.onload

This is the config:

var config = {
    type: Phaser.WEBGL,
    width: 800,
    height: 600,
    backgroundColor: '#bfcc00',
    parent: 'content',
    scene: {
        preload: preload,
        create: create,
        update: update
    }
};

It happens when this line is run:

var game = new Phaser.Game(config);

Though the errors doesn't seem to do anything.

Now onto the animation part, I have two pieces of feedback.

1.

I tried to create a simple animation from a spritesheet. It is a standard sheet with four walk animations, every animation has three frames which should be run like 0, 1, 2, 1 in a loop.

My problem was that I cant find a way to make that happen. When I use generateFrameNumbers it runs frames 0, 1, 2, 0, 1, 2. Which is of course the intention. I use this code:

var config = {
        key: 'walkDown',
        frames: this.anims.generateFrameNumbers('playerSheet', { start: 0, end: 2 }),
        frameRate: 8,
        repeat: -1
    };

So what I would like to see is either a function so I can tell it to use frames [0, 1, 2, 1] or maybe an example on how to create some object that does that. I'm not so good at JS yet but I think that the frames property need such an object and that is what generateFrameNumbers return.

Basically I just want to tell an animation what frames in a spritesheet to use, just like you can do in Phaser 2.x. Like this:

this.player.animations.add('walkDown', [0, 1, 2, 1]);

2.

To make the animation repeat I have to set repeat: -1. I found that to be very odd and unintuitive. I would have expected it to be 1 for repeat and 0 for non-repeat.

Keep up the good work.

[rich]

Hi,

Thanks for your feedback on v3!

To answer your question about the frames what it expects is an object that looks like this:

var frames = [
    { key: 'boom', frame: 0 },
    { key: 'boom', frame: 1 },
    { key: 'boom', frame: 2 },
    { key: 'boom', frame: 1 }
];

Where 'key' is the key of the sprite sheet image in the cache. The reason you specify the key for every frame is that in v3 you can have animations that span multiple images. So,  the above is how you would 'manually' set-up the animation you mentioned in your post. However, I agree, there needs to be a way to generate this from an array directly, so I will add that now  (this is the whole point of feedback like this!)

The reason you use -1 as 'repeat forever' is because you can set the animation to repeat any number of times. For example, repeat: 4 would repeat the animation 4 times, so the value -1 signifies 'for ever'. Does it make more sense now that is understood?

[rich]

Ok I've added this and pushed it to the repo  You can now do this:

var config = {
    key: 'explode',
    frames: this.anims.generateFrameNumbers('boom', { frames: [ 0, 1, 2, 1, 2, 3, 4, 0, 1, 2 ] }),
    frameRate: 20
};

Which will generate what's needed but using your own sequence instead. The same change has also been made to generateFrameNames for non-sequential texture atlas based animations.

[Karma Octopus]

Yay! The new generateFrameNumbers works great, does exactly what I need it to.

About -1 for repeat. After reading what you wrote it now makes sense how it works. But I think that many people will still find it strange and not understand it by just looking at some example code that someone wrote, just like what happened to me. This could be especially so for newer coders. I think it might be bit hard to grasp why it should be -1 without reading your text.

I think it might be improved upon if the 'infinite repeat' is split apart from repeat. Like this:

repeat: 0 - max repeats | choose no repeat or a limited number or repeats
repeatForever: true/false | choose if to repeat forever

-1 would have to be removed? as an option from repeat so you don't get (which would be unclear behavior):
 

var config = {
        key: 'walkDown',
        repeat: -1,
        repeatForever: false
    };

I don't think this would affect how repeat works, just make it a bit more clear when you see examples like these:

var config = {
        key: 'walkDown',
        repeat: 4
    };

var config = {
        key: 'walkDown',
        repeatForever: true // pretty obvious what it does without having to look it up
        or 
        repeatForever: 1
    };

var config = {
        key: 'walkDown',
        repeat: 0
    };

 

[rich]

To be honest I used -1 because I'm so used to it from TweenMax (that is how you specify a repeating tween in there, and also in v3 Tween Manager too).

However, that doesn't mean it's the right way.

I think 'loop' might be a better name though? If you specify a loop it will ignore anything set for 'repeat' though.

Anyone else wish to add their thoughts?

[Karma Octopus]

If other popular tween libs use -1 it might be good to keep it. It's just a bit strange if you haven't used those libs before.
I don't think it's a bad way to to it, I'm just used to -1 meaning 'unset'/'do not use'.

Maybe keep repeat like it is now then and also add a 'loop' boolean that overrides repeat if set?

That way the developer can choose which way feels most natural too them?

Would be nice to know what other people think too.

[rich]

I think I'll add in 'loop' which basically sets repeat to -1. Will let you use repeat -1 as well.

If you set both, i.e. repeat 4 and loop true then the loop will override the repeat value. I think this is the only place where splitting it into 2 properties falls over, when one overrides the other. It's definitely clearer though.

[rich]

How about this:

var config = {
    key: 'walkDown',
    repeat: Phaser.FOREVER
};

?

[Karma Octopus]

34 minutes ago, rich said:

How about this:

var config = {
    key: 'walkDown',
    repeat: Phaser.FOREVER
};

?

I think this could be the best solution. The -1 is hidden but still there, very neat.

I was a bit worried that loop and repeat are so alike that people would mix them up and not be sure which one does what. So it's probably best to only have one property for repetitions.

[rich]

Awesome, this is now in the latest build

[PBMCube]

Quote: "The reason you specify the key for every frame is that in v3 you can have animations that span multiple images."

This is soooo cool!