Xuất Asset cho Game Engine

Bạn vẽ đẹp đến đâu nhưng xuất sai cách thì asset vẫn mờ, bị viền trắng hoặc lệch kích thước khi vào game. Bài này là "cầu nối" giữa Photoshop và engine.

Các cách xuất PNG trong Photoshop

Quick Export as PNG

FileTệp›Export›Quick Export as PNGXuất nhanh PNG xuất toàn bộ canvas một cú nhấp. Nhanh nhất khi file chỉ có một asset. Bạn có thể chuột phải vào layer/artboard trong panel Layers để Quick Export (Xuất nhanh) riêng layer đó.

Export As

FileTệp›Export›Export AsXuất ra (tùy chỉnh) (⌥ Option+⇧ Shift+⌘ Cmd+W) cho phép chọn định dạng, scale (0.5x, 1x, 2x…) và xem trước dung lượng. Chuột phải layer > Export As (Xuất ra (tùy chỉnh)) để xuất riêng từng layer, tự cắt bỏ vùng trong suốt xung quanh.

Generate Image Assets (Generator)

Bật FileTệp›GenerateTạo tự động›Image AssetsTài nguyên ảnh. Từ đó, bất kỳ layer hoặc group nào có tên kết thúc bằng đuôi file sẽ được tự động xuất vào thư mục tên-file-assets cạnh file PSD mỗi khi bạn lưu.

• sword.png – xuất PNG kích thước thật.
• 200% sword@2x.png – xuất bản phóng 2x.
• sword.png, 50% sword_small.png – xuất hai bản trong một lần.

Export Layers to Files

FileTệp›Export›Export Layers to FilesXuất từng lớp ra file xuất mỗi layer thành một file riêng, có tùy chọn Trim Layers. Hữu ích khi bạn có 30 icon trên 30 layer.

Power of two và texture atlas

GPU làm việc hiệu quả nhất với texture có cạnh là lũy thừa của 2: 32, 64, 128, 256, 512, 1024, 2048. Một số định dạng nén (như PVRTC trên iOS cũ, hoặc DXT/BC) yêu cầu kích thước chia hết cho 4 hoặc power of two. Thay vì nạp 50 file nhỏ, engine thường gộp chúng vào một texture atlas lớn (trong Unity là Sprite Atlas) để giảm số lần vẽ (draw call).

Quy tắc đặt tên

• Dùng snake_case, chữ thường, không dấu, không khoảng trắng: hero_idle_01.png.
• Dùng tiền tố theo loại: chr_ (nhân vật), ico_ (icon), ui_ (giao diện), tile_, bg_, fx_ (hiệu ứng).
• Đánh số có số 0 đứng trước: _01, _02 để sắp xếp đúng.
• Hậu tố độ phân giải: @1x, @2x cho màn hình thường và màn hình mật độ cao.

Thực hành: import một sprite đơn vào Unity 6

1. Kéo file PNG vào thư mục Assets/Sprites trong cửa sổ Project.
2. Chọn file, ở Inspector đặt Texture Type là Sprite (2D and UI) và Sprite Mode là Single.
3. Pixels Per Unit (Số pixel mỗi đơn vị): đặt bằng kích thước tile của bạn (ví dụ 32 hoặc 64) để 1 tile = 1 đơn vị trong thế giới game.
4. Với pixel art: Filter Mode (Chế độ lọc ảnh) = Point (no filter) và Compression = None để không bị mờ hay sai màu. Với art vẽ tay mượt, có thể giữ Bilinear và nén chất lượng cao.
5. Bấm Apply, kéo sprite vào Scene để kiểm tra.

Thực hành: sprite sheet và Animation trong Unity 6

Giả sử bạn xuất chr_slime_idle.png kích thước 256 × 64 px gồm 4 frame 64 × 64 xếp thành một hàng (xem bài Sprite sheet).

1. Chọn PNG, ở Inspector đặt Texture Type = Sprite (2D and UI), Sprite Mode = Multiple, Pixels Per Unit = 64, Filter Mode = Point (no filter), Compression = None, rồi bấm Apply.
2. Bấm nút Sprite Editor trong Inspector. (Nếu Unity báo thiếu, cài package 2D Sprite qua WindowCửa sổ›Package Manager; template 2D đã có sẵn.)
3. Trong Sprite Editor mở menu Slice: Type = Grid By Cell Size, Pixel Size X = 64, Y = 64, Pivot (Điểm neo) = Bottom Center. Bấm Slice rồi Apply ở góc trên bên phải.
4. Trong cửa sổ Project, bấm mũi tên cạnh file PNG: bạn thấy 4 sprite con chr_slime_idle_0 … _3.
5. Chọn cả 4 sprite con (giữ ⇧ Shift) và kéo thả vào Hierarchy hoặc Scene. Unity hỏi nơi lưu file .anim: đặt tên slime_idle.anim. Unity tự tạo GameObject có Sprite Renderer, Animator và Animator Controller.
6. Mở WindowCửa sổ›Animation›Animation để xem clip. Bật Show Sample Rate trong menu ba chấm và đặt Samples khoảng 8–12 cho idle nhẹ nhàng.
7. Bấm Play (Cmd+P) để xem nhân vật chuyển động. Nếu chân nhân vật "nhảy" lên xuống, kiểm tra lại baseline trong Photoshop và Pivot Bottom Center.

Thực hành: 9-slice cho giao diện (UI) trong Unity 6

1. Xuất khung nút hoặc bảng thoại nhỏ, ví dụ ui_button_01.png 96 × 48 px, góc bo nằm gọn trong 16 px mỗi cạnh.
2. Import với Texture Type = Sprite (2D and UI), Sprite Mode = Single, Mesh Type = Full Rect, Apply.
3. Mở Sprite Editor, chọn sprite và nhập Border L = 16, R = 16, T = 16, B = 16 (hoặc kéo 4 đường màu xanh lá). Bấm Apply.
4. Trong Canvas, thêm UI Image (GameObject›UI›ImageHình ảnh), gán sprite và đặt Image Type = Sliced. Kéo giãn nút: 4 góc giữ nguyên, chỉ cạnh và phần giữa được kéo dài.
5. Muốn dùng 9-slice cho vật thể trong thế giới game (không phải UI), chọn Sprite Renderer và đặt Draw Mode = Sliced.