Allow animated particles to each start individually at a random frame

[michalfialadev]

In 3.60 particle emitter we are now able to do things which were before possible only using custom particleClass, like:

const emitter = this.add.particles(400, 300, 'gems', {
    anim: 'prism'
    ...
});

or

const emitter = this.add.particles(400, 300, 'gems', {
    anim: [ 'prism', 'square', 'ruby', 'square' ]
    ...
});

The problem here is that when running such particle system, the individual particles always start animating from frame1 of their sprite animation, which limits the variety in the resulting visual.

Here is a sample code for 'falling coins' particle system:

this.showerParticles = this.scene.make.particles({
    x: 0,
    y: 0,
    key: LoaderAssetKeys.GAME_ATLAS,
    config: {
        //@ts-ignore
        anim: ANIMATION_WIN_COIN,
        repeat: -1,
        lifespan: 5000,
        x: {
            onEmit: () => {
                return - this.scene.cameras.main.displayWidth * 0.5 + Math.random() * this.scene.cameras.main.displayWidth;
            }
        },
        y: {
            onEmit: () => {
                return -this.scene.cameras.main.displayHeight * 0.5;
            }
        },
        angle: { min: -180, max: 180 },
        speedY: 1200,
        frequency: 10,
        emitting: false,
    }
}, false);
this.showerParticles.start();
this.add(this.showerParticles);

Here is resulting visual:

I used red lines to mark the repeats in the vertical pattern, which impairs overall quality of the resulting animation.

It would be great to further improve the animation particle system by introducing animStartIndex (or similar), which would determine the frame at which each generated particle starts its animation, eg:

        anim: ANIMATION_WIN_COIN,
        animStartIndex: {
            onEmit: () => {
                return -1;
            }
        }

where animStartIndex of 0 is the default, -1 means 'random'. Perhaps this param is illogical to have, and particleClass must be used instead for such functionality being available on top level. Leave that up to you guys to decide

[spayton]

I've just had the same issue, needed random starting animation frame. Probably a few different ways this could be achieved, though would be nice to have it built in.

Here's how I did it:

emitter.on('animationstart', (anim, frame, gameObject, frameKey) => {
    gameObject.anims.setCurrentFrame(anim.frames[Phaser.Math.RND.between(0,anim.frames.length-1)]);
});

[michalfialadev]

Oh that's pretty neat to use 'animationstart'. thanks for mentioning it.

[photonstorm]

This can now be done in Phaser 3.61:

* Both the Animation Config and the Play Animation Config allow you to set a new boolean property `randomFrame`. This is `false` by default, but if set, it will pick a random frame from the animation when it _starts_ playback. This allows for much more variety in groups of sprites created at the same time, using the same animation. This is also reflected in the new `Animation.randomFrame` and `AnimationState.randomFrame` properties.
* You can now use a `Phaser.Types.Animations.PlayAnimationConfig` object in the `anims` property of the `ParticleEmitter` configuration object. This gives you far more control over what happens to the animation when used by particles, including setting random start frames, repeat delays, yoyo, etc. Close #6478 (thanks @michalfialadev)