VberAI In-Place Slice: Nhập Hình Ảnh Thiết Kế UI Game vào Unity / Godot / Cocos Chỉ Với Một Cú Nhấp Chuột

Tóm tắt nhanh

VberAI Studio (≠ Google AI Studio) hỗ trợ cắt tại chỗ (in-place slicing): chia một hình ảnh thiết kế UI game toàn màn hình thành các phần tử UI riêng biệt, giữ nguyên bố cục và kích thước ban đầu, sau đó xuất sang Unity / Godot / Cocos chỉ với một cú nhấp chuột—không cần cắt thủ công các PNG rời và dựng lại hệ thống cấp bậc trong engine.

Cắt truyền thống so với cắt tại chỗ

	Cắt truyền thống	Cắt tại chỗ của VberAI
Quy trình	Chọn vùng PNG → kéo vào engine → điều chỉnh lại vị trí và hệ thống cấp bậc	AI phát hiện các phần tử UI → cắt tại chỗ → xuất theo từng engine
Đầu ra	Chủ yếu là hình ảnh rời	Các mô-đun phân lớp + hệ thống cấp bậc UI / prefab có thể nhập
Dữ liệu vị trí	Thường bị mất sau khi cắt; phải căn chỉnh thủ công trong engine	Vị trí và kích thước tương đối được giữ nguyên khi cắt

Ý nghĩa của cắt tại chỗ

1. Tại chỗ — Các nút, bảng điều khiển, v.v. sau khi cắt vẫn giữ nguyên tọa độ và kích thước tương đối ban đầu.
2. Cắt / tách — AI phát hiện các nút, bảng, biểu tượng, tiêu đề và biểu mẫu có thể đặt tên và xuất thành các mô-đun.
3. Một cú nhấp chuột vào engine — Chọn Unity / Godot / Cocos Creator và xuất hệ thống cấp bậc UI hoặc prefab (theo bảng điều khiển của Studio).

Khi bạn đã có các lớp Figma / PSD đã tách, hãy nhập và xuất trực tiếp sang engine—không cần bước cắt tại chỗ; xem Figma→Unity và các hướng dẫn liên quan. Chỉ sử dụng bài viết này cho các bản phác thảo toàn màn hình phẳng hoặc đầu ra UI từ AI.

Các bước thực hiện

1. Chuẩn bị hình ảnh thiết kế UI toàn màn hình

Đầu vào có thể là:

• Menu chính, HUD, cửa hàng, v.v. toàn màn hình được tạo trên canvas
• Bản phác thảo nghệ thuật / thiết kế xuất dưới dạng PNG
• Các hình ảnh thiết kế UI toàn màn hình khác (ưu tiên độ phân giải đủ và các cạnh điều khiển rõ ràng)

2. Cắt các phần tử UI tại chỗ

Trên canvas, chạy cắt / tách:

• Tách các điều khiển có thể nhấp khỏi phần trang trí
• Giữ nguyên vị trí và kích thước tương đối ban đầu
• Bảng điều khiển lớp hiển thị tên mô-đun dễ đọc (để đổi tên và liên kết)

3. Xuất sang engine mục tiêu chỉ với một cú nhấp chuột

Chọn Unity, Godot hoặc Cocos Creator. Ưu tiên đầu ra hệ thống cấp bậc UI / prefab.

• Unity: Nhập dưới Canvas; kiểm tra RectTransform
• Godot: Gắn dưới một root Control; kiểm tra anchors và Theme
• Cocos: Kiểm tra Widget, Layout và Button

4. Chấp nhận trong engine

1. Mở prefab / root UI của scene đã tạo
2. Chạy ở tỷ lệ 16:9 và tỷ lệ dọc mục tiêu của bạn; nhấp qua luồng chính
3. Xác nhận không có sự lệch toàn cục, các nút có thể nhấp và không có lớp chặn
4. Để kết nối logic, sử dụng Engine MCP từ Cursor hoặc các ứng dụng khách tương tự

Chi tiết hơn và kết nối MCP: Tách hình ảnh thiết kế UI game vào engine.

Hạn chế

• Lần xuất đầu tiên hiếm khi hoàn hảo từng pixel; phông chữ, bản địa hóa và chuyển động vẫn cần được trau chuốt trong engine.
• Chất lượng cắt phụ thuộc vào độ rõ của nguồn; các cạnh mờ hoặc các lớp lộn xộn có thể cần xuất lại hoặc sửa thủ công.
• Cắt tại chỗ đóng gói cấu trúc—không thay thế các script gameplay.
• VberAI Studio ≠ Google AI Studio — xem so sánh.

Tóm tắt

Sự lãng phí thông thường trong bàn giao UI game là cắt thủ công một bản phác thảo toàn màn hình và dựng lại trong engine. VberAI Studio đặt thiết kế toàn màn hình → cắt tại chỗ → Unity / Godot / Cocos trên cùng một canvas. Sản phẩm: AI Studio.

Câu hỏi thường gặp

Cắt tại chỗ của VberAI là gì? Trong VberAI Studio, AI phát hiện các phần tử trên hình ảnh thiết kế UI game toàn màn hình, cắt chúng tại vị trí ban đầu, giữ nguyên bố cục và kích thước, sau đó xuất sang engine.

Tôi có thể nhập một cú nhấp chuột vào Unity / Godot / Cocos không? Có—xuất hoặc đẩy hệ thống cấp bậc UI / prefab cho engine mục tiêu (theo khả năng hiện tại của Studio). Kiểm tra nhanh trong chế độ Play sau khi nhập.

Điều này khác gì so với cắt PNG thủ công? Cắt thủ công thường tạo ra các hình ảnh rời không có ngữ nghĩa bố cục; cắt tại chỗ xuất ra các mô-đun phân lớp và cấu trúc engine, giảm công việc dựng lại.

Điều này có giống với nhập Figma / PSD không? Cùng một AI Studio, đầu vào khác nhau. Nếu Figma / PSD đã có các lớp tách, hãy nhập tệp thiết kế và xuất trực tiếp sang engine—không cần cắt tại chỗ; xem Figma→Unity, PSD→Unity. Chỉ sử dụng bài viết này cho các bản thiết kế toàn màn hình phẳng (không có lớp).