Unreal Engine supports using flipbooks on particles. However, going through the entire process of making a particle system and a material is ineffective, when you’re just browsing for a right texture. Often everything you want is to see the spritesheet in motion and compare basic settings. That’s why I created the Flipbook Viewer plugin.
Flipbooks (or: spritesheets) are animations saved into a single texture atlas. They’re great for storing self-contained visual effects, like a flame particle or a simulated water splash.
The viewer is a convenient editor window, in which you can play an animated texture instantly. It also allows to precisely scrub the timeline or stop at a certain moment, making a review process easier. Quick levels adjustments let you debug the content without opening Photoshop. Also if you downloaded a pack of flipbooks, you can easily check how they look with a given background and blend mode.
How to start
- Open or restart Unreal Engine. Go to Edit → Plugins
- Find Installed → FX category (left) → Flipbook Viewer. Enable it.
- Open it through Window → Flipbook Viewer
If you’re using UE 4.22, there’s an additional step to do:
- Go to Content Browser. In its bottom-right corner click View Options, then enable Show Plugin Content and Show Engine Content. It will reveal new folders.
- Open the FlipbookViewer Content folder, right-click on TAA_FlipbookViewer and Run Editor Utility Widget.
- Once you started the tool at least once, you’ll be able access it easier, through Window → Editor Utility Widgets → TAA_FlipbookViewer
Playing a flipbook
To load a flipbook, select a texture in Unreal’s Content Browser. Then click the arrow icon to the right of the texture name drop-down. Adjust rows and columns (Frames) accordingly. Use FPS to control the playback speed of the animation.
The viewport shows an approximate look of the texture when applied on a plane. The goal of the tool is simplicity, so a predefined material is used instead of an actual particle.
The slider shows the current time in the animation. You can enter different Start and End frames to loop a particular range of frames (e.g. when your flipbook contains multiple sequences in one sheet).
Zoom out shows the entire flipbook at once. It just helps to see the original texture. The frame range and the current frame are also shown, as white markers.
When the time slider is in between frames, the two nearest frames are blended together. Such interpolation gives a smooth motion with less frames per second. This is how Unreal’s SubUV material function behaves too. If you prefer exact frames, click on Blend two frames and change it to Integer frames instead.
Blending modes and background
Additive is one of the blending modes. They determine how the content is drawn over the background. Additive, as the name implies, adds the pixel value to the color behind – basically making it always emissive. It’s used for flames, lightning bolts, holograms and such. Black will be invisible in this mode, as its value is 0. If the alpha is enabled, it multiplies the color.
The other option is Translucent. The texture’s opacity is controlled only by the alpha channel (or solid white if no alpha is present).
Both are analogous to Unreal’s material blending modes. In Photoshop, the equivalent modes are Linear Dodge (Add) for additive and Normal for translucent.
Dark gray is the default background. You change it to Black, Light Gray or White. The Checker pattern can be toggled as well.
Tiled 3×3 is useful for tileable animated textures, for example water. It shows how does the pattern look when repeated.
Adjustments
R / G / B / A checkboxes control the visibility of the respective color channels. Alpha premultiplies the other channels in the Additive blend mode or is used as the final opacity in Translucent mode. When only one channel is enabled at once, it’s treated like a grayscale texture.
Blackbody takes the sum of all enabled channels and uses it to feed a black body emission gradient. It’s a physically-based property, which you can observe in fire or hot metal. In the viewer, the 1.0 pixel value (white) is mapped to the maximum temperature provided in the input field (3700 by default).
Levels behave similarly to the popular filter from 2D image editors. Black point means the original image’s darkest value. Everything lower than this will be clipped to black too. White point sets the brightest value, above which everything will be clipped to white. Increasing Black and lowering White raises the contrast. Gamma controls the exponent of the output curve. These 3 operations are performed before Blackbody.
Bug reports and contact
Don’t hesitate to report bugs. Please describe the last steps you made. The more detailed your report, the higher the chances I’d be able to help. I also welcome feedback. Contact me at support@techartaid.com