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,然后再跑到左边,然后循环。。。

恩,大概就这样子


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


每次写博客都要花好多时间,快要累觉不爱了。。。


  • 2
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
About CocoStudio is a game development tool kit based on Cocos2d-x. It breaks down tasks in game development into different roles, it includes: UI editor for UI graphic artists, Animation editor for graphic artists, Number cruncher for game data designers, Scene editor for game designers CocoStudio forms a complete game development solution. The UI editor The UI was designed to serve its only purpose: create UI for games. Its simple and intuitive interface allows graphic artists to focus on their expertise, without worrying about other aspects such as programming. Currently the UI editor has 12 different UI elements ready to be used in games, new UI elements will be added with each and every release of CocoStudio, Other key features that the UI editor supports are: Texture packaging - Automatically packs individual texture files into a single large sprite, which further saves memory and improves game performance. Multi-resolution adaption - Automatically adapts to multiple resolution sizes with relative UI positioning. Templating - Reuse the same UI layout across different games, swap out texture resources to give it a new look. The Animation editor The Animation editor was designed to feel like Adobe Flash, which makes graphic artists feel right at home. The Animation editor brings skeletal animation to Cocos2d-x. What advantage does skeletal animation holds against the traditional frame animation? Lower memory consumption - An animation with the traditional frame based solution could use dozens of individual textures, but with skeletal animation, only 1 set of body parts is required to make infinite number of different animations. Smaller file size - due to less number of assets. Animation blending - you can combine animations together to easily make new animation, for example, you could blend attacking animation with walk animation to create "attacking while walking animation". Animation reuse - you can share skeletal animations with another character with the same skeleton setup. Smooth interpolation - traditional frame based animation is very choppy especially in slow motion. Skeletal animation interpolates between 2 sets of key frames, so animation is always played at the same frame rate as the game. However Skeletal animation cannot replace the traditional frame based animation, for example, it cannot make isometric character, it cannot make explosion, that is why we did not forget frame based animation, we even made it better and simpler. You only have to drag and drop frame sequences to the work space, and the animation editor will automatically creates the frame animation for you. Other highlight of Animation editor includes: WYSIWYG collision box editing - editing collision box in wysiwyg way has never being easier and accurate. Reference point - enables characters to wield swords, mount horses, and attaching other objects easily. Texture packing - Automatically packs individual texture files into a single large sprite, which further saves memory and improves game performance. The Data Cruncher The data Cruncher imports excel tables and converts the data into a format readable by cocos2d-x, which can also be used as a component for the Scene editor. The Scene editor The scene editor pieces all the assets made by the UI editor, Animation editor, and the Data Cruncher into a game scene, it can then simulate the game inside the editor. The scene editor also supports many assets made from third party editors such as particle designer, tiled etc. The scene editor relies on the CocosStudio Framework. CocoStudio Framework CocoStudio Framework is an open source higher level framework on top of Cocos2d-x, it employes entity and component system, it is used to read the data saved from the scene editor. The Scene editor saves data in a MVC like fashion, it includes all entities and events used in the current scene, and exports to corresponding code template for the programmers. A programmer can then write the code in Javascript to bring the game alive. CocoStudio的安装 1.CocoStudio的运行平台是Windows操作系统,推荐使用Windows7操作系统。 2.安装CocoStudio之前,确保电脑中安装了.Net 4.0 Framework 3.安装目录尽量不要在C盘的Program Files文件夹下,可能会导致启动器无法启动编辑器。当然,通过“以管理员身份运行”的方式也可以打开软件 4.在Xp和Windows8的操作系统下,可能会出现的闪屏或无法运行的问题。这个问题会尽快修复
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值