1. 程式人生 > >Cocos2d-X使用CCAnimation建立動畫

Cocos2d-X使用CCAnimation建立動畫

動畫在遊戲中是非常常見的

程式1:建立一個簡單的動畫

首先需要在工程目錄下的Resource資料夾中放一張有各種不同動作的圖片

在程式中新增下面的程式碼

#include "Animation.h"

CCScene* Animation::scene()
{
    CCScene* s = CCScene::create();

    Animation* layer = Animation::create();

    s->addChild(layer);

    return s;
}

bool Animation::init()
{
  CCLayer::init();

    CCSize winSize = CCDirector::sharedDirector()->getWinSize();

    //建立精靈
    CCSprite* sp = CCSprite::create();
    sp->setPosition(ccp(winSize.width / 2, winSize.height / 2));
    addChild(sp);

    //精靈放大4倍
    sp->setScale(4);

    //建立紋理
    CCTexture2D* texture = CCTextureCache::sharedTextureCache()->addImage("walkLeft.png");

    //建立一個數組
    CCArray* arr = CCArray::create();

    //從紋理中扣了10幀frame,組成陣列
    for(int i = 0; i < 10; i++)
    {
        //使用紋理建立精靈幀
        //第一個引數:紋理
        //第二個引數:矩形
        CCSpriteFrame* frame = CCSpriteFrame::createWithTexture(texture,
           
            //第一個引數:矩形的x座標
            //第二個引數:矩形的y座標
            //第三個引數:矩形的寬度
            //第四個引數:矩形的高度
            CCRect(i*18, 0, 18, 32));

        arr->addObject(frame);
    }

    //使用精靈幀建立動畫
    //第一個引數:陣列
    //第二個引數:動畫的幀數(播放兩張圖片的間隔時間)
    CCAnimation* animation = CCAnimation::createWithSpriteFrames(arr, 0.1f);
    CCAnimate* animate = CCAnimate::create(animation);

    //播放動畫
    //CCRepeatForever::create動畫播放無限次
    sp->runAction(CCRepeatForever::create(animate));

    return true;
}

執行結果:

程式2:有plist檔案的動畫載入

首先需要在工程目錄下的Resource資料夾中放一張有各種不同動作的圖片和一個plist檔案

plist格式的檔案實際上是一個XML檔案,檔案中的內容

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple Computer//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
    <dict>
        <key>frames</key>
        <dict>
            <key>Boom_1.png</key>
            <dict>
                <key>frame</key>
                <string>{{204,305},{99,99}}</string>
                <key>offset</key>
                <string>{0,0}</string>
                <key>rotated</key>
                <false/>
                <key>sourceColorRect</key>
                <string>{{0,0},{99,99}}</string>
                <key>sourceSize</key>
                <string>{99,99}</string>
            </dict>
            <key>Boom_10.png</key>
            <dict>
                <key>frame</key>
                <string>{{103,307},{99,99}}</string>
                <key>offset</key>
                <string>{0,0}</string>
                <key>rotated</key>
                <false/>
                <key>sourceColorRect</key>
                <string>{{0,0},{99,99}}</string>
                <key>sourceSize</key>
                <string>{99,99}</string>
            </dict>
            <key>Boom_11.png</key>
            <dict>
                <key>frame</key>
                <string>{{103,206},{99,99}}</string>
                <key>offset</key>
                <string>{0,0}</string>
                <key>rotated</key>
                <false/>
                <key>sourceColorRect</key>
                <string>{{0,0},{99,99}}</string>
                <key>sourceSize</key>
                <string>{99,99}</string>
            </dict>
            <key>Boom_12.png</key>
            <dict>
                <key>frame</key>
                <string>{{105,2},{99,99}}</string>
                <key>offset</key>
                <string>{0,0}</string>
                <key>rotated</key>
                <false/>
                <key>sourceColorRect</key>
                <string>{{0,0},{99,99}}</string>
                <key>sourceSize</key>
                <string>{99,99}</string>
            </dict>
            <key>Boom_13.png</key>
            <dict>
                <key>frame</key>
                <string>{{103,105},{99,99}}</string>
                <key>offset</key>
                <string>{0,0}</string>
                <key>rotated</key>
                <false/>
                <key>sourceColorRect</key>
                <string>{{0,0},{99,99}}</string>
                <key>sourceSize</key>
                <string>{99,99}</string>
            </dict>
            <key>Boom_14.png</key>
            <dict>
                <key>frame</key>
                <string>{{2,2},{101,101}}</string>
                <key>offset</key>
                <string>{0,0}</string>
                <key>rotated</key>
                <false/>
                <key>sourceColorRect</key>
                <string>{{0,0},{101,101}}</string>
                <key>sourceSize</key>
                <string>{101,101}</string>
            </dict>
            <key>Boom_15.png</key>
            <dict>
                <key>frame</key>
                <string>{{2,408},{99,99}}</string>
                <key>offset</key>
                <string>{0,0}</string>
                <key>rotated</key>
                <false/>
                <key>sourceColorRect</key>
                <string>{{0,0},{99,99}}</string>
                <key>sourceSize</key>
                <string>{99,99}</string>
            </dict>
            <key>Boom_16.png</key>
            <dict>
                <key>frame</key>
                <string>{{2,307},{99,99}}</string>
                <key>offset</key>
                <string>{0,0}</string>
                <key>rotated</key>
                <false/>
                <key>sourceColorRect</key>
                <string>{{0,0},{99,99}}</string>
                <key>sourceSize</key>
                <string>{99,99}</string>
            </dict>
            <key>Boom_17.png</key>
            <dict>
                <key>frame</key>
                <string>{{2,206},{99,99}}</string>
                <key>offset</key>
                <string>{0,0}</string>
                <key>rotated</key>
                <false/>
                <key>sourceColorRect</key>
                <string>{{0,0},{99,99}}</string>
                <key>sourceSize</key>
                <string>{99,99}</string>
            </dict>
            <key>Boom_18.png</key>
            <dict>
                <key>frame</key>
                <string>{{2,105},{99,99}}</string>
                <key>offset</key>
                <string>{0,0}</string>
                <key>rotated</key>
                <false/>
                <key>sourceColorRect</key>
                <string>{{0,0},{99,99}}</string>
                <key>sourceSize</key>
                <string>{99,99}</string>
            </dict>
            <key>Boom_2.png</key>
            <dict>
                <key>frame</key>
                <string>{{204,204},{99,99}}</string>
                <key>offset</key>
                <string>{0,0}</string>
                <key>rotated</key>
                <false/>
                <key>sourceColorRect</key>
                <string>{{0,0},{99,99}}</string>
                <key>sourceSize</key>
                <string>{99,99}</string>
            </dict>
            <key>Boom_3.png</key>
            <dict>
                <key>frame</key>
                <string>{{406,103},{99,99}}</string>
                <key>offset</key>
                <string>{0,0}</string>
                <key>rotated</key>
                <false/>
                <key>sourceColorRect</key>
                <string>{{0,0},{99,99}}</string>
                <key>sourceSize</key>
                <string>{99,99}</string>
            </dict>
            <key>Boom_4.png</key>
            <dict>
                <key>frame</key>
                <string>{{305,103},{99,99}}</string>
                <key>offset</key>
                <string>{0,0}</string>
                <key>rotated</key>
                <false/>
                <key>sourceColorRect</key>
                <string>{{0,0},{99,99}}</string>
                <key>sourceSize</key>
                <string>{99,99}</string>
            </dict>
            <key>Boom_5.png</key>
            <dict>
                <key>frame</key>
                <string>{{204,103},{99,99}}</string>
                <key>offset</key>
                <string>{0,0}</string>
                <key>rotated</key>
                <false/>
                <key>sourceColorRect</key>
                <string>{{0,0},{99,99}}</string>
                <key>sourceSize</key>
                <string>{99,99}</string>
            </dict>
            <key>Boom_6.png</key>
            <dict>
                <key>frame</key>
                <string>{{408,2},{99,99}}</string>
                <key>offset</key>
                <string>{0,0}</string>
                <key>rotated</key>
                <false/>
                <key>sourceColorRect</key>
                <string>{{0,0},{99,99}}</string>
                <key>sourceSize</key>
                <string>{99,99}</string>
            </dict>
            <key>Boom_7.png</key>
            <dict>
                <key>frame</key>
                <string>{{307,2},{99,99}}</string>
                <key>offset</key>
                <string>{0,0}</string>
                <key>rotated</key>
                <false/>
                <key>sourceColorRect</key>
                <string>{{0,0},{99,99}}</string>
                <key>sourceSize</key>
                <string>{99,99}</string>
            </dict>
            <key>Boom_8.png</key>
            <dict>
                <key>frame</key>
                <string>{{206,2},{99,99}}</string>
                <key>offset</key>
                <string>{0,0}</string>
                <key>rotated</key>
                <false/>
                <key>sourceColorRect</key>
                <string>{{0,0},{99,99}}</string>
                <key>sourceSize</key>
                <string>{99,99}</string>
            </dict>
            <key>Boom_9.png</key>
            <dict>
                <key>frame</key>
                <string>{{103,408},{99,99}}</string>
                <key>offset</key>
                <string>{0,0}</string>
                <key>rotated</key>
                <false/>
                <key>sourceColorRect</key>
                <string>{{0,0},{99,99}}</string>
                <key>sourceSize</key>
                <string>{99,99}</string>
            </dict>
        </dict>
        <key>metadata</key>
        <dict>
            <key>format</key>
            <integer>2</integer>
            <key>realTextureFileName</key>
            <string>PFBoom.png</string>
            <key>size</key>
            <string>{512,512}</string>
            <key>textureFileName</key>
            <string>PFBoom.png</string>
        </dict>
    </dict>
</plist>

程式程式碼:

#include "Animation.h"

CCScene* Animation::scene()
{
    CCScene* s = CCScene::create();

    Animation* layer = Animation::create();

    s->addChild(layer);

    return s;
}

//有plist檔案的動畫載入
bool Animation::init()
{
    CCLayer::init();

    CCSize winSize = CCDirector::sharedDirector()->getWinSize();

    //建立精靈
    CCSprite* sp = CCSprite::create();
    sp->setPosition(ccp(winSize.width / 2, winSize.height / 2));
    addChild(sp);

    //精靈放大4倍
    sp->setScale(4);


    //建立精靈幀快取
    CCSpriteFrameCache* frameCache = CCSpriteFrameCache::sharedSpriteFrameCache();
	
    //建立陣列
    CCArray* arr = CCArray::create();
	
    //新增Plist檔案
    frameCache->addSpriteFramesWithFile("PFBoom.plist");

	for (int i = 1; i <= 18; i++)
	{
		char key[128];

        //通過名字獲取精靈幀所在的圖片
		sprintf(key, "Boom_%d.png", i);

        //將圖片新增到精靈幀中
		CCSpriteFrame* frame = frameCache->spriteFrameByName(key);

        //將精靈幀新增到陣列中
		arr->addObject(frame);
	}

    //使用陣列建立動畫
	CCAnimation* animation = CCAnimation::createWithSpriteFrames(arr, 0.1f);
	CCAnimate* animate = CCAnimate::create(animation);

    //動畫消失
	CCCallFunc* callfunc = CCCallFunc::create(sp, callfunc_selector(CCSprite::removeFromParent));
    CCSequence* seq = CCSequence::create(animate, callfunc, NULL);
	
    //播放動畫
   sp->runAction(seq);
   
    return true;
}

執行結果:

程式3:通過滑鼠實現動畫切換

首先建立一個Animation類

在AnimationPreload.h中新增下面程式碼

#ifndef __AnimationPreload_H__
#define __AnimationPreload_H__

#include "cocos2d.h"
USING_NS_CC;

class AnimationPreload : public CCLayer
{
public:
    static CCScene* scene();
    
    bool init();

    CREATE_FUNC(AnimationPreload);
    
    bool ccTouchBegan(CCTouch*, CCEvent*);

    CCSprite* sp;
};

#endif


在AnimationPreload.cpp中新增下面的程式碼

#include "AnimationPreload.h"

CCScene* AnimationPreload::scene()
{
    CCScene* s = CCScene::create();

    AnimationPreload* layer = AnimationPreload::create();

    s->addChild(layer);

    return s;
}

bool AnimationPreload::init()
{
    //chushihu
    CCLayer::init();

    //獲取視窗的大小
    CCSize winSize = CCDirector::sharedDirector()->getWinSize();

	//(建立紋理)從紋理里扣了10幀frame,組成陣列
	CCTexture2D* texture = CCTextureCache::sharedTextureCache()->addImage("walkLeft.png");
	
    //建立陣列
    CCArray* arr = CCArray::create(); //retain
	
    for (int i = 9; i >= 0; i--)
	{
        //建立精靈幀
		CCSpriteFrame* frame = CCSpriteFrame::createWithTexture(texture,
			CCRect(i*18, 0, 18, 32));

        //將精靈幀新增到陣列中
		arr->addObject(frame);
	}

	// 通過陣列建立動畫
	CCAnimation* animation = CCAnimation::createWithSpriteFrames(arr, 0.05f);

	// 加入到快取
	CCAnimationCache::sharedAnimationCache()->addAnimation(animation, "MarioRun");
	

	/***************************************************************/
	/** 有plist檔案的動畫載入 **/

    //建立精靈幀快取
	CCSpriteFrameCache* frameCache = CCSpriteFrameCache::sharedSpriteFrameCache();

    //建立陣列
	arr = CCArray::create();

    //將plist檔案新增到精靈幀快取中
	frameCache->addSpriteFramesWithFile("PFBoom.plist");

	for (int i = 1; i <= 18; i++)
	{
		char key[128];

         //通過名字獲取精靈幀所在的圖片  
		sprintf(key, "Boom_%d.png", i);

        //將圖片新增到精靈幀中
		CCSpriteFrame* frame = frameCache->spriteFrameByName(key);

        //將精靈幀新增到陣列中
		arr->addObject(frame);
	}
	
    //建立動畫
    animation = CCAnimation::createWithSpriteFrames(arr, 0.1f);
	
    // 加入到快取
	CCAnimationCache::sharedAnimationCache()->addAnimation(animation, "PlaneBOOM");

	sp = CCSprite::create();
	sp->setPosition(ccp(winSize.width / 2, winSize.height / 2));
	addChild(sp);

    //精靈方法4倍
    sp->setScale(4);
	
	// setTouch
	setTouchEnabled(true);
	setTouchMode(kCCTouchesOneByOne);

	return true;
}

bool AnimationPreload::ccTouchBegan(CCTouch*, CCEvent*)
{
   sp->stopAllActions();

	static int i = 1;
	
    if (i == 1)
	{
		sp->runAction(CCAnimate::create(
			CCAnimationCache::sharedAnimationCache()->animationByName("PlaneBOOM")
			));
	}
	else
	{
		sp->runAction(CCAnimate::create(
			CCAnimationCache::sharedAnimationCache()->animationByName("MarioRun")
			));
	}

	i = 1 - i;
	
    return 0;
}

執行結果:

 

相關推薦

Cocos2d-X使用CCAnimation建立動畫

動畫在遊戲中是非常常見的 程式1:建立一個簡單的動畫 首先需要在工程目錄下的Resource資料夾中放一張有各種不同動作的圖片 在程式中新增下面的程式碼 #include "Animation.h" CCScene* Animation::scene() {

關於cocos2d序列幀動畫plist檔案的建立

轉載請註明出處 用過的人都知道,cocos2d的動畫編輯器是多麼的坑,自從cocos2d支援Animation後,開始使用Animation動畫了。關於Animation的使用網上也有很多,但是我看了一下,主流的就是兩種方法,一是:手動新增,將plist檔案裡的精靈幀一

CCAnimation建立動畫cocos2d-x

   CCSize s = CCDirector::sharedDirector()->getWinSize();    //載入動畫所需紋理圖片    CCTexture2D *texture = CCTextureCache::sharedTextureCache

cocos2d-js系列問題】cocos2d-js建立動畫的兩種方法

不過在這之前,一定要先把圖片載入到記憶體當中去;其實你也可以不加,但是需要換另外一個函式就行; //將plist問價載入到記憶體當中 cc.spriteFrameCache.addSpriteFrames(res.play_plist); 第一種方法: 建立一個空的精靈

cocos2d正確建立和釋放物件,引用計數器的使用

void Ref::release() { CCASSERT(_referenceCount > 0, "reference count should greater than 0"); --_referenceCount; if (_referenceCou

android studio 建立動畫時報錯:Error: style attribute '@android:attr/windowExitAnimation' not found的解決辦法

在編寫安卓動畫時,遇到了Error: style attribute '@android:attr/windowExitAnimation' not found的報錯style中的程式碼如下<!-- 進出場動畫都用到的anim style--> <s

Cocos2d-序列幀動畫

基礎原理 Cocos2d-x中,動畫的具體內容是依靠精靈顯示出來的,為了顯示動態圖片,我們需要不停切換精靈顯示的內容,通過把靜態的精靈變為動畫播放器從而實現動畫效果。動畫由幀組成,每一幀都是一個紋理,我們可以使用一個紋理序列來建立動畫。 我們使用Animat

css3中建立動畫的三種方式詳解

$div1.transition({ transform : "translateX(300px)" },3000,"linear", function(){ $div2.transition({ transform : "translateX(300px)" },30

Cocos2d-HTML5--人物動畫

首先看下人物動畫效果 實現步驟 製作人物動作圖片 在程式碼中提取動作圖片 將圖片組成每一種狀態的動作 實現不同動作間的切換 製作人物動作圖片 相關技術 Plist 通過將小的圖片組合成一張大圖,可以減少讀取圖片的次數來優化效能 Pli

cocos2d-x 建立工程

Creating a multi-platform project of Cocos2d-x 開啟 Terminal 終端. 使用cd 命令跳轉到你解壓cocos2d-x的目錄, 如下: cd ~/Documents/project/cocos2d-x-2.1.

關於Cocos2d-x的動畫動作的記錄

這裡是關於Cocos2d-x遊戲開發學習中的關於精靈動作的程式碼在這裡記錄,以作備忘。(沒有添加註釋的動作,即曾經建立過並寫過註釋,所以第二次建立沒寫註釋)#include "HelloWorldScene.h"USING_NS_CC;CCScene* HelloWorld:

cocos2d精靈與動畫

總結一些精靈與動畫操作的方法,其實主要是對CCSpriteFrameCache和CCAnimationCache的理解與使用 [[CCSpriteFrameCache sharedSpriteFrameCache] addSpriteFramesWithFile:@"Ji

如何用jQuery的animate()方法建立動畫

今天,給大家講講用JavaScript的jQuery庫建立動畫,那麼建立動畫我們用到的是animate()方法,其實方法比較簡單,所以很少有人專門寫這個東西,那麼我今天就給剛入門的小白同學門講一講如何用該方法,看完一定自己動手實現一下哦! animate(

第15章 動畫基礎(1)——概述、通過程式碼建立動畫動畫的生命週期

一、動畫概述 ①動畫是WPF模型的核心部分。這意味著為了讓動畫動起來,不需要使用計時器以及事件處理程式碼,只需要使用宣告的方式即可建立動畫。 ②WPF動畫是基於屬性的動畫。本質上,WPF動畫只不

cocos2d-x幀動畫實現(續)

猴子原創, 歡迎轉載,轉載請在明顯處註明! 謝謝。 幀動畫就是很多張png的序列圖實現輪流播放產生動畫效果。 那麼首先我們要一套動畫的序列圖,沒有圖的可以看引擎例子裡面的圖。很多張圖我們可以採

Cocos2d-x開發實例介紹幀動畫使用

rect http splay end ram nal cache wtl 布爾 以下我們通過一個實例介紹一下幀動畫的使用。這個實比例如以下圖所看到的,點擊Gobutton開始播放動畫,這時候播放button標題變為Stop,點擊Stopbutton能夠停止播放動畫。以下

Cocos2d-x3.3beta0創建動畫的3種方式

sprintf action frame idt adding instance 修改 name 工具 1、單獨載入精靈對象 渲染效率低,浪費資源,不推薦用該方法。代碼例如以下:註:代碼僅僅需貼到HelloWorldScene.cpp中就可以。 //First,單獨渲染

cocos2d學習-動畫緩存和動畫創建

數字 color tsp div -- ret 創建 判斷 true 涉及的相關函數和類 動畫幀 SpriteFrame 幀緩存 SpriteFrameCache 動畫創建的方法 需要的參數:動畫幀圖片的名字,圖片數量,幀時間間隔,循環次數 創建一個動畫首先要聲明一個圖片幀

Three.js基礎:建立Cube並實現鼠標交互,動畫旋轉

src style icm document charset char itl () wid index.html文件: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <

Cocos2d-x可以實現的動畫效果

動畫效果 ace 所在 nsh ans self 翻頁 led face 動作(Actions)move移動:moveto/moveby 從一個位置移動到另外一個位