Dự án 2: Đồng xu xoay 8 frame

Đồng xu xoay là bài học về chuyển động 3D giả lập trên mặt phẳng 2D. Đồng xu không di chuyển, không đổi kích thước thật – chỉ có góc nhìn thay đổi, nên bề rộng của nó co lại thành elip rồi thành một vạch mỏng (frame cạnh) rồi nở ra mặt sau. Bạn sẽ học cách tính bề rộng bằng một công thức đơn giản, vì sao vòng lặp loại này cần nhịp đều (không ease) và cách giữ độ dày cạnh nhất quán để đồng xu trông "đặc" chứ không như tờ giấy. Kỹ thuật này dùng lại cho mọi vật xoay: ngôi sao nhặt được, viên ngọc, chìa khóa, cánh quạt.

Hình mẫu

Thời gian ước tính: khoảng 40 phút. Nhịp: 8 frame × 83 ms = 664 ms một vòng (12 fps), lặp mãi. Góc quay đều 45° mỗi frame – không dùng ease, vì đồng xu quay với tốc độ không đổi.

Chuẩn bị

• Canvas: 512 × 64 px (8 frame × 64 px), Resolution (Độ phân giải) 72, RGB Color, Transparent. Đồng xu đường kính 52 px, chừa 6 px mỗi bên cho viền và tia lóe sáng.
• Công cụ chính: Ellipse Tool (U), Rectangle Tool, Polygon Tool với Star Ratio cho ngôi sao, Free Transform (Biến đổi tự do) (Ctrl+T) gõ W theo phần trăm, Clipping Mask (Mặt nạ cắt) (Ctrl+Alt+G), Brush (Cọ vẽ) Tool (B) cho lóe sáng.
• Thiết bị: toàn bộ dựng bằng Shape và gõ số nên chuột rất hợp. Bút (Wacom, XP-Pen, Huion, iPad + Apple Pencil (Bút chì) qua Sidecar/Astropad) chỉ giúp vẽ tia lóe sáng thon đầu: F5 › Shape Dynamics (Biến đổi hình dạng) › Size Jitter (Dao động kích thước) › Control Pen Pressure (Lực nhấn bút). Dùng chuột thì vẽ tia bằng Pen Tool (Bút tạo đường) rồi Stroke Path có tích Simulate Pressure.
• File mẫu: "Khung 8 frame đồng xu" – đặt trên cùng và khóa. Mỗi ô có chữ thập ở tâm (32, 32), elip đứt nét là bề rộng đúng của góc ghi ở góc ô; ở 90° và 270° là khung chữ nhật 5 px cho frame cạnh.

Các bước

1. Tính bề rộng trước khi vẽ: bề rộng mặt xu = 100% × |cos(góc)|. Với 8 frame cách nhau 45°: 0° → 100%, 45° → 71%, 90° → 0% (chỉ còn cạnh), 135° → 71%, 180° → 100% (mặt sau), 225° → 71%, 270° → cạnh, 315° → 71%. Chỉ có ba kích thước cần vẽ: tròn đầy, nghiêng 71% và cạnh.
2. Tạo file: 512 × 64 px, Transparent, Gridline Every 64 Pixels. Đặt file mẫu trên cùng, khóa. Tạo 8 Group F1…F8.
3. F1 – mặt trước: Ellipse Tool giữ Shift, vẽ tròn 52 px tâm (32, 32). Fill #ffd84a, Stroke 2 px #5a3410. Vẽ thêm tròn 40 px kẹp vào, Fill #e0a020 – vành trong. Rồi tròn 36 px Fill #ffd84a lệch lên trái 1 px: mặt xu hơi nổi.
4. Ngôi sao: Polygon Tool, Number of Sides 5, bánh răng › Star Ratio 45%, kéo một ngôi sao rộng 26 px ở tâm, Fill #fff3b0. Gom các layer F1 lại – đây là thiết kế mặt trước dùng cho F1, F2, F8.
5. F5 – mặt sau: nhân đôi Group F1 sang ô 5 (Ctrl+J, Move Tool (Công cụ Di chuyển) giữ Shift và dời đúng 256 px – gõ X trong Properties cho chắc). Thay ngôi sao bằng một hình tròn nhỏ 18 px #ffe680: người chơi phải phân biệt được mặt trước – sau, nếu không đồng xu trông như lắc qua lắc lại chứ không quay.
6. F3 – frame cạnh: trong ô 3 vẽ Rectangle 8 × 52 px tâm (32, 32), Fill #a8641a, Stroke 2 px #5a3410, bo góc 2 px. Thêm một vạch 2 px #e0a020 ở giữa: cạnh xu có rãnh. Frame này mỏng nhưng không bao giờ biến mất – đồng xu có độ dày thật.
7. F2 – nghiêng 45°: nhân đôi F1 sang ô 2. Ctrl+T, trên thanh Options gõ W 71%, H giữ 100%. Mọi chi tiết (ngôi sao, vành) co theo – đúng như phối cảnh thật.
8. Thêm độ dày cho frame nghiêng: trong F2 nhân đôi hình tròn ngoài, đặt dưới mặt xu, Fill #a8641a, dời sang phải 3 px. Phần cạnh lộ ra bên phải cho thấy đồng xu đang quay sang trái. Độ dày lộ ra lớn nhất ở góc 45° và bằng 0 ở mặt chính diện.
9. F4, F6, F8: F4 là mặt sau nghiêng: nhân đôi F5, co W 71%, cạnh lộ bên phải. F6: mặt sau nghiêng nhưng cạnh lộ bên trái (đã quay qua). F7: nhân đôi F3. F8: mặt trước 71%, cạnh lộ bên trái. Đảo phía của cạnh ở nửa vòng sau là chi tiết giúp vòng quay đọc liên tục.
10. Lóe sáng: layer mới trên cùng F1 và F5 (hai frame chính diện): Brush Hard Round 3 px, vẽ một tia sáng bốn cánh #ffffff ở góc trên – trái. Chỉ lóe ở mặt chính diện vì đó là lúc mặt phẳng phản chiếu thẳng về người chơi.
11. Soát onion skin: kéo tạm F1 và F3 chồng lên ô F2, Opacity (Độ mờ đục) 30%, Color Overlay (Phủ chồng) hồng – xanh lá. Tâm ba frame phải trùng chữ thập (32, 32); nếu không, đồng xu sẽ lắc ngang khi quay.
12. Timeline (Dòng thời gian) nhịp đều: WindowCửa sổ›TimelineDòng thời gian › Create Frame Animation, 8 frame, chọn tất cả frame (bấm frame đầu, giữ Shift bấm frame cuối) rồi bấm số thời gian của một frame › Other… 0,083 – áp dụng cho cả 8. Looping Forever, Space để xem. Xuất GIF bằng FileTệp›Export›Save for Web (Legacy) nếu muốn gửi đi.
13. Đưa vào Unity 6: ẩn file mẫu, Export As (Xuất ra (tùy chỉnh)) PNG → coin_spin.png 512 × 64 px. Inspector: Sprite (2D and UI), Sprite Mode Multiple, Pixels Per Unit (Số pixel mỗi đơn vị) 64, Filter Mode (Chế độ lọc ảnh) Bilinear → Apply. Sprite Editor › Slice › Grid By Cell Size 64 × 64, Pivot (Điểm neo) Center › Apply. Kéo 8 sprite vào Hierarchy, Animation window (Ctrl+6) › Show Sample Rate › Samples 12 – mỗi frame 1 ô là đúng 83 ms. Tích Loop Time. Thêm Circle Collider 2D tích Is Trigger và một script nhỏ OnTriggerEnter2D để nhặt xu.

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

• 6 frame thay vì 8: góc 60° mỗi frame (bề rộng 100% – 50% – 50% – 100%…). Ít frame hơn trông "giật" hơn nhưng hợp với game pixel; so sánh cảm giác hai bản.
• Đồng xu bị hút về thanh điểm: khi nhặt, đổi sang clip Collect 4 frame: xu kéo dài theo hướng bay (stretch) rồi biến thành tia sáng – áp dụng lại bài quả bóng.
• Bộ ba kim loại: thêm Adjustment Layer (Lớp điều chỉnh) Hue/Saturation (Sắc độ/Độ bão hòa) để có xu bạc (Saturation −100, Lightness +10) và xu đồng (Hue −15). Một sheet, ba mệnh giá.