遊戲開發新手指引：遊戲UI中的美術資源基礎常識，AI Vibe Coding 必讀
先說結論
用 AI 做小遊戲，常常先得到一張完整的對打圖。進工程之前，這張圖要拆成背景、角色打鬥和介面控制元件。左邊的角色按動作做成一套精靈圖。打中的那一幀播打擊音效，背景音樂單獨鋪滿這一回合。錄屏在 YouTube。
先拿到的是一整張對打圖
現在用 AI 做小遊戲的人多了。常見的起點是生成一整張螢幕：兩個角色在宮殿前對打，底下是血條和能量條。回合跑起來以後，玩家看到的就是這一屏。
工程裡要用的是組成這一屏的切圖。以 1997 年街機格鬥為例，拳皇 97 那種舞臺上同時有遠景、兩個角色和底部的介面。這三塊要分開畫。
這張圖要分成三層
同一張畫面拆開，對應下面這三層。
Layer 0（背景）是舞臺。柱子、旗幟、宮殿、遠山和石板地面都在這一層。角色走動時，舞臺留在原地。整場用一張背景，畫素畫法和角色一致。
Layer 1（角色打鬥）是兩個人對打。棍子、長槍、打中時的閃光、揚起的土，都在這一層。人的位置和當前姿勢，也在這一層上更換。
Layer 2（介面控制元件）是頭像、血條、能量條，還有中間的裝飾。這些蓋在打鬥上面。剩餘的血量和能量變了，就換這幾條的圖。角色邁步時，控制元件停在原來的位置。
三層用同一套畫風。血條從滿畫到空，畫風和舞臺、角色保持一致。舞臺準備一張就夠。血條和能量條要有滿、一半、空三種。角色要把這套招式裡會用到的姿勢都畫出來。武器上的閃光和當次的姿勢畫在一起。
這張圖拆開並不難。匯入到引擎中時，原來的位置還在不在、哪一塊還是不是能點的控制元件，才是後面要盯住的。原圖層的上下文資訊要保留，並和畫面同步。具體寫在從圖片到多圖層。
左邊的角色要準備一套動作
完成圖裡，左邊這個人只有一個姿勢：身體壓低，棍子伸向前，身後是紅披風。一個回合裡，他還要站立、行走、出招、格擋、受擊、倒地，然後再站起來。
這些動作都要做成切圖，場景才能播。武器帶出的閃光也要畫上。每一幀裡是同一個人，衣服和朝向不變。玩家按下按鍵後，引擎按順序播放這些幀。
AI 生成時，經常只給出這一個姿勢。揮棍、受擊和起身，要補進同一張精靈圖。
畫面要和音效、背景音樂對齊
打中時的閃光，是角色層上的一幀。打擊音效從這一幀開始播。換一招，就換一段音效。背景音樂從回合開始播到回合結束。棍子打中時，這段音樂照常繼續。
音效單獨做成檔案，和這一幀一起播放。換招的時候，可以換上這一下對應的打擊聲。背景音樂用另一份檔案，覆蓋整回合。
小結
這一屏做得到。切圖按圖層和動作準備好，音效跟打中的幀對齊，匯入到引擎中之後，畫面還能對上當初生成的那張圖。