Dự án 2: Bảng tỉ lệ kích thước nhân vật và vật thể (scale chart)
Dựng scale chart cho cả game trên lưới 1 unit = 100 px: nhân vật chính, NPC, quái, boss, cửa, rương, cây đứng chung một đường đất – để mọi họa sĩ trong đội vẽ đúng cỡ và lập trình viên đặt đúng Pixels Per Unit trong Unity 6.
Photoshop hiển thị tiếng Anh. Từ có gạch chân chấm là thuật ngữ trên giao diện — chạm để xem nghĩa, hoặc tra Từ điển Anh–Việt.
Tải về rồi mở bằng Photoshop: (Ctrl+O).
Bạn vẽ nhân vật chính cao 300 px, đồng đội vẽ cánh cửa cao 200 px, người thứ ba vẽ con boss bé hơn cả nhân vật. Ghép vào game: nhân vật không chui lọt cửa, boss trông như thú cưng. Đây là lỗi kinh điển khi nhiều người cùng vẽ mà không có scale chart – bảng đặt mọi nhân vật và vật thể quan trọng đứng cạnh nhau trên cùng một đường đất, đo bằng cùng một thước. Trong Unity, thước đó là unit (1 unit thường ứng với 1 mét trong thế giới game), và Pixels Per Unit (Số pixel mỗi đơn vị) (PPU) quyết định bao nhiêu pixel bằng 1 unit. Scale chart là tài liệu đầu tiên được ghim lên tường ở mọi studio 2D.
Hình mẫu
Thời gian ước tính: khoảng 1,5 giờ – 15 phút quyết định thước đo, 45 phút vẽ bóng dáng các vật thể (không cần chi tiết), 30 phút đo, ghi nhãn và kiểm tra.
Chuẩn bị
- Canvas (khung vẽ): 1920 × 1080 px, Resolution (Độ phân giải) 72, RGB Color, nền
#f5f6f8. Thước: 1 unit = 100 px (PPU 100 – mặc định của Unity), nên 8 unit chiều cao chiếm 800 px. - Công cụ chính: hoặc lưới mẫu, Rectangle Tool (U), Lasso (Dây thòng lọng) Tool (L) + Alt+Backspace để tô bóng dáng, Free Transform (Biến đổi tự do) (Ctrl+T), Ruler Tool (I – nằm chung nhóm với Eyedropper (Ống hút màu)), Info panel (F8), Type Tool (T).
- Thiết bị: bóng dáng đơn giản tô bằng Lasso + Fill nên chuột làm tốt. Bút Wacom, XP-Pen, Huion hoặc iPad + Apple Pencil (Bút chì) giúp vẽ nhân vật tự nhiên hơn nếu bạn muốn thêm chút chi tiết – nhưng ở bài này đúng cỡ quan trọng hơn đẹp.
- File mẫu: "Lưới scale chart" ở cuối bài – đã kẻ vạch nửa unit, vạch unit đậm, đường đất đỏ ở y = 980 và 9 cột tên. Đặt bằng , khóa layer.
- Nhân vật có sẵn: nếu bạn đã vẽ hero, quái, cây ở các chặng trước, dùng luôn bản PNG của chúng – scale chart thật luôn làm từ asset thật của game.
| Màu | Mã hex | Dùng cho |
|---|---|---|
#f5f6f8 | Nền bảng | |
#c9ced8 | Vạch lưới 1 unit | |
#3d6fd6 | Nhân vật chính | |
#6b8f4a | NPC | |
#5fd17a | Quái nhỏ (slime) | |
#5a3a8a | Boss | |
#e8423b | Đường đất, vạch chiều cao | |
#31a8ff | Số đo (unit) |
Các bước
- Chốt thước đo với cả đội: trước khi vẽ, thống nhất PPU. Game thường dùng PPU 100 (1 unit = 100 px); game pixel art hay dùng PPU 16 hoặc 32 (1 ô tile = 1 unit). Ghi thước lên đầu trang: "1 ô = 1 unit Unity = 100 px".
- Chọn nhân vật làm "thước người": nhân vật chính là mốc của mọi thứ. Quyết định chiều cao của hero – ví dụ 1,5 unit (150 px). Mọi vật khác sẽ được so với hero: cửa phải cao hơn hero, rương tới đầu gối, cây cao gấp 2–3 lần.
- Mở file và lưới: 1920 × 1080 px. Đặt lưới mẫu lên trên cùng. Nếu tự kẻ: đặt Gridline Every 100 Pixels, Subdivisions 2, rồi bật (Ctrl+').
- Đường đất chung: một đường đỏ
#e8423bdày 4 px tại y = 980. Quy tắc duy nhất của scale chart: chân mọi vật chạm đúng đường này – tương ứng với Pivot (Điểm neo) Bottom trong Unity. - Hero trước tiên: layer
hero, vẽ hoặc đặt PNG nhân vật chính sao cho đỉnh đầu chạm vạch 1,5 unit (y = 830). Dùng Ctrl+T, nhìn chiều cao H trên thanh Options; giữ tỉ lệ khung. - NPC và quái: mỗi vật một layer riêng đặt tên tiếng Anh:
npc_elder1,75 u,enemy_slime0,5 u,enemy_orc2 u. Quái càng nguy hiểm càng nên to hơn hero – người chơi cảm nhận sức mạnh qua kích thước trước khi thấy chỉ số. - Boss: 3–4 unit. Kiểm tra boss vẫn vừa màn hình: camera Unity với Orthographic Size 5 thấy được 10 unit chiều cao – boss 4 unit chiếm gần nửa màn, đủ đáng sợ mà không che hết.
- Đồ vật có kích thước "người dùng": cửa (2 u – cao hơn hero ít nhất 0,4 u để không trông chật), rương (0,5 u), bậc thang (0,25 u mỗi bậc), ghế, cột đèn. Những vật nhân vật tương tác phải khớp với cơ thể hero.
- Cây và nhà: cây 3–4 u, nhà một tầng 3 u. Game 2D thường "co" kiến trúc nhỏ hơn đời thật để vừa màn hình – nhưng phải co đều cho mọi tòa nhà, và scale chart chính là nơi ghi lại quyết định đó.
- Chỉ cần bóng dáng: vật chưa có asset thì tô bóng dáng một màu bằng Lasso Tool (L) + Alt+Backspace. Mỗi nhóm một màu (hero xanh, quái xanh lá, boss tím) để đọc nhanh.
- Đo chính xác: mở Info panel (F8), chọn layer, Ctrl + bấm vào thumbnail layer để chọn vùng pixel – Info hiện chiều cao vùng chọn (H). Chia cho 100 là ra unit. Hoặc dùng Ruler Tool kéo từ chân lên đỉnh.
- Vạch chiều cao và nhãn: vạch đỏ nét đứt ngang đỉnh mỗi vật; dưới chân ghi tên và số đo bằng Type Tool: "Hero – 1,5 u (150 px)". Đây là con số họa sĩ và lập trình viên sẽ tra hằng ngày.
- Lưu và đưa vào Unity 6: lưu
scale_chart_v01.psd, xuất PNG. Để kiểm tra, import PNG vào Unity 6 với Texture Type Sprite (2D and UI), Pixels Per Unit 100, kéo vào Scene cạnh một Cube 1 × 1 – mỗi ô lưới phải trùng đúng 1 unit. Ghi PPU đã chốt vào spec sheet của dự án.
Nâng cao (tùy chọn)
- Scale chart góc nhìn camera: làm thêm một khung 16:9 (10 unit cao, 17,8 unit ngang) và đặt hero, boss, cây vào – xem trước một khung hình thật của game.
- Chiều rộng hitbox: vẽ thêm hình chữ nhật mảnh màu cam quanh chân mỗi nhân vật – kích thước va chạm mà lập trình viên sẽ dùng cho Box Collider 2D.
- Scale chart pixel art: làm phiên bản PPU 16 với hero 32 px (2 unit) cho game pixel – để thấy cùng một tỉ lệ nhưng thước khác.
Mẹo & trick học nhanh
Đừng chốt kích thước từng vật riêng lẻ. Chốt chiều cao hero trước, rồi mô tả mọi thứ khác theo hero: "cửa = hero + 0,5 u", "rương = tới gối hero".
Mọi sprite cùng thế giới dùng chung Pixels Per Unit. Muốn vật to hơn thì vẽ nhiều pixel hơn, đừng đổi PPU.
Đặt chân mọi vật đúng đường đất trong scale chart, rồi trong Unity đặt Pivot Bottom: nhân vật sẽ đứng đúng mặt đất khi đặt ở y = 0.