zoukankan      html  css  js  c++  java
  • 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,然后再跑到左边,然后循环。。。

    恩,大概就这样子


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


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


  • 相关阅读:
    Android 优雅的让Fragment监听返回键
    Android 去掉TabLayout下的阴影,AppBarLayout下的阴影
    mongodb.conf配置文件详解
    Ubuntu14.04下Mongodb的Java API编程实例(手动项目或者maven项目)
    Ubuntu14.04下初步使用MongoDB
    如何做到Ubuntu14.04下的mongdb远程访问?(图文详解)
    Ubuntu14.04下Mongodb(在线安装方式|apt-get)安装部署步骤(图文详解)(博主推荐)
    neo4j的配置文件(图文详解)
    Ubuntu14.04下Neo4j图数据库官网安装部署步骤(图文详解)(博主推荐)
    Ubuntu16.04下Neo4j图数据库官网安装部署步骤(图文详解)(博主推荐)
  • 原文地址:https://www.cnblogs.com/fzll/p/3954600.html
Copyright © 2011-2022 走看看