Dự án 11: Tối ưu texture atlas cho lập trình viên – gom sprite, padding, power of two

Một màn chơi có 40 sprite rời nghĩa là card đồ họa có thể phải đổi texture 40 lần mỗi khung hình – mỗi lần đổi là một draw call tốn thời gian, đặc biệt trên điện thoại. Texture atlas gom nhiều sprite vào một tấm ảnh lớn để engine vẽ chúng trong ít lần hơn. Unity 6 có công cụ Sprite Atlas tự gom khi build, nên phần lớn thời gian bạn không phải xếp tay. Nhưng lập trình viên vẫn thường nhờ họa sĩ: làm sheet gọn cho một bộ UI, sắp sheet hiệu ứng, sửa sprite bị lem viền, hay giảm dung lượng game. Hiểu atlas – kích thước lũy thừa của 2, padding, chỗ trống – là ngôn ngữ chung giữa họa sĩ và lập trình viên.

Hình mẫu

Thời gian ước tính: khoảng 2 giờ – 20 phút đo và liệt kê sprite, 60 phút xếp atlas, 20 phút kiểm tra lem màu khi thu nhỏ, 20 phút cắt và thử trong Unity.

Chuẩn bị

• Canvas (khung vẽ): 1024 × 1024 px, Resolution (Độ phân giải) 72, RGB Color, nền Transparent. 1024 là lũy thừa của 2 (2 mũ 10) – các định dạng nén texture trên điện thoại và máy tính làm việc tốt nhất với cạnh 128, 256, 512, 1024, 2048.
• Công cụ chính: ImageHình ảnh›TrimCắt bỏ viền thừa để cắt sát từng sprite, Photoshop›SettingsCài đặt›Guides, Grid & Slices đặt lưới, ViewHiển thị›Snap To›GridLưới, Move Tool (Công cụ Di chuyển) (V), FileTệp›Place Embedded, Info panel (F8) để đọc kích thước, FileTệp›Export›Export AsXuất ra (tùy chỉnh).
• Thiết bị: xếp atlas là kéo thả và căn lưới – chuột chính xác hơn bút. Người dùng Wacom, XP-Pen, Huion hay iPad + Apple Pencil (Bút chì) nên tắt chế độ nghiêng/áp lực không cần thiết và bật Snap để sprite bám đúng ô.
• File mẫu: "Lưới atlas 128 px" ở cuối bài – đường xanh là ô 128 px, khung hồng bên trong là vùng an toàn cách mép 4 px. Đặt làm layer trên cùng, khóa, tắt trước khi xuất.
• Sprite: gom 12–20 sprite bạn đã vẽ (vật phẩm, icon, tile, hiệu ứng). Mỗi sprite là PNG nền trong suốt đã Trim sát.

Các bước

1. Hỏi lập trình viên trước: sprite nào thường xuất hiện cùng nhau trên màn hình? Atlas hiệu quả khi gom những thứ vẽ cùng lúc (UI cùng một màn, vật phẩm cùng một màn). Gom nhân vật màn 1 với boss màn 6 vào một tấm chỉ phí bộ nhớ.
2. Trim và đo từng sprite: mở từng PNG, ImageHình ảnh›TrimCắt bỏ viền thừa chọn Transparent Pixels để cắt sát. Ghi kích thước vào danh sách (Info panel hoặc ImageHình ảnh›Image SizeKích thước ảnh). Ví dụ: kiếm 40 × 110, khiên 220 × 220, xu 48 × 48.
3. Tính tổng diện tích: cộng diện tích các sprite (cộng thêm padding). Nếu tổng nhỏ hơn khoảng 65% của 1024 × 1024, dùng 1024; nếu vượt, chuyển sang 2048 hoặc tách thành hai atlas. Không dùng 1000 × 1000 hay 1200 × 800.
4. Tạo canvas và lưới: FileTệp›NewTạo mới 1024 × 1024, Transparent. Đặt lưới mẫu; hoặc đặt Gridline Every 128 px, Subdivisions 4 và bật ViewHiển thị›Snap To›GridLưới.
5. Xếp lớn trước, nhỏ sau: đặt sprite lớn nhất (cây, khiên) vào góc trên trái trước, rồi tới các dải animation (4 frame cùng hàng), sau cùng mới lấp các ô 128 px bằng vật nhỏ. Xếp lớn trước để không bị "kẹt" chỗ cho vật to ở cuối.
6. Animation cùng một hàng: các frame của cùng một animation (chạy 4 frame, lửa 4 frame) đặt liền nhau trên một hàng, cùng kích thước ô. Lập trình viên cắt bằng lưới và không phải tìm frame lạc chỗ.
7. Padding 4 px: mỗi sprite nằm trong khung hồng của ô – cách mép ô ít nhất 4 px. Khi thu nhỏ (mipmap) hay lọc Bilinear, card đồ họa lấy mẫu cả pixel bên cạnh; không có padding, viền đỏ của tim sẽ lem sang khiên xanh.
8. Không xoay, không lật sprite trong atlas tay: nếu xoay 90° cho vừa chỗ, lập trình viên phải xoay lại trong code. Chỉ Sprite Atlas tự động của Unity mới xử lý xoay an toàn (và nên tắt cho UI).
9. Chừa chỗ trống: giữ 20–35% diện tích trống ở một khối liền (ví dụ ba hàng dưới), không rải lỗ khắp nơi. Game luôn có thêm asset; chỗ trống liền khối giúp thêm vào mà không phải xếp lại cả tấm.
10. Mỗi sprite một layer, đặt tên: layer itm_coin, itm_key, chr_hero_run_01 … Lưới mẫu đặt trong Group guides_hidden và tắt đi. Lưu atlas_level01_v01.psd.
11. Kiểm tra lem màu: nhân bản file, ImageHình ảnh›Image SizeKích thước ảnh giảm còn 256 × 256 (Bicubic (Nội suy mượt)), phóng lên xem: các sprite có viền màu lạ của hàng xóm không? Có thì tăng khoảng cách. Đóng bản thử không lưu.
12. Xuất PNG: tắt lưới, FileTệp›Export›Export AsXuất ra (tùy chỉnh) PNG, Transparency (Độ trong suốt) bật, kích thước 100%: atlas_level01.png. Kiểm tra file đúng 1024 × 1024 – đừng để Photoshop tự trim mất mép trong suốt.
13. Cắt trong Unity 6: import PNG, Texture Type Sprite (2D and UI), Sprite Mode Multiple, Max Size 1024, Pixels Per Unit (Số pixel mỗi đơn vị) theo spec sheet. Sprite Editor > Slice > Automatic (nhờ padding, Unity tự tách từng sprite) hoặc Grid By Cell Size 128 × 128 cho hàng animation. Đặt tên từng sprite như tên layer. Ghi chú cho lập trình viên: nếu đội dùng asset Sprite Atlas (Create > 2D > Sprite Atlas) thì cứ giao sprite rời đã Trim – Unity tự gom với Padding 4 và bạn chỉ cần xếp tay cho trường hợp đặc biệt.

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

• Sprite Atlas tự động: trong Unity 6 tạo một Sprite Atlas, kéo thư mục sprite rời vào Objects for Packing, bấm Pack Preview, so với atlas bạn xếp tay – máy xếp chặt hơn, nhưng bạn biết rõ vì sao từng ô nằm ở đâu.
• Hai atlas theo màn: tách thành atlas_ui_common (dùng mọi màn) và atlas_level01 (chỉ màn 1) – cách các studio giảm bộ nhớ trên điện thoại.
• Đo dung lượng: trong Unity, chọn texture và đọc dung lượng ở cuối Inspector khi đổi Compression giữa None, Normal Quality, High Quality – thấy ngay giá trị của kích thước lũy thừa 2.