Dự án 5: Bộ số sát thương 0–9 và chữ CRIT

Con số "128" màu cam bật lên trên đầu quái là phản hồi rõ nhất cho người chơi biết đòn đánh mạnh cỡ nào. Số sát thương là một dạng VFX đặc biệt: nó phải đọc được trong nửa giây trên mọi nền, giữa hàng chục hiệu ứng khác. Công thức của các game RPG, roguelike: chữ số đậm, tròn, viền tối dày, ruột gradient sáng ở trên – tối ở dưới, và một bản chí mạng khác màu, to hơn. Bạn vẽ mỗi chữ số một ô; Unity ghép chúng thành bất kỳ con số nào.

Hình mẫu

Thời gian ước tính: khoảng 55 phút. Các chữ số dùng chung một baseline (y = 52 trong mỗi ô 64), cùng chiều cao và cùng độ dày viền – thiếu đồng đều, số "1" và "8" đứng cạnh nhau sẽ như hai font khác.

Chuẩn bị

• Canvas: 512 × 128 px (8 cột × 2 hàng ô 64 px), Resolution (Độ phân giải) 72, RGB Color, Background Contents: Transparent. Hàng 2: ô 8, 9, +, − rồi chữ CRIT chiếm 4 ô cuối (256 × 64 px).
• Công cụ chính: Horizontal Type Tool (T) với một font số đậm (Arial Black, Impact hoặc font miễn phí dùng thương mại như Lilita One, Luckiest Guy), Layer Style: Stroke, Gradient (Dải màu chuyển) Overlay (Phủ chồng), Drop Shadow, Outer Glow; TypeChữ›Convert to Shape để chỉnh tay chữ số.
• Thiết bị: bài này dựng hoàn toàn bằng chữ và Layer Style – chuột là đủ, bút không có lợi thế. Ai dùng bút Wacom, XP-Pen, Huion hay iPad + Apple Pencil (Bút chì) có thể tự vẽ tay chữ số kiểu hoạt hình bằng Brush (Cọ vẽ) Hard Round 12 px rồi tô kín – nhưng hãy vẽ trên layer riêng và giữ đúng baseline.
• File mẫu: "Lưới chữ số 8 × 2" – đặt trên cùng, khóa (trong suốt). Đường hồng là baseline y = 52 (và y = 116 ở hàng 2), đường xám đứt nét là đỉnh chữ y = 10; khung vàng là ô CRIT.

Các bước

1. Tạo file và guide: FileTệp›NewTạo mới, 512 × 128 px, Transparent. Gridline Every 64 Pixels. ViewHiển thị›GuidesĐường gióng›New Guide: Horizontal 52 px, 116 px (baseline), 10 px và 74 px (đỉnh chữ). Đặt file mẫu trên cùng. Thêm một layer nền #1e2127 dưới cùng để xem (ẩn khi xuất).
2. Chọn font và cỡ: Type Tool (T), font đậm nhất bạn có, cỡ khoảng 58 px, căn giữa (Center text). Gõ số 0 trong ô đầu tiên, dời cho chân số nằm đúng baseline y = 52 và tâm ngang ở x = 32. Chữ số cao chừng 42 px – chừa 6–8 px mỗi bên cho viền.
3. Tạo đủ 12 ký tự: nhân đôi layer (Ctrl+J), dời đúng 64 px sang phải (Move Tool (Công cụ Di chuyển), giữ Shift nhấn mũi tên phải 6 lần = 60 px, thả Shift nhấn thêm 4 lần; hoặc gõ X trong WindowCửa sổ›PropertiesThuộc tính), sửa thành 1, rồi tiếp tục tới 7. Hàng 2: 8, 9, +, −. Đặt tên layer d0 … d9, plus, minus.
4. Căn đều độ rộng: số "1" rất hẹp, số "0" rất rộng. Bật ViewHiển thị›ShowHiện›GridLưới và kiểm tra mỗi ký tự nằm giữa ô của nó. Nếu font có số "1" quá mảnh, TypeChữ›Convert to Shape rồi dùng Direct Selection (A) làm thân số dày lên cho bằng các số khác.
5. Viền tối dày: chọn layer d0, LayerLớp›Layer Style›StrokeViền: Size 6 px, Position Outside, Color #3a0b0b. Viền tối là thứ giữ con số đọc được trên nền tuyết trắng lẫn hang tối – đừng tiếc độ dày.
6. Gradient ruột chữ: trong cùng hộp Layer Style bật Gradient Overlay: Angle 90°, Style Linear, gradient ba điểm #ff7a1a (0%) – #ffe14d (65%) – #ffffff (100%). Ánh trắng ở đỉnh chữ tạo cảm giác chữ "bóng" và nổi.
7. Bóng đổ cứng: bật Drop Shadow: Blend Mode (Chế độ hòa trộn) Normal, màu #000000, Opacity (Độ mờ đục) 80%, Angle 90°, Distance 2 px, Size 0 px. Bóng cứng tách chữ khỏi nền mà không làm nhòe.
8. Dán style cho cả bộ: chuột phải layer d0 › Copy Layer Style; chọn 11 layer còn lại › chuột phải › Paste Layer Style. Cả bộ số giờ đồng nhất tuyệt đối. Lưu style thành mẫu: trong hộp Layer Style bấm New Style…, đặt tên Damage_Normal.
9. Chữ CRIT: gõ CRIT cỡ 64 px, tracking 40, căn giữa trong khung vàng (x = 256–512, hàng 2), chân chữ trên baseline y = 116. Áp style như số thường nhưng đổi Gradient Overlay thành #ff3b3b – #ffe14d – #ffffff và viền #4a0010 7 px. Chí mạng phải khác ngay từ cái nhìn đầu: đỏ, to, rộng.
10. Glow và tia cho CRIT: bật Outer Glow cho CRIT: Blend Mode Linear Dodge (Add) (Cộng sáng), màu #ff7a1a, Opacity 55%, Size 14 px. Dùng Custom Shape sao bốn cánh (dự án 3) đặt hai tia lấp lánh trắng ở góc trên phải và dưới trái chữ. Giữ glow trong khung vàng.
11. Kiểm tra trên nền khó: thêm tạm các layer nền: cỏ #6cbf5a, tuyết #e6f0f5, dung nham #ff6a2a. Con số phải đọc được trên cả ba trong 0,5 giây – nếu trên dung nham không rõ, tăng Stroke lên 7 px chứ đừng đổi màu số.
12. Xem thử con số ghép: nhân đôi tạm d1, d2, d8 ra một chỗ trống, xếp sát nhau thành "128" với khoảng cách 2–4 px giữa các chữ (có thể chồng nhẹ viền). Nếu khoảng trống giữa "1" và "2" to bất thường, chỉnh lại vị trí số "1" trong ô cho cân.
13. Xuất và đưa vào Unity 6: ẩn nền, guide và file mẫu, FileTệp›Export›Export AsXuất ra (tùy chỉnh) PNG → vfx_damage_digits.png đúng 512 × 128 px. Trong Unity 6: Texture Type Sprite (2D and UI), Sprite Mode Multiple, Apply. Sprite Editor › Slice Grid By Cell Size 64 × 64, Slice; với 4 ô CRIT, chọn chúng, xóa và kéo tay một hình chữ nhật 256 × 64 đặt tên crit; đổi tên các ô còn lại d0…d9, plus, minus; Apply. Chuột phải texture › Create›TextMeshPro›Sprite Asset. Tạo một TextMeshPro – Text (world space), trong Extra Settings gán Sprite Asset vừa tạo. Script ghép chuỗi: số 128 thành <sprite name="d1"><sprite name="d2"><sprite name="d8">; cho text bay lên 0,6 unit và mờ dần trong 0,6 giây rồi tự xóa.

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

• Bộ màu theo loại sát thương: nhân đôi sheet và đổi Gradient Overlay: xanh lá cho hồi máu (kèm dấu +), tím cho sát thương độc, xanh lam cho sát thương phép. Mỗi bộ là một Sprite Asset riêng.
• Chữ MISS và BLOCK: thêm hàng thứ ba (canvas 512 × 192) với chữ MISS xám và BLOCK xanh thép rộng 4 ô.
• Số pixel art: làm phiên bản 8 × 8 px mỗi chữ số cho game retro, xuất 64 × 16 px, Filter Mode (Chế độ lọc ảnh) Point (no filter) trong Unity.