Animation some frames last longer, how to create animation with variable frame rate?

Phaser 3
1

I’m trying to create an animation of gems with a sparkling animation. The shimmering animation should appear every 1 second or something like that, for the rest it should just be just the normal gem frame. So, no animation for about a second, then the sparkle animation, then no animation, sparkle etc. looping every second.

gem_shine

Is it possible to have some frame last longer than the others, so create an animation with a different frame rate only for some frames?

	// all the animation frames
	this.anims.create({
			key: 'gem_shine1',
			frames: [
				{ key: 'sprites', frame: 'gem1_1' },
				{ key: 'sprites', frame: 'gem1_2' },
				{ key: 'sprites', frame: 'gem1_3' },
				{ key: 'sprites', frame: 'gem1_4' },
				{ key: 'sprites', frame: 'gem1_5' },
				{ key: 'sprites', frame: 'gem1_6' }
			],
			frameRate: 15,
			repeat: -1
		}

I could do it like the code below, but that seems a big ugly:

	// make the first frame last longer
	this.anims.create({
			key: 'gem_shine1',
			frames: [
				{ key: 'sprites', frame: 'gem1_1' },
				{ key: 'sprites', frame: 'gem1_1' },
				{ key: 'sprites', frame: 'gem1_1' },
				{ key: 'sprites', frame: 'gem1_1' },
				{ key: 'sprites', frame: 'gem1_1' },
				{ key: 'sprites', frame: 'gem1_1' },
				{ key: 'sprites', frame: 'gem1_1' },
				{ key: 'sprites', frame: 'gem1_1' },
				{ key: 'sprites', frame: 'gem1_1' },
				{ key: 'sprites', frame: 'gem1_1' },
				{ key: 'sprites', frame: 'gem1_1' },
				{ key: 'sprites', frame: 'gem1_1' },
				{ key: 'sprites', frame: 'gem1_1' },
				{ key: 'sprites', frame: 'gem1_1' },
				{ key: 'sprites', frame: 'gem1_2' },
				{ key: 'sprites', frame: 'gem1_3' },
				{ key: 'sprites', frame: 'gem1_4' },
				{ key: 'sprites', frame: 'gem1_5' },
				{ key: 'sprites', frame: 'gem1_6' }
			],
			frameRate: 15,
			repeat: -1
		},
2

You can use repeatDelay for that.

1 Like
3

You can also set a duration for each frame.

{ key: 'sprites', frame: 'gem1_1', duration: 1000 }
1 Like