Dự án 8: Ô nước chảy 4 frame liền mạch (animated tile)
Vẽ một ô nước pixel 16 × 16 liền mạch bốn cạnh rồi biến nó thành 4 frame bằng Filter Offset – sóng dời đúng 4 px mỗi frame nên frame 4 nối lại frame 1 – trên dải 64 × 16 px, và phát bằng Animated Tile trong Unity 6.
Photoshop hiển thị tiếng Anh. Từ có gạch chân chấm là thuật ngữ trên giao diện — chạm để xem nghĩa, hoặc tra Từ điển Anh–Việt.
Tải về rồi mở bằng Photoshop: (Ctrl+O).
Một màn chơi có sông hồ trông "chết" nếu nước đứng yên. Giải pháp của game pixel là animated tile: ô nước có vài frame lặp lại, và vì mọi ô nước cùng phát một lúc, cả mặt hồ gợn sóng. Có hai điều kiện: mỗi frame phải liền mạch (ghép cạnh nhau không lộ đường nối) và chuỗi frame phải lặp vòng (frame cuối nối mượt về frame đầu). Mẹo của bài: vẽ một frame thật đẹp, rồi để tạo ba frame còn lại – vì dời 4 px × 4 frame = 16 px, đúng một vòng của ô.
Hình mẫu
Thời gian ước tính: khoảng 70 phút. Nhìn hàng lát bên dưới: các gợn sóng chạy liên tục qua mép ô – đó là bằng chứng ô liền mạch.
Chuẩn bị
- Canvas: hai file. File vẽ water_tile.psd 16 × 16 px và file kết quả 64 × 16 px (4 frame), cả hai RGB Color, Resolution (Độ phân giải) 72. Ô nước kín màu nên không cần nền trong suốt.
- Công cụ chính: Pencil (Bút chì) Tool 1 px (Shift+B), với tùy chọn Wrap Around, để xem lát thử, Paint Bucket (Thùng sơn) Tolerance 0 bỏ Anti-alias (Khử răng cưa).
- Phóng to không mờ: Image Interpolation Nearest Neighbor (Điểm lân cận), , zoom 1600% cho file 16 × 16.
- Thiết bị: ô 16 × 16 chỉ có 256 pixel – chuột là đủ và chính xác nhất. Bút Wacom, XP-Pen, Huion hay iPad + Apple Pencil giúp vẽ đường sóng cong tự nhiên hơn một chút; tắt lực nhấn và kiểm tra lại từng pixel sau khi vẽ.
- File mẫu: "Dải 4 ô 16 × 16": chữ thập hồng ở giữa mỗi ô đánh dấu chỗ đường nối sẽ xuất hiện sau khi Offset (Dịch chuyển (bọc vòng)) 8 px – vùng đó phải liền mạch.
| Màu | Mã hex | Dùng cho |
|---|---|---|
#1a2a5a | Rãnh sóng sâu (rất ít pixel) | |
#24448a | Bóng sóng – mặt sau con sóng | |
#2f66b0 | Nước nền (chiếm nhiều nhất) | |
#4f9ae0 | Mặt sóng bắt sáng | |
#bff0ff | Lấp lánh – 2 đến 4 pixel mỗi frame |
Các bước
- File vẽ 16 × 16: Ctrl+N 16 × 16 px, tô nền
#2f66b0. Zoom 1600%, bật Pixel Grid (Lưới điểm ảnh). - File xem lát: tạo file 128 × 64 px. Quay lại ô nước, đặt tên Water; ở file 128 × 64, layer mới, Contents Pattern chọn Water. Mỗi lần sửa ô, Define Pattern lại và Fill lại – bạn thấy ngay mặt hồ lớn.
- Rãnh sóng tối: trên ô 16 × 16, vẽ 2–3 vệt cong ngắn
#24448adài 3–6 px, nằm ngang hơi uốn như dấu ngã "~". Các vệt so le, không thẳng hàng. Thêm 1–2 pixel#1a2a5aở chỗ sâu nhất của vệt. - Mặt sóng sáng: ngay trên mỗi vệt tối, vẽ vệt
#4f9ae0ngắn hơn một chút – mặt trước con sóng đón ánh sáng. Sáng luôn nằm trên tối, giống như vạch sáng trên viên gạch. - Làm liền mạch: Horizontal +8, Vertical +8, Wrap Around. Bốn góc cũ giờ gặp nhau ở giữa ô: sửa các vệt bị cắt cụt hoặc dồn cục ở chữ thập giữa, rồi Offset lại −8, −8 để trả về vị trí cũ. Lặp đến khi không còn thấy đường nối trong file xem lát.
- Phân bố đều: trong file xem lát, lùi ra 200%: nếu mắt thấy một "hoa văn" lặp đều như giấy dán tường, xóa bớt 1 vệt hoặc làm một vệt dài hơn. Nước tự nhiên có mật độ đều nhưng không có điểm nhấn nổi bật.
- Dải 4 frame: tạo file 64 × 16 px, đặt file mẫu lên trên cùng. Kéo ô nước vào ô 1 (Move Tool (Công cụ Di chuyển), giữ Shift để dán đúng góc). Nhân bản layer 3 lần (Ctrl+J) và dời mỗi bản đúng 16 px sang phải.
- Dời sóng 4 px mỗi frame: chọn bản ở ô 2, Marquee (Khung chọn) chọn đúng ô 16 × 16 đó, Horizontal +4, Vertical 0, Wrap Around (Offset chỉ áp trong vùng chọn). Ô 3 dời +8, ô 4 dời +12. Ô 5 tưởng tượng sẽ là +16 – trùng ô 1, nên vòng lặp liền mạch.
- Cho sóng "sống": dời thuần túy trông như băng chuyền trượt. Ở mỗi frame, đổi 2–3 pixel: một vệt sáng dài thêm 1 px, một vệt ngắn lại, một rãnh tối lệch xuống 1 px. Giữ thay đổi nhỏ để không phá vòng lặp.
- Lấp lánh: 2–4 pixel
#bff0ffmỗi frame, đặt trên đỉnh vệt sáng nhưng khác chỗ giữa các frame – khi phát, chúng nhấp nháy như nắng trên mặt nước. - Kiểm tra từng frame: mỗi frame phải liền mạch riêng. Sao chép từng ô sang file 16 × 16, Offset 8/8 kiểm tra như bước 5. Thêm kiểm tra vòng lặp: đặt ô 4 cạnh ô 1, mắt phải thấy sóng tiếp tục trôi.
- Xem thử chuyển động: › Create Frame Animation, 4 frame mỗi frame bật một layer ô, thời lượng 0,15 giây, Looping Forever. Nếu thấy giật ở chỗ frame 4 → 1, độ dời chưa đúng 4 px.
- Đếm màu và xuất: bản sao › Indexed Color: tối đa 6 màu. Ẩn mẫu, PNG 100% →
water_anim.pngđúng 64 × 16 px. - Unity 6: 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; Slice Grid By Cell Size 16 × 16. Với gói 2D Tilemap Extras: , kéo 4 sprite vào danh sách theo thứ tự, Minimum Speed và Maximum Speed đặt 6 (6 frame/giây). Kéo tile vào Tile Palette và tô lên Tilemap Water; thêm Tilemap Collider 2D nếu nước chặn đường.
Nâng cao (tùy chọn)
- Ô mép nước: vẽ thêm ô bờ (nửa trên là cỏ hoặc đá, nửa dưới là nước có viền bọt
#bff0ff) cũng 4 frame, bọt chỉ đổi 1–2 pixel mỗi frame. - Thác nước: dùng cùng kỹ thuật nhưng Offset theo chiều dọc +4 mỗi frame, vệt sáng dọc thay vì ngang.
- Dung nham: đổi bảng màu sang đỏ – cam – vàng và giảm tốc độ xuống 3–4 frame/giây cho cảm giác đặc quánh.
Mẹo & trick học nhanh
Khi có vùng chọn, Filter Offset với Wrap Around chỉ cuộn pixel bên trong vùng đó. Chọn đúng ô 16 × 16 trước khi Offset để không làm lệch các frame bên cạnh.
Khoảng 60% pixel nên là màu nền #2f66b0. Quá nhiều vệt sáng tối làm mặt nước rối và nhấp nháy khó chịu khi cả màn hình đầy nước.
rồi Fill Pattern lên một file lớn là cách nhanh nhất để thấy ô trông thế nào khi lặp hàng chục lần – đường nối nhỏ nhất cũng lộ ra.