Sprite Sheet Trong Cocos2dx 3.x.x

Sprite Sheet là gì? 

Sprite Sheet là 1 tập hợp nhiều Sprite vào 1 tập tin duy nhất.

Tác dụng của Sprite Sheet

• Giúp dễ dàng quản lý file hình ảnh trong project.
• Làm giảm kích thước của tập tin tổng thể so với việc có tập tin riêng cho mỗi Sprite, điều này giúp giảm việc sử dụng bộ nhớ, kích thước tập tin và thời gian tải, vậy nên hiệu suất của game cũng được tăng lên đáng kể.

Chính vì những tác dụng trên nên Sprite Sheet đã trở thành 1 trong nhiều tiêu chuẩn chính trong ngành công nghiệp game.

Tool hỗ trợ tạo Sprite Sheet

Dưới đây là 1 số công cụ tạo ra tấm ảnh gốc dùng để làm Sprite Sheet và file format.

• Cocos Studio
• ShoeBox
• Texture Packer
• Zwoptex

Texture Packer

Texture Packer là 1 phần mềm tạo Sprite Sheet, công việc chính là chọn ra các Sprites cần dùng, sau đó sử dụng nó để tạo ra Sprite Sheet cho project.

Giao diện và sử dụng Texture Packer

Sau khi download và cài đặt, khi mở lên sẽ có giao diện như sau:

Với projec là cocos2d-x, chọn cocos2d-x rồi chọn Create project.

Với giao diện chính của Texture packer, bao gồm nhiều button và tùy chọn.

• New project: tạo ra 1 Sprite Sheet cho framework.
• Open project: mở 1 file format Sprite Sheet.
• Save project: lưu project Sprite Sheet hiện tại và tạo ra 1 file format.
• Save defaults: lưu mặc định. 
• Add sprite: thêm Sprites cho bảng, có thể thêm Sprites bằng cách kéo thả vào danh sách của Texture Packer.
• Remove sprite: xóa bỏ Sprite hoặc fordel trong Sprite Sheet.
• Add smart folder: thêm thư mục chứa sẵn các Sprites cần dùng.
• Publish sprite sheet: tạo ra Sprite Sheet cho project.

Sau khi tạo xong Sprite Sheet cho project. Hãy đảm bảo mô tả đúng vị trí của file format trong đúng project.

Command line

Ngoài việc sử dụng giao diện người dùng để tạo ra Sprite Sheet cho project. Có thể tạo ra Sprie Sheet bằng cách sử dụng command line, Texture Packer hỗ trợ làm điều đó.

TexturePacker [options] [<imagefolder>] [<images>] [<tpsfiles>]

• <imagefolder>: tập tin hình ảnh tạo Sprite Sheet.
• <tpsfiles>: xây dựng Sprite bằng cách sử dụng tham số từ 1 tập tin format.
• <images>: thêm các hình ảnh để tạo ra Sprite Sheet.

Ví dụ

TexturePacker --data main.plist --format cocos2d --sheet main.png /path/to/your/assetsfolder

Tạo ra 1 Sprite Sheet có file format là main.plist và main.png từ thư mục assetsforder với mặc định cài đặt của cocos2d-x.

Sử dụng Sprite Sheet trong Cocos2d-x

Đầu tiên cần 1 hình ảnh dùng làm Sprite Sheet chứa các hình ảnh Sprite cần dùng.

Giải thích

•  SpriteSheet là hình ảnh dùng làm Sprite Sheet và có tên là zeroSpriteSheet.png. 
•  1, 2, 3, 4 là những hình ảnh Sprite cần dùng tạo ra hình ảnh zeroSpriteSheet.png và tên lần lượt của chúng là:
  • club.png
  • diamond.png
  • heart.png
  • spade.png    

Để sử dụng Sprite Sheet trong Cocos2d-x, cần thêm 1 file format. File format chứa các thông tin tất cả các Sprite cần dùng như:

• Tên hình ảnh
• Rect của tấm ảnh đó trong file hình ảnh dùng để làm Sprite Sheet.

Ở đây sử dụng file format có định dạng .plist. 

// Nạp file zeroSpriteSheet.list và zeroSpriteSheet.png vào bộ nhớ đệm SpriteFrameCache.
SpriteFrameCache::getInstance()->addSpriteFramesWithFile("zeroSpriteSheet.plist", "zeroSpriteSheet.png");

Khởi tạo Sprite từ SpriteSheet

// Khởi tạo Sprite từ SpriteFrameCache.
auto mySprite = Sprite::createWithSpriteFrameName("heart.png");
// Thiết lập vị trí ban đầu cho sprite tại vị trí (100, 100).
mySprite->setPosition(100, 100);
// Thêm mySprite vào Scene.
this->addChild(mySprite);

Hoặc

// Khởi tạo Sprite từ 1 SpriteFrame.
auto newspriteFrame = SpriteFrameCache::getInstance()->getSpriteFrameByName("heart.png");

// Khởi tạo Sprite có tên là mySprite.
auto mySprite = Sprite::createWithSpriteFrame(newspriteFrame);
// Thiết lập vị trí ban đầu cho mySprite tại điểm (100, 100).
mySprite->setPosition(100, 100);
// Thêm mySprite vào Scene.
this->addChild(mySprite);