STDIO
Tìm kiếm gần đây
    • Nội dung
    • QR Code
    • 0
    • 0
    • Sao chép

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

    Giới thiệu khái niệm SpriteSheet. Hướng dẫn sử dụng TexturePacker để tạo SpriteSheet cho Cocos2s-x
    16/09/2015
    27/09/2020
    3 phút đọc
    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

    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

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

    ss_2

    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"

    ss_3

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

    ss_4
    ss_5

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

    ss_6

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

    0 Bình luận
    Lập Trình Game

    Lập Trình Game

    Kiến thức, kỹ thuật, kinh nghiệm lập trình game.

    Đề xuất

    Animation Trong Cocos2d-x 3.x.x
    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. ...
    Lập Trình Hiệu Ứng Trong Cocos2d-x 3.x.x
    Bài viết nằm trong loạt bài viết của chương trình Tự Học Cocos2d-x ...

    Khám phá

    Làm Thế Nào Để Tạo Fixtures Cho Vật Có Hình Dạng Phức Tạp Trong Cocos2d-x?
    Hướng dẫn sử dụng phần mềm Physics Editor dùng để tạo Fixtures cho vật ...
    Sprite Sheet Trong Cocos2dx 3.x.x
    Giới thiệu khái niệm, tác dụng, cách tạo và sử dụng Sprite Sheets trong ...
    Tạo Tilemap Trong Cocos2d-x 3.x.x
    Hướng dẫn tạo tilemap với Titled và sử dụng tilemap vào project game.
    Phát Triển Game Funny Halloween Pumpkins với Cocos2d-x - Phần 1
    Hướng dẫn làm game cụ thể bằng Cocos2d-x với code mẫu và game mẫu.
    Action Cho Sprite Trong Cocos2d-x 3.x.x
    Tìm hiểu về action của Sprite trong Cocos2d-x 3.x.x.
    Tạo High Score với Cocos2d-x 3.x.x
    Bài viết hướng dẫn lưu dữ liệu với các kiểu interger, float, double hay ...
    Giới Thiệu Về Sprite Trong Cocos2d-x 3.x.x
    Giới thiệu tổng quan về khái niệm cơ bản, một số cách dùng để khởi tạo ...
    Xử Lý Sự Kiện Trong Cocos2d-x 3.x.x
    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. ...
    Khi bạn nhấn vào liên kết sản phẩm do STDIO đề xuất và mua hàng, STDIO có thể nhận được hoa hồng. Điều này hỗ trợ STDIO tạo thêm nhiều nội dung hữu ích. Tìm hiểu thêm.
    STDIO
    Trang chính
    Công ty TNHH STDIO

    30, Trịnh Đình Thảo, Hòa Thạnh, Tân Phú, Hồ Chí Minh
    +84 28.36205514 - +84 942.111912
    developer@stdio.vn

    383/1 Quang Trung, Phường 10, Quận Gò Vấp, Hồ Chí Minh
    Số giấy phép ĐKKD: 0311563559 do sở Kế hoạch và Đầu Tư TPHCM cấp ngày 23/02/2012

    ©STDIO, 2013 - 2020