# Ludoitte logo sprite sheets

Frame-by-frame renders of the animated logo, transparent PNG, 512x384 px per frame, 30 fps,
left-to-right then top-to-bottom. Two ink variants: `light` (navy arc and "e", for light backgrounds)
and `dark` (cream arc and "e", for dark backgrounds). The pieces are the same in both.

| Sheet | Frames | Length | Loop | What happens |
|---|---|---|---|---|
| `ludoitte-logo-intro-*` | 48 | 1.6 s | no | arc draws in, pieces pop up in turn, letters drop in; last frame is the full logo |
| `ludoitte-logo-idle-wobble-*` | 36 | 1.2 s | no | the blue pawn wobbles |
| `ludoitte-logo-idle-hop-*` | 36 | 1.2 s | no | the green block hops with a squash |
| `ludoitte-logo-idle-spin-*` | 36 | 1.2 s | no | the yellow diamond flips round |
| `ludoitte-logo-idle-twist-*` | 36 | 1.2 s | no | the red cone hops with a twist |

Suggested use: play `intro` once, hold the last frame, then every 8 to 15 seconds play one idle
action at random and return to the held frame. Every idle sheet starts and ends on the full logo, so
they can follow each other or the intro without a cut.

## Unity

1. Import the PNG, set Texture Type: Sprite (2D and UI), Sprite Mode: Multiple, Filter: Bilinear,
   Compression: None or High Quality (the flat colours band badly under Normal).
2. Sprite Editor → Slice → Type: Grid By Cell Size, 512x384, Pivot: Center → Slice → Apply.
3. Select the sliced sprites in order and drag them onto a scene object to create an Animation clip,
   or build the clip in the Animation window. Set Samples to 30. Untick Loop Time for `intro`.
4. `512` px wide at Pixels Per Unit 100 gives a 5.12-unit-wide logo; scale to taste.

The `.json` next to each sheet lists frame rects if you prefer to slice by script.

## Defold

Copy the PNG and its `.tilesource` into your project (the tilesource expects the image at
`/assets/logo/<name>.png`; edit the `image:` line if you keep it elsewhere). Put a Sprite component
on a game object, set Image to the tilesource and Default Animation to `intro`, then:

    sprite.play_flipbook("#logo", "intro", function() -- hold on last frame end)
    -- later, on a timer:
    sprite.play_flipbook("#logo", "hop")   -- needs the idle tilesource on the same or another sprite

Each sheet is its own tilesource; add the idle ones as separate sprites, or merge them into one atlas
with the frames as animation groups in the editor.

## Web (CSS steps)

    .logo { width: 512px; height: 384px; background: url(ludoitte-logo-intro-dark-512.png) 0 0 / 800% auto no-repeat;
             animation: intro 1.60s steps(48) forwards; }

Sheets are laid out 8 columns wide, so use `background-position` per frame from the JSON.
For the web the SVG version (`ludoitte-logo-animated*.svg`) is smaller and sharper; sprites are for engines.
