Nine-Slice UI Game và Bảng Co Giãn: Đánh Dấu Figma / PSD và QA Cắt Lát Trong Engine

Khi một bảng bị kéo rộng hơn, góc mờ, họa tiết trung tâm lặp lại, hoặc góc bị oval thường có nghĩa là nine-slice (9-slice / cap insets) chưa được chỉ định khi bàn giao, hoặc engine đang dùng scale Simple trên toàn bộ sprite. Chỉnh Image Type và border trong Unity Editor có thể cứu được một màn hình, nhưng lần thiết kế tiếp theo sẽ ghi đè—nếu border không khớp tỷ lệ xuất, vòng lặp làm lại sẽ tiếp diễn.

Các ví dụ dưới đây tập trung vào Unity UGUI Image (Sliced / Tiled). Godot StyleBoxTexture và nine-slice sprite của Cocos ánh xạ tới cùng các ý tưởng, bao gồm content padding. Anchor và Safe Area: checklist engine + MCP mục 6. Padding vùng co giãn với locale: tràn locale kiểm tra thiết kế 7.

Checklist bàn giao thiết kế mục 6 yêu cầu vùng nine-slice / co giãn rõ ràng. Bài này bao gồm khi nào cần cắt lát, đánh dấu Figma/PSD, nghiệm thu ba engine, và đường đi canvas toàn màn hình, kèm bảng khắc phục.

Tiêu chí fail (bất kỳ một cái = không đạt): art góc biến dạng khi co giãn; lặp lại hoặc đường nối ngoài ý muốn trong vùng co giãn; bán kính góc thay đổi theo kích thước bảng; nền co giãn bị scale chung với icon/avatar cố định; tỷ lệ xuất không khớp pixel border trong engine (khe 1px hoặc cạnh mềm).

---

Khi nào bắt buộc nine-slice vs cấm co giãn cứng

Loại asset	Nên	Không nên
Nền dialog / bảng cài đặt	Nine-slice + content padding	Một sprite Simple tràn viền
Container input / thanh	Nine-slice hoặc cap trái/phải + lặp giữa	Ép chiều cao không theo quy tắc art
Nút chính (kích thước cố định)	Sprite cố định hoặc nine-slice + chiều rộng tối thiểu	Nút bo góc rộng vô hạn như một ảnh co giãn
Icon, avatar, khung kỹ năng	Kích thước cố định, không nine-slice	Gộp với nền bảng thành một ảnh co giãn
Nền toàn màn hình (không khung)	Ảnh đầy đủ hoặc chiến lược tile trong spec	Dùng lại border bảng trên nền tràn viền

Quy tắc: Nếu chiều rộng hoặc chiều cao thay đổi theo độ phân giải, nội dung chữ, hoặc nội dung danh sách và góc phải giữ hình dạng → nine-slice hoặc tương đương trong engine. Control kích thước cố định → sprite cố định + ràng buộc layout.

---

Đánh dấu bàn giao Figma / PSD (danh sách tick)

#	Kiểm tra	Tiêu chuẩn đạt
1	Layer co giãn tách khỏi decor / icon / text	Nền bảng reskin + slice; icon không bị scale theo nền
2	Border / cap inset tính bằng px (bốn cạnh)	Khớp @1x hoặc tỷ lệ xuất của team trong ghi chú bàn giao
3	Tỷ lệ xuất cố định (@1x/@2x hoặc baseline 1080)	Kỹ thuật không phải đoán phép tính border
4	Bán kính góc nằm ngoài vùng co giãn hoặc spec cho phép góc không co giãn	Không chấp nhận kiểu “góc biến thành viên nang”
5	Vùng co giãn thân thiện tile hoặc đặc	Lặp giữa không có lệch rõ ràng
6	Tên ngữ nghĩa	Ví dụ Panel_Shop_9s, Input_Field_9s
7	Đa trạng thái (normal / disabled) cùng border	Inset khớp; chỉ đổi màu/skin
8	Ghi chú slice PSD hoặc xuất Figma padding trong suốt	Không tính shadow vào border trừ khi spec nói vậy
9	Bàn giao kèm mục 5 của handoff trạng thái nút	Không vá trạng thái thiếu bằng art 9s sai
10	Reskin sự kiện chỉ đổi art, border không đổi	Xem spec reskin

Figma: đặt cap inset trong tài liệu component khi dùng frame co giãn hoặc plugin slice. PSD: căn slice với PSD sang Unity trong 5 phút.

---

Ba engine: component và nghiệm thu

Mục	Unity UGUI	Godot 4 Control	Cocos UI
Component	Image → Sliced / Tiled	StyleBoxTexture (patch margin)	Sprite nine-slice / Sliced
Nguồn border	Sprite Editor Border (L/T/R/B px)	content_margin / patch	Cap insets (LTRB)
Vùng nội dung	RectTransform + padding con	MarginContainer + Theme	Widget / padding layout
Fail điển hình	Dùng Simple sai; border sai tỷ lệ	Patch không khớp kích thước texture	Xoay atlas phá inset
Đạt	Ở chiều rộng 150% / 200%: góc sắc, giữa sạch	Tương tự; preview Theme khớp Play	Tương tự; kiểm tra thiết bị với danh sách dài

Nghiệm thu trong Unity Editor (ánh xạ sang engine khác):

1. Đặt Prefab Image thành Sliced với border khớp thiết kế.
2. Kéo RectTransform của bảng tới chiều rộng thiết kế tối thiểu và tối đa.
3. So sánh góc, cạnh, và trung tâm với ảnh chụp Figma/PSD.
4. Nếu Play mode ổn → một lượt kiểm tra thiết bị theo checklist trước khi ship.

---

Khái niệm toàn màn hình: tách canvas và xuất lại

Với chỉ art toàn màn hình dạng PNG hoặc AI, không thể suy ra border. Đường đi: VberAI Studio (AI Studio, ≠ Google AI Studio) tách tại chỗ → đánh dấu bảng co giãn → xuất Prefab (tất định, không phải YAML do LLM).

Bước	Hành động	Nghiệm thu
1	Toàn màn hình trên canvas; tách Panel_* và icon cố định	Phân cấp có tên
2	Xác nhận ý định 9-slice của bảng trên canvas hoặc trước khi xuất	Người chịu trách nhiệm cho inset được ghi lại
3	Xuất Prefab Unity / Godot / Cocos	QA Sliced theo bảng trên
4	Sau reskin / locale, xuất lại toàn bộ cây	Nếu spec border không đổi, inset không đổi

Figma/PSD phân lớp: ưu tiên Figma → Unity hoặc PSD sang UGUI, sau đó chỉnh border nhỏ trong engine—tránh xuất lại 20 PNG rời mỗi sự kiện.

---

Định tuyến khắc phục

Triệu chứng	Nguyên nhân khả dĩ	Hành động	Người phụ trách
Góc mờ	Scale Simple trên toàn ảnh	Sliced + border đúng; thiết kế thêm dấu inset	Kỹ thuật + Thiết kế
Đường nối / khối lặp giữa	inset lệch 1–2px; sai tỷ lệ	Khớp px thiết kế; nhập lại sprite	Kỹ thuật
Góc co giãn thành oval	Art không nên nine-slice	Kích thước cố định hoặc art góc mới	Thiết kế
Border đổi sau reskin	Kích thước art mới hoặc padding	Khóa kích thước canvas trong spec reskin; QA lại sau reskin	Thiết kế
Nền hàng danh sách biến dạng	Nền hàng bị co giãn như cả bảng	9s riêng cho hàng hoặc chiều cao cố định	Thiết kế
Chỉ fail ở một số độ phân giải	Canvas Scaler scale không nguyên	Checklist engine Anchor/Scaler	Kỹ thuật

Quy tắc: Nếu border ≠ thiết kế → sửa dấu hoặc nguồn sprite trước, rồi mới tới Prefab. Chỉ sửa trong Inspector mà không cập nhật bàn giao → mất khi xuất lần sau.

---

So với bàn giao “chỉ gói PNG”

Cách tiếp cận	Phù hợp	Không phù hợp
Xuất thủ công + kỹ thuật tự điền border	Ít bảng, demo	Reskin thường xuyên, nhiều màn hình
Figma/PSD + xuất có cấu trúc bằng VberAI Studio	Đa màn hình, đa engine, sự kiện	Thay thế dấu inset và QA
Sliced tạm trong engine	Hotfix một màn hình	Dài hạn mà không có nguồn thiết kế

Khuyến nghị: dấu inset trong thiết kế → xuất Prefab có cấu trúc → Unity Editor Sliced ở hai chiều rộng → MCP cho logic. Raycast và binding: checklist engine + MCP.

---

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

Bảng bo góc có dùng được nine-slice không?
Có, nhưng inset phải nằm trên cạnh co giãn thẳng; góc nằm trong ô góc không co giãn. Nếu bán kính góc tăng theo kích thước bảng → fail; sửa art hoặc giới hạn kích thước tối đa.

Shadow có tính vào border không?
Spec sản phẩm quyết định. Nếu shadow không co giãn, tách layer hoặc đánh dấu inset trên hình chữ nhật đặc không có glow ngoài.

Tiled vs Sliced?
Sliced cho bảng có khung; Tiled (hoặc art giữa thân thiện tile) cho họa tiết giữa lặp lại. Ghi rõ trong spec—đừng để kỹ thuật phải đoán.

Có cần slice riêng cho Godot / Cocos không?
Một ngữ nghĩa inset; chuyển target xuất qua xuất canvas đa engine và xác minh patch/cap theo bảng.

VberAI Studio có tự động điền border không?
Phụ thuộc vào xuất và asset; nghiệm thu luôn là Sliced/StyleBox trong engine. Không có inset trong thiết kế → kỹ thuật đặt border trong Editor và ghi lại trong spec.

VberAI Studio có giống Google AI Studio không?
Không. Xem so sánh.