Script biên dịch được nhưng phân cấp UI sai? Checklist bàn giao UI và MCP cho lập trình viên game
Dành cho lập trình viên Unity / Godot / Cocos: vì sao script Cursor không sửa được các lớp UI shell; checklist nghiệm thu sau khi nhập thiết kế, khi nào Unity MCP / Godot MCP phát huy tác dụng, và logic gán sự kiện sau khi xuất Prefab từ Studio.
- game-dev-ai
- Unity MCP
- Godot MCP
- Cocos MCP
- Cursor
- game-ui-design
- ui-to-engine
- unity
- godot
- cocos
- mcp
- vberai
- 2026
Trong phát triển indie và đội nhóm nhỏ, rào cản thường gặp không phải là “tôi không viết được C# / GDScript” — mà là script biên dịch được, mở Scene lên thì mọi thứ lệch hết: nút bấm không nhận click.
Nguyên nhân gốc hiếm khi nằm ở mô hình AI yếu. Đó là việc trộn lẫn bàn giao UI shell và logic gameplay trên cùng một toolchain. Dưới đây: các kiểu lỗi thường gặp, checklist nghiệm thu, và thời điểm nên đưa Engine MCP (Unity MCP / Godot MCP / Cocos MCP) vào pipeline.
Hai công việc—đừng ép một công cụ AI làm cả hai
| Công việc | Kết quả điển hình | Công cụ phù hợp hơn |
|---|---|---|
| UI shell | Cây Canvas / Control, Prefab, anchor, đặt tên slice | Nhập thiết kế có cấu trúc (PSD / Figma → engine) |
| Logic gameplay | Sự kiện nút bấm, chỉ số, state machine, debug trong Play | Cursor / Claude Code + Engine MCP |
Cursor, Copilot, Claude Code mặc định chỉ thấy phần text trong repo. Chúng không thấy:
- Các chỉnh sửa scene chưa lưu trong editor
- Vùng chọn hiện tại, các tham chiếu prefab bị hỏng
- Console và trạng thái UI tạm thời trong chế độ Play
Vì vậy AI sửa file .cs trong khi Btn_Start vẫn chưa có OnClick trong Hierarchy—đó không phải vấn đề prompt, mà là thiếu cầu nối với editor. MCP lấp khoảng trống đó. Bản đồ phân loại: Công cụ AI cho Godot / Unity.
Sau khi nhập UI: 10 bước kiểm tra kỹ thuật
Sau khi design hoặc AI Studio xuất Prefab, hãy chạy checklist này trước lần Play đầu tiên (ví dụ với Unity UGUI; Godot / Cocos ánh xạ tương tự):
| # | Kiểm tra | Lỗi thường gặp |
|---|---|---|
| 1 | Canvas / Control gốc và chính sách độ phân giải | Sai Canvas Scaler; Safe Area dọc bị cắt |
| 2 | Vùng nhận click tách khỏi phần trang trí | Ảnh trong suốt chặn Raycast |
| 3 | Trạng thái normal / pressed / disabled của nút | Chỉ có một ảnh tĩnh duy nhất |
| 4 | Text ánh xạ sang TMP / Label | Chữ hiển thị full-screen, không có bản địa hóa |
| 5 | Tên node thân thiện với script (Btn_*, Panel_*) | Layer 47 copy |
| 6 | Quy tắc anchor / 9-slice và stretch | Layout trôi khi đổi độ phân giải |
| 7 | Atlas và draw call ở mức chấp nhận được | Mỗi control một file PNG quá khổ |
| 8 | Đường dẫn import khớp quy ước dự án | MCP không tìm thấy đường dẫn Prefab |
| 9 | Commit trước khi gán logic | AI sửa script; tham chiếu bị mất |
| 10 | Play thử một lần ở 16:9 và tỉ lệ dọc mục tiêu | Chỉ test đúng tỉ lệ cửa sổ Editor |
Nhập có cấu trúc so với cắt slice thủ công: Figma → Unity không cần cắt thủ công, tách UI tại chỗ.
Khi nào nên cài Engine MCP
| Tình huống | Khuyến nghị |
|---|---|
| Thay đổi gameplay hằng ngày, Play / Console thường xuyên | Cài Engine MCP tương ứng |
| UI vẫn phải dựng lại bằng cắt slice thủ công mỗi tuần | Sửa shell trước (bàn giao qua AI Studio / spec), rồi mới đến MCP |
| Chỉ làm script, ít khi chạm vào Scene | Lợi ích từ MCP hạn chế |
| Game Jam, cần chơi được trong ngày | AI Studio lo UI + MCP lo nút bấm (hướng dẫn từng bước) |
Godot MCP là mã nguồn mở—phù hợp để kiểm chứng workflow trước: cài đặt · khi nào thủ công vs MCP. Unity / Cocos: gói Pro chính thức—cài Unity MCP · Cocos 3.x.
Chọn giữa ba engine: Godot MCP vs Unity MCP vs Cocos MCP.
Phân chia khuyến nghị (góc nhìn kỹ thuật)
File thiết kế / ảnh UI full-screen
→ AI Studio: nhập · tách · xuất Prefab (Unity / Godot / Cocos)
→ Kỹ thuật chạy 10 bước kiểm tra ở trên
→ Cursor + Engine MCP: gán OnClick, HUD, chỉ số, debug trong Play
| Loại thay đổi | Hướng xử lý |
|---|---|
| Đổi theme / nội dung bản địa hóa / reskin full-screen | AI Studio xuất lại (reskin, dịch) |
| Cảm giác, va chạm, AI, lưu game, bug | MCP + code được review thủ công |
| Số sát thương, chữ pixel | Bitmap font hoặc TMP |
Nguyên tắc chung: AI Studio lo shell, MCP lo nối dây. Đừng yêu cầu MCP dựng cả HUD từ đầu; cũng đừng viết combat FSM bên trong công cụ canvas.
Sau khi nối MCP: 3 thực hành
- Prompt phải kiểm chứng được—đường dẫn Prefab.
- Commit nhỏ—mỗi lần một thay đổi: “nút Start → load level,” rồi mới đến AI kẻ địch.
- MCP không thay thế QA—các chỉnh sửa node do model tạo vẫn cần Play thử; nó tiết kiệm click.
Cursor và Claude Code với Unity: hướng dẫn workflow Unity MCP, Claude Code kết nối Unity MCP.
Bộ công cụ kết hợp và lộ trình triển khai một tuần: hiệu quả AI cho game dev 2026.
FAQ
Chỉ dùng Cursor là đủ—có cần MCP không? Đủ cho script; khi bạn chạm vào cây Scene.
MCP có thay thế việc cắt UI không? Không. MCP quản lý các đối tượng trong editor; cấu trúc UI vẫn cần bàn giao ở mức Prefab (qua AI Studio hoặc luồng PSD / Figma theo spec).
Chỉ dùng một engine—có nên học AI Studio không? Đáng học nếu việc sửa UI ngốn thời gian dựng lại Canvas; nếu UI tối giản.
Dự án Godot nhỏ—nên cài gì trước? Thử Godot MCP (mã nguồn mở) trước; thêm AI Studio khi khâu bàn giao UI bắt đầu gây đau đầu.
Có xung đột với Unity AI UI Generator không? Không xung đột. Unity AI thiên về sprite trong editor; với đa engine hoặc nhập PSD/Figma có cấu trúc.
Đọc tiếp
Các bài hướng dẫn bạn có thể thích
Figma sang Unity UI: Từ Frame Thiết kế đến Prefab với VberAI Studio
Chuyển layout Figma thành hệ thống phân cấp Unity UI—nhập, chỉnh sửa bằng ngôn ngữ tự nhiên, và xuất prefab trong VberAI Studio, cùng cách Figma MCP và Unity MCP phù hợp sau khi bàn giao.
- figma-to-unity
- figma-to-code
- figma-ai
- figma-design
Phân cấp thông tin HUD trên Mobile: Hiển thị gì trong Chiến đấu, Sảnh chờ và Modal
Mức hiển thị và ưu tiên HUD theo trạng thái game; liên hệ Safe Area, lớp văn bản nổi và xếp chồng modal—bảng đặc tả kèm bước nghiệm thu Play và thiết bị.
- game-ui-design
- game-dev-ai
- ui-to-engine
- hud
Thiết kế UI game: quy trình truyền thống vs AI + tách lớp VberAI Studio
So sánh cắt layer thủ công bằng PS/Figma với VberAI Studio: nhập hoặc AI tạo UI, tự động tách layer, xuất PSD phân lớp hoặc bộ ảnh. Hiệu ứng, các bước và video demo.
- game-ui-design
- game-ui-designer-flow
- ui-slicing
- AIGC