After-Images System Overview

After-Images System Overview

I used a pool of sprite renderers for the after-images and a list of effects requests (these are both just implemented as arrays of structs).

Every frame you go through and update any active requests or images.

For each request, while the effect is active you emit an image every however many seconds according to the effect. The image is alive for some duration determined by the effect and then returns to the pool when it expires.

"Emitting an image" here just means getting a sprite renderer from the pool, copying the target of the effect's current sprite and position to the renderer, and then making any other adjustments you want (e.g. changing the renderer's color, setting some shader properties on its material, etc.)

For each active image, you will update it according to the effect that emitted it, i.e. maybe it needs to fade out over its duration, flicker, change color...whatever you can think of really.

---

For the "shadow clones" style effect, it's a bit more complex: You actually emit all the images at once at the start of the effect, and then have them copy the target...except with an increasingly longer delay for each image, e.g. the first image is 0.1 seconds behind the target, the second image is 0.2 seconds behind the target, and so on.

In order to get your images to copy what the target was doing however many seconds ago, you need to sample the target and store enough data for the clone/image with the longest delay, e.g. if you sample the target 30 times a second and you've got 4 images where each image is 0.1 seconds behind the previous one, then the last image is 0.4 seconds behind the target so you need to be able to store at least 12 samples (30 * 0.4 = 12).

How much data you need to copy from the target for each sample will depend on your game, but in my case a "sample" was just struct with a Sprite, a Vector2 position, a float for x scale (for flipping), and an int for sorting order.

My sample "buffer" was just a fixed size array of these structs that I filled circularly, i.e. the next sample will be written to the array at index (lastSampleIndex + 1) % sampleArrayLength.

Once a shadow clones effect begins, I start filling this sample buffer with the target's data. Each image that is emitted updates to whatever is in the sample buffer at the last sample index, minus that image's sample offset. This sample offset is given by imageDelay * samplesPerSecond. The images do not begin updating until their delay has elapsed (i.e. latestSampleIndex >= imageSampleOffset).

For example, if we wrote the target's latest sample to index 11, the first image which is 0.1 seconds behind the target will update to the sample at index 8 (30 * 0.1 = 3 samples, 11 - 3 = 8), the second image which is 0.2 seconds behind the target will update to sample 5 and so on.