Dự án 11: Bộ khung UI pixel 9-slice

Hộp thoại, túi đồ, menu tạm dừng… đều có kích thước khác nhau, nhưng bạn không thể vẽ một khung riêng cho từng cái. 9-slice (cắt 9 mảnh) giải quyết việc đó: ảnh khung được chia bằng 4 đường thành 9 phần – 4 góc giữ nguyên, 4 cạnh giãn theo một chiều, phần giữa giãn theo cả hai chiều. Với pixel art có một điều kiện quan trọng: cạnh và phần giữa phải là hoa văn lặp đều (hoặc màu phẳng), vì khi bị giãn, mọi chi tiết ở đó sẽ bị kéo dài. Chi tiết đẹp (đinh tán, hoa văn) chỉ được đặt ở 4 góc.

Hình mẫu

Thời gian ước tính: khoảng 90 phút. So sánh khung nhỏ 32 × 32 với bảng lớn bên dưới: góc và đinh vàng giống hệt, chỉ phần cạnh và nền tối dài ra.

Chuẩn bị

• Canvas: 128 × 32 px (4 ô 32 × 32), Resolution (Độ phân giải) 72, RGB Color, Background Contents: Transparent.
• Công cụ chính: Rectangular Marquee (Khung chọn) (M) Fixed Size, Pencil (Bút chì) Tool 1 px (Shift+B), Paint Bucket (Thùng sơn) Tolerance 0 bỏ Anti-alias (Khử răng cưa), Guides (Đường gióng): ViewHiển thị›GuidesĐường gióng›New Guide Layout để đặt đường 9-slice.
• Phóng to không mờ: Image Interpolation Nearest Neighbor (Điểm lân cận), ViewHiển thị›ShowHiện›Pixel GridLưới điểm ảnh, Grid mỗi 32 px chia 4 (mỗi ô phụ 8 px – đúng độ dày viền).
• Thiết bị: UI pixel toàn hình chữ nhật và đường thẳng – chuột là công cụ hoàn hảo, nhanh và chính xác hơn bút. Wacom, XP-Pen, Huion hay iPad + Apple Pencil không mang lại lợi thế ở bài này; nếu dùng, tắt lực nhấn.
• File mẫu: "Dải 4 ô 32 × 32": vạch hồng ở x, y = 8 và 24 trong mỗi ô là đường cắt 9-slice – góc không được vượt qua vạch, phần giữa hai vạch phải lặp đều.

Các bước

1. Tạo file và đường cắt: Ctrl+N 128 × 32 px, Transparent. ViewHiển thị›GuidesĐường gióng›New Guide Layout: Columns 16, Width 8 px, Gutter 0 và Rows 4, Height 8 px – có đường dẫn mỗi 8 px. Đặt file mẫu lên trên cùng.
2. Khung bảng – khối gỗ: ô 1, layer Panel. Tô cả ô 32 × 32 #6a4636; thu vào 1 px tô #a8704a. Hàng trên và cột trái của phần sáng là #d8a868, hàng dưới và cột phải là #6a4636 – khung nổi lên dưới ánh sáng trên – trái.
3. Rãnh và nền bảng: thu vào 3 px từ mép, tô rãnh #3a2630; thu tiếp 1 px, tô nền #2b2838. Nền lõm xuống: hàng trên và cột trái của nền tối hơn #1e1c2a (bóng của khung đổ vào), hàng dưới và cột phải sáng #3d3a55. Tổng độ dày khung từ mép tới nền là 4 px – nằm gọn trong 8 px của góc.
4. Đinh vàng ở góc: mỗi góc một đinh 3 × 3 #c88a2a với 1 pixel #ffd860 ở góc trên – trái của đinh. Khuyết 4 pixel ở 4 góc ngoài cùng cho khung bo tròn nhẹ. Đinh và góc khuyết chỉ nằm trong vùng 8 × 8 của mỗi góc.
5. Cạnh lặp đều: kiểm tra đoạn cạnh giữa x = 8 và x = 24: mọi cột pixel phải giống hệt nhau (cùng thứ tự màu từ ngoài vào trong). Nếu có vết gỗ hay chi tiết lẻ ở đó, Unity sẽ kéo dài nó thành vệt xấu – xóa đi.
6. Nút thường: ô 2, layer Button Normal. Hình chữ nhật 28 × 15 px có viền #1b1a24, 4 góc khuyết. Mặt nút #2f7ab0, hàng trên #b8f0f0 (ánh sáng), cột trái #5cb8e8, 3 hàng đáy #1f4a6a làm "thành nút" – nút trông nổi cao 3 px. Một vệt sáng ngắn 3 px ở góc trên trái.
7. Mũi tên trên nút: tam giác 3 × 5 pixel #b8f0f0 ở giữa mặt nút. Trong game, chữ trên nút do Unity vẽ bằng TextMeshPro hoặc font pixel của dự án 4; mũi tên này chỉ để thử.
8. Nút đang nhấn: ô 3, nhân bản nút thường rồi sửa: cả nút thấp xuống 1 px, mất thành nút dưới đáy (còn 2 hàng tối), hàng trên của mặt nút thành tối #1b1a24 2 hàng – như bóng của mép trên khi nút lún xuống. Mũi tên cũng xuống 1 px. Chiều cao nút từ 15 còn 14 px nhưng đáy nút ở cùng chỗ.
9. Ô vật phẩm lõm: ô 4, layer Slot. Hình vuông 24 × 24: viền #6a4636, trong là #1e1c2a ở hàng trên – cột trái (bóng), nền #2b2838, hàng dưới – cột phải #3d3a55 và mép ngoài dưới – phải #d8a868. Ánh sáng ngược với khung bảng nên ô trông lõm vào.
10. Kiểm tra độ dày viền: bật Guides: góc của khung bảng nằm trọn trong 8 × 8; nút có phần đầu – cuối trái phải mỗi bên 8 px chứa góc khuyết, phần giữa lặp đều. Ô vật phẩm không cần giãn nhưng cũng làm viền đều để dùng 9-slice khi cần ô to hơn.
11. Giãn thử trong Photoshop: file mới 160 × 96 px. Dán 4 góc 8 × 8 của khung vào 4 góc; kéo mảnh cạnh trên (16 × 8) bằng Free Transform (Biến đổi tự do) với Interpolation Nearest Neighbor cho dài 144 px, tương tự với các cạnh và phần giữa. Nếu bảng lớn trông đúng, Unity cũng sẽ giãn đúng.
12. Đếm màu và xuất: bản sao › Indexed Color (≤ 14 màu). Ẩn mẫu và guides, FileTệp›Export›Export AsXuất ra (tùy chỉnh) PNG 100% → ui_pixel.png đúng 128 × 32 px.
13. Unity 6 – cắt và đặt viền: Texture Type Sprite (2D and UI), Sprite Mode Multiple, Pixels Per Unit (Số pixel mỗi đơn vị) 16, Filter Mode (Chế độ lọc ảnh) Point (no filter), Compression None. Sprite Editor › Slice › Grid By Cell Size 32 × 32. Chọn sprite khung bảng, ở ô Border nhập L 8, R 8, T 8, B 8 (các đường xanh lá hiện lên), Apply. Làm tương tự cho nút (L 8, R 8, T 6, B 6).
14. Unity 6 – dùng trên Canvas: tạo GameObject›UI›ImageHình ảnh, gán sprite khung, Image Type Sliced, Pixels Per Unit Multiplier 1; kéo RectTransform tùy ý – góc giữ nguyên. Nút: component Button với Transition Sprite Swap, Pressed Sprite là nút đang nhấn. Canvas Scaler Scale With Screen Size, Reference Resolution 320 × 180 và kích thước bảng là bội số nguyên để pixel luôn vuông.

Nâng cao (tùy chọn)

• Trạng thái Hover và Disabled: thêm 2 ô: nút sáng hơn (mặt #5cb8e8) khi rê chuột và nút xám (đổi dải xanh sang dải đá) khi không bấm được – Button dùng Highlighted Sprite và Disabled Sprite.
• Khung hội thoại có đuôi: thêm mảnh "đuôi" 8 × 8 hình tam giác chỉ vào nhân vật đang nói, đặt dưới cạnh dưới của bảng bằng một Image riêng.
• Thanh máu 3-slice: khung 32 × 8 với đầu – cuối 4 px, phần giữa giãn ngang; bên trong là một Image Type Filled màu đỏ chạy theo lượng máu.