# 可換裝像素角色：四方向走路與攻擊

這組素材由程式繪製，沿用紙娃娃的眼睛、臉型、髮型、身形、衣服與配色選項。四套範例分別為森林遊俠、星月法師、學院書生與遠行旅人；每套使用相同動作規則。

`pixel-motion-pack.zip` 包含四套完整圖集、動畫 JSON、12 層獨立素材、GIF／MP4 預覽與生成器原始碼。解壓後可直接開啟 `source/example.html`，在瀏覽器隨機換裝並重新匯出；不需 AI 或網路服務。

## 圖集規格

- PNG 透明背景，像素透明度為 0 或 255。
- 角色保留 64×64 設計的原生像素大小。統一每格 96×96，為手臂與短劍留出動作空間。
- 固定地面錨點 `(48,76)`；正規化值為 `(0.5, 0.7916667)`。
- 全圖集 `spritesheet.png`：768×1152、8 欄×12 列、80 格有效影格。
- `animations.json` 包含每格座標、每段動畫的影格名稱、fps、是否循環、角色設定及錨點。

| 列（從 0 起算） | 動作 | 方向 | 有效格數 | 播放速度 |
| --- | --- | --- | --- | --- |
| 0–3 | 待機 idle | 下、左、右、上 | 每列 4 格 | 4 fps，循環 |
| 4–7 | 走路 walk | 下、左、右、上 | 每列 8 格 | 10 fps，循環 |
| 8–11 | 攻擊 attack | 下、左、右、上 | 每列 8 格 | 12 fps，單次 |

待機列後半 4 格留白。影格大小固定，不作 trim。也有分開輸出的 `idle.png`（384×384）、`walk.png` / `attack.png`（768×384）；`animations.json` 座標指向完整的 `spritesheet.png`。

`layers/` 內的各張 PNG 使用相同圖集排列，按 JSON 的 `meta.layers` 順序疊起來即可還原完整角色。武器和揮砍效果有獨立圖層。

## 播放與使用

在像素動作研究室首頁，可切換部件、看四個方向、逐格檢視、試走與攻擊，也可匯出目前搭配的圖集、動畫 JSON 或 64×64 靜態角色。網站所有繪圖都在瀏覽器內執行。

圖集角色站在固定錨點；遊戲中的位移需由角色控制程式處理。攻擊完成後回到待機或走路，不能把 `attack` 當作永久循環狀態。JSON 中的 `suggestedImpactFrames` 只是打擊時間提示，不包含碰撞框、傷害、目標判定或移動距離。

`walk-preview.gif` 和 `attack-preview.gif` 從左到右為下、左、右、上；GIF 為便於觀看而循環，遊戲中的攻擊設定仍是單次。`pixel-motion-demo.mp4` 同時展示四方向走路與攻擊，依序換四套造型。

## 繼續擴充

```js
// 先載入 pixel-renderer.js、pixel-motion.js、sprite-export.js。
const config = { eyes: 0, face: 0, hair: 2, body: 1, outfit: 0, palette: 3 };
PixelMotion.render(canvas, config, { direction: 'left', action: 'walk', frame: 2 });
const { canvas: sheet, json } = PixelMotionExport.build(config);
```

每種部件沿用共同的朝向、關節位置與前後遮擋規則，因此替換現有選項可以重用動作。新增完全不同的衣服輪廓、髮型或武器，仍須補上相應的正面／側面／背面繪製與遮擋規則；不能只提供一張正面圖就自動得到正確動畫。

目前攻擊為共用短劍揮砍。四套衣服沒有各自的魔法、弓箭或雙手武器動作。

離線使用：下載完整 ZIP，解壓後開啟 `source/example.html`，即可隨機換裝並重新匯出精靈圖表與動畫 JSON。生成器本身不需安裝套件。

已通過 48 組身形／衣服／髮型配對的 3,840 次繪製檢查：非空白、不碰到畫布邊界、沒有半透明像素；另驗證 124 次圖層重組與四套共 320 格圖集座標。預覽頁的逐格、換裝、一次性攻擊、鍵盤移動、PNG／JSON 匯出與手機版面也已測試。這些是工程檢查與抽樣美術檢視，並非全部 3,072 種組態的逐格人工美術驗收。