Fixing Spritesheet Flipbook Frame Bounce and Edge Fringe in UE5

The symptom: a flipbook that won't sit still

You generate or paint a spritesheet, set up a sub-UV material in UE5, wire it into Niagara, and hit play — and the effect twitches. The fire core wanders left and right as the frames cycle, a smoke puff seems to hop a few pixels between frames, and there is a thin coloured halo clinging to every translucent edge. That is the classic combination of spritesheet flipbook jitter, sub-UV frame drift and chroma-key fringe, and it is one of the most common reasons an otherwise good effect reads as cheap on screen.

The frustrating part is that none of these are animation problems. Your sub-UV cycling is correct, your frame rate is fine, and the art is usually fine too. The bounce comes from the spritesheet itself: the cells are not the size the slicer assumed, the visible content is not centred inside each cell, and the background colour you keyed out has bled into the soft edges of every sprite. Fix those three things at the source and the same Niagara setup suddenly plays smoothly.

This tutorial walks through why it happens and how to solve it, using the adaptive image pipeline built into the AI Flipbook Generator as the worked example. The plugin turns a text prompt into a finished spritesheet, then runs exactly this clean-up before it bakes a Texture2D, a Material Instance and a Niagara System — so the fix is the same whether you are repairing a hand-authored sheet or generating a new one.

Why AI-generated grids drift in cell count

Sub-UV cycling assumes a perfect grid. If you tell Niagara your sheet is 6 rows by 6 columns, it slices the texture into 36 equal rectangles and steps through them. The moment the real content does not line up with those rectangles, every frame is sampled slightly off, and that misalignment reads as drift and bounce as the cycle advances.

When the frames come from an image model this is the default failure, not the exception. You can ask for a 6x6 grid and get a sheet whose actual usable cells sit at 5x5 or 6x8 spacing, because the model paints to its own internal sense of layout rather than snapping to your gutters. The AI Flipbook Generator pushes against this on the way out — it sends a grid template plus a gutter-locking mask to OpenAI's image-edits endpoint so the model paints inside the requested cells instead of bleeding across them — but no prompt-side trick is perfect, and some drift survives.

So the first rule of a stable flipbook is: never trust the requested grid, measure the delivered one. The plugin's pipeline auto-detects the actual cell count the model returned, explicitly handling cases like a 5x5 or 6x8 sheet that came back from a 6x6 request. Whatever later steps do, they operate on the grid that actually exists in the pixels — which is the only grid Niagara will ever see.

Adaptive slicing from the alpha-density signal

Once you stop trusting the nominal grid, you need a way to find the real one. Splitting the image into equal Nths only works if the content was authored on an exact lattice; for a drifted sheet it slices straight through the middle of sprites. The robust approach is to let the picture tell you where its own seams are.

The signal to use is alpha density. Sum the opacity along each row and each column of the sheet and you get two profiles whose peaks mark where sprites sit and whose troughs mark the empty gutters between them. The valleys in those profiles are the true cell boundaries, regardless of whether they fall on neat fractions of the image width. The AI Flipbook Generator's pipeline does exactly this — it finds real cell boundaries from the alpha-density signal rather than assuming evenly spaced cuts — so a sheet that drifted to uneven spacing still gets cut between the frames instead of through them.

If you are repairing a sheet by hand without the plugin, the same principle applies: look at where the transparent gutters actually are and cut there. Slicing on the content rather than on arithmetic is the single biggest contributor to a flipbook that does not drift, because it guarantees that every cell you hand to Niagara contains one whole sprite and nothing of its neighbours.

Chroma keying with an auto-detected key colour

Plenty of spritesheets arrive on a solid background rather than with a real alpha channel — magenta, lime green or black behind the effect. To slice on alpha density and to composite cleanly in-engine, you first have to turn that flat backdrop into transparency. That is chroma keying, and the part people get wrong is hard-coding the key colour.

The safer move is to detect the key colour from the image itself — sample the corners and dominant background, decide what is actually behind the effect, and key that out. The AI Flipbook Generator does this with an auto-detected key colour, and it deliberately offers three background choices tuned to different palettes: Magenta (#FF00FF), Lime green (#00FF00) and Black (#000000). Magenta and lime are the workhorses because they almost never appear inside a fire, smoke or magic effect, so keying them leaves the sprite untouched; black is there for the cases where a dark background suits the palette better.

Match the key colour to your effect's palette and the key is clean. Use a green key behind a green toxic cloud and you will eat holes in your own sprite — which is exactly why the choice is exposed rather than fixed. Get the key right and you have a genuine alpha channel to drive the adaptive slicing in the previous step, and the two stages reinforce each other.

De-spill and per-cell alpha re-centre — where the bounce dies

Keying a flat colour out of a soft-edged effect leaves two artefacts, and these are the ones you actually see at runtime. The first is colour fringe: along every translucent edge, the keyed background colour has mixed into the semi-transparent pixels, so a magenta-keyed flame carries a faint magenta rim and a green-keyed puff carries a green one. The fix is de-spill — detecting that contamination on the translucent edges and removing it so the soft edges fade to clean colour instead of to the key. The AI Flipbook Generator runs this de-spill pass as part of its pipeline.

The second artefact is the actual cause of the bounce. Even with a perfect grid, if the visible content sits at a different position inside each cell — a flame nudged left in frame 3, right in frame 7 — then cycling those cells walks the effect around the screen. Equal-sized cells are necessary but not sufficient; the content has to be consistently placed within them.

This is what per-cell alpha re-centre solves. For each detected cell, the pipeline finds the centre of mass of the sprite's alpha and shifts the content so every frame is centred the same way. Because the re-centre is computed from opacity, it follows the visible effect rather than the cell rectangle, so the apparent position is stable from frame to frame. That single step — per-cell alpha re-centre to kill frame bounce — is the difference between a flipbook that pulses in place and one that visibly jitters across the viewport.

If you are diagnosing this without the plugin, the tell is simple: scrub through your frames one at a time and watch the bright core. If it wanders, your cells are not re-centred, and no amount of Niagara tuning will hold it still — the fix has to happen in the texture.

Premultiplied alpha for clean compositing

There is one last source of edge fringe, and it appears even after a perfect key and de-spill: straight (non-premultiplied) alpha. When the GPU blends a translucent edge, it interpolates colour and alpha separately, so a fully-transparent pixel that still carries some leftover colour value can smear that colour into its neighbours during filtering and blending. The result is a faint halo that no amount of keying removes, because the problem is in how the texture is blended, not in the texture's visible content.

The cure is premultiplied alpha: bake the colour already multiplied by its own alpha so transparent regions carry no stray colour to bleed. The AI Flipbook Generator outputs premultiplied alpha for exactly this reason, which keeps edges clean once the sheet is composited in a translucent or additive material.

This is also where the material blend mode you pick matters. When you bake, the plugin creates a Material Instance and lets you choose Translucent, Additive or AlphaComposite. AlphaComposite is the natural partner for premultiplied alpha; Additive suits glowing effects like fire and magic where you want the bright frames to add light into the scene; Translucent suits smoke and other occluding effects. Picking the blend that matches the effect, on top of premultiplied alpha, is what makes the final composite read clean rather than haloed.

Putting it together and baking to Niagara

With the sheet cleaned, the bake is the easy part — and it is one click in the AI Flipbook Generator. Here is the order the plugin runs in, which is also a sound order to follow if you are repairing a sheet by hand and wiring it up yourself.

1. Confirm the real grid. Detect the actual cell count in the delivered sheet rather than trusting the size you requested, because that detected grid is what every later step and Niagara itself will use.

2. Key the background. Auto-detect or pick the key colour (Magenta, Lime green or Black) that does not appear inside your effect, and key it out to get a genuine alpha channel.

3. Slice on the alpha-density signal. Find the real cell boundaries from where the transparent gutters actually fall, so each cell holds exactly one whole sprite.

4. De-spill and re-centre. Remove the keyed-colour fringe from the translucent edges, then re-centre each cell on its alpha centre of mass to eliminate frame-to-frame bounce.

5. Output premultiplied alpha, then bake. Bake the cleaned sheet to a Texture2D, build a Material Instance (choose Translucent, Additive or AlphaComposite to suit the effect), and generate a Niagara System with sub-UV cycling, sprite size and animation duration exposed as runtime-overridable User parameters.

Drop the resulting Niagara System into your level and the effect should now hold its position and show clean edges, because the texture handed to the sub-UV cycler is finally honest about its own grid. If a bake still looks wrong, the plugin writes a per-iteration debug dump under Saved/AIFlipbook/Iterations/<timestamp>/ capturing the exact prompt, template, mask, raw response and post-processed bitmap — so you can see at which stage the sheet went astray instead of guessing. Start there, fix the offending stage, and re-bake.

Flipbook artefacts and where the fix lives

Each visible symptom traces to a specific stage of the texture pipeline, not to your Niagara setup.

FAQ