Lộ trình › Quy trình làm việc ở studio game › Bài 235/248

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.

Nâng cao 90 phút ★★★ Dễ Hướng dẫn cho Windows · đổi sang macOS

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.

File mẫu để luyện tập

Tải về rồi mở bằng Photoshop: FileTệp›OpenMở (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

Scale chart trên lưới nửa unit: cửa gỗ cao 2 unit, rương 0,5 unit, nhân vật chính 1,5 unit, NPC 1,75 unit, slime 0,5 unit, cây 3,5 unit và boss 4 unit cùng đứng trên một đường đất, có vạch đỏ chiều cao và nhãn số đo
Scale chart trên lưới nửa unit: cửa gỗ cao 2 unit, rương 0,5 unit, nhân vật chính 1,5 unit, NPC 1,75 unit, slime 0,5 unit, cây 3,5 unit và boss 4 unit cùng đứng trên một đường đất, có vạch đỏ chiều cao và nhãn số đo

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: ViewHiển thị›GuidesĐường gióng›New Guide Layout 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 FileTệp›Place Embedded, 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àuMã hexDùng cho
#f5f6f8Nền bảng
#c9ced8Vạch lưới 1 unit
#3d6fd6Nhân vật chính
#6b8f4aNPC
#5fd17aQuái nhỏ (slime)
#5a3a8aBoss
#e8423bĐường đất, vạch chiều cao
#31a8ffSố đo (unit)

Các bước

Sáu giai đoạn: kẻ lưới unit, dựng khung từng vật thể, tô màu bóng dáng, đổ bóng, kẻ vạch chiều cao, ghi nhãn tên và số đo
Sáu giai đoạn: kẻ lưới unit, dựng khung từng vật thể, tô màu bóng dáng, đổ bóng, kẻ vạch chiều cao, ghi nhãn tên và số đo
  1. 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".
  2. 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.
  3. Mở file và lưới: FileTệp›NewTạo mới 1920 × 1080 px. Đặt lưới mẫu lên trên cùng. Nếu tự kẻ: EditChỉnh sửa›PreferencesTùy chọn cài đặt›Guides, Grid & Slices đặt Gridline Every 100 Pixels, Subdivisions 2, rồi bật ViewHiển thị›ShowHiện›GridLưới (Ctrl+').
  4. Đường đất chung: một đường đỏ #e8423b dà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.
  5. 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.
  6. NPC và quái: mỗi vật một layer riêng đặt tên tiếng Anh: npc_elder 1,75 u, enemy_slime 0,5 u, enemy_orc 2 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ố.
  7. 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.
  8. Đồ 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.
  9. 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 đó.
  10. 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.
  11. Đ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.
  12. 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.
  13. 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.
Mẹo: Khi phân vân kích thước, hãy nghĩ tới gameplay trước: nhân vật nhảy cao bao nhiêu unit? Bậc thềm phải thấp hơn tầm nhảy. Hỏi lập trình viên về chiều cao nhảy và tầm nhìn camera rồi mới chốt scale chart.
Lỗi hay gặp: Mỗi asset một PPU khác nhau "cho vừa" (hero PPU 100, cây PPU 64, boss PPU 200). Unity sẽ hiển thị đúng cỡ nhưng độ nét mỗi vật một kiểu – vật PPU thấp trông mịn, vật PPU cao trông nhòe khi phóng. Giữ một PPU cho mọi asset cùng thế giới; muốn to nhỏ thì vẽ to nhỏ ở Photoshop.

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

Hero là thước đo

Đừ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ột PPU cho cả thế giới

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.

Chân chạm đất = Pivot Bottom

Đặ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.

Kiểm tra nhanh

1 Với Pixels Per Unit = 100, nhân vật cao 150 px sẽ cao bao nhiêu trong Unity?
2 Vì sao nên chốt chiều cao nhân vật chính trước tiên?
3 Một cái cây vẽ PPU 64 trong khi mọi thứ khác PPU 100 sẽ gặp vấn đề gì?

Bài tập: Scale chart cho game của bạn

Làm trong Photoshop rồi nộp file. Máy chấm kiểm tra các yêu cầu kỹ thuật và chỉ cách sửa từng lỗi; giáo viên chấm thêm phần thẩm mỹ.

Làm bài tập