Dự án 9: Bong bóng khiên và hiệu ứng vỡ khiên

Khiên năng lượng là hiệu ứng có trạng thái: nó tồn tại lâu (frame chờ), phản ứng khi bị đánh (gợn sóng tại điểm trúng) và có kết thúc ấn tượng (vỡ tan thành mảnh). Đây cũng là bài học về chất liệu trong VFX: thân khiên trong suốt như thủy tinh – thấy được nhân vật bên trong – nhưng viền và lưới lục giác phát sáng. Trong game, hai phần này dùng hai cách trộn khác nhau: thân Alpha (hơi che), viền Additive (cộng sáng). Bạn sẽ học cách tách layer để làm được điều đó.

Hình mẫu

Thời gian ước tính: khoảng 85 phút. Frame Idle lặp (thường kèm nhịp "thở" do Unity làm); chuỗi vỡ F2–F6 phát một lần: 50 – 67 – 50 – 67 – 83 ms.

Chuẩn bị

• Canvas: 768 × 512 px (lưới 3 × 2 ô 256 px), Resolution (Độ phân giải) 72, RGB Color, Background Contents: Transparent.
• Công cụ chính: Ellipse Tool (U), Polygon Tool 6 cạnh cho lục giác, EditChỉnh sửa›Define Pattern và Pattern Overlay (Phủ chồng), Pen Tool (Bút tạo đường) cho vết nứt, Polygonal Lasso (Thòng lọng đa giác) (L) + Layer via Cut (Ctrl+Shift+J) để tách mảnh, Layer Mask (Mặt nạ lớp), FilterBộ lọc›Distort›Spherize.
• Thiết bị: lưới lục giác dựng bằng Pattern – chuột làm tốt. Vết nứt cần nét gấp khúc dứt khoát: với bút Wacom, XP-Pen, Huion hay iPad + Apple Pencil (Bút chì), vẽ bằng Brush (Cọ vẽ) Hard Round 3 px có Pen Pressure (Lực nhấn bút) để nét mảnh dần về cuối; với chuột, dùng Pen Tool nhấp từng điểm gấp khúc rồi Stroke Path có Simulate Pressure.
• File mẫu: "Khung 6 frame khiên" – đặt dưới cùng làm nền đen. Vòng xanh là mép khiên (bán kính 97 px, tâm hơi thấp vì chân nhân vật ở dưới), dấu hồng là điểm trúng đòn, vòng xám ngoài ở hàng dưới là giới hạn mảnh bay.

Các bước

1. Tạo file: FileTệp›NewTạo mới, 768 × 512 px, Transparent; Gridline Every 256 Pixels. Đặt file mẫu dưới cùng. Tạo Group Idle, F2_hit, F3_crack, F4_break, F5_shards, F6_fade. Trong mỗi Group, chuẩn bị hai Group con: body (sẽ trộn Alpha) và glow (sẽ trộn Additive).
2. Mẫu lục giác: file tạm 26 × 45 px nền trong suốt; Polygon Tool 6 cạnh vẽ hai lục giác Stroke 1 px trắng xếp so le theo kiểu tổ ong. EditChỉnh sửa›Define Pattern, tên Hex. Kiểm tra bằng Pattern Overlay trên một layer lớn – các lục giác phải nối liền không hở.
3. Thân khiên (Idle): trong Idle/body, Ellipse Tool vẽ hình tròn bán kính 97 px theo vòng xanh của file mẫu. Fill #134a8a, Opacity layer 35%. Thêm layer kẹp (Ctrl+Alt+G) tô gradient Radial từ trong suốt ở tâm ra #3fb8ff 40% ở mép – khiên dày hơn ở mép như bong bóng xà phòng thật.
4. Lưới lục giác cong: layer mới trong Idle/glow, tô Pattern Hex kín ô (EditChỉnh sửa›FillTô đầy / Độ phủ bên trong › Contents: Pattern). Chọn vùng tròn của khiên, FilterBộ lọc›Distort›Spherize Amount 100% – lưới phồng lên như mặt cầu. Kẹp vào thân khiên, Color Overlay #3fb8ff, Opacity 35%. Dùng Layer Mask tô gradient để lưới mờ ở tâm, rõ ở mép.
5. Viền ba lớp: nhân đôi hình tròn ba lần, Fill none: Stroke 10 px #134a8a, 6 px #3fb8ff, 2,5 px #c9f4ff. Đặt hai lớp sáng trong glow ở Linear Dodge (Add) (Cộng sáng). Viền rõ là thứ cho người chơi biết "khiên đang bật".
6. Vệt phản chiếu: Pen Tool vẽ một vệt cong hình lưỡi liềm ở góc trên – trái bên trong khiên (giống vệt chém ở dự án 6 nhưng ngắn), Fill #c9f4ff Opacity 80%, và một sao bốn cánh trắng nhỏ ở đầu vệt. Vệt phản chiếu biến hình tròn phẳng thành quả cầu trong.
7. F2 – trúng đòn: nhân đôi Group Idle sang ô 2. Tăng Opacity thân lên 50% (khiên "căng" lên). Tại điểm hồng (bên phải), vẽ 2 cung gợn sóng mảnh #c9f4ff bám theo mép trong – sóng lan ra từ điểm trúng – và một ngôi sao 6 tia #ffd23f có lõi trắng. Glow tròn mềm sáng ở điểm trúng.
8. F3 – nứt: nhân đôi F2 sang ô 3, bỏ ngôi sao. Pen Tool vẽ 3 vết nứt gấp khúc (5–6 điểm mỗi vết) xuất phát từ điểm trúng, lan qua thân khiên. Stroke Path hai lớp: 3,5 px #134a8a bên dưới và 1,5 px #ffffff bên trên. Vết nứt dày ở điểm trúng, mảnh dần ra xa.
9. F4 – vỡ thành mảnh: nhân đôi Idle (bản nguyên) sang ô 4, merge Group thành một layer. Dùng Polygonal Lasso vẽ 10–12 mảnh tam giác dọc theo mép khiên (theo các vết nứt), Ctrl+Shift+J tách từng mảnh ra layer riêng. Dời mỗi mảnh ra xa tâm 6–10 px và xoay ngẫu nhiên ±15°. Thân khiên còn lại ở giữa hạ Opacity còn 15%; thêm một chớp sáng sao 8 tia mờ ở tâm.
10. F5 – mảnh bay: nhân đôi F4 sang ô 5. Dời các mảnh ra xa tới vòng xám (bán kính khoảng 125 px), thu nhỏ 75%, Opacity 80%. Xóa hẳn thân khiên và chớp sáng. Các mảnh vẫn giữ viền tối – chúng là "thủy tinh" đang rơi.
11. F6 – tan: ô cuối chỉ còn 10 sao bốn cánh nhỏ #134a8a có lõi trắng ở vị trí xa nhất của mảnh, và một vòng tròn mảnh 1 px Opacity 40%. Năng lượng khiên tan vào không khí.
12. Kiểm tra với nhân vật: đặt sprite nhân vật vào giữa ô Idle. Nhân vật phải nhìn thấy rõ qua thân khiên (Opacity thấp), nhưng viền khiên nổi rõ trên nền. Timeline (Dòng thời gian): Idle 0,5 giây rồi F2–F6 với 0,05 – 0,07 – 0,05 – 0,07 – 0,08 giây.
13. Xuất hai lớp và đưa vào Unity 6: ẩn mọi Group glow, xuất vfx_shield_body.png; rồi ẩn body, bật glow, xuất vfx_shield_glow.png – cả hai đúng 768 × 512 px (bài nộp có thể là bản gộp). Trong Unity 6: cắt cả hai bằng Grid By Cell Size 256 × 256, Pivot (Điểm neo) Center. GameObject Shield con của nhân vật có hai con: Body (Sprite Renderer material mặc định – Alpha) và Glow (material Particles/Unlit Additive), cùng Sorting Layer VFX. Animator có 2 state: Idle (lặp frame 0, thêm clip Scale 1 ↔ 1,03 để thở) và Break (frame 1–5, không lặp, cuối clip có Animation Event tắt khiên). Khi máu khiên về 0, script gọi animator.SetTrigger("Break").

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

• Khiên yếu dần: làm thêm 2 biến thể Idle: viền chập chờn (đứt đoạn) khi khiên còn 50% và có vết nứt sẵn khi còn 20% – người chơi đọc được độ bền khiên mà không cần thanh máu.
• Mảnh vỡ thật: xuất 4 mảnh tam giác riêng làm texture cho Particle System (Burst 12 hạt, Start Speed 3, Gravity Modifier 0,5, Rotation over Lifetime) – mảnh rơi theo vật lý, mỗi lần vỡ một khác.
• Khiên nguyên tố: đổi ramp sang vàng kim cho khiên thánh, tím cho khiên bóng tối; lưới lục giác có thể thay bằng vảy rồng hay vân gỗ cho khiên tự nhiên.