Dự án 10: Khung inventory và ô vật phẩm 9-slice

Cửa sổ túi đồ, hộp thoại, bảng cửa hàng… trong game có đủ mọi kích thước. Thay vì vẽ mỗi cửa sổ một hình, họa sĩ UI vẽ một khung nguồn nhỏ rồi engine co giãn nó theo kỹ thuật 9-slice (cắt 9 phần): 4 góc giữ nguyên, 4 cạnh chỉ kéo dài theo một chiều, phần giữa co giãn tự do. Bí quyết nằm ở cách bạn vẽ để mỗi phần co giãn mà không xấu.

Hình mẫu

Thời gian ước tính: khoảng 2,5 giờ: 1 giờ khung nguồn, 45 phút ô vật phẩm, 45 phút icon nhỏ và thử trong Unity.

Chuẩn bị

• Canvas: 512 × 256 px, Transparent. Bên trái: khung nguồn 256 × 256 px (viền 32 px). Bên phải hàng trên (y 0–64): 3 ô vật phẩm 64 × 64 px ở x 272, 352, 432 (thường, rê chuột, đang chọn). Hàng dưới (y 96–144): 3 icon vật phẩm 48 × 48 px.
• Quy tắc 9-slice: mọi trang trí của góc (đinh tán, miếng kim loại) phải nằm gọn trong ô 32 × 32 ở góc; cạnh chỉ có họa tiết đều theo chiều dài (sọc gỗ chạy ngang); phần giữa là màu phẳng hoặc họa tiết rất nhẹ.
• Công cụ chính: Rectangle Tool có bo góc, Layer Style (Stroke, Inner Shadow, Bevel & Emboss), Rectangular Marquee (Khung chọn) (M).
• File mẫu: "Khung hướng dẫn 9-slice": vùng hồng là góc, vùng xanh dương là cạnh, vùng xanh lá là giữa – đặt nó lên khung nguồn để kiểm tra.
• Thiết bị: vẽ bằng Shape và vùng chọn, chuột hay bút đều như nhau.

Các bước

1. Tạo file 512 × 256 px, Transparent. Kéo guide ở x 32, 224 và y 32, 224 – bốn đường này là ranh giới 9-slice của khung nguồn 256 × 256.
2. Viền gỗ: Rectangle 256 × 256, bo góc 20, Fill #8a5a35, Stroke Inside 4 px viền tối, đặt ở X 0, Y 0. Đây là toàn bộ "khung".
3. Nền trong: Rectangle 192 × 192 (256 trừ 2 × 32), bo góc 8, Fill #2b2233, Stroke 3 px, đặt đúng X 32, Y 32 – mép nền trùng guide nên phần giữa hoàn toàn nằm trong ô giữa của 9-slice.
4. Khối cho gỗ: layer kẹp vào viền gỗ: dải sáng #b98252 4 px sát mép trên, dải tối #5e3a22 10 px sát mép dưới. Các dải chạy suốt chiều dài cạnh nên khi kéo dài vẫn liền mạch. Không vẽ vân gỗ lượn sóng hay mắt gỗ – chúng sẽ bị kéo méo.
5. Bóng đổ vào trong: LayerLớp›Layer Style›Inner Shadow cho nền trong: Color đen, Opacity (Độ mờ đục) 40%, Angle 90°, Distance 6, Size 4 – như thể viền gỗ nhô cao hơn nền.
6. Miếng kim loại 4 góc: Rectangle 26 × 26 bo góc 5, Fill #c3ccd8, viền 3 px, đặt ở góc trên – trái cách mép 3 px (nằm gọn trong ô 32 × 32). Thêm đinh tán: hình tròn 6 px #7d8ba1 với chấm trắng 2 px. Nhân sang 3 góc còn lại bằng ⌥ Option + kéo, căn bằng guide.
7. Kiểm tra bằng khung hướng dẫn: kéo file "Khung hướng dẫn 9-slice" lên trên khung nguồn, Opacity 50%. Miếng kim loại phải nằm hoàn toàn trong vùng hồng; không trang trí nào chạm vùng xanh lá. Ẩn khung hướng dẫn sau khi kiểm tra.
8. Ô vật phẩm thường: Rectangle 64 × 64 bo góc 6 tại X 272, Y 0, Fill #3d3247, Stroke Inside 3 px viền tối. Layer kẹp: dải tối #221b29 5 px sát mép trên (ô lõm vào) và dải sáng #5a4b68 3 px sát mép dưới.
9. Ba trạng thái: nhân đôi ô sang X 352 và X 432. Ô 2 (rê chuột): nền #54456a. Ô 3 (đang chọn): đổi Stroke thành 4 px #ffc53d và thêm Outer Glow vàng nhẹ. Ba ô cùng kích thước, cùng vị trí dải sáng – chỉ đổi màu.
10. Icon vật phẩm 48 px: hàng dưới, vẽ nhanh 3 icon nhỏ cùng phong cách viền tối: bình thuốc đỏ, đồng xu vàng, viên ngọc xanh (có thể thu nhỏ từ các dự án trước bằng ⌘ Cmd+T). Icon nằm trong 48 × 48 để còn chừa lề 8 px khi đặt vào ô 64.
11. Thử co giãn ngay trong Photoshop: chọn khung nguồn bằng Marquee, sao chép gộp ⇧ Shift+⌘ Cmd+C, dán vào file nháp 600 × 400. Cắt 9 phần theo guide và kéo dài các cạnh bằng Free Transform (Biến đổi tự do) để xem trước: góc không méo, cạnh vẫn đẹp khi dài gấp 3 – đạt.
12. Xuất: ẩn guide và khung hướng dẫn, FileTệp›Export›Export AsXuất ra (tùy chỉnh), PNG → inventory_ui.png 512 × 256 px.
13. Đặt Border trong Unity 6: Texture Type Sprite (2D and UI), Sprite Mode Multiple, Apply. Sprite Editor › Slice › Automatic › Slice. Bấm chọn sprite khung, trong bảng Sprite ở góc dưới – phải đặt Border L 32, T 32, R 32, B 32 (bốn đường xanh lá hiện lên) › Apply.
14. Dựng cửa sổ trong Unity: trong Canvas tạo UI Image gán sprite khung, Image Type Sliced, bật Fill Center, kéo Rect Transform thành 600 × 440 – góc không méo. Tạo một object con với Grid Layout Group (Cell Size 64 × 64, Spacing (Khoảng cách dấu cọ) 8 × 8) chứa các Button ô vật phẩm; ở Button chọn Transition Sprite Swap, gán ô rê chuột vào Highlighted Sprite và ô đang chọn vào Selected Sprite.

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

• Thanh tiêu đề: vẽ một dải băng 9-slice riêng 128 × 48 px (border trái – phải 24 px) để ghi "TÚI ĐỒ" bằng chữ của game.
• Chủ đề khác: đổi bảng màu sang đá xám và rêu xanh, hoặc kim loại sci-fi có đèn neon ở góc – cấu trúc 9-slice giữ nguyên.
• Số lượng vật phẩm: để trống góc dưới – phải ô 64 px (khoảng 20 × 16 px) cho chữ "x12" do game hiển thị.