Tạo Animation Trong Cocos2d-x Với Công Cụ TexturePacker

Đối với các game thì vấn đề chuyển động của nhân vật là 1 phần không thể thiếu trong game. Nhờ vào Animation giúp lập trình viên tạo chuyển động cho nhân vật trong Game.

Bài viết giới thiệu Animation là gì và khi phát triển game sử dụng công cụ nào để tạo nó và load nó vào game để sử dụng như thế nào.

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

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 1 Animation.

Để tạo 1 SpriteSheet 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.

1 số khái niệm trong Cocos2d-x

• Sprite Sheet
• Animation
• Sprite
• Sprite & 2D Animation

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 

• Texture Packer dành cho hệ điều hành Windows 64 bits
• Texture Packer dành cho hệ điều hành Windows 32 bits
• Texture Packer dành cho hệ điều hành macOS
• Texture Packer dành cho hệ điều hành Linux 64 bits

Tạo SpriteSheet với TexturePacker

Giao diện chính của chương trình sau khi chọn Cocos2d-x

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 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

// search path
std::vector<std::string> searchPaths;
searchPaths.push_back("images");
FileUtils::getInstance()->setSearchPaths(searchPaths);

// add sprite frame
SpriteFrameCache::getInstance()->addSpriteFramesWithFile("pic.plist", "pic.png");

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

Hero.h

#ifndef __HERO_SCENE_H__
#define __HERO_SCENE_H__

#include "cocos2d.h"
USING_NS_CC;

class Hero : public cocos2d::Sprite {
public:
	Hero();
	~Hero();
private:
	cocos2d::RepeatForever *moving();
};

#endif // __HERO_SCENE_H__

Hero.cpp

cocos2d::RepeatForever* Hero::moving() {
	int numFrame = 3;

	cocos2d::Vector<cocos2d::SpriteFrame *> frames;
	cocos2d::SpriteFrameCache *frameCache = cocos2d::SpriteFrameCache::getInstance();
	
	char file[100] = { 0 };
	
	for (int i = 0; i < numFrame; i++) {
		sprintf(file, "a%d.png", i + 1);
		cocos2d::SpriteFrame *frame = frameCache->getSpriteFrameByName(file);
		frames.pushBack(frame);
	}
	
	cocos2d::Animation *animation = cocos2d::Animation::createWithSpriteFrames(frames, 1);
	cocos2d::Animate *animate = cocos2d::Animate::create(animation);
	cocos2d::RepeatForever *repeat = cocos2d::RepeatForever::create(animate);
	
	return repeat;
}

Gọi "Sprite" ở Scene

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

Build project và xem thử kết quả.