Dự án 14: Bộ biểu tượng buff/debuff và hiệu ứng trên đầu

Trong trận đánh, người chơi cần biết ngay: "mình đang được tăng sức hay đang bị trúng độc? Con quái kia có đang choáng không?". Trạng thái (buff có lợi, debuff có hại) được hiển thị ở hai nơi: biểu tượng trên thanh UI và hiệu ứng trên đầu nhân vật. Đây là dự án về hệ thống chứ không phải một hiệu ứng đơn lẻ: 8 biểu tượng phải cùng một bộ, nhưng buff và debuff phải phân biệt được chỉ bằng một cái liếc – nhờ màu khung (xanh lá – đỏ) và hình khối (mũi tên lên – giọt rơi xuống). Các vòng lặp trên đầu nhỏ, lặp mãi, và không được che mặt nhân vật.

Hình mẫu

Thời gian ước tính: khoảng 120 phút. Biểu tượng hiển thị ở 32–48 px trên UI, vòng lặp trên đầu phát 8 fps (125 ms mỗi frame) – chậm và êm để không gây rối mắt giữa trận.

Chuẩn bị

• Canvas: 512 × 192 px (lưới 8 × 3 ô 64 px), Resolution (Độ phân giải) 72, RGB Color, Background Contents: Transparent. Nên vẽ ở bản gấp 4 (2048 × 768 px) rồi thu nhỏ như dự án 3.
• Công cụ chính: Rectangle Tool bo góc cho khung, Custom Shape (mũi tên, trái tim, sao, ngọn lửa trong bộ Legacy Shapes), Pen Tool (Bút tạo đường), Layer Style Stroke và Inner Shadow, Type Tool cho chữ Z, EditChỉnh sửa›TransformBiến đổi›Rotate, Smart Object (Đối tượng thông minh) để dùng chung khung.
• Thiết bị: biểu tượng dựng bằng Shape – chuột cho đường nét sạch nhất. Bút Wacom, XP-Pen, Huion hay iPad + Apple Pencil (Bút chì) giúp vẽ nhanh các hình tự do như ngọn lửa, giọt độc hay sao có nét viền thon. Dùng chuột: dùng Custom Shape có sẵn rồi chỉnh điểm bằng Direct Selection (A).
• File mẫu: "Lưới buff/debuff" – đặt trên cùng, khóa (trong suốt). Hàng 1 có khung đứt nét xanh (4 ô buff) và đỏ (4 ô debuff); hàng 2 – 3 có elip quỹ đạo quanh đầu và trục giữa ô.

Các bước

1. Tạo file gấp 4: FileTệp›NewTạo mới, 2048 × 768 px, Transparent; Gridline Every 256 Pixels. Đặt file mẫu phóng 400% trên cùng. Tạo ba Group hàng: Icons, Loop_A (choáng, độc), Loop_B (tăng sức, ngủ).
2. Khung chung bằng Smart Object: Rectangle Tool 336 × 336 px bo góc 64 px trong ô đầu. Fill #10251a; Layer Style Stroke 28 px Inside #0f5a32, Inner Shadow nhẹ; thêm một Rectangle bo góc nhỏ hơn bên trong, Stroke 14 px #4ee88a, và một viền mảnh 4 px #c8ffd9 Opacity (Độ mờ đục) 50%. Gom thành Smart Object Frame_Buff. Nhân đôi, đổi màu thành #2a0f1a / #5a0f22 / #ff4d6d / #ffc2cc → Frame_Debuff.
3. Đặt 8 khung: nhân đôi Smart Object vào 8 ô hàng 1 (dời đúng 256 px mỗi lần): 4 khung buff bên trái, 4 khung debuff bên phải. Sửa khung một lần là cả bộ đổi theo.
4. Ngôn ngữ hình khối: trước khi vẽ biểu tượng, quyết định quy tắc: buff dùng hình hướng lên, tròn đầy, có mũi tên vàng nhỏ ở góc dưới phải; debuff dùng hình rơi xuống, nhọn, méo. Kể cả người mù màu (khoảng 1/12 nam giới) vẫn phân biệt được nhờ hình.
5. 4 biểu tượng buff: (1) Tăng tấn công: thanh kiếm chéo – lưỡi #e6ecf5, chuôi #c58a52 – kèm mũi tên vàng #ffd23f; (2) Tăng phòng thủ: khiên xanh #4ea8ff + mũi tên vàng; (3) Tăng tốc: hai mũi tên kép #7cf7ff hướng phải; (4) Hồi máu theo thời gian: trái tim #ff6b8a có dấu cộng trắng. Mọi hình có viền tối 6 px (bản gấp 4: 24 px) và một vệt sáng trắng 75%.
6. 4 biểu tượng debuff: (5) Độc: giọt tím #b05cff có hai mắt và miệng tối – khuôn mặt "bệnh"; (6) Bỏng: ngọn lửa cam #ff8a1a lõi vàng; (7) Làm chậm: đồng hồ cát tím nhạt có cát vàng ở đáy; (8) Choáng: ba ngôi sao vàng xoay lệch. Hình chiếm khoảng 60% lòng khung, không chạm viền.
7. Kiểm tra bộ biểu tượng: thu về 25% (bằng 64 px) rồi 12,5% (32 px). Tám biểu tượng phải phân biệt được từng cái; nhóm xanh – nhóm đỏ phải tách bạch ngay. Thêm Adjustment Layer (Lớp điều chỉnh) Black & White (Trắng đen) tạm thời: nhờ hình khối, buff và debuff vẫn khác nhau dù không có màu.
8. Vòng lặp choáng (hàng 2, ô 1–4): vẽ elip quỹ đạo theo file mẫu (rộng 168 × 56 px ở bản gấp 4) Opacity 50%. Đặt 3 ngôi sao 5 cánh vàng có viền nâu #4a3000 cách đều 120° trên quỹ đạo. Mỗi frame xoay cả bộ sao thêm 30° theo quỹ đạo; sao ở phía trước (dưới elip) to hơn 20%, phía sau nhỏ hơn – cảm giác 3D. 4 frame × 30° = 120°, đúng khoảng cách giữa hai sao nên vòng lặp liền mạch.
9. Vòng lặp độc (hàng 2, ô 5–8): 3 bong bóng tím, mỗi bong bóng có viền #2a0a4a, thân #b05cff pha 25% xanh độc #7be36b, chấm sáng trắng. Mỗi frame bong bóng bay lên 1/4 quãng và to dần, lệch pha nhau như dự án 8. Thêm quầng tím mờ phía sau.
10. Vòng lặp tăng sức (hàng 3, ô 1–4): hai mũi tên chevron (hình chữ V ngược) Stroke 4 lớp xanh lá: 44 – 28 – 12 – 4 px. Mỗi frame cả hai dời lên 1/4 quãng; chevron vượt đỉnh thì quay về đáy. Lệch pha 50% nên luôn có một chevron đang lên.
11. Vòng lặp ngủ (hàng 3, ô 5–8): ba chữ Z (Type Tool, font đậm, cỡ khác nhau) màu #9fd3ff viền #1a2a5a bay chéo lên phải và to dần; mỗi frame dời 1/4 quãng, lệch pha 1/3. Chữ Z là ký hiệu quốc tế, không cần dịch.
12. Thu nhỏ và kiểm tra: lưu bản gốc, ImageHình ảnh›Image SizeKích thước ảnh 512 × 192 px, Bicubic (Nội suy mượt) Sharper. Ở 100%, viền icon tối thiểu 1,5 px, sao choáng vẫn có 5 cánh rõ. Timeline (Dòng thời gian) thử 4 vòng lặp ở 0,125 giây/frame, Looping Forever.
13. Xuất và đưa vào Unity 6: ẩn file mẫu, xuất PNG → vfx_status.png đúng 512 × 192 px. Trong Unity 6: Sprite Mode Multiple, Grid By Cell Size 64 × 64, Pivot (Điểm neo) Center, Apply; đặt tên sprite theo trạng thái (icon_atk_up, icon_poison, stun_0…). Biểu tượng: trong Canvas tạo một Horizontal Layout Group dưới thanh máu, mỗi trạng thái là một Image 40 × 40 kèm Image con Filled (Radial 360) làm đồng hồ hết hạn. Vòng lặp: tạo 4 clip lặp (Samples 8, giữ Loop Time), GameObject StatusFX là con của nhân vật đặt ngay trên đầu, Sprite Renderer Sorting Layer VFX; script bật clip tương ứng khi nhận trạng thái.

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

• Cộng dồn (stack): thêm một huy hiệu số nhỏ ở góc dưới phải biểu tượng (dùng lại bộ số sát thương ở dự án 5, thu nhỏ) để hiện "x3" khi trúng độc 3 lần.
• Hiệu ứng trên thân: mỗi debuff có thêm một lớp phủ lên chính nhân vật: độc làm sprite ngả xanh tím (Sprite Renderer Color), bỏng có vài ngọn lửa nhỏ dưới chân, làm chậm có vệt bóng mờ phía sau.
• Biểu tượng nhấp nháy khi sắp hết: khi trạng thái còn dưới 3 giây, cho Image nhấp nháy alpha 1 ↔ 0,4 mỗi 0,25 giây – người chơi biết sắp phải dùng lại kỹ năng.