Dự án 4: Bộ chữ số và chữ pixel 5 × 7

Điểm số, số vàng, máu, số màn chơi… game pixel nào cũng cần chữ. Font máy tính thông thường bị mờ và "lạc tông" khi đặt cạnh sprite pixel, nên họa sĩ thường tự vẽ bộ chữ pixel. Cỡ 5 × 7 là cỡ kinh điển: đủ chỗ cho mọi chữ cái Latin, đọc rõ trên màn hình nhỏ, và chỉ cần nét 1 pixel. Mỗi ký tự nằm trong ô 6 × 8 – thêm 1 cột và 1 hàng trống làm khoảng cách, nhờ đó Unity cắt sheet theo lưới đều và ghép chữ không bao giờ dính nhau.

Hình mẫu

Thời gian ước tính: khoảng 70 phút (chữ số 15 phút, chữ cái 40 phút, phần còn lại 15 phút). Bóng đổ màu tím xám lệch 1 px giúp chữ đọc được trên cả nền trời sáng lẫn hầm ngục tối.

Chuẩn bị

• Canvas: 96 × 32 px (16 cột × 4 hàng ô 6 × 8), Resolution (Độ phân giải) 72, RGB Color, Background Contents: Transparent.
• Công cụ chính: Pencil (Bút chì) Tool 1 px (⇧ Shift+B), Eraser (Tẩy) Mode Pencil, Move Tool (Công cụ Di chuyển) (V) với phím mũi tên (dời đúng 1 px), Rectangular Marquee (Khung chọn) (M) Fixed Size 6 × 8 để sao chép cả ô.
• Phóng to không mờ: Image Interpolation Nearest Neighbor (Điểm lân cận), bật ViewHiển thị›ShowHiện›Pixel GridLưới điểm ảnh, đặt Grid: Gridline Every 6 Pixels, Subdivisions 6 (lưới dọc khớp cột ô).
• Thiết bị: chữ pixel toàn đường thẳng 1 px – chuột là lựa chọn tốt nhất: bấm điểm đầu, giữ ⇧ Shift bấm điểm cuối là ra nét thẳng. Bút Wacom, XP-Pen, Huion hay iPad + Apple Pencil vẫn dùng được nếu tắt lực nhấn và chỉ chạm từng điểm.
• File mẫu: "Lưới 16 × 4 ô 6 × 8": vùng xanh đậm/nhạt xen kẽ là 5 × 7 được vẽ, dải hồng nhạt là khoảng cách – không vẽ vào đó (trừ bóng đổ).

Các bước

1. Tạo file: ⌘ Cmd+N 96 × 32 px, Transparent. Đặt file mẫu lên trên cùng, Opacity (Độ mờ đục) 60%, khóa lại. Tạo layer Preview BG tô #20232b ở dưới cùng để chữ sáng dễ nhìn – nhớ ẩn khi xuất.
2. Quy ước chung: layer Glyphs, màu #f4f1de. Mọi chữ hoa cao đúng 7 pixel, rộng tối đa 5, nét dày 1 pixel. Chữ tròn (O, C, G, Q, S) bỏ pixel ở 4 góc để "bo tròn". Chân chữ luôn nằm ở hàng thứ 7 của ô – đó là đường chân chữ (baseline).
3. Chữ số 0–9 trước tiên: chữ số là thứ người chơi đọc nhiều nhất. Vẽ hàng 1, ô 1–10. Mọi chữ số cùng rộng 5 pixel (monospace) để khi điểm số đổi từ 1119 sang 1120, các chữ không nhảy qua lại.
4. Phân biệt các ký tự dễ nhầm: số 0 có chấm hoặc gạch chéo ở giữa để khác chữ O; số 1 có "mũ" và chân ngang; số 5 có góc vuông phía trên, chữ S thì cong; số 8 và chữ B khác nhau ở cạnh trái (B thẳng). Kiểm tra bằng cách viết thử "10 O1 5S 8B" ở góc trống.
5. Dấu câu: ô 11–16 hàng 1: dấu chấm 2 × 2, dấu phẩy, hai chấm, chấm than, chấm hỏi, gạch ngang. Dấu chấm 2 × 2 dễ thấy hơn 1 × 1 ở cỡ thật.
6. Chữ A–P (hàng 2): bắt đầu bằng chữ có nét thẳng (E, F, H, I, L, T) để định "giọng" cho bộ chữ, rồi mới tới chữ tròn và chéo. Chữ M và N dùng nét chéo 1:1 – đường chéo 1 pixel mỗi bậc là gọn nhất.
7. Chữ Q–Z và ký hiệu (hàng 3): Q giống O thêm đuôi ở góc dưới phải; W là hai V ghép; X và Z dùng chéo 1:1. Sáu ô cuối: +, %, /, (, ), dấu nháy – đủ cho HUD kiểu "+50%" hay "HP (3/5)".
8. Sao chép để giữ đều: chữ giống nhau thì nhân bản: chọn ô 6 × 8 bằng Marquee Fixed Size, ⌘ Cmd+C, ⌘ Cmd+⇧ Shift+V (Paste in Place) rồi dời đúng 6 px bằng mũi tên. Ví dụ O → Q, P → R, V → W, E → F. Bộ chữ đều nét hơn hẳn vẽ lại từng chữ.
9. Chữ Việt có dấu (hàng 4): ô 6 × 8 không đủ chỗ cho chữ cao 7 pixel kèm dấu, nên chữ có dấu thu lại còn 5 hàng (hàng 3–7) và dấu nằm ở hàng 1–2: Ă (dấu trăng), Â, Ê, Ô (dấu mũ), Ơ, Ư (móc ở góc trên phải). Đ là chữ D thêm gạch ngang ở hàng 4. Tất cả vẫn chung đường chân chữ.
10. Dấu thanh và icon: 5 ô tiếp theo là dấu sắc, huyền, hỏi, ngã nằm ở hàng 1–2 và dấu nặng ở hàng 7 – trong game, code sẽ chồng ô dấu lên ô chữ. 4 ô cuối: trái tim #ff5c8a, ngôi sao và đồng xu #ffc93c, mũi tên. Icon dùng màu riêng để nổi giữa chữ trắng.
11. Bóng đổ 1 px: nhân bản layer Glyphs (⌘ Cmd+J), đặt tên Shadow, bật Lock Transparent Pixels (Khóa vùng trong suốt), tô #3d3a55 (⌥ Option+⌫ Delete), tắt khóa. Dùng Move Tool nhấn mũi tên phải 1 lần và mũi tên xuống 1 lần, kéo layer xuống dưới Glyphs. Bóng nằm gọn trong cột/hàng khoảng cách nên vẫn không chạm ô bên cạnh. Đừng dùng Layer Style Drop Shadow – nó sinh pixel mờ.
12. Kiểm tra ghép chữ: trên một file nháp, ghép thử "SCORE 0425", "GAME OVER", "MÀN 3" bằng cách sao chép các ô. Khoảng trống giữa chữ phải đều; nếu một chữ trông "lùn" hay "béo", sửa nó trên sheet. Đếm màu bằng bản sao Indexed Color: tối đa 4 màu (chữ, bóng, vàng, hồng).
13. Xuất PNG: ẩn Preview BG và file mẫu, FileTệp›Export›Export AsXuất ra (tùy chỉnh) PNG Scale 100% → font_5x7.png đúng 96 × 32 px, nền trong suốt.
14. Dùng trong Unity 6: Texture Type Sprite (2D and UI), Sprite Mode Multiple, Filter Mode (Chế độ lọc ảnh) Point (no filter), Compression None. Sprite Editor › Slice › Grid By Cell Size 6 × 8 › Apply, rồi đổi tên các sprite chữ số thành digit_0…digit_9. Cách nhanh: chuột phải texture › Create › TextMeshPro › Sprite Asset và viết điểm trong TextMeshPro bằng thẻ <sprite name="digit_4">; hoặc một script nhỏ đổi Image.sprite theo từng chữ số. Đặt Canvas Scaler ở tỉ lệ nguyên (×3, ×4) để chữ không méo.

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

• Chữ thường: thêm hàng 5 (canvas 96 × 40) cho a–z: thân chữ cao 5 pixel, chữ có móc lên (b, d, h) cao 7, chữ có móc xuống (g, p, y) mượn hàng 8.
• Chữ số to cho tiêu đề: vẽ bộ 0–9 cỡ 8 × 12 có viền 1 px và hai tông màu, dùng cho màn hình "Kỷ lục mới".
• Font chữ thật: khi cần văn bản dài tiếng Việt, hãy dùng sheet này làm bản vẽ mẫu rồi dựng file font bằng một phần mềm tạo bitmap font, sau đó tạo Font Asset trong TextMeshPro với Render Mode RASTER để giữ pixel sắc.