Dự án 14: Leo thang & bơi – hai vòng lặp 6 frame

Leo thang và bơi là hai vòng lặp mà nhiều game làm qua loa – nhân vật trượt lên thang như thang máy, hoặc "bơi" bằng tư thế chạy nằm ngang. Bạn sẽ làm đúng cả hai và học một khái niệm quan trọng của mọi chu kỳ di chuyển: chu kỳ đối xứng. Khi leo thang, nửa sau của chu kỳ (C4–C6) chính là nửa đầu (C1–C3) với tay chân đổi bên. Hiểu điều này bạn chỉ cần thiết kế 3 tư thế cho 6 frame. Bạn cũng học khớp tốc độ di chuyển trong game với khoảng cách bậc thang – tay phải bám đúng bậc chứ không trượt qua.

Hình mẫu

Thời gian ước tính: khoảng 110 phút. Nhịp: leo 6 × 100 ms = 600 ms một chu kỳ (bò lên 2 bậc); bơi 6 × 83 ms = 498 ms một chu kỳ (mỗi tay quạt một lần).

Chuẩn bị

• Canvas: 768 × 256 px – lưới 6 cột × 2 hàng ô 128 px. Hàng 1: C1–C6 (Climb), hàng 2: S1–S6 (Swim). Resolution (Độ phân giải) 72, RGB, Transparent.
• Công cụ chính: Brush (Cọ vẽ) Tool, Lasso (Dây thòng lọng) Tool, Free Transform (Biến đổi tự do) (xoay, lật ngang EditChỉnh sửa›TransformBiến đổi›Flip HorizontalLật ngang cho các bộ phận), Puppet Warp (Uốn cong), Clipping Mask (Mặt nạ cắt), Ellipse và Pen Tool (Bút tạo đường) cho gợn nước.
• Thiết bị: tư thế leo nhiều góc gập khó, nên phác bằng bút Wacom, XP-Pen, Huion hoặc iPad + Apple Pencil (Bút chì) (Sidecar/Astropad) sẽ nhanh nhất; gợn sóng nước vẽ một nét bằng bút rất tự nhiên. Dùng chuột: nhân vật cắt rời theo bộ phận (đầu, thân, cánh tay trên – dưới, đùi – cẳng) rồi xoay quanh khớp – cách này đặc biệt hợp với chu kỳ đối xứng vì bạn chỉ cần hoán đổi góc tay trái – phải.
• File mẫu: "Khung leo thang & bơi" – hàng 1 có hai thanh thang (x 77 và 108 mỗi ô) và 5 bậc vàng cách nhau khoảng 25,6 px; hàng 2 có mặt nước xanh ở y = 194 (giữa ô). Vẽ thang thật trong file riêng nếu muốn đưa vào sheet, nhưng thường thang là tile của màn chơi – sheet nhân vật không chứa thang.

Các bước

1. Phân tích chu kỳ leo: leo thang luôn theo cặp chéo: tay phải lên cùng lúc chân trái lên. C1: tay trước với lên bậc cao, chân sau co lên bậc thấp; C4: ngược lại – tay sau với lên, chân trước co lên. C2–C3 và C5–C6 là khung trung gian kéo người lên. Viết bảng nhỏ "tay trước / tay sau / chân trước / chân sau" cho 6 frame trước khi vẽ.
2. Tạo file: 768 × 256 px Transparent, Gridline 128 px. Đặt file mẫu, tạo 12 Group C1…C6, S1…S6. Tạm vẽ thang trên layer riêng LADDER_REF (ẩn khi xuất).
3. C1 – key: nhân vật nhìn nghiêng về phía thang (bên phải), người nghiêng vào thang 12°. Tay trước với cao bám bậc thứ hai từ trên, khuỷu hơi gập; tay sau ở thấp bám bậc giữa; chân sau co gối đặt bậc dưới, chân trước duỗi. Bàn tay phải chạm đúng bậc vàng – không lơ lửng giữa hai bậc.
4. C4 – key đối xứng: nhân đôi C1, đổi vai trò: tay sau giờ với cao, tay trước ở thấp; chân trước co, chân sau duỗi. Với nhân vật cắt rời, chỉ cần hoán đổi góc xoay của tay trái – phải, chân trái – phải. Người ở C4 có độ cao bằng C1 (vì là vòng lặp tại chỗ).
5. Khung trung gian kéo người: C2 – C3: tay cao kéo người lên, bàn tay đang bám trượt xuống theo người (vì người đi lên, tay giữ bậc đứng yên trong thế giới nên đi xuống trong khung), chân co duỗi dần. C5 – C6 tương tự đổi bên. Người nhấp nhô lên xuống 2 px theo nhịp kéo.
6. Khớp tốc độ với bậc thang: một chu kỳ 6 frame đi lên đúng 2 bậc = 51 px. Nếu Pixels Per Unit (Số pixel mỗi đơn vị) là 64 thì 51 px = 0,8 unit trong 0,6 giây → tốc độ leo trong code ≈ 1,33 unit/giây. Đúng con số này, tay sẽ "dính" bậc thang; sai, tay trượt qua bậc như trượt băng.
7. Soát onion skin leo: chồng tạm C1 và C3 lên ô C2 (Opacity (Độ mờ đục) 30%, Color Overlay (Phủ chồng) hồng – xanh lá). Bàn tay đang bám phải dịch xuống đều, khoảng cách bằng bước leo; tay đang với lên đi theo đường cung ra ngoài thang.
8. Phân tích chu kỳ bơi (sải): người nằm ngang, đầu hướng phải, mặt nước ngang vai. Hai tay quay tròn lệch nhau nửa vòng: S1 tay trước vươn ra trước – tay sau đẩy nước ở hông; S4 ngược lại. Chân đạp nhỏ, nhanh – mỗi chân lên xuống 2 lần trong một chu kỳ tay.
9. S1 – S6: mỗi frame tay xoay thêm 60° quanh vai. Tay đang ở dưới nước bị mặt nước che bớt (giảm Opacity 70% hoặc phủ lớp nước lên), tay trên không vẽ rõ. Đầu nhô lên lấy hơi ở S2 (miệng mở) rồi chìm lại. Tóc dính ướt, khăn quàng nổi lềnh bềnh trên mặt nước, trễ theo người.
10. Lớp nước và gợn sóng: trong mỗi frame S, layer nước #5ab8e8 Opacity 45% phủ từ y = 194 xuống đáy ô, đặt trên phần người dưới nước. Đường gợn sóng #e6f8ff 1,5 px uốn nhẹ, đổi pha mỗi frame. Bọt nhỏ ở chỗ tay chạm nước và dưới chân đạp.
11. Tô màu và sáng tối: tô phẳng, viền 2 px. Phần người dưới nước ngả xanh: thêm layer kẹp Color 30% #5ab8e8 cho vùng dưới mặt nước. Leo thang: bóng tối ở mặt quay vào thang.
12. Timeline (Dòng thời gian), xuất: hai Timeline riêng (hoặc xem C1–C6 rồi S1–S6): leo 0,1 giây/frame, bơi 0,083 giây/frame, Forever. Ẩn thang tham chiếu và file mẫu, Export As (Xuất ra (tùy chỉnh)) PNG → hero_climb_swim.png 768 × 256 px.
13. Unity 6 – leo thang: Sprite Editor › Grid By Cell Size 128 × 128, Pivot (Điểm neo) Bottom; clip Climb (6 sprite hàng 1, Samples 10, Loop Time) và Swim (6 sprite hàng 2, Samples 12, Loop Time). Thang là vùng có BoxCollider2D Is Trigger tag "Ladder". Khi nhân vật trong vùng và bấm lên/xuống: gravityScale = 0, vận tốc dọc = input × 1,33, Bool isClimbing = true. Đứng yên trên thang: animator.speed = 0 để giữ nguyên tư thế bám; bấm xuống: phát ngược bằng Parameter Float climbDir gán vào Speed Multiplier của state Climb (tích Parameter cạnh ô Multiplier) với giá trị −1.
14. Unity 6 – bơi: vùng nước có Buoyancy Effector 2D (Surface Level ở mặt nước) và Collider Used By Effector. Khi chạm nước: Bool isSwimming, Animator Speed tỉ lệ với độ lớn vận tốc ngang (0,5–1,3) – bơi chậm thì quạt tay chậm.

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

• Leo lên đỉnh thang: clip 4 frame chuyển từ leo sang đứng trên nền phía trên (chống tay, nhấc gối, đứng dậy) – game nào cũng cần và thường bị bỏ quên.
• Lặn dưới nước: clip bơi ếch dưới mặt nước 6 frame: tay quạt sang hai bên, chân đạp ếch, bong bóng khí bay lên từ miệng.
• Leo dây và leo tường: áp dụng cùng chu kỳ đối xứng – leo dây tay nắm chồng lên nhau, leo tường thì bám gờ đá.