實用創作流程

像素角色碰撞框:把碰撞區域和可見像素分開

象牙色紙面上,琥珀色框內的炭黑狐狸雕塑
文章配圖。操作步驟另附實際 Ciyo 工作區的完整截圖。

狐狸尾巴畫得好看,不代表平台遊戲的碰撞體驗公平。如果每個可見像素都算進碰撞矩形,角色可能被尾巴絆住。匯出角色前,先決定哪些區域應該參與碰撞。

我們在 Ciyo 中以程式碼製作一隻虛構的 32×32 狐狸,再產生獨立的8× 檢查圖。這個範例說明如何一起交付角色圖與碰撞座標。它是結果可重現的示意樣本,不是影像模型測試,也沒有串接遊戲引擎。

先寫清楚座標約定

向開發者提供原始尺寸、座標原點、軸的方向與矩形含義。本例原點位於 32×32 影像的左上角,x 向右增加,y 向下增加。畫布上的顯示尺寸不會改變這些數值。

指定碰撞框從 x=8、y=7 開始,寬高為 16×23 原始像素。右側與底部不包含端點的邊界分別為 24 和 30,都在 32 以內。這些數值只是示意性的設計選擇;你的矩形應依遊戲中的移動和碰撞表現調整。

虛構狐狸的碰撞座標約定
欄位數值含義
影像32×32原始 PNG 尺寸
原點左上角顯示縮放前的座標
碰撞框8, 7, 16, 23x、y、寬度、高度
不包含端點的邊界24, 30x + width; y + height
檢查倍率8×僅供檢查,256×256

要求產生獨立疊加圖

建立新的 Ciyo 專案,在同一個請求裡寫出原圖尺寸與碰撞矩形。請設計代理保留原始檔,並在副本上繪製碰撞疊加層。同時要求在回覆中附上座標清單,即使畫布預覽很小,座標也能讀清楚。

我們使用 Ciyo Agent 與程式碼工具。提示詞明確要求以程式碼產生暫用角色,不呼叫付費影像或影片生成。正式遊戲角色應使用你已確認的原圖,並要求對附件執行相同檢查。

完整 Ciyo 介面中的狐狸碰撞框請求
實際 Ciyo 輸入:建立前已提供原始矩形與保留原圖的要求。
在 Ciyo 中試試
以結果可重現的程式碼產生一隻虛構的 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。耳朵與尾巴超出碰撞矩形。這正是分開兩種測量的意義:可見圖形描述外觀,人為設定的碰撞形狀表達遊戲設計意圖。

完整 Ciyo 畫布中的原始狐狸與碰撞框疊加圖
實際以程式碼產生的原圖與檢查圖。碰撞邊界和可見輪廓不同。

檢查原始檔與座標清單

下載原始檔,不要以畫布截圖代替。確認尺寸為 32×32,且具有真正的 alpha 透明度。依原始單位讀取清單,確認 x + width ≤ 影像寬度、y + height ≤ 影像高度。若必須保留原圖,就比較製作檢查圖前後的原始像素雜湊值。

不要把檢查圖當成正式角色圖

保留範例解碼後的像素雜湊值與代理回報的數值一致。疊加圖是獨立檔案;除非你刻意要在遊戲中顯示除錯圖形,否則不要把它當成正式角色發布。

完整 Ciyo 介面中的碰撞框驗證步驟
代理實際比較 alpha 邊界與碰撞邊界,原圖和獨立檢查圖同時可見。

在遊戲執行環境中測試碰撞

匯入原圖,把矩形轉換為遊戲引擎的碰撞設定。任何引擎錨點偏移都應明確記錄。在角色預期顯示尺寸下測試牆壁、地面、狹窄縫隙與互動。矩形檔案正確,不代表遊戲體驗公平。

Godot 的物理文件把碰撞形狀視為獨立物件。這項區分支持本例的交付方式,但我們沒有把範例匯入 Godot 或其他引擎。移動規則、有效攻擊影格與傷害冷卻時間仍需分別實作和檢查。

常見問題

碰撞框會自動等於 alpha 邊界框嗎?

不會。我們刻意指定較小的矩形。可見邊界可以作為參考,碰撞邊界仍應依遊戲需求決定。

應該使用檢查圖的 256×256 座標嗎?

不應該。清單使用原始 32×32 座標系,放大的檢查圖僅供查看。

這個範例在遊戲引擎裡測試過嗎?

沒有。我們檢查了保留的 PNG 與座標清單;遊戲行為仍需另行測試。

為角色準備明確的碰撞座標

先在 Ciyo 中完成一個經過檢查的範例。保留原始檔,在自己的專案中使用前檢查匯出結果。