實用創作流程
像素角色碰撞框:把碰撞區域和可見像素分開

狐狸尾巴畫得好看,不代表平台遊戲的碰撞體驗公平。如果每個可見像素都算進碰撞矩形,角色可能被尾巴絆住。匯出角色前,先決定哪些區域應該參與碰撞。
我們在 Ciyo 中以程式碼製作一隻虛構的 32×32 狐狸,再產生獨立的8× 檢查圖。這個範例說明如何一起交付角色圖與碰撞座標。它是結果可重現的示意樣本,不是影像模型測試,也沒有串接遊戲引擎。
先寫清楚座標約定
向開發者提供原始尺寸、座標原點、軸的方向與矩形含義。本例原點位於 32×32 影像的左上角,x 向右增加,y 向下增加。畫布上的顯示尺寸不會改變這些數值。
指定碰撞框從 x=8、y=7 開始,寬高為 16×23 原始像素。右側與底部不包含端點的邊界分別為 24 和 30,都在 32 以內。這些數值只是示意性的設計選擇;你的矩形應依遊戲中的移動和碰撞表現調整。
| 欄位 | 數值 | 含義 |
|---|---|---|
| 影像 | 32×32 | 原始 PNG 尺寸 |
| 原點 | 左上角 | 顯示縮放前的座標 |
| 碰撞框 | 8, 7, 16, 23 | x、y、寬度、高度 |
| 不包含端點的邊界 | 24, 30 | x + width; y + height |
| 檢查倍率 | 8× | 僅供檢查,256×256 |
要求產生獨立疊加圖
建立新的 Ciyo 專案,在同一個請求裡寫出原圖尺寸與碰撞矩形。請設計代理保留原始檔,並在副本上繪製碰撞疊加層。同時要求在回覆中附上座標清單,即使畫布預覽很小,座標也能讀清楚。
我們使用 Ciyo Agent 與程式碼工具。提示詞明確要求以程式碼產生暫用角色,不呼叫付費影像或影片生成。正式遊戲角色應使用你已確認的原圖,並要求對附件執行相同檢查。

以結果可重現的程式碼產生一隻虛構的 32x32 像素狐狸角色,背景透明,不呼叫付費生成器。另外設定碰撞框 x=8 y=7 width=16 height=23,使用角色的原始座標;以最近鄰插值產生獨立的 8x PNG 檢查圖,在其中繪製彩色碰撞框疊加層,保持原始角色像素不變。交付原始 PNG、檢查 PNG,以及包含原始尺寸、碰撞框和左上角原點的文字 JSON 清單。說明可見 alpha 邊界不一定等於碰撞邊界。把原圖和檢查圖加入畫布。檢查原始尺寸、整數座標、矩形位於影像範圍內,以及製作疊加圖後原始像素雜湊值未變。不要宣稱已串接遊戲引擎。這是在實際 Ciyo 工作區中以程式碼產生的示意樣本。分別理解兩種輪廓
結果包含原始 PNG 與一張 256×256 檢查圖。藍色疊加層標示我們指定的碰撞矩形,洋紅色虛線標示可見 alpha 邊界。棋盤格是檢查背景,不屬於原始角色圖。
可見邊界為 x=5、y=0、寬度=26、高度=31。耳朵與尾巴超出碰撞矩形。這正是分開兩種測量的意義:可見圖形描述外觀,人為設定的碰撞形狀表達遊戲設計意圖。

檢查原始檔與座標清單
下載原始檔,不要以畫布截圖代替。確認尺寸為 32×32,且具有真正的 alpha 透明度。依原始單位讀取清單,確認 x + width ≤ 影像寬度、y + height ≤ 影像高度。若必須保留原圖,就比較製作檢查圖前後的原始像素雜湊值。
不要把檢查圖當成正式角色圖
保留範例解碼後的像素雜湊值與代理回報的數值一致。疊加圖是獨立檔案;除非你刻意要在遊戲中顯示除錯圖形,否則不要把它當成正式角色發布。

在遊戲執行環境中測試碰撞
匯入原圖,把矩形轉換為遊戲引擎的碰撞設定。任何引擎錨點偏移都應明確記錄。在角色預期顯示尺寸下測試牆壁、地面、狹窄縫隙與互動。矩形檔案正確,不代表遊戲體驗公平。
Godot 的物理文件把碰撞形狀視為獨立物件。這項區分支持本例的交付方式,但我們沒有把範例匯入 Godot 或其他引擎。移動規則、有效攻擊影格與傷害冷卻時間仍需分別實作和檢查。
常見問題
碰撞框會自動等於 alpha 邊界框嗎?
不會。我們刻意指定較小的矩形。可見邊界可以作為參考,碰撞邊界仍應依遊戲需求決定。
應該使用檢查圖的 256×256 座標嗎?
不應該。清單使用原始 32×32 座標系,放大的檢查圖僅供查看。
這個範例在遊戲引擎裡測試過嗎?
沒有。我們檢查了保留的 PNG 與座標清單;遊戲行為仍需另行測試。
為角色準備明確的碰撞座標
先在 Ciyo 中完成一個經過檢查的範例。保留原始檔,在自己的專案中使用前檢查匯出結果。