Lab 088 – Animated Particles

We can provide an image that contains a grid of sub-images, and use it to generate animated effects.

We’ll focus on Reality Composer Pro for this lab, but you can accomplish the same thing when building particle emitters in code. See ParticleEmitterComponent.ParticleEmitter.ImageSequence.

We’ll use this blue bird image from OpenGameArt, thanks to komiro100

This image contains a 3×3 grid of birds. Each one will be a frame in our animation. The particle system will animate between these frames in sequence just like a flip book. These are often referred to as Sprite Sheets, but be aware that not all Sprite Sheets are grids like this one.

We add the texture to the particle emitter, then tick the Is Animated checkbox. We can set the number of columns and rows to match our grid. We can speed up or slow down the frame-rate. Just make sure to keep it a multiple of the total number of grid cells.

Watch the video to see the full process.

Download the Xcode project with this and many more labs from Step Into Vision.