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

Game Studio


Hướng dẫn sử dụng công cụ Texture Packer tạo Animation trong Cocos2d-x

Giới thiệu

Đối với các game thì vấn đề chuyển động của nhân vật là một phần không thể thiếu trong game. Vậy làm như thế nào để tạo chuyển động cho nhân vật trong Game – đó chính là Animation. Vậy Animation là gì và khi phát triển game sử dụng công cụ nào để tạo nó, cũng như load đó vào game để sử dụng như thế nào? Bài viết này sẽ hướng dẫn các vấn đề trên.

Tiền đề bài viết

Đối với thời "tiền cổ" để tạo được các chuyển động trong game các lập trình viên phải lập trình tốn rất nhiều công sức – phải tính toán từng frame hình … Giờ thì với sự hỗ trợ của công cụ sẽ giúp lập trình viên làm việc rất hiệu quả.

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

Các lập trình viên cần tạo chuyển động, tạo hoạt hình cho game của mình.

Các Artist "mới vào nghề" cũng có thể làm quen với khái niệm Sprite Sheet và tạo nó như thế nào để hỗ trợ cho các lập trình viên.

SpriteSheet là gì?

SpriteSheet là ảnh bao gồm nhiều ảnh đơn ghép lại với nhau và có đi kèm 1 file lưu thông số của từng ảnh. Những ảnh đơn tạo thành từng nhóm ảnh của một Animation. Để tạo 1 SpriteSheet ta cần tạo 2 file (dạng text để lưu thông số các ảnh đơn và 1 hình ảnh lơn gôm các ảnh đơn lại 1 tấm). TexturePacker là công cụ giúp tạo SpriteSheet. File lưu thông số định dạng .plist và hình ảnh định dạng .png.

Bạn có thể đọc thêm một số bài sau để hiểu rõ hơn về khái niệm này

Tạo SpriteSheet cho Cocos2d-x sử dụng TexturePacker

Cài đặt

Download và cài đặt tại trang: https://www.codeandweb.com/texturepacker

Tạo SpriteSheet với TexturePacker

Sau khi chọn cocos2d ta được giao diện chính của chương trình

Sau khi kéo thả các hình vào box "Sprites", và tùy chỉnh các thông số, chọn "Public sprite sheet"

Đã hoàn tất và đặt tên “Sprite sheet” chọn nơi lưu (lưu file .plist và .png)

Sau khi được 2 file .plist và .png ta copy vào thư mục resource của project Cocos2d-x

Sử dụng SpriteSheet cho Cocos2d-x

Vào AppDelegate.cpp load file .plist và .png để tạo Sprite

  1. // search path
  2. std::vector<std::string> searchPaths;
  3. searchPaths.push_back("images");
  4. FileUtils::getInstance()->setSearchPaths(searchPaths);
  5.  
  6. // add sprite frame
  7. SpriteFrameCache::getInstance()->addSpriteFramesWithFile("pic.plist", "pic.png");

Tạo class Hero để thể hiện Sprite

Hero.h

  1. #ifndef __HERO_SCENE_H__
  2. #define __HERO_SCENE_H__
  3.  
  4. #include "cocos2d.h"
  5. USING_NS_CC;
  6.  
  7. class Hero : public cocos2d::Sprite {
  8. public:
  9. Hero();
  10. ~Hero();
  11. private:
  12. cocos2d::RepeatForever *moving();
  13. };
  14.  
  15. #endif // __HERO_SCENE_H__

Hero.cpp

  1. cocos2d::RepeatForever* Hero::moving() {
  2. int numFrame = 3;
  3.  
  4. cocos2d::Vector<cocos2d::SpriteFrame *> frames;
  5. cocos2d::SpriteFrameCache *frameCache = cocos2d::SpriteFrameCache::getInstance();
  6. char file[100] = { 0 };
  7. for (int i = 0; i < numFrame; i++) {
  8. sprintf(file, "a%d.png", i + 1);
  9. cocos2d::SpriteFrame *frame = frameCache->getSpriteFrameByName(file);
  10. frames.pushBack(frame);
  11. }
  12. cocos2d::Animation *animation = cocos2d::Animation::createWithSpriteFrames(frames, 1);
  13. cocos2d::Animate *animate = cocos2d::Animate::create(animation);
  14. cocos2d::RepeatForever *repeat = cocos2d::RepeatForever::create(animate);
  15. return repeat;
  16. }

Gọi "Sprite" ở Scene

  1. Hero *hero = new Hero();
  2. hero->setPosition(Point(visibleSize.width / 2, visibleSize.height / 2));
  3. this->addChild(hero);

Bạn hãy build project và xem thử kết quả.

Theo: Stdio