Dự án 3: Lấp lánh nhặt xu (collect sparkle) 4 frame

Mỗi lần nhặt xu là một phần thưởng nhỏ – game cần "khen" người chơi bằng một tia lấp lánh vàng và một tiếng "ting". Hiệu ứng này cực nhỏ (64 × 64 px) và cực nhanh (dưới một phần tư giây), nên nó dạy bạn một kỹ năng quan trọng: vẽ ít mà rõ. Hình khối chủ đạo là sao bốn cánh – biểu tượng "lấp lánh" mà người chơi ở mọi nền văn hóa đều hiểu. Bạn sẽ vẽ ở kích thước lớn gấp 4 rồi thu nhỏ, và kiểm tra bằng zoom 100% thật thường xuyên.

Hình mẫu

Thời gian ước tính: khoảng 35 phút. Nhịp 33 – 50 – 67 – 83 ms (tổng 233 ms): bừng lên rất nhanh, tan chậm dần. Hiệu ứng chỉ phát một lần mỗi khi nhặt.

Chuẩn bị

• Canvas vẽ: vẽ trên file 1024 × 256 px (gấp 4 lần) để dễ thao tác, cuối cùng ImageHình ảnh›Image SizeKích thước ảnh về 256 × 64 px (4 frame × 64 px), Resample (Lấy mẫu lại): Bicubic (Nội suy mượt) Sharper. Resolution (Độ phân giải) 72, RGB Color, Background Contents: Transparent.
• Công cụ chính: Pen Tool (Bút tạo đường) (P) cho sao bốn cánh, Ellipse Tool (U) cho vòng tròn, Brush (Cọ vẽ) Tool (B) Soft Round, Clipping Mask (Mặt nạ cắt), EditChỉnh sửa›TransformBiến đổi›Rotate, Layer Style Outer Glow.
• Thiết bị: sao bốn cánh vẽ bằng Pen Tool nên chuột là đủ – nhấp 4 điểm nhọn, kéo tay nắm ở 4 điểm lõm. Với bút Wacom, XP-Pen, Huion hoặc iPad + Apple Pencil (Bút chì) bạn có thể vẽ nhanh bằng Brush: hai nét thẳng chéo nhau thật mảnh với 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), nhấn mạnh ở giữa. Chuột không có lực nhấn: bật Control: Fade 20 bước để nét tự thon.
• File mẫu: "Khung 4 frame lấp lánh" (256 × 64) – khi vẽ ở file gấp 4, mở file mẫu rồi Ctrl+T phóng 400% cho khớp canvas, đặt dưới cùng làm nền đen. Vòng đứt nét là kích thước sao của từng frame.

Các bước

1. Tạo file gấp 4: FileTệp›NewTạo mới, 1024 × 256 px, Transparent. Gridline Every 256 Pixels. Đặt file mẫu đã phóng 400% dưới cùng, đặt tên BG_black. Tạo 4 Group F1–F4.
2. Sao bốn cánh (F2): Pen Tool chế độ Shape. Nhấp 4 điểm nhọn trên, phải, dưới, trái cách tâm ô 184 px (đúng vòng hồng). Giữa mỗi cặp điểm nhọn, thêm một điểm sát tâm (cách 33 px) và kéo tay nắm ngắn để cạnh sao cong lõm vào. Fill #e08a00. Cánh dọc dài hơn cánh ngang 10% sẽ trông tự nhiên hơn.
3. Lưu thành Shape tái sử dụng: chọn layer sao, EditChỉnh sửa›Define Custom Shape, đặt tên Sparkle4. Từ giờ chọn Custom Shape Tool (U) và kéo – có ngay sao bốn cánh ở mọi cỡ.
4. Lớp vàng xu và vàng kem: nhân đôi sao (Ctrl+J), Ctrl+T giữ Alt thu còn 82% quanh tâm, Fill #ffd23f. Nhân đôi lần nữa, thu còn 52%, Fill #fff6c2, Blend Mode (Chế độ hòa trộn) Linear Dodge (Add) (Cộng sáng). Thêm chấm tròn trắng 24 px ở tâm cũng ở Linear Dodge (Add).
5. Vòng tròn và ba sao vệ tinh: Ellipse Tool vẽ vòng tròn bán kính 104 px quanh tâm, Fill none, Stroke 8 px #e08a00. Dùng Custom Shape Sparkle4 đặt ba sao nhỏ (40, 32, 24 px) ở góc trên trái, dưới phải và trên phải – mỗi sao cũng có lớp vàng và lõi trắng. Số lẻ (3) trông tự nhiên hơn số chẵn.
6. Quầng sáng: chọn layer sao vàng, LayerLớp›Layer Style›Outer Glow: Blend Mode Linear Dodge (Add), Opacity (Độ mờ đục) 60%, màu #ffd23f, Size 40 px. Glow không được chạm mép ô 256 px.
7. F1 – bừng lên: trong ô 1, dùng Sparkle4 bán kính 52 px (vòng xanh), ba lớp màu như F2 và lõi trắng, không có vòng tròn và sao vệ tinh. Sao nhỏ nhưng lõi đã rất sáng.
8. F3 – xoay và tỏa: nhân đôi Group F2 sang ô 3 (dời đúng 512 px). Chọn các layer sao chính, Ctrl+T xoay 45° và thu còn 70%: sao xoay tạo cảm giác "lóe". Dời 4 sao vệ tinh ra sát mép ô, phóng vòng tròn lên bán kính 150 px và giảm Stroke còn 5 px. Lõi trắng nhỏ lại còn 12 px.
9. F4 – tan: trong ô cuối chỉ còn 5 sao bé xíu (16–24 px) rải đều, vòng tròn mảnh 3 px bán kính 184 px Opacity 40%, glow Opacity 20%. Không còn sao lớn ở tâm.
10. Kiểm tra nhịp: WindowCửa sổ›TimelineDòng thời gian › Create Frame Animation, đặt 0,03 – 0,05 – 0,07 – 0,08 giây. Hiệu ứng phải "lóe" lên trong chớp mắt. Nếu nhìn thấy rõ F1 thì F1 đang quá to – báo trước chỉ là một chấm nhỏ.
11. Thu về kích thước thật: lưu bản gốc sparkle_x4.psd. Sau đó ImageHình ảnh›Image SizeKích thước ảnh 256 × 64 px, Resample Bicubic Sharper. Xem ở 100% (Ctrl+1) và 200%: nếu vòng tròn bị đứt hay sao vệ tinh nhòe thành chấm, quay lại bản gốc làm nét dày hơn – nét dưới 4 px ở bản gấp 4 sẽ thành dưới 1 px.
12. Đặt cạnh đồng xu: mở sprite đồng xu của bạn (hoặc vẽ nhanh một hình tròn #ffc93c 32 px), đặt vào giữa ô F2. Ánh vàng của lấp lánh phải "cùng họ" với màu xu – người chơi hiểu ánh sáng này sinh ra từ đồng xu.
13. Xuất và đưa vào Unity 6: ẩn BG_black, FileTệp›Export›Export AsXuất ra (tùy chỉnh) PNG → vfx_collect_sparkle.png đúng 256 × 64 px. Trong Unity 6: Texture Type Default, Alpha Is Transparency (Độ trong suốt), Filter Mode (Chế độ lọc ảnh) Bilinear. Material Universal Render Pipeline/Particles/Unlit, Surface Type Transparent, Blending Mode (Chế độ hòa trộn) Additive. Particle System: tắt Looping, Start Lifetime 0,23, Start Speed 0, Bursts Count 1, Texture Sheet Animation Mode Grid, Tiles X 4, Y 1. Lưu thành Prefab VFX_CollectSparkle. Trong script đồng xu, ở OnTriggerEnter2D gọi Instantiate(sparklePrefab, transform.position, Quaternion.identity), phát âm thanh rồi Destroy(gameObject).

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

• Lấp lánh theo độ hiếm: nhân đôi sheet, dùng Hue/Saturation (Sắc độ/Độ bão hòa) để có bản trắng bạc (vật phẩm thường), xanh lam (hiếm) và tím (huyền thoại).
• Lấp lánh liên tục trên vật phẩm: dùng riêng frame F2 làm texture cho Particle System lặp, Rate over Time 2, Start Size ngẫu nhiên 0,2–0,5 – vật phẩm "nháy" mời gọi người chơi nhặt.
• Bay về thanh điểm: sau khi lấp lánh, cho một sprite xu nhỏ bay về góc màn hình nơi hiển thị số xu (UI) – người chơi thấy rõ phần thưởng đi đâu.