Dự án 5: Bảng thông số asset (spec sheet) – kích thước, PPU, pivot, số frame

"Con slime này bao nhiêu pixel? Pivot (Điểm neo) ở đâu? Mấy frame?" – nếu mỗi asset đều phải hỏi ba câu này, đội sẽ tốn hàng giờ mỗi tuần chỉ để nhắn tin. Studio giải quyết bằng một asset spec sheet: bảng liệt kê mọi asset cần làm, mỗi asset một dòng với đầy đủ thông số. Lập trình viên đọc bảng để chuẩn bị code (khung va chạm, tốc độ animation), họa sĩ đọc để tạo đúng canvas, animator đọc để biết số frame. Spec sheet thường do lead artist hoặc technical artist viết – và biết đọc, biết viết nó là kỹ năng mà mọi nhà tuyển dụng đều mong ở họa sĩ game.

Hình mẫu

Thời gian ước tính: khoảng 1 giờ – 20 phút liệt kê asset và quyết định thông số, 25 phút dựng bảng, 15 phút làm ô mẫu và kiểm tra trong Unity.

Chuẩn bị

• Canvas (khung vẽ): 1920 × 1080 px, Resolution (Độ phân giải) 72, RGB Color, nền #f5f6f8. Ở studio thật, spec sheet thường nằm trong bảng tính dùng chung; làm trong Photoshop ở bài này giúp bạn thêm hình minh họa pivot và luyện trình bày tài liệu.
• Công cụ chính: Rectangle Tool (U), Line Tool, Type Tool (T) với Paragraph panel, ViewHiển thị›GuidesĐường gióng›New Guide Layout để chia cột, Align (thanh Options của Move Tool (Công cụ Di chuyển)), Ellipse Tool cho điểm pivot.
• Thiết bị: bài này là bảng và chữ – chuột và bàn phím là công cụ chính. Người dùng bút Wacom, XP-Pen, Huion hay iPad + Apple Pencil (Bút chì) có thể dùng bút cho phần vẽ ô mẫu nhân vật; phần bảng vẫn nên gõ bằng bàn phím.
• File mẫu: "Bảng spec sheet trống" ở cuối bài: hàng tiêu đề 7 cột, 10 dòng xen màu và một dòng ví dụ chữ xanh.

Các bước

1. Liệt kê asset của một màn: ghi ra giấy mọi thứ cần vẽ cho một màn chơi nhỏ: nhân vật (idle, run, jump), 2 quái, vật phẩm (xu, tim), tile, nút UI, hiệu ứng. Khoảng 7–10 dòng là đủ cho bài này.
2. Chốt PPU chung: lấy PPU từ scale chart (thường 100). Chỉ tile có thể dùng PPU riêng bằng đúng cạnh tile (tile 64 px → PPU 64) để mỗi ô tile = 1 unit trên Tilemap.
3. Kích thước frame: tính từ scale chart: hero 1,5 unit với PPU 100 → cao 150 px → chọn ô 128 × 128 nếu nhân vật vẽ trong 120 px, hoặc 192 × 192 nếu cần chỗ cho kiếm vung. Ghi chú: kích thước là của một frame, không phải cả sheet.
4. Chọn pivot đúng loại: nhân vật và quái đứng trên đất → Bottom. Vật phẩm bay lơ lửng, đạn, hiệu ứng nổ → Center. Cánh cửa xoay theo bản lề → Left. Pivot sai làm nhân vật lún xuống đất hoặc xoay lệch tâm.
5. Số frame: idle 4, run 6–8, jump 3–4, xu xoay 6–8, nổ 6. Ghi kèm tốc độ gợi ý (ví dụ 10 fps) vào cột Ghi chú – animator và lập trình viên đều cần.
6. Dựng bảng: FileTệp›NewTạo mới 1920 × 1080 px, đặt file mẫu. Rectangle Tool vẽ hàng tiêu đề #3a404b cao 70 px; chữ trắng 24 px đậm. Các dòng cao 76 px, xen kẽ trắng và #f0f3f8 cho dễ dò ngang.
7. Căn cột bằng guide: ViewHiển thị›GuidesĐường gióng›New Guide Layout hoặc kéo guide tại mỗi đường cột. Mọi chữ trong cột căn trái cùng một guide – dùng Move Tool, chọn nhiều layer, bấm Align left edges trên thanh Options.
8. Điền thông số: gõ từng dòng. Tên file theo quy ước (chr_hero_run.png, itm_coin_spin.png). Text layer đặt tên theo dòng: row_03_slime để sửa nhanh.
9. Ký hiệu pivot: cạnh mỗi chữ Bottom đặt chấm đỏ đặc #e8423b, cạnh Center đặt vòng tròn xanh #31a8ff. Ký hiệu trực quan giúp lướt bảng nhanh hơn đọc chữ.
10. Ô mẫu minh họa: bên phải bảng, vẽ một ô 128 × 128 (phóng ×1,5 cho dễ nhìn) chia lưới 4 × 4, đặt nhân vật vào sao cho chân chạm đáy, đánh dấu pivot chữ thập đỏ ở giữa đáy, kèm mũi tên "128 px = 1,28 unit".
11. Ghi chú chung: dưới bảng ghi quy định cho mọi asset: PNG 32-bit nền trong suốt, sprite sheet xếp ngang, padding 2 px giữa các frame, màu sRGB. Đây là những điều không cần lặp lại ở từng dòng.
12. Thử một dòng trong Unity 6: import một sprite sheet theo dòng Hero idle: Texture Type Sprite (2D and UI), Sprite Mode Multiple, Pixels Per Unit 100, mở Sprite Editor > Slice > Grid By Cell Size 128 × 128, Pivot Bottom. Nếu nhân vật đứng đúng mặt đất ở y = 0 – spec sheet của bạn đúng.
13. Lưu và chia sẻ: lưu doc_spec_sheet_level01_v01.psd, xuất PNG cho đội. Mỗi khi đổi thông số, tăng số phiên bản và tô vàng dòng đã đổi để mọi người biết.

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

• Cột hitbox: thêm kích thước khung va chạm (ví dụ 48 × 110 px) để lập trình viên dựng Box Collider 2D khớp với hình vẽ.
• Spec sheet cho UI: làm bảng riêng cho nút và khung: kích thước, viền 9-slice (Left / Right / Top / Bottom), các trạng thái normal, hover, pressed, disabled.
• Từ Photoshop sang bảng tính: chép bảng sang bảng tính dùng chung của đội – nơi spec sheet thật thường sống, ai cũng sửa và xem lịch sử được.