Game Studio
Liên kế mạng xã hội

Game Studio


Hướng dẫn sử dụng Sprite Sheet trong Cocos2dx 3.x.x

Giới thiệu

Games cũng là một ngành công nghiệp, trong đó có rất nhiều tiêu chuẩn nhất định. Sprite Sheet là một trong những nhiều phương pháp tiêu chuẩn trong ngành công nghiệp game nhằm tăng hiệu suất của game. Trong bài viết này tôi và các bạn sẽ cùng tìm hiểu về Sprite Sheet trong Cocos2d-x 3.4.

Tiền đề bài viết

Bài viết này là bài viết nằm trong những loạt bài viết của tôi về tìm hiểu tổng quan làm game 2D sử dụng  Cocos2d-x 3.4.

Đối tượng hướng đến

Bài viết này tôi hướng đến những lập trình viên mới bắt đầu tìm hiểu và học tập làm game 2D bằng Cocos2d-x 3.4.

Sprite Sheet là gì? 

Sprite Sheet là một tập hợp nhiều Sprite vào một tập tin duy nhất. Bạn có thể tìm hiểu về Sprite trong bài viết Giới Thiệu Về Sprite Trong Cocos2d-x 3.x.x.

Tác dụng của Sprite Sheet

  • Giúp dễ dàng quản lý file hình ảnh của bạn hơn 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 bạn làm giảm đáng kể 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 của Sprite Sheet nên nó đã trở thành một 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à một 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: Đây là công cụ tôi sử dụng.
  • Zwoptex

Texture Packer

Là một phần mềm tạo Sprite Sheet, công việc chính của bạn chỉ là việc chọn ra các Sprites mà bạn cần, sau đó sử dụng nó để tạo ra Sprite Sheet cho project của bạn.

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

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

Với project của bạn là cocos2d-x, bạn 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 một Sprite Sheet cho framework của bạn.
  • Open project: Mở một file format Sprite Sheet.
  • Save project: Lưu project Sprite Sheet hiện tại của bạn và tạo ra một file format.
  • Save defaults: 
  • Add sprite: Thêm Sprites cho bảng, bạn cũ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 của bạn.
  • 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 của bạn.

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

Command line

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

  1. TexturePacker [options] [<imagefolder>] [<images>] [<tpsfiles>]
  • Tập tin hình ảnh tạo Sprite Sheet.
  •  Xây dựng Sprite bằng cách sử dụng tham số từ một tập tin format.
  •  Thêm các hình ảnh để tạo ra Sprite Sheet.

Ví dụ

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

Tạo ra một Sprite Sheet có file format là main.plistmain.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 bạn cần một hình ảnh dùng làm Sprite Sheet chứa các hình ảnh Sprite mà bạn 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, bạn cần thêm một file format. File format chứa các thông tất cả các Sprite mà bạn 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 tôi sử dụng file format có định dạng .plist

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

Khởi tạo Sprite từ SpriteSheet

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

Hoặc

  1. // Khởi tạo Sprite từ một SpriteFrame.
  2. auto newspriteFrame = SpriteFrameCache::getInstance()->getSpriteFrameByName("heart.png");
  3.  
  4. // Khởi tạo Sprite có tên là mySprite.
  5. auto mySprite = Sprite::createWithSpriteFrame(newspriteFrame);
  6. // Thiết lập vị trí ban đầu cho mySprite tại điểm (100, 100).
  7. mySprite->setPosition(100, 100);
  8. // Thêm mySprite vào Scene.
  9. this->addChild(mySprite);

Tham Khảo

http://www.cocos2d-x.org

Theo: Stdio