Dự án 3: Viền selout và anti-alias thủ công trên chiếc khiên

Viền đen 1 px giúp sprite nổi rõ trên mọi nền, nhưng viền đen dày đặc quanh mọi thứ làm hình trông như sách tô màu. Họa sĩ pixel dùng hai kỹ thuật để "nâng cấp" viền. Selout (selective outlining – viền chọn lọc) là tô viền bằng màu tối của chính vùng bên trong và làm viền sáng hơn ở phía được chiếu. Anti-alias (Khử răng cưa) thủ công (AA) là đặt vài pixel tông trung gian vào góc của các bậc thang trên đường cong, làm đường cong mượt hơn ở cỡ thật. Photoshop có anti-alias tự động nhưng nó tạo màu mờ hỗn loạn; trong pixel art ta tự chọn từng pixel AA.

Hình mẫu

Thời gian ước tính: khoảng 50 phút. Nhìn kỹ vành khiên ở phía trên – trái: bản giữa và bản phải có viền xám tím thay vì đen; ở các bậc cong, bản phải có thêm pixel chuyển tiếp.

Chuẩn bị

• Canvas: 96 × 32 px (3 ô 32 × 32), Resolution (Độ phân giải) 72, RGB Color, Background Contents: Transparent.
• Công cụ chính: Pencil (Bút chì) Tool 1 px (⇧ Shift+B), Eraser (Tẩy) Mode Pencil, Elliptical Marquee (Khung chọn) bỏ Anti-alias, Magic Wand (Đũa thần) (W) Tolerance 0 bỏ Anti-alias, Eyedropper (Ống hút màu) Point Sample.
• Phóng to không mờ: Image Interpolation Nearest Neighbor (Điểm lân cận) (Photoshop›SettingsCài đặt›GeneralChung), bật ViewHiển thị›ShowHiện›Pixel GridLưới điểm ảnh. Mở thêm cửa sổ xem cỡ thật: WindowCửa sổ›Arrange›New Window for… rồi đặt cửa sổ thứ hai ở 200%.
• Thiết bị: sửa viền là công việc đặt từng pixel – chuột cho độ chính xác tốt nhất và hoàn toàn đủ dùng. Wacom, XP-Pen, Huion hay iPad + Apple Pencil cũng được nếu tắt lực nhấn; hãy bấm từng điểm, đừng kéo nét.
• File mẫu: "Dải 3 ô 32 × 32" – vòng hồng là mép ngoài vành khiên (bán kính 13 px), vòng xanh là mép trong mặt gỗ (bán kính 10 px).

Các bước

1. Tạo file: ⌘ Cmd+N 96 × 32 px, Transparent. Gridline Every 32 Pixels, Subdivisions 32. Đặt file mẫu lên trên cùng, khóa layer, zoom 800%.
2. Bóng dáng khiên: layer Shield A. Elliptical Marquee bỏ Anti-alias, Fixed Size 27 × 27 px, đặt khớp vòng hồng ở ô 1, tô #6a6888. Thu vùng chọn bằng SelectVùng chọn›Modify›Contract 3 px rồi tô #8f5a32 cho mặt gỗ.
3. Sửa đường cong: một đường tròn pixel đẹp có các bậc thang giảm/tăng đều: 1-1-2-3-5… rồi đối xứng. Tìm chỗ bậc bị "lắc" (ví dụ 2-1-2) và sửa bằng Pencil/Eraser. Kiểm tra bằng cách lật ảnh ImageHình ảnh›Image Rotation›Flip Canvas Horizontal – lỗi lệch sẽ hiện ra ngay; lật lại khi xong.
4. Viền đen 1 px: ⌘ Cmd + bấm thumbnail layer để chọn khối, EditChỉnh sửa›StrokeViền 1 px, Outside, #1b1a24. Xóa các góc chữ L dày 2 px (chỗ viền tạo thành khối 2 × 2) – đường viền 1 px phải liền nhưng không dày.
5. Đổ khối: ánh sáng trên – trái. Vành thép: phía trên – trái #9ea0b8, một cung ngắn #dcdde8 làm ánh kim, phía dưới – phải #3d3a55. Mặt gỗ: tối #5c3a24 dưới – phải, sáng #c58a52 trên – trái. Huy hiệu hình thoi vàng ở giữa: nửa trên – trái #ffe68a, nửa dưới – phải #b8741f. Thêm 4 đinh tán 1 pixel #dcdde8.
6. Nhân bản sang ô 2 và 3: ⌘ Cmd+J hai lần, dời đúng 32 và 64 px. Đặt tên Shield B – Selout và Shield C – AA. Ô 1 giữ nguyên làm bản so sánh.
7. Selout – phía sáng: trên bản B, những pixel viền ở cung trên – trái (khoảng 10 giờ tới 1 giờ) đổi thành #6a6888 – tông tối của vành thép thay vì đen. Viền vẫn còn, nhưng mềm và "thuộc về" vật.
8. Selout – vùng chuyển: hai đoạn viền nối giữa phía sáng và phía tối (khoảng 9 giờ và 2–3 giờ) đổi thành #3d3a55. Phía dưới – phải giữ #1b1a24 – đen chỉ còn ở chỗ thật sự tối, nên khiên trông như được chiếu sáng thật.
9. Anti-alias – tìm bậc thang: trên bản C (đã có selout), zoom 800% và tìm các góc trong của đường cong, nơi viền "rẽ" từ ngang sang dọc tạo thành bậc. Chính các góc này làm mép trông răng cưa ở cỡ thật.
10. Anti-alias – đặt pixel: ở mỗi góc trong, đổi pixel bên trong vành (kề hai pixel viền) sang một tông nằm giữa viền và vành: phía sáng dùng #9ea0b8, phía tối dùng #4f4c6a. Chỉ 1 pixel mỗi bậc; bậc dài 3–5 pixel có thể dùng 2 pixel tông giảm dần.
11. Không anti-alias ra nền: đừng đặt pixel AA bên ngoài viền. Bạn không biết sprite sẽ đứng trên nền gì trong game; pixel AA ngoài viền sẽ thành "quầng" sai màu trên nền khác.
12. So sánh ở cỡ thật: nhìn cửa sổ 200%: bản A sắc nhưng cứng, bản B mềm và có khối, bản C tròn trịa nhất. Thêm tạm một layer tô nền #3a8f4a phía dưới để kiểm tra trên nền màu – bản C không được có quầng.
13. Đếm màu và xuất: bản sao › Indexed Color, Palette Exact ≤ 16 màu. Ẩn mẫu và nền thử, FileTệp›Export›Export AsXuất ra (tùy chỉnh) PNG Scale 100% → shield_outline.png 96 × 32 px.
14. Unity 6: Texture Type Sprite (2D and UI), Sprite Mode Multiple, Pixels Per Unit (Số pixel mỗi đơn vị) 32, Filter Mode (Chế độ lọc ảnh) Point (no filter), Compression None; Sprite Editor › Slice › Grid By Cell Size 32 × 32. Đặt ba sprite trên các nền sáng – tối khác nhau trong Scene để chọn kiểu viền cho cả dự án, và giữ một kiểu duy nhất cho mọi vật phẩm.

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

• Viền trong (inner line): thêm đường 1 px #3d3a55 giữa vành thép và mặt gỗ – đừng dùng đen, để chi tiết bên trong nhẹ hơn viền ngoài.
• Bộ 3 vật phẩm: áp dụng kiểu viền của bản C cho một thanh kiếm chéo 45° và một bình thuốc tròn – lưỡi kiếm chéo 1:1 sẽ cho bạn thấy đường thẳng không cần AA.
• Viền phát sáng: vật phẩm hiếm có thể dùng viền ngoài màu vàng #ffe68a ở phía sáng – Unity đổi giữa sprite thường và sprite "sáng" khi người chơi lại gần.