cocos2dx 3.0 簡單使用 CocoStudio Animation Editor


原來有一兩個人說我不帥的時候,我不以爲意,逗我玩而已,後來幾乎所有

人都說我不帥,我才真正意識到事態的嚴重,這社會騙子真是越來越多了...


好吧我承認,這個笑話不好笑,其實我想說的是,做人一定要堅持自己的原則,

哪怕有一天所有人都和你背道而馳,都不要放棄自己當初的夢想,如果有一天,

我們淹沒在人海之中,庸碌一生,那是因爲我們不夠努力,不夠勇敢的去面對生活

每天積累一點點,嗯,滿足簡單的快樂。


--------------------------------------------------------------------------------------------

先來一張效果圖,覺得太醜請自行忽略~~好吧,不太會做gif圖,下面這張用美圖秀秀做的,求大神支招,爲毛這gif圖不能動?




昨天寫了一篇關於怎麼使用CocoStudio UI Editor的博文,有需要可以點這裏  傳送 門,然後今天看了一下animation editor的用法,覺得這東西其實還是蠻簡單的,不過竟然折騰了一下午(不小心又暴露了水平,哈哈)人總是在不斷成長中收穫自己,認識自己,然後總會不斷的去感悟和體驗生活,恩,扯遠了。。。


首先打開Animation Editor 這玩意,然後新建一個工程 “NewAnimation” 名字當然隨意取啦,然後我們先看下面這一張圖


首先,先忽略這張醜圖。。。


簡單介紹:(真的很簡單)

1.Animation Editor這玩意有兩種模式,分別是形體模式 和 動畫模式 ,點擊可以變身的,

2..對象結構和屬性面板。

3.資源面板,可以直接拖文件進來

4.工具欄,可以創建骨骼,隱藏骨骼等等


先拼圖:

1.導入資源(其實資源都來自cpp-test)

2.把圖片資源拖到左邊的面板中,注意一下,點擊圖片可以設置旋轉角度的哦,看到圖片中的大保健了木有,按LOL小智的話來講,就是雖然我短,但是我可以旋轉。

3.拼接成一個小人


然後是創建骨骼:

1.點擊框框4中的一個“創建骨骼”按鈕,然後在面板中鼠標點擊的位置就是骨骼的位置,一般我們放在你要綁定骨骼的圖片資源上。

2.右鍵你的圖片資源,然後選擇綁定到骨骼,然後鼠標移動到你需要綁定的骨骼上,這時候會高亮顯示,單擊骨骼,綁定成功

3.然後你會發現對象結構面板裏 圖片 和 骨骼 合體了有木有

需要注意的是:

1.骨骼有兩種形態,一種是4個方向舒展的(下圖標註3),一種是一個方向的子骨骼(下圖1,2)

2.單擊屏幕是創建4個方向形態的,單擊屏幕然後拖動是創建子骨骼

3.骨骼可以有父節點,比如下面這張圖,2是1的父親,2動1也要跟着動



把所有我們需要活動的圖片都綁定上骨骼,然後切換到動畫模式


然後我們看下面這張圖。。。


     1.動作列表: 在這裏添加你需要的動作,我這裏已經添加了倆個

2.屬性面板:對應骨骼的屬性,你可以設置每一幀這個骨骼的屬性(比如旋轉啊,移動啊。。)

3.動畫幀面板:下面一個個comet,bone1,bone2。。。對應的就是圖片中的骨骼了,對應右邊是這些骨骼的幀動畫狀態(比如bone1 在第5,10,15,20,25,30幀下面有一個小白點,說明在這些個幀都有一個畫面,這些畫面組成了bone1的動畫)

4.添加關鍵幀,就是添加途中小白點的意


然後值得一提的是,右擊幀可以隱藏這些幀圖像,點擊這些小白點,也就是幀片段,比如點擊bone1的第5幀畫面,可以設置他的幀曲線(右下角),讓動作看起來不那麼僵硬,好吧,我用的也不多,再說就要暴露些神馬了。。

還有一個小技巧就是,我們可以選擇bone1 ,bone2,bone3.等所有的骨骼,選中第0幀的小白點,然後複製,然後在結束幀第30幀粘貼上去,這樣子可以保證開始和結束是同一幀,然後在中間幀設置一下骨骼的屬性(旋轉角度,移動距離等),比如我們可以在第15幀設置骨骼的屬性,然後在分別在第5,10,20,25幀直接創建小白點,這樣子他會自動設置第5,10,20,25這些幀屬性的值(其實就是取均值)


恩,添加完後可以播放看一下效果哦~~


然後導出資源,放入程序Resoures文件夾



等等,Comet.plist是神馬東西?


其實這是一個粒子屬性的plist文件。在程序代碼中,可以用plist文件來創建粒子,也可以使用ParticleSystemPoint或者CCParticleSystemQuad來創建

具體我就不解釋了,給出一篇文章 cocos2d-x CCParticleSystem粒子系統 

或者可以直接參考cpp-test,這個真心是一個好東西,發現好多人不看cpp-test然後在羣裏面直接問這裏問那裏,恩,雖然我以前也這樣子。。。

這裏我們使用plist讓頭部噴火,沒錯,老闆再不發工資就發火了 (我們可以讓comet在第0幀隱藏,然後在第30幀顯示,也就是等其他骨骼執行完後我們再噴火)



然後就是在代碼中如何使用這些動畫,我們把操作都放在這一個Layer中


頭文件如下

#pragma once 

#include "cocos2d.h"
#include "cocostudio/CocoStudio.h"
#include "ui/CocosGUI.h"

using namespace cocos2d;
using namespace cocostudio;
using namespace ui;

class CocoStudio_AnimationTest : public Layer{
public:
	virtual bool init();
	CREATE_FUNC(CocoStudio_AnimationTest);
	//動畫監聽事件
	void animationEvent(cocostudio::Armature *armature, cocostudio::MovementEventType movementType, const std::string& movementID);

};

cpp文件如下,代碼就沒神馬好解釋了吧,這玩意隨便看看就能懂(不裝會死?)


#include "CocosStudio_AnimationTest.h"


bool CocoStudio_AnimationTest::init(){
	if(!Layer::init()){
		return false;
	}

	auto visibleSize = Director::getInstance()->getVisibleSize();
	//如果資源太大太多可以用這種方式加載
//	ArmatureDataManager::getInstance()->addArmatureFileInfoAsync("xxx.ExportJson", this, schedule_selector("回調函數"));

	ArmatureDataManager::getInstance()->addArmatureFileInfo("cocosAnimation/NewAnimation.ExportJson");
	Armature* armature = Armature::create("NewAnimation");
	armature->getAnimation()->play("GOGOGO");
	armature->setPosition(Point::ZERO);
	armature->setAnchorPoint(Point::ZERO);
	armature->setScale(0.5f);
	this->addChild(armature);

	//添加動畫監聽
	 armature->getAnimation()->setMovementEventCallFunc(CC_CALLBACK_0(CocoStudio_AnimationTest::animationEvent, this, std::placeholders::_1, std::placeholders::_2, std::placeholders::_3));

}

void CocoStudio_AnimationTest::animationEvent(cocostudio::Armature *armature, cocostudio::MovementEventType movementType, const std::string& movementID){

	 if (movementType == LOOP_COMPLETE){
		 if (movementID == "GOGOGO"){
			 //
			 ActionInterval *actionToRight = MoveTo::create(2, Point(800 , 0));
			 armature->stopAllActions();
			 armature->runAction(actionToRight);
			 armature->getAnimation()->play("GOGOGO_2");
		 }else if(movementID == "GOGOGO_2"){
			 // 
			 ActionInterval *actionToLeft = MoveTo::create(2, Point::ZERO);
			 armature->stopAllActions();
			 armature->runAction(actionToLeft);
			 armature->getAnimation()->play("GOGOGO");
		 }

	 }
}

好吧,還是解釋一下,大概就是我們讓這小人執行完動作GOGOGO然後跑到右邊,再執行GOGOGO_2,然後再跑到左邊,然後循環。。。

恩,大概就這樣子


 ----------------------------------------------------


每次寫博客都要花好多時間,快要累覺不愛了。。。


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章