Lộ trình › Pixel art chuyên sâu › Dự án 11: Bộ khung UI pixel 9-slice
Bộ khung UI pixel 9-slice của bạn
Đề bài
- Tạo file 128 × 32 px nền trong suốt, 4 ô 32 × 32 (chủ đề tùy chọn: đá rêu, kim loại sci-fi, giấy da…).
- Ô 1 khung bảng, ô 2 nút thường, ô 3 nút đang nhấn, ô 4 ô vật phẩm lõm.
- Viền khung dày đúng 8 px; chi tiết chỉ ở 4 góc, cạnh và phần giữa lặp đều.
- Xuất PNG đúng 128 × 32 px, không quá 14 màu, và nộp.
Lỗi hay gặp & cách sửa
- Bảng giãn ra thấy vệt dài ở cạnh.Có chi tiết ở giữa cạnh. Xóa nó, sao chép một cột pixel sạch của cạnh và lặp lại cho cả đoạn từ 8 tới 24 px.
- Góc khung bị cắt mất một phần trong Unity.Góc rộng hơn 8 px nhưng Border đặt 8. Thu chi tiết góc vào trong 8 × 8 hoặc tăng Border cho khớp.
- UI bị mờ hoặc pixel to nhỏ không đều.Đặt Filter Mode (Chế độ lọc ảnh) Point, Compression None, và để Canvas Scaler phóng to theo bội số nguyên (Reference Resolution (Độ phân giải) 320 × 180).
Yêu cầu máy chấm sẽ kiểm tra
- Định dạng
- PNG
- Kích thước
- 128 × 32 px (chính xác)
- Nền
- Trong suốt (PNG)
- Cạnh
- Lũy thừa của 2
- Frame
- 32 × 32 px, ≥ 4 frame
- Số màu
- Tối đa 14
- Dung lượng
- ≤ 100 KB
Cách tính: 70% yêu cầu kỹ thuật (máy chấm) + 30% tự kiểm tra. Sau đó giáo viên xem bài, chấm lại phần thẩm mỹ và góp ý.