# Make your own background

The game ships with four backgrounds. If you want your own — your office, a
spaceship, a castle, a hospital, wherever your training is set — you can
generate one with any AI image tool (ChatGPT, Midjourney, Gemini, whatever you
already use) and drop it straight in.

---

## The prompt

Copy this and fill in the bracketed parts.

> A seamless, horizontally tileable side-scrolling game background of a
> **[SETTING / THEME]**, in a **[ART STYLE]** illustration style with
> **[COLOR / MOOD DESCRIPTION]**. Landscape, 1472 × 1141.
>
> The upper 60 to 65% of the image should carry the main visual interest. Show
> **[MAIN BACKGROUND FEATURE OR ENVIRONMENT]**, with **[LIGHTING / DECORATIVE
> ELEMENTS]** and **[ARCHITECTURAL OR ENVIRONMENTAL DETAILS]**. Extend these
> visual elements lower on the canvas so the empty area does not feel
> oversized. Keep the composition balanced and visually interesting across the
> upper portion.
>
> The lower 35 to 40% should be a simple, nearly flat **[WALL / SURFACE /
> BACKGROUND ELEMENT]** in **[COLOR OR MATERIAL]**, with minimal detail. This
> area should stay visually quiet so characters, obstacles, and gameplay
> elements remain easy to see. Only very subtle **[SHADING / PANELING /
> TEXTURE]** is allowed. No busy textures or distracting details in this lower
> section.
>
> Critical: the left and right edges must align perfectly for seamless
> horizontal tiling. Design the repeating architecture so both edges end at the
> exact center of a **[WINDOW FRAME / COLUMN / WALL PANEL / STRUCTURAL
> DIVISION / OTHER REPEATING ELEMENT]**, allowing the pattern to continue
> cleanly when the image is repeated side by side.
>
> No people, no furniture, no floor, no text, no logos. Nothing in the lower
> portion except the simple **[WALL / SURFACE / BACKGROUND ELEMENT]**.

---

## A filled-in example

This is roughly what produced the brick loft that ships with the game:

> A seamless, horizontally tileable side-scrolling game background of an
> **exposed-brick industrial loft office**, in a **flat vector** illustration
> style with **warm, muted tones**. Landscape, 1472 × 1141.
>
> The upper 60 to 65% should carry the main visual interest. Show **a red
> brick wall between dark steel columns**, with **hanging industrial pendant
> lamps casting warm pools of light** and **riveted steel beams and diagonal
> braces**. Extend these visual elements lower on the canvas so the empty area
> does not feel oversized...
>
> The lower 35 to 40% should be a simple, nearly flat **panelled wainscot
> wall** in **dark charcoal grey**, with minimal detail...
>
> Critical: ... both edges end at the exact center of a **steel column**...

---

## Why the layout rules matter

Those two rules aren't style preferences — the game depends on them.

**It repeats.** The game tiles one image across the whole level and scrolls it
at 30% of the camera speed. If the left and right edges don't line up you get a
visible seam sliding past every few seconds.

**The bottom is where the game happens.** Your character, the shelves, the
coins, the enemies and the wall clocks all get drawn over the lower part of the
image. Busy detail down there makes the game genuinely hard to read.

---

## Checking it before you use it

**Test the tiling in ten seconds:** open the image, copy it, and paste two
copies side by side in any tool — Google Slides, PowerPoint, Canva, Preview.
Look at the join. If you can see where one ends and the next begins, ask the
image tool to try again and remind it about the matching edges. This usually
takes a couple of goes; image models find seamless tiling hard.

---

## Putting it in the game

1. Save your image into `assets/game/office/` inside the project folder.
2. Name it `office-bg-yourname.png` — for example `office-bg-hospital.png`.
3. Tell Claude Code:

> Use assets/game/office/office-bg-hospital.png as the background.

That's it. **The floor follows automatically** — the game tints the floor to
match your background's own lower wall, so you won't end up with a hospital
corridor sitting on an indigo office carpet.

If your image isn't exactly 1472 × 1141, ask Claude Code to resize it for you
and it'll handle the rest.

---

## If it looks wrong

Tell Claude Code what you see, in plain words:

- *"There's a visible line where the background repeats"* — the edges don't
  match; regenerate the image.
- *"I can't see my character against the background"* — the lower portion is
  too busy or too light.
- *"The background is stretched"* — wrong aspect ratio; ask Claude to fix it.