Water

Colour and depth

1. Water is a vertical gradient. Looking steeply into near water you see through it: dark, transparent, tinted by the bed (green-brown). Far water at a shallow angle mirrors the sky: the sky ramp, one or two steps darker. Default: dark near → sky-coloured far, as hard bands joined with a dithered checker row (rules://13-dithering-and-texture).
2. Reflected light objects are slightly darker than the objects. Dark objects (trees, hulls) reflect weakly or vanish. Shadows on clear deep water vanish; on turbid water (brown-green cast) they are soft. At dusk, clear water reflects the cool sky evenly.
3. Depth ramp for underwater and streams: shallows show the warm bed (red-brown, ochre) → olive-green → teal → blue-green → indigo. Red goes first (about 3 m), oranges by about 7.6 m; below that only blue, cyan and violet, with low contrast. Horizontal distance acts like depth. Add warm light only if there is a source (lamp, flash).
4. Keep a low-contrast base and a small overlay. Measured saint11 tile (16×16): base #627aea with 17 % flecks one step darker (#5b6ee1); overlay mid #639bff 28 %, cyan glint #5fcde4 7 %, pale #cbdbfc under 2 %; the rest transparent. Overlay shapes are 1–2 px thick wavy dashes, 4–7 px long, pale pixels next to cyan ones. Sea and grass must not share one noise structure.

Surface animation

5. Two layers. Top: wave shapes (think circles changing size) where nothing moves more than 1 px, each ripple one chunk, never split into parts; ripples travel a small closed loop (up, left, down, right) with no rest frame. Bottom: the base tile scrolls right at constant speed (0.5 px/frame in saint11's 100 ms loop). Add small bright spots on wave tips and move them slightly.
6. Waves: build a chain of ovals as a loopable guide: circles give short deep waves, wide ovals shallow ones; crests are steeper than troughs, so use asymmetric ovals. A sine is fine for small narrow waves. Frame budget: 2–4 frames for a tile; 8 frames at ~8 fps for ocean waves or they look choppy.
7. Surface sparkle is a 6-frame loop of simple linear moves; bright patches mirror the clouds above. Animate tiles inside each autotile index. Rivers without a grid: small pulsing-line loops (4 frames) where flow shows.
8. Blend trick for wet contrast: duplicate the water layer, lower one multiply, the upper overlay, both ~50 %.

Shores and edges

9. Shore stack from land: sand (grey-green yellow, not cartoon yellow) → wet sand, darker → thin foam line → shallow (lightest, bed visible) → mid → deep. Give sand/water a 1-px darker separation line. Silber's top-down sea darkens near the beach, but Gurney's stream ramp puts light shallows over darker deeps. Use the light shallows with a dark line: it keeps both the separation and the physics.
10. Edge animation menu: undulate (edge pixels 1 px up, left, down, right), expand/contract (rest, −1, rest, +1; cheap, but the water area visibly grows), side waves (¼ of the edge contracts, ¼ expands, shifting a quarter per frame over 4 frames), ocean waves (expand with a transparent under-wave, slower contraction, 8 frames). Animating the inner outline only keeps the coast calm. Foam sweeps along one diagonal, it does not pulse everywhere. RPG Maker-style water autotile = 3 frames played 1-2-3-2-1, the land connection drawn on the side frames.

Reflections

11. Reflect only upright objects (people, trees, posts), never flat things (cobblestones). Mirror about the object's ground-contact line, shorten the copy about 25 %, darken one ramp step, desaturate ~10, keep only the silhouette's big shapes.
12. Break it: cut the reflection into horizontal 1-px strips and shift alternate strips ±1 px in a 2-row period. Vertical lines survive, horizontal lines break; light breeze turns reflections into webs of vertical strokes. Fade the lowest third by replacing every other pixel with water colour. Add a few glints on crests.
13. Animate by swapping the strip offsets on alternate frames (rows 0/1 ↔ 1/0), or with a slow ripple distort whose source sits off the bottom edge so waves travel one way (PB10: speed 0.5, width 10, height 3). Pad the layer with transparent space and render with hard pixels.

Waterfalls, streams, underwater

14. A waterfall is three parts: mouth (lip, brightest, with reflections), flow (vertical bands that sag and darken as they fall and break up toward the bottom) and splash (foam particles, looped in sync). Shake the column ±1 px. A narrow fall has a twisting V highlight; two overlays at different speeds widen the wave as it falls.
15. Loop the flow by shifting the streak pattern down with wrap. The shift per frame must divide the pattern period: period 8, shift 2 → 4 frames (the template); or 16 px with shifts 6, 5, 5. Apparent speed comes from the length of each streak segment, not the cycle speed: short at the lip (about 3 px), long below (5–10 px). Bridge each seam between segments with a margin band: its top half takes the last colour above, its bottom half the first colour below, otherwise a flash crosses the flow. For transparency, checker two phases of the same pattern.
16. Mountain streams: warm shallows, olive, teal, dark pools; rapids = near-white foam in the lightest 1–2 entries with a dithered edge, and dark troughs between.
17. Under the surface: a darker translucent purple-blue region; objects displaced by a sine; bubbles with random horizontal drift that fade or rise. Caustics = a network of 1-px lines in the lightest water tone on the bottom, shifting 1 px in alternating directions over 4–8 frames.
18. Iso water tile sits half a cube lower than land; its texture drops 1 px per frame while highlight pixels alternate, 16-frame loop (rules://71-isometric).

Water surface tile: static base with flecks, a ripple overlay that moves each chunk 1 px around a small loop; frames are side by side, cut at the transparent column.

a = water-base     #627aea
b = water-fleck    #5b6ee1
m = ripple-mid     #639bff
c = glint-cyan     #5fcde4
p = glint-pale     #cbdbfc
---
aaaaabaaaaaaaaaa.aaaaabaaaaaaaaaa.aaaaabaaaaaaaaaa.aaaaabaaaaaaaaaa
aaaaapaaaammmcca.aaaaaapaaaaaabaa.aaaaaaaaaaaaabaa.aaaaaaaaammmccaa
ammmmccaaaammaaa.abmmmmccaammmcca.abaaaapaammmccaa.abaaapaaaammaaaa
aammabaaabaaaaaa.aaammbaaabammaaa.aammmmccabmmaaaa.ammmmccaabaaaaaa
aaaaaaaaaaaaaaaa.aaaaaaaaaaaaaaaa.aaammaaaaaaaaaaa.aammaaaaaaaaaaaa
aaaaaaabaaaaaaab.aaaaaaabaaaaaaab.aaaaaaabaaaaaaab.aaaaaaabaaaaaaab
aaabaaaaaaaaabaa.aaabaaaaaaaaabaa.aaabaaaapaaaabaa.aaabaaaaapaaabaa
aaaaaaaaapabaaaa.aaaaaaaapaabaaaa.aaaammmmccabaaaa.aaaaammmmccbaaaa
aaaaammmmccaaaaa.aaaammmmccammmcc.caaaammaaaaammmc.aaaaaammaaaaaaaa
baaaaammbaammmcc.baaaammabaaammaa.baaaaaaabaaaamma.caaaaaaabaaammmc
abaaaaaaaaaammaa.abaaaaaaaaaabaaa.abaaaaaaaaaabaaa.abaaaaaaaaaabmma
aaapbaaaaaaaaaaa.aaaapaaaaaaaaaaa.aaaabaaaaaaaaaaa.aaaabaaaaaaaaaaa
mmmccaaaabaaaaaa.ammmccaaabaaaaaa.aaaapaaaabaaaaaa.aaapaaaaabaaaaaa
ammaaabaammmmcca.aammaabaaaaaaaba.ammmccbaaaaaaaba.mmmccabammmmccba
aabaaaaaaammaaaa.aabaaaaaammmmcca.aammaaaammmmccaa.ammaaaaaammaaaaa
aaaaaaaaaabaaaaa.aaaaaaaaaammaaaa.aaaaaaaaammaaaaa.aaaaaaaaaabaaaaa

Top-down shoreline tile, two frames. Sand, wet sand, wavy foam line, shallow, mid and deep with dithered joins; frame 2 pushes the foam one row out.

s = sand           #e3c98a
t = sand-grain     #c9a96a
w = wet-sand       #b9946a
f = foam           #f1fbff
a = shallow        #6ccbd0
b = water-mid      #3c9bc7
d = water-deep     #2b64a8
---
sssssssssssstsss.sssssssssssstsss
sstsssssssssssss.sstsssssssssssss
sssssssssstsssss.sssssssssstsssss
ssssssstssssssts.ssssssstssssssts
ssssstssssssssss.ssssstssssssssss
wwwwwwwwwwwwwwww.wwwwwwwwwwwwwwww
wwwwwwffwwwwwwff.wwwwwwwwwwwwwwww
ffwwffaaffwwffaa.wwwwffwwwwwwffww
aaffaaaaaaffaaaa.wwffaaffwwffaaff
aaaaaabaaaaaaaba.ffaaaaaaffaaaaaa
abaaabbbabaaabbb.aaaaabaaaaaaabaa
bbbabbbbbbbabbbb.aababbbaaababbba
bbbbbbbdbbbbbbbd.abbbbbbbabbbbbbb
dbbbdbdddbbbdbdd.bbbbdbbbbbbbdbbb
ddbdddddddbddddd.bbbdddbdbbbdddbd
dddddddddddddddd.dbdddddddbdddddd

Side-view water body: surface highlight line with crest steps, sparkle, light-to-abyss bands with dithered joins.

p = sparkle        #f4fcff
h = surface-line   #9fe3f2
a = water-light    #58bfe0
r = ripple-dash    #8ad6ee
b = water-mid      #3a95cc
c = water-deep     #2b6aaa
d = water-abyss    #23468a
---
hhh.p.hhhh....hhhhh...hhh...hhhh
aaahhhaaaahphhaaaaahphaaahhpaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
babaaarrbaaaaabababaaabrraaababa
bbbbabbbbbababbrrbbbabbbbbabbrbb
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
cbcbbbcbcbbbbbcbcbcbbbcbcbbbcbcb
ccccbcccccbcbcccccccbcccccbccccc
cccccccccccccccccccccccccccccccc
cccccccccccccccccccccccccccccccc
dcdcccdcdcccccdcdcdcccdcdcccdcdc
ddddcdddddcdcdddddddcdddddcddddd
dddddddddddddddddddddddddddddddd

Waterfall, 4 frames: bright lip, streak pattern of period 8 shifted down 2 px per frame, darker toward the bottom, foam splash.

f = foam           #f4fcff
l = lip            #d9f4fb
w = streak-light   #a8e4f2
m = flow-mid       #4fa8d6
d = flow-dark      #2d6eae
e = fall-edge      #245a8f
---
elllllllllle.elllllllllle.elllllllllle.elllllllllle
ewwmmmmwwmme.emmwwmmwwmme.emmwwwwmmwwe.ewwmmwwmmwwe
ewwmmmmmmwwe.emmwwmmwwmme.emmwwmmmmmme.emmmmwwmmwwe
ewwmmwwmmwwe.ewwmmmmwwmme.emmwwmmwwmme.emmwwwwmmwwe
emmmmwwmmwwe.ewwmmmmmmwwe.emmwwmmwwmme.emmwwmmmmmme
emmwwwwmmwwe.ewwmmwwmmwwe.ewwmmmmwwmme.emmwwmmwwmme
emmwwmmmmmme.emmmmwwmmwwe.ewwmmmmmmwwe.emmwwmmwwmme
eddmmddmmdde.eddmmmmddmme.emmddmmddmme.emmddddmmdde
eddmmddmmdde.eddmmdddddde.eddddmmddmme.emmddddddmme
emmddddmmdde.eddmmddmmdde.eddmmmmddmme.emmddmmddmme
emmddddddmme.eddmmddmmdde.eddmmdddddde.eddddmmddmme
eddeeddeedde.eddeeeeddeee.eeeddeeddeee.eeeddddeedde
eeeeeddeedde.eddeeeeeedde.eeeddeeddeee.eeeddeeeeeee
edffddddffde.edffddffddde.effdddffddfe.eddffdffdfde
edddddffddde.eddfddfddfde.eddffdddffde.effdfddddffe
efdffffdfffe.effffdffffde.effdffffdffe.edffffdffffe
eddffdddffde.eddffdddffde.eddffdddffde.eddffdddffde
edddddddddde.edddddddddde.edddddddddde.edddddddddde
edddddddddde.edddddddddde.edddddddddde.edddddddddde

Reflection of a tree, two frames: shortened, darker, cut into 2-row strips offset ±1 px, lowest rows faded to water.

L = leaf-light     #63c74d
M = leaf-mid       #3e8948
D = leaf-dark      #265c42
T = trunk-lit      #b57a4a
V = trunk-shade    #5e3a2a
h = surface-line   #9fe3f2
a = water-light    #58bfe0
b = water-mid      #3a95cc
c = water-deep     #2b6aaa
r = ripple-dash    #8ad6ee
n = reflect-dark   #16372c
---
.......LLLMM................LLLMM........
.....LLLMMMMMD............LLLMMMMMD......
....LLLLMMMMMMD..........LLLLMMMMMMD.....
....LLLMMMMMMDD..........LLLMMMMMMDD.....
...LLLMMMMMMMDD.........LLLMMMMMMMDD.....
...LLMMMMMMMDDD.........LLMMMMMMMDDD.....
...MMMMMMMMDDDD.........MMMMMMMMDDDD.....
...MMMMMMDDDDDD.........MMMMMMDDDDDD.....
....MMMDDDDDDDD..........MMMDDDDDDDD.....
......DDDDDDD..............DDDDDDD.......
.........TV...................TV.........
.........TV...................TV.........
.........TV...................TV.........
.........TV...................TV.........
.........TV...................TV.........
........TTVV.................TTVV........
hhhhhhhhhhhhhhhhhhhh.hhhhhhhhhhhhhhhhhhhh
aaaaaaaaVVVVaaaaaaaa.aaaaaaaaaVVVVaaaaaaa
aaaaaaaaaVVaaaaaaaaa.aaaaaaaaaaVVaaaaaaaa
aaaaaaaaaaVVaaaaaaaa.aaaaaaaaaVVaaaaaaaaa
bbbbbbbbbbVVbbbbbbbb.bbbbbbbbbVVbbbbbbbbb
bbbbbbbbbVVbbbbrrbbb.bbbbbbbbbbVVbbbrrbbb
bbbbbbnnnnnnnbbbbbbb.bbbbbbbnnnnnnnbbbbbb
bbbbDDDDDDnnnnnnbbbb.bbbDDDDDDnnnnnnbbbbb
rrbbDDDDDDDDnnnnbbbb.rrbDDDDDDDDnnnnbbbbb
cccMMDDDDDDDnnnccccc.ccccMMDDDDDDDnnncccc
ccccMcMcDcDcDcnccrrc.ccccccMcDcDcDcnccrrc
cccccMcMcDcDcDcncccc.cccccMcMcDcDcDcccccc
ccccccMcMcDcDcnccccc.ccccccMcDcDcDccccccc
cccccccccccccccccccc.cccccccccccccccccccc

Depth ramp from the warm shallows to deep indigo with checker joins.

s = bed-shallow    #d9c27a
t = olive-green    #7da35a
u = teal           #3e9a8c
v = blue           #2f6fa0
x = indigo-deep    #243a78
---
ssssssss
ssssssss
stststst
tstststs
tttttttt
tutututu
utututut
uuuuuuuu
uvuvuvuv
vuvuvuvu
vvvvvvvv
vxvxvxvx
xvxvxvxv
xxxxxxxx
xxxxxxxx

1. sprite_info. Decide the water type (tile, side-view, fall, reflection), frame count and loop. Build a water ramp of 4–5 entries with palette op ramp or set, with hue travel from cyan-teal (light) to indigo (deep).
2. Base on its own layer: draw op rect fill, flecks with pixels, bands with rect and dither (pattern checker) on the joins.
3. Overlay on a second layer, draw op grid for ripples. Add frames with frame op duplicate; move each ripple chunk by re-drawing (≤1 px) or with cel op move for a whole overlay. Tag the loop with tag op create.
4. Waterfall: draw the period pattern once, then each frame is the pattern shifted down by the step with wrap: draw op blit two pieces (rows 0…H−s to y = s, rows H−s…H to y = 0). The splash is drawn per frame.
5. Reflection: draw op blit with flipVertical from the object (above its contact line) to below it; recolor op shade (−1 step) and desaturate on that region; then one blit per 2-row strip with x ± 1 in one draw call, last third dithered with dither (pattern checker) against the water colour.
6. look op filmstrip for the loop and onion to check ≤1 px moves; validate checks animation timing and strays. Check tile seams on 3×3 copies.

• Depth gradient present; the near/deep end is darkest and the far end matches the sky.
• Ripple moves ≤1 px per frame, each ripple one connected chunk; loop closes (filmstrip).
• Reflection is upright objects only, darker, shorter, strip-offset, faded; no perfect mirror.
• Shore stack is readable: sand, wet sand, foam, shallow, mid, deep.
• Waterfall has lip, flow, splash; streak period divides the loop; speed grows down the fall.
• No water colour is brighter than the sky it mirrors; no black outlines around water.

• saint11 Water tutorial (two layers, ripple chunks, bubbles, waterfall particles) and the measured 16×16 tile; Wolthera's water-edge sheets; RPG Maker VX waterfall tile test; Bilou's waterfall tutorial; Kortham on reflections.
• Slynyrd Pixelblog PB10 Water in Motion (oval-chain waves, waterfall mouth/flow/splash, reflection distort), PB23, PB43.
• Gurney, Color and Light, water pp. 200–205 (reflections, streams, colour under water), caustics pp. 160–161.
• Ferrari's waterfall recipe (segment length controls apparent speed; seam bridging; checker transparency).
• Silber, Pixel Art for Game Developers, top-down water pp. 162–164; Arne's beach notes.