4. Give the story a visual identity

This lesson stays on 0.3. It adds two original geometric teaching images: a greenhouse and a transparent Rowan portrait. They are deliberately simple, reusable artwork; replace them with your own cleared assets when you want a different style.

One asset, several distinct jobs

Field	Reader-facing purpose
`publication.cover_asset_id`	The story’s cover
`entries[0].hero_asset_id`	The entry’s introductory image
`reader_cards[].image`	A character or scene card image
`reader_cards[].avatar`	A square crop used for a character avatar
`visual_anchors[].references`	Visual reference material for consistent generation
`illustrations` + `opening_illustrations`	An authored image placed after a specific opening paragraph

Copy the complete assets folder and media-manifest.json from finished alongside your working pack. Add the asset declarations, publication information, scene card, portrait bindings, visual anchor, and illustration shown in the finished JSON. Keep ID references intact. For example, greenhouse_art is the asset, greenhouse_arrival is the illustration, and greenhouse is the scene card; these are different objects.

An asset declaration records its MIME type, SHA-256 and actual byte size. Editing or re-encoding a PNG changes its hash. A path in media-manifest.json only tells a local tool where to find bytes; it does not upload them. A compatible uploader must attach the bytes that match the declarations.

Crop and anchor carefully

The avatar crop uses normalized coordinates from 0 to 1 in source pixels before orientation: x, y, width, height. This portrait is 256×256. The example selects the square from pixel (68, 20) with size 120×120. Keep it nonempty and square in pixels, not merely square on a resized screen.

The opening illustration appears after paragraph 0, identified by the paragraph’s digest. Recompute that digest with Lesson 3’s command using index 0 whenever you edit the paragraph. A visual reference is not itself a reader-visible illustration; each needs the appropriate binding and reveal condition.

Set revision to 5. Run the structure check, then inspect the PNG files directly. Expected result: a greenhouse cover/hero, a Rowan card and avatar, and one illustration after the first paragraph in a compatible reader. This site’s tests verify hashes, image decoding, crop bounds and host references; actual layout still needs a private trial.

If the host reports missing_asset, attach the declared bytes. For invalid_attachment, compare hash, size and MIME. For a missing illustration, check illustration ID, entry scope, paragraph index and digest. Keep publication.visibility private and rights review pending until you have completed the publication workflow.

The original teaching artwork

Static previews of the actual downloaded images. The sprite frames are shown separately for comparison; this is not a live player.

Original geometric teaching image: greenhouse glass, sunset and a seedling. — `greenhouse_art`

Original geometric Rowan teaching portrait on a transparent canvas. — `rowan_neutral`

Check your work locally

From the extracted bundle folder, create the environment and install the pinned dependencies once. Then check both files, and repeat the start check after your edits. The same commands work for every lesson.

macOS / Linux

python3 -m venv .venv
.venv/bin/python -m pip install -r requirements.txt
.venv/bin/python check.py start/pack.json
.venv/bin/python check.py finished/pack.json

Windows PowerShell

py -3 -m venv .venv
.venv\Scripts\python.exe -m pip install -r requirements.txt
.venv\Scripts\python.exe check.py start/pack.json
.venv\Scripts\python.exe check.py finished/pack.json

Expected for the finished pack: Structural check passed: Creator Pack 0.3 followed by the exact Schema SHA-256. This is a structural check, not host admission or a live playtest.

Working excerpt from the finished pack

This excerpt is generated from the tested download. It is not a complete pack; edit the named fields inside start/pack.json or compare finished/pack.json.

{
  "hero_asset_id": "greenhouse_art",
  "opening_illustrations": [
    {
      "after_paragraph_index": 0,
      "paragraph_digest": "43a9743240b5b5c2afb0bcb5b3e77526a29e63d49f6b1433d2ae11c0d3e119f2",
      "illustration_id": "greenhouse_arrival"
    }
  ],
  "avatar": {
    "asset_id": "rowan_neutral",
    "crop": {
      "x": 0.265625,
      "y": 0.078125,
      "width": 0.46875,
      "height": 0.46875
    }
  }
}

Look up the fields: assets · illustrations · visual_anchors

Next lesson