Animations
Animations let you add ready-made monochrome frame animations to embedded screens without drawing every frame by hand. They are available for platforms that can generate animation playback code.
Adding an animation
Select the Image tool and choose Animation. Lopaka opens the animation browser with category tabs, a search field, size controls, and detail controls. If the active platform does not support animation code generation, the Animation option is hidden.
Use the category tabs to browse the built-in animation set, or type in the search field to filter animations by name across categories. Only categories with matching animations remain visible while searching. Hover a thumbnail to preview the motion before placing it.
Click an animation to add it to the center of the canvas. Lopaka creates an animation layer named from the animation, selected size, and frame count, for example sun-weather 48x48 14f.
Size and detail
The size control chooses the frame dimensions: 32 x 32, 48 x 48, or 64 x 64 pixels. Larger sizes are easier to read on the display but require more firmware data.
The detail control chooses how many frames are kept from the source animation:
| Detail | Frames | When to use |
|---|---|---|
| High | 28 | Smoothest motion when flash space allows it |
| Medium | 14 | Balanced motion and code size |
| Low | 7 | Smallest output when memory is tight |
The browser shows an estimated firmware data size for the selected size and detail. Use this estimate before placing large animations, especially on small monochrome devices.
Lopaka remembers the last size and detail you selected, so reopening the animation browser keeps the same settings.
Canvas behavior
An animation layer behaves like a normal layer for positioning, ordering, selection, and deletion. When the layer is not selected, the canvas shows its first frame as a static bitmap. When you select the layer, Lopaka plays the animation preview at its intended timing.
Deselecting the layer stops playback and returns it to the first frame. This keeps the editor calm while still letting you verify the animation in context.
Generated code
Animation layers generate frame data plus playback logic. The exact output depends on the platform and on the Include animation code setting.
When Include animation is enabled, Lopaka emits helper code that advances frames over time. The generated updateAnimations() helper tracks elapsed time and updates each animation's current frame using its delay. Platforms that group animation drawing also get a drawAnimations() helper, which calls updateAnimations() and draws every animation at its current frame.
On Adafruit/TFT_eSPI templates, Lopaka adds a loop() function that calls the animation drawing helper, so copied sketches can play immediately after setup. On U8g2 output, the generated loop updates animation frames before running the U8g2 firstPage() / nextPage() picture loop. On U8g2 ESP-IDF output, Lopaka keeps the code embeddable and does not create an app_main() function for you.
If a screen contains static layers around an animation, Lopaka keeps the layer order intact. On grouped-drawing platforms, drawAnimations() is inserted where the first animation layer appears in the stack. On U8g2, animation layers are drawn directly from the screen draw function in order.
When Include animation is disabled, animation frame data is inlined as static arrays. Lopaka does not emit animation includes, updateAnimations(), drawAnimations(), or a playback loop(). Use this mode when you want to manage playback yourself.
Animation files
The Code Settings panel lists downloadable animation attachments when a screen uses animation layers. Download these files with the generated source and place them next to your sketch or project files as required by your platform.
The generated draw calls reference the animation frame data by name. If the attachment is missing from your firmware project, the generated code will not compile or the animation frames will not be available at runtime.