Add Frame to existing animation

Phaser 3
1

Hello! I’m trying to add a frame to an existing animation and I’m struggling to wrap my head around it. I have an existing animation showing a loop of data (weather map).

When a new frame for the weather map comes in I receive a notification and download that image. I’m then trying to add it to the end of an existing animation so the new frame shows at the end of the old ones.

I’ve found the ‘addFrame’ function but it does not appear to work the way I had hoped. Can anyone guide me on how to add a single frame to an animation after it is created and running?

Here’s an example of what I’m doing now. Sorry for the missing server info.:

this.load.image('mapFrame_'+mapArray[0], 'http://***.***.***.***/static/staticmap.php?center='+fullData["city"]["lat"]+','+fullData["city"]["lon"]+'&zoom=9&size=1420x820&maptype=radar&time='+radarArray[0]);
this.load.once('complete', function(){
localMapAnim.addFrame('mapFrame_'+mapArray[0]);
});
this.load.start();

Thanks in advance!

2

Welcome Scott,
The addFrame function really should be renamed to addFrames as it takes in an array of objects. (This also took me a while to figure out.)

Here is some example code:
anim.addFrame([{key: "atlasKey", frame: "myFrame"}]);

or just

anim.addFrame([{key: "textureKey"}]);

1 Like
3

Jake,

Thank you so much! That worked perfectly. I do have one other question though. I’ve run into a new issue with this animation. The way the animation is setup is that the last frame pauses for 3 seconds and then the loop restarts. When I add the new frame the pause now isn’t on the last frame. Is there an easy way to edit the duration of a frame after the animation is created / updated?

4

Jake - Thanks again for the warm welcome and the advice. I figured the delay out by simply shifting the delay to be on the repeat instead of a duration on the last frame. I really appreciate the help!

5

My pleasure and glad to hear that you were able to resolve your issue! :+1:

1 Like