Color cycling

A classic pixel-art technique: animate the palette without redrawing pixels. You paint a region with N colours, define a "cycle" over those palette slots, and the slots rotate automatically. The pixels themselves never move — what changes is which colour each slot points to at each tick.

Used historically in adventure games (Monkey Island, Loom) and 16-bit-era engines for water, fire, lava, conveyor belts, glints, twinkling stars, and many other ambient effects.

---

Where to find it

Right panel → Palette tab → Color Cycles (below the swatches).

The section starts expanded by default and shows the current cycles count next to the heading.

---

How it works

A cycle has:

• Slot indices — an ordered list of palette slots that rotate (e.g. [3, 4, 5, 6])
• Step ms — how often the rotation advances (default 200 ms)
• Enabled — on/off

Every tick, the colour assigned to slot 3 shifts to slot 4, slot 4 shifts to slot 5, … slot 6's colour wraps back to slot 3. Pixels that were painted with slot 3 now display slot 4's colour without changing the underlying pixel data.

Important: the cycle is a preview-time effect only. It animates in the Preview Window, not on the main editing canvas. Pixel data is never mutated, so undo, autosave, and PNG/sheet export are unaffected.

---

Create a cycle

1. Open the Color Cycles section.
2. Click + New cycle. A row appears with one default cycle.
3. The row has a swatch picker:
   • Top strip = current cycle order. Click any swatch here to remove it.
   • Below = the full palette. Click a palette swatch to add it to the cycle (with a numeric badge showing its position).
4. Adjust Step ms with the slider (50–2000 ms).
5. Click the play icon to enable. The icon switches to a pause to indicate the cycle is running.

---

Concrete example: water

1. Add four blue tones to your palette (let's say slots 3–6, dark to light).
2. Paint the bottom of your scene using only those four colours.
3. Create a cycle covering [3, 4, 5, 6], step 150 ms, enabled.
4. Open the Preview Window (P).
5. Watch the water flow.

For visual variation:

• Vertical waterfalls — same cycle, but paint your colours in vertical stripes — the rotation reads as a downward fall.
• Reverse direction — flip the slot indices ([6, 5, 4, 3]) so the cycle runs the other way.
• Different speeds — make multiple cycles with different stepMs values for layered effects.

---

Multiple cycles

You can have any number of cycles in a project. They run independently — different speeds, different slot ranges. Disable a cycle without removing it via the play/pause icon.

Each cycle has its own:

• Name (input field)
• Color (auto-rotated through 8 default colours, override per-cycle)
• Step ms
• Slot indices

---

Constraints

• A cycle needs at least 2 slots to do anything. With 0 or 1 slots the cycle is silently inert.
• The match is exact RGB — if a pixel is #5288c4 but the slot is #5288c5 (off by 1), the cycle won't affect that pixel. Avoid this by using indexed mode where every pixel is on-palette by construction.
• Cycles are not exported. PNG, sheet, and GIF exports use the static palette as it sits at the moment of export. If you need an animated GIF of a cycled effect, you'd need to manually bake frames first.

---

Tips

• For maximum reliability, work in indexed mode. Pixel-colour matching is guaranteed.
• Use the Sort by luminosity palette button before defining a cycle — when slots are ordered dark-to-light, the rotation visually reads as a wave.
• Combine with Frame tags or Frame interpolation for richer animation pipelines.
• Cycles are saved in .mstack and Dexie autosave.

---

Related

• Palette
• Indexed mode
• Preview Window — where cycles play
• Animation overview