← Về blog

VberAI End-to-End: AI Studio + Engine MCP cho một Mini-Game có thể chơi được

Tạo hoặc nhập UI trong AI Studio, sau đó điều khiển logic và gỡ lỗi qua Cursor với Godot, Unity hoặc Cocos MCP. Bao gồm bản ghi chibi match-3—từ xuất Studio đến bản chơi thử mà không cần viết code tay.

Đăng ngày
  • VberAI
  • AI Studio
  • Unity MCP
  • Godot MCP
  • Cocos MCP
  • game development workflow

Giới thiệu

Đối với các nhà phát triển indie và nhóm nhỏ, điểm nghẽn hiếm khi là “không thể viết một dòng code nào”. Thường là hai luồng công việc chạy song song:

  1. Cấu trúc UI và nghệ thuật không bao giờ vào engine một cách sạch sẽ—cắt comp, dựng lại cây Canvas / Control, tên và thứ bậc không khớp
  2. Gameplay và script tốn kém để lặp lại—gắn lại component, săn lỗi, vào Play—hàng giờ mất vào công việc lặp đi lặp lại trong editor

VberAI chia những công việc đó thành hai lớp. Nó không tuyên bố “một nút bấm, game hoàn thành”:

LớpSản phẩmCông việc
Canvas → engine UIAI StudioTạo UI game từ ngôn ngữ tự nhiên, hoặc nhập PSD / Figma; tách, matte, chỉnh sửa, sau đó đồng bộ/xuất sang Unity, Godot, Cocos Creator
Engine ↔ AI IDEEngine MCP (Unity / Godot / Cocos)Điều khiển editor đang mở từ Cursor, Claude Code, Codex và các client tương tự: logic, script, debug, preview

Phần còn lại của hướng dẫn này là một lộ trình định hình sản xuất cho một bản chơi thử 0–1 và cho các chu kỳ sửa đổi sau này.

Quy trình end-to-end

Mục tiêu gameplay / tệp thiết kế / bản tóm tắt UI ngôn ngữ tự nhiên
        │
        ├─→ AI Studio (tạo · nhập · tách · matte · componentize · xuất)
        │         ↓
        │    Cây UI / prefabs / tài nguyên scene trong dự án engine
        │
        └─→ AI IDE + Engine MCP (đọc scene · viết script · nối dây · Play/debug)
                  ↓
             Bản gameplay demo được → quay lại Studio hoặc tiếp tục dùng MCP theo loại thay đổi

Quy tắc chung:

  • Đảm bảo cấu trúc UI đúng trên canvas trước khi nối dây engine sâu
  • Giữ hành vi và số liệu trong engine; con người sở hữu kết quả Play
  • Commit trước khi chỉnh sửa lớn; chỉ giữ cầu nối MCP trên localhost

AI Studio: tài nguyên giao diện sẵn sàng cho engine

AI Studio dành cho UI / cấu trúc giao diện game—không phải hộp chat thông thường, và không thay thế các state machine chiến đấu trong engine.

Đường dẫn 1: UI ngôn ngữ tự nhiên (chưa có tệp thiết kế)

Giúp tôi thiết kế một game match-3 phong cách chibi

Sau đó xác minh trên canvas: mục tiêu hit vs trang trí, tên mà script có thể gắn, bố cục dưới độ phân giải mục tiêu. Demo dưới đây:

Xem trên YouTube — Đường dẫn 1: UI chibi match-3 ngôn ngữ tự nhiên

Đường dẫn 2: Nhập PSD / Figma / tài nguyên dự án (đã có thiết kế)

  1. Nhập comp có lớp hoặc UI hiện có
  2. AI tách thành panel, mục danh sách, khung hội thoại
  3. Cạnh cứng (tóc, phát sáng, bán trong suốt) qua AI Super Matting khi cần, sau đó quay lại Studio
  4. Componentize và đồng bộ / xuất sang Unity, Godot, hoặc Cocos Creator

Demo nhập và tách PSD / Figma:

Xem trên YouTube — Đường dẫn 2: nhập PSD / Figma, sau đó đồng bộ sang engine

Bước này tạo ra gì

Tạo raKhông tạo ra
Cây UI có thể gắn, texture, cấu trúc prefab/sceneFSM chiến đấu đầy đủ, quyền mạng, hệ thống lưu

Ví dụ bàn giao sâu hơn: Figma to Unity UI.

Engine MCP: logic và công việc editor điều khiển bằng hội thoại

MCP (Model Context Protocol) cho phép AI IDE gọi các công cụ cục bộ. Plugin engine của VberAI hiển thị editor đang mở cho client: scene/nodes, script, công cụ debug và preview—không chỉ dán tệp vào repo.

Chọn và cài đặt theo engine:

So sánh: Godot MCP vs Unity MCP vs Cocos MCP.

Demo: sau khi xuất từ Studio, Cursor + Godot MCP giao một chibi match-3

Tiếp tục Đường dẫn 1: UI đã ở trong Godot từ AI Studio. Kết nối Godot MCP trong Cursor và điều khiển editor bằng ngôn ngữ tự nhiên—không cần viết một dòng code tay—để triển khai gameplay chibi match-3 và gỡ lỗi đến trạng thái chơi được. Ghi hình dưới đây:

Xem trên YouTube — Xuất UI từ Studio → Cursor + Godot MCP xây dựng và gỡ lỗi chibi match-3 (không viết code tay)

Phù hợp tốt với MCP

  • Bản gameplay có thể kiểm thử: điều khiển người chơi, chiến đấu đơn giản, trạng thái kẻ địch, nối nhiệm vụ
  • Đổi tên hàng loạt Hierarchy / cây scene, gắn component, gắn HUD xuất từ Studio vào sự kiện
  • Trong giới hạn plugin: log, ngữ cảnh lựa chọn, chỉnh sửa nhỏ có thể hoàn tác rồi Play

Không phù hợp

  • Quyền mạng nhiều người chơi chưa được xem xét hoặc viết lại toàn bộ render pipeline
  • “Một lời nhắc, giao game thương mại”
  • Thay thế định hướng nghệ thuật và quyết định cảm giác—những thứ đó vẫn cần con người ở chế độ Play

Ví dụ đã thực hiện: 3D RPG với Unity MCP, 2D platformer với Godot MCP.

0–1: một lộ trình tối thiểu

Nhắm đến bản demo trong vài giờ, không phải danh sách tính năng.

  1. Xác định phạm vi bản chơi thử — ví dụ: “di chuyển + một kẻ địch + một HUD” hoặc “một màn platform + khởi động lại”
  2. Cài MCP và kiểm tra đọc — liệt kê gốc scene; xác nhận AI IDE đã kết nối
  3. UI hoặc gameplay giữ chỗ trước — Label/Slider trong khi hệ thống chưa hoàn thiện; mở AI Studio khi menu/HUD cần trông hoàn chỉnh
  4. Tiến triển logic qua MCP — một mối quan tâm mỗi lời nhắc: điều khiển → sát thương → kẻ địch → điều kiện thất bại/nhiệm vụ
  5. Trau chuốt UI khi cần — Xuất Studio → MCP gắn nút và sự kiện giá trị
  6. Chấp nhận Play — cảm giác, va chạm, làm mới UI; nếu thất bại, thu hẹp lời nhắc và thử lại

Lặp nhanh: chọn vòng lặp theo loại thay đổi

Thay đổiƯu tiên
Cảm giác, số liệu, AI, điều hướng, lỗi script, nối nodeAI IDE → engine MCP
Hình ảnh toàn màn hình, reskin, tách lớp, xuất lại prefabsAI Studio (+ matting nếu cần)
Vẫn kẹt ở “comp không vào được engine”Cấu trúc Studio trước, sau đó MCP

Lợi ích mong đợi là cụ thể: ít dựng lại UI từ đầu trong editor hơn, và ít click lặp đi lặp lại hơn. Nó không loại bỏ phán đoán thiết kế hoặc kiểm thử.

Danh sách kiểm tra cho nhóm

  • Cấp phép: Unity / Cocos MCP tuân theo kích hoạt chính thức; Godot MCP có thể xác thực thói quen qua mã nguồn mở
  • Bảo mật: MCP Server chỉ trên 127.0.0.1
  • Lời nhắc với tiêu chí chấp nhận: đường dẫn, điểm gắn, Play nên hiển thị gì trong ~10 giây, refactor ngoài phạm vi
  • Xem xét: luôn Play-test script và chỉnh sửa node được tạo—MCP giảm chi phí thao tác, không phải QA

Kết luận

Câu chuyện hữu ích của VberAI là sự phân chia các điểm đau tần suất cao—không phải “tự động hóa hoàn toàn”:

  • AI Studio: ngôn ngữ tự nhiên hoặc PSD/Figma → cấu trúc UI cho Unity / Godot / Cocos
  • Engine MCP: ngôn ngữ tự nhiên trong AI IDE → logic trong editor, script, debug, preview

Sử dụng đúng vòng lặp và các bản 0–1 cộng với chu kỳ sửa đổi sẽ nhanh hơn. Vượt ranh giới (viết FSM chiến đấu trên canvas, MCP tách toàn bộ gói UI) và bạn thêm việc làm lại. Áp dụng một lớp hoặc cả hai theo giai đoạn dự án—bạn không cần mọi sản phẩm ngay ngày đầu tiên.

Các bài hướng dẫn bạn có thể thích