# Make the game yours

## Start with the workshop

1. Open customize.html. Pick one of the two fighter slots.
2. Change the displayed name, accent color, signature name, movement speed and power.
3. Download config.js and replace the file with that name next to index.html.
4. Choose an animation and select its replacement PNG/WebP sheet.
5. Enter the frame width/height, columns, frame count and playback speed. The preview animates immediately.
6. Set the foot anchor to the character's standing origin within each frame. The cyan cross shows that point. Adjust display scale until the character looks around 220 pixels tall.
7. Repeat for other actions, then download atlas.js and place it inside assets/.
8. Copy the exact uploaded image files into assets/user/, then reload the game.

The workshop doesn't upload anything. Edits stay in memory until you download them; refreshing the workshop discards unexported edits. Image file names must match the exported references, including capitalization. A download may receive a numeric suffix if your Downloads folder already contains a file with that name—rename it back before replacing the original.

## Animation format

Use transparent PNG or WebP with equal-size grid cells. Each action has its own sheet. Store frames from left to right, then top to bottom. Keep the character's origin at the same position throughout a sequence.

Supported slots: idle, walk, run, jump, crouch, light, heavy, kick, air, launcher, block, hit, ko, special. Heavy kick shares kick; super and signature use heavy after the cutscene. Change these mappings in engine.js for a more specialized roster.

Example entry in assets/atlas.js:

```js
idle: {
  src: 'assets/user/my-idle.png',
  w: 256, h: 256, cols: 8, frames: 8,
  anchor: 128, feet: 242, fps: 12, scale: 0.9
}
```

The renderer flips artwork to face the opponent. Set `facing` to 1 for art drawn facing right or -1 for art drawn facing left. Changing visuals does not silently change hitboxes or move ranges. Those live in engine.js to keep balance stable as art changes.

## Other changes

- config.js: game title, health, round timer, rounds to win, signature damage, controls, roster and stage definitions.
- assets/atlas.js: animation sheet layout and anchors.
- game.js: stage composition, camera, effects, audio and menu presentation.
- engine.js: move timings, damage, range, guard, combo rules and CPU behavior.
- style.css: menus and surrounding page.

The current format supports two selected sample fighters. Keep their stable `id` and `art` keys when replacing them; displayed names can be anything. To add more roster slots rather than replace these two, extend config.fighters and ART together. Opponents currently cycle to the next roster entry.

All visible character art, including menu portraits and signature cut-ins, uses the selected animation atlas. There are no placeholder arms or bodies drawn over imported sheets.