Dự án 7: Rương pixel mở nắp 4 frame

Mở rương là khoảnh khắc "phần thưởng" người chơi chờ đợi, nên hoạt ảnh này cần rõ ràng và có cao trào dù chỉ có 4 hình. Nguyên tắc vàng của hoạt ảnh pixel cho đồ vật: cái gì không cần chuyển động thì giữ nguyên từng pixel. Ở đây thân rương giống hệt nhau trong cả 4 frame; chỉ có nắp, ánh sáng và đồng xu thay đổi. Nhờ vậy rương không bị "rung" vô cớ và bạn chỉ phải vẽ 1/3 khối lượng.

Hình mẫu

Thời gian ước tính: khoảng 80 phút. Frame 2 là lấy đà (anticipation): nắp chỉ hé ra một chút và lóe sáng – người chơi biết "sắp có gì đó" trước khi rương bật mở.

Chuẩn bị

• Canvas: 128 × 32 px (4 frame 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), Rectangular Marquee (Khung chọn) Fixed Size 32 × 32, Move Tool (Công cụ Di chuyển) (V) với phím mũi tên, WindowCửa sổ›TimelineDòng thời gian ở chế độ Create Frame Animation để xem thử.
• 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 32.
• Thiết bị: rương được dựng từ các hình chữ nhật – chuột làm rất tốt, dùng Marquee và Paint Bucket (Thùng sơn) là đủ. Bút Wacom, XP-Pen, Huion hay iPad + Apple Pencil chỉ cần cho vài pixel tia sáng; nhớ tắt lực nhấn.
• File mẫu: "Dải 4 ô 32 × 32": đường hồng y = 28 là mặt đất (đáy rương), vạch xanh y = 17 là mép trên thân rương – giống nhau ở cả 4 frame.

Các bước

1. Tạo file: ⌘ Cmd+N 128 × 32 px, Transparent; đặt lưới và file mẫu, khóa lại. Tạo các layer: Body, Lid 1 … Lid 4, FX (ánh sáng). Mỗi frame sau này là một tổ hợp layer bật/tắt.
2. Thân rương (frame 1): layer Body. Hình chữ nhật 22 × 11 px từ y = 17 tới y = 27, cách mép ô 5 px mỗi bên. Tô #8f5a32; mép trên 1 px #f2b632, hai đai dọc rộng 2 px #f2b632, ổ khóa 4 × 4 ở giữa có lỗ khóa #1b1a24.
3. Nắp đóng: layer Lid 1. Hình 22 × 7 px ngay trên thân (y = 9–15), hai góc trên khuyết 1 pixel cho tròn. Đai vàng nối tiếp đai của thân, mép dưới nắp là một dải vàng – đó là chỗ nắp gặp thân.
4. Đổ khối thân và nắp: ánh sáng trên – trái. Gỗ: hàng pixel trên cùng và cột trái mỗi tấm #c58a52, cột phải và hàng dưới #5c3a24. Đai vàng: mép trái #ffe68a, mép phải #b8741f. Viền ngoài 1 px #1b1a24 bằng EditChỉnh sửa›StrokeViền Outside cho từng layer.
5. Sao chép thân sang 4 frame: chọn layer Body, Marquee 32 × 32 ô 1, ⌘ Cmd+C rồi ⌘ Cmd+⇧ Shift+V ba lần, mỗi lần dời đúng 32 px. Từ giờ không sửa thân ở frame 2–4; nếu cần sửa, sửa ở frame 1 rồi sao chép lại.
6. Frame 2 – nắp hé (lấy đà): layer Lid 2: sao chép nắp đóng, dời lên đúng 2 px. Khe hở 2 px giữa nắp và thân: hàng dưới tô #3a2630, hàng trên tô #ffe68a – ánh vàng lọt ra. Thêm 2–3 pixel #ffe68a/#fff8e0 lẻ ngoài rương như tia lóe.
7. Frame 3 – mở nửa: nắp đã lật ra sau nên ta thấy mặt trong của nắp. Vẽ hình thang tối #3a2630 từ mép trên thân lên tới y = 4, trên cùng là cạnh nắp gỗ mỏng 2 px. Miệng rương hiện một dải #2a1a20, phía trên là ánh vàng 2 hàng #ffe68a + #fff8e0.
8. Frame 4 – mở hẳn: mặt trong nắp là hình chữ nhật đứng 22 × 8 px (y = 2–9) có đai gỗ tối. Lòng rương có đống vàng: dải #f2b632 với vài pixel #fff8e0 lấp lánh. Một đồng xu 6 × 3 px bay lên ở đỉnh ô.
9. Tia sáng: layer FX. Ở frame 3–4 vẽ 3 tia chéo bằng pixel rời (cách nhau 2–3 px) tỏa ra từ miệng rương: trái nghiêng trái, giữa thẳng lên, phải nghiêng phải. Tia bằng pixel rời trông "lấp lánh" hơn đường liền.
10. Viền cho các nắp: viền 1 px cho Lid 2–4; chỗ nắp chạm thân, giữ một đường viền chung để không bị dày 2 px. FX không có viền – ánh sáng không có đường bao.
11. Xem thử bằng Timeline (Dòng thời gian): WindowCửa sổ›TimelineDòng thời gian › Create Frame Animation. Frame 1: bật Body + Lid 1 (chỉ ô 1 – có thể dùng các layer riêng theo từng ô). Thêm frame cho từng trạng thái, đặt thời lượng 0,15 – 0,1 – 0,1 – 0,5 giây (frame cuối giữ lâu). Bấm Play: nắp phải bật ra dứt khoát.
12. Kiểm tra trên nền: layer tạm #57536e dưới cùng. Đáy rương 4 frame phải nằm trên đúng y = 27 – nếu thân "nhảy", bạn đã lỡ sửa thân ở một frame. Đếm màu bằng bản sao Indexed Color: tối đa 16 màu.
13. Xuất PNG: ẩn mẫu, nền tạm và tắt Timeline, FileTệp›Export›Export AsXuất ra (tùy chỉnh) PNG Scale 100% → chest_open.png đúng 128 × 32 px.
14. Unity 6: Texture Type Sprite (2D and UI), Sprite Mode Multiple, Pixels Per Unit (Số pixel mỗi đơn vị) 16 (hai ô lưới game), Filter Mode (Chế độ lọc ảnh) Point (no filter), Compression None; Sprite Editor › Slice › Grid By Cell Size 32 × 32, Pivot (Điểm neo) Bottom. Chọn cả 4 sprite kéo vào Scene, lưu clip ChestOpen.anim; mở clip ở Inspector và bỏ chọn Loop Time, trong cửa sổ Animation đặt Samples 10. Trong Animator, trạng thái mặc định là Closed (chỉ sprite frame 1), chuyển sang ChestOpen bằng Trigger Open mà script gọi khi người chơi tương tác.

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

• Rương rung chờ mở: thêm 2 frame (canvas 192 × 32) cả rương lệch 1 px trái – phải, phát lặp khi người chơi đứng gần để báo "tương tác được".
• Ba cấp độ rương: đổi màu đai bằng Magic Wand (Đũa thần) (Tolerance 0, bỏ Contiguous): đồng – bạc – vàng; gỗ thường, gỗ đỏ, đá đen cho rương hiếm.
• Rương quái (mimic): frame 4 thay đống vàng bằng răng và lưỡi – một bất ngờ kinh điển của game hầm ngục.