← Về blog

Làm game trọn một quy trình: VberAI đưa một UI từ ảnh AI vào scene Unity

Một màn hình game đi hết tạo ảnh bằng AI, cắt tại chỗ, ghi vào scene Unity đang mở bằng Engine MCP và xem trước chuyển động. Không cần chuyển công cụ để cắt rồi dựng lại cây phân cấp.

Đăng ngày
  • vberai
  • ai-studio
  • game-ui
  • inplace-slice
  • unity
  • mcp
  • cursor
  • tutorial
Làm game trọn một quy trình: VberAI đưa một UI từ ảnh AI vào scene Unity

Giao diện game hay đứt giữa các công cụ. Ảnh nằm ở phần mềm này, cắt ở phần mềm khác, vào engine lại phải dựng lại cây phân cấp. Bài này dùng một menu chính gothic tối để xem bốn bước của VberAI Studio (không phải Google AI Studio): tạo ảnh bằng AI, cắt tại chỗ, ghi vào engine, và xem trước chuyển động.

Vào VberAI Studio.

1. Bắt đầu từ một menu chính đã xếp xong

Ảnh gốc là một menu đã bố trí. Nhân vật đứng bên trái, STORY và ARENA ở bên phải, nền là đêm trăng. Đầu vào là cả màn hình, không phải một đống icon rời.

Menu chính gothic tối

Bước này là tạo ảnh. Tranh nhân vật và menu đi vào quy trình như một ảnh. Cắt, ghi và xem trước sau đó đều dùng đúng ảnh này.

2. Cắt tại chỗ và giữ lại nền

Sau khi tách, nút, nhân vật và icon tiền rời khỏi vị trí. Chỉ còn nền đêm trăng, không có UI. Phần tử được cắt theo tọa độ gốc, nền được giữ riêng.

Nền đêm trăng sau khi cắt

Xuất PNG từng tấm trong Photoshop sẽ mất vị trí. Cắt tại chỗ giữ vị trí tương đối và kích thước. Sau khi đưa vào engine, không phải canh từng mảnh theo bản mockup. Các bước: cắt tại chỗ.

3. Engine MCP: ghi vào scene Unity đang mở

Tài nguyên vừa cắt đi tiếp vào engine. Bản demo mở bảng Engine MCP. Lệnh trên màn hình là câu tiếng Trung 「把图层3写入当前 Unity 工程」. “图层3” là tên file của menu này. Kết luận hiện trước, rồi năm mục kiểm tra:

  • nhập tranh đã tạo
  • đặt lại phần tử đã cắt
  • tách nền sạch
  • ghi nhân vật vào scene
  • kiểm tra scene hiện tại

Khi cả năm mục đều qua, bảng báo ghi xong.

Engine MCP ghi layer vào scene Unity

Đích là scene Unity đang mở. Bố cục theo kết quả cắt, không phải thả PNG không tên vào một thư mục. Muốn nối tiếp nút và số liệu từ Cursor thì dùng cùng Engine MCP. Cài đặt: cài Unity MCP.

4. Xem chuyển động trên đúng màn hình đó

Phần xem trước dùng các layer vừa cắt. Nền là đêm trăng đã tách, nhân vật là tranh cũ, STORY và ARENA là các nút đã cắt. Nhân vật bước tới và vung trượng. Phép từ đầu trượng quét qua, nút sáng đúng chỗ cũ.

Nhân vật và nút đã cắt trở lại nền đêm trăng

Bong bóng chat ở góc trên bên trái đứng yên. Nó không đi theo nhân vật. Đó là một control cố định trên giao diện.

Ảnh tĩnh sau khi cắt có thể trở lại cùng một nền: chuyển động để xem, và nút sáng đúng chỗ cũ. Chuyển cảnh của nút và giá trị số vẫn phải nối trong Unity, bằng Engine MCP hoặc script.

Mỗi bước bỏ bớt việc tay nào

BướcNhững gì thấy trên màn hìnhViệc tay được bỏ
Tạo ảnhMột menu gothic đầy màn hìnhGhép mockup từ đầu
Cắt tại chỗPhần tử rời đi, chỉ còn nềnXuất từng nút thành PNG trong Photoshop
Engine MCPLayer vào scene Unity đang mởDựng lại cây phân cấp sau khi nhập
Xem chuyển độngCùng nhân vật và nút cử động trên nền gốcLàm một bản demo bằng hình khác

Giới hạn

  • Bản demo chỉ dùng menu này. Chất lượng cắt phụ thuộc ảnh gốc có rõ không, và mép control có đọc được không.
  • Bảng MCP cho thấy ghi đã xong và các mục kiểm tra đã qua. Chuyển cảnh và chốt số liệu vẫn cần logic trong scene Unity.
  • Phần xem chuyển động dùng tranh này và các nút đã cắt. Đó là cùng một bộ layer với menu ở trên.

Tóm lại

Một màn hình có thể nằm trong một mạch: tạo ảnh, cắt tại chỗ, ghi vào Unity, rồi xem chính các layer đó chuyển động. Vào AI Studio.

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