Trong một thời gian dài tôi băn khoăn không hiểu cái gì có thể cực đắt, cực hiện đại, có thể cực kì vô dụng. Và rồi tôi phát hiện ra máy tính là một cái máy ngu ngốc có khả năng làm những việc thông minh phi thường, trong khi lập trình viên là những người thông minh có khả năng làm những việc ngu ngốc phi thường. Bill Bryson
STDIO Bài viết nằm trong loạt bài viết chương trình Tự Học Cocos2d-x 3.x.x. Trong bài viết này sẽ giới thiệu nội dung về khái niệm Animation, các loại Animation hiện có và một cách tạo các Animation từ Sprite Sheet.
Nội dung bài viết

Giới thiệu

Trong các bài viết Giới Thiệu Về Sprite Trong Cocos2d-x 3.x.x  hay Acction Của Sprite Trong Cocos2d-x 3.x.x, tôi đã giới thiệu cho các bạn làm quen với Sprite và các Action cơ bản. Nhưng bạn cũng thấy rằng những Action rất đơn điệu. Vậy khi bạn cần một hành động để thực hiện một di chuyển của một con vật,con người,... hay một hiệu ứng nào đó thì sao? Trong bài viết này tôi và các bạn sẽ tìm hiểu về Animation trong Cocos2d-x 3.4.

Tiền đề bài viết

Bài viết nằm trong những loạt bài viết của chương trình Tự Học Cocos2d-x 3.x.x của STDIO.

Đố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.

Animation là gì?

Là một loại Action của Sprite. Một bộ phim thì được tập hợp bởi nhiều tấm ảnh được chụp liên tiếp, khi chiếu bộ phim người ta sẽ cho chạy những tấm ảnh này liên lục trong thời gian ngắn nhằm tạo ảo giác mắt cho mắt người xem. Animation trong Cocos2d-x cũng hoạt động như thế.

Các loại Animation

Có 2 loại Animation trong Cocos2d-x:

  • Sprite Sheets Animation: Tạo Animation bằng một loạt Sprite nối tiếp nhau.
  • Skeleton Animation: Tạo Animation bằng khung xương.

Trong bài viết này tôi sẽ giới thiệu cho bạn về Sprite Sheets Animation.

Tạo Animation

Khi bạn tạo một Animation bạn nên sử dụng một file Sprite Sheet chứa tất cả các Sprite cần thiết để tạo Animation thay cho nhiều file Sprite nhằm tăng hiệu suất của game. Bạn có thể tìm thêm về Sprite Sheet, cách tạo file format trong bài viết Sprite Sheet Trong Cocos2d-x 3.x.x.

Không sử dụng file format

const int numberSprite = 4;

auto gameSprite = Sprite::create("mysprite.png", Rect(0,0,50,50));
gameSprite->setPosition(300, 300);
this->addChild(gameSprite);

Vector<SpriteFrame*> animFrames;

animFrames.reserve(numberSprite);

animFrames.pushBack(SpriteFrame::create("mysprite.png", Rect(0,50,50,50)));
animFrames.pushBack(SpriteFrame::create("mysprite.png", Rect(0,150,50,50)));
animFrames.pushBack(SpriteFrame::create("mysprite.png", Rect(0,200,50,50)));

Animation* animation = Animation::createWithSpriteFrames(animFrames, 0.1f);
Animate* animate = Animate::create(animation);

gameSprite->runAction(RepeatForever::create(animate));

Phân tích

  • Dòng 1: Khởi tạo một hằng có giá trị là số lượng tối đa Sprite dùng để tạo Animation.
  • Dòng 3: Tạo Sprite sử dụng hình ảnh đầu tiên là mysprite.png với Rect(0,0, 50, 50). Ở đây Animation của mình sẽ dùng Sprite này làm Sprite đầu tiên.
  • Dòng 4: Thiết lập vị trí của gameSprite tại vị trí (300, 300). Đây cũng chính là vị trí của Animation trên Screen.
  • Dòng 5: Thêm gameSprite vào Scene.
  • Dòng 7: Khai báo một mảng Vector kiểu SpriteFrame có tên là animFrames.
  • Dòng 8: Khởi tạo kích thước của mảng animFrames là 4.
  • Dòng 10 - Dòng 13: Push frame từ bộ đệm SpriteFrameCache
  • Dòng 15: Khởi tạo một khung hình animation từ Vector SpriteFrame.
  • Dòng 16: Tạo animate.
  • Dòng 18: Chạy Acction animation với số lần lặp vô hạn. Lúc này sẽ có 4 tấm hình như 4 thước phim. 

Sử dụng file format

Bạn có một file Sprite Sheet có tên là animation.png và một file format của Sprite Sheet này là animation.plist.

SpriteFrameCache::getInstance()->addSpriteFramesWithFile("animation.plist", "animation.png");

const int numberSprite = 5;

auto gameSprite = Sprite::createWithSpriteFrameName("mysprite0001.png");
gameSprite->setPosition(300, 300);
this->addChild(gameSprite);

Vector<SpriteFrame*> animFrames;
animFrames.reserve(numberSprite);

animFrames.pushBack(SpriteFrameCache::getInstance()->getSpriteFrameByName("mysprite0002.png"));
animFrames.pushBack(SpriteFrameCache::getInstance()->getSpriteFrameByName("mysprite0003.png"));
animFrames.pushBack(SpriteFrameCache::getInstance()->getSpriteFrameByName("mysprite0004.png"));

Animation* animation = Animation::createWithSpriteFrames(animFrames, 0.5f);
Animate* animate = Animate::create(animation);

gameSprite->runAction(RepeatForever::create(animate));

Phân tích

  • Dòng 1: Nạp file format animation.plist và hình ảnh gốc của Sprite Sheet là animation.png vào bộ nhớ đệm SpriteFrameCache
  • Dòng 3: Khởi tạo một hằng có giá trị là số lượng tối đa Sprite dùng để tạo Animation.
  • Dòng 5: Tạo Sprite sử dụng hình ảnh đầu tiên là mysprite.png. Ở đây Animation của mình sẽ dùng Sprite này làm Sprite đầu tiên.
  • Dòng 6: Thiết lập vị trí của gameSprite tại vị trí (300, 300). Đây cũng chính là vị trí của Animation trên Screen.
  • Dòng 7: Thêm gameSprite vào Scene.
  • Dòng 9: Khai báo một mảng Vector kiểu SpriteFrame có tên là animFrames.
  • Dòng 10:  Khởi tạo kích thước của mảng animFrames là 5.
  • Dòng 12 - Dòng 15: Push frame từ bộ đệm SpriteFrameCache
  • Dòng 16: Khởi tạo một khung hình animation từ Vector SpriteFrame.
  • Dòng 17: Tạo animate.
  • Dòng 19: Chạy Acction animation với số lần lặp vô hạn.

Chú ý

Với các phương pháp tạo Animation trên, giả sử bạn có một Animation cần một Sprite Sheet chứa 50 Sprite thì sao? Vấn đề đặt ra ở đây, là bạn không thể ngồi code, nạp từng frame từ bộ đệm SpriteFramCache được. Để giải quyết vấn đề này, khi bạn sử dụng file format, bạn nên đặt tên của tất cả các Sprite trong Sprite Sheet nên giống nhau kèm theo số thứ tự của chúng trong Animation.

Ví dụ: sprite0, sprite1, sprite2,..., sprite20, ...

// Nạp file format animation.plist và hình ảnh gốc của Sprite Sheet là animation.png vào bộ nhớ đệm SpriteFrameCache
SpriteFrameCache::getInstance()->addSpriteFramesWithFile("animation.plist", "animation.png");

// Định nghĩa hằng. 
const int numberSprite = 5;
const int maxWord = 50;
 
// Tạo Sprite sử dụng hình ảnh đầu tiên là mysprite0.png. Ở đây Animation của mình sẽ dùng Sprite này làm Sprite đầu tiên.
auto gameSprite = Sprite::createWithSpriteFrameName("mysprite0.png");
// Thiết lập vị trí của gameSprite tại vị trí (300, 300). Đây cũng chính là vị trí của Animation trên Screen.
gameSprite->setPosition(300, 300);
//Thêm gameSprite vào Scene.
this->addChild(gameSprite);
 
// Khai báo một mảng Vector kiểu SpriteFrame có tên là animFrames và có kích thước là numberSprite.
Vector<SpriteFrame*> animFrames;
animFrames.reserve(numberSprite);

//*******************************************************
// chuỗi trung gian để đọc tên ảnh trong file format
char spriteFrameByName[maxWord ] = { 0 }; 

// Lặp để đọc numberSprite ảnh trong file format
for (int index = 1; index < numberSprite; index++) 
{
     // Lấy sprite frame name
     sprintf(spriteFrameByName, "mysprite%d.png", index);
		
     // Tạo 1 khung, lấy ra từ bộ đệm SpriteFrameCache có tên là spriteFrameByName;
     auto frame = SpriteFrameCache::getInstance()->getSpriteFrameByName(spriteFrameByName);
     // Push frame.
     animFrames.pushBack(frame);
}
//*******************************************************

// Khởi tạo một khung hình animation từ Vector SpriteFrame.  
Animation* animation = Animation::createWithSpriteFrames(animFrames, 0.5f);
Animate* animate = Animate::create(animation);
 
// Chạy Acction animation với số lần lặp vô hạn.
gameSprite->runAction(RepeatForever::create(animate));

Tổng kết

Animation trong games cũng được coi là một kỹ thuật tiêu chuẩn ở trong ngành công nghiệp games. Animation giúp rất nhiều trong project trò chơi của bạn, giúp đẹp mắt hơn, tối ưu hơn,... Mọi thắc mắc bạn có thể bình luận tại bài viết hoặc liên hệ với Trương Đạt.

Tham khảo

http://www.cocos2d-x.org

Bạn cần hỗ trợ các dự án kết nối không dây?

Quí doanh nghiệp, cá nhân cần hỗ trợ, hợp tác các dự án IoT, kết nối không dây. Vui lòng liên hệ, hoặc gọi trực tiếp 0942.111912.

  • TỪ KHÓA
  • Arduino
  • ESP32
  • ESP8266
  • Wifi
  • Bluetooth
  • Zigbee
  • Raspberry Pi
THẢO LUẬN
ĐÓNG