Cocos2dx 3.0 过渡篇(十五)帧动画的存储播放

简介: <span style="color:rgb(54,46,43); font-family:Arial; font-size:14px; line-height:26px">前两篇博文用恶搞的形式写了action的相关使用,这算是自己的一种尝试,也可以说是心情的发泄。</span><br style="color:rgb(54,46,43); font-family:Arial; font
前两篇博文用恶搞的形式写了action的相关使用,这算是自己的一种尝试,也可以说是心情的发泄。
本篇是action三板斧的最后一板,经过深思熟虑后,我决定就用正常人的方式写吧...


这次主要介绍动画的创建即存储,要实现的功能有:
1、创建四组动画,并存放至Array中;
2、创建四个虚拟方向按钮,控制精灵移动与播放相应方向的动画;


----------------------------------------------------------------------------------------------------------------------------------------------
实现过程如下:

1、事前准备:宏定义每帧精灵图片的宽高,用枚举事先确定四个方向对应的tag

[cpp]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. #define BIRD_WIDTH  186   //宽  
  2. #define BIRD_HIGHT  150   //高  
  3.   
  4. enum dirTag  
  5. {  
  6.     Tag_left = 0,  
  7.     Tag_down,  
  8.     Tag_up,  
  9.     Tag_right,  
  10. };  
2、初始化存放动画的数组,并创建一只鸟人..

[cpp]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. anim_array = Array::create();//存放四组方向动画的数组  
  2. anim_array->retain();//记得retain  
  3.   
  4.   
  5. bird = Sprite::create("bird.png",Rect(0,0,186,150));//创建一只鸟人  
  6. bird->setPosition(Point(350,400));  
  7. this->addChild(bird,1);  
3、获取每帧的图片并做成动画。图片如下:


因为该图片是没有对应的plist文件,所以需要将每张图片分别从大图中 切割 出来。已知每张图片的宽为186,高为150.

[cpp]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. SpriteFrame* frame = NULL;  
  2. auto frameArray = Array::create();  
  3. for(int i=0;i<4;i++)  
  4. {  
  5.     for(int j=0;j<4;j++)  
  6.     {  
  7.         frame = SpriteFrame::create("bird.png",Rect(j*BIRD_WIDTH,i*BIRD_HIGHT,BIRD_WIDTH,BIRD_HIGHT));  
  8.         frameArray->addObject(frame);  
  9.     }  
  10.   
  11.     auto animation = Animation::createWithSpriteFrames(frameArray,0.15f);//0.15s一帧  
  12.     auto animate = Animate::create(animation);  
  13.     frameArray->removeAllObjects();//清楚数组,为下一组动画做准备  
  14.     anim_array->addObject(animate);//将改组动画放入anim_array中  
  15. }  
4、创建四个虚拟按钮
[cpp]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. //创建四个精灵,作为控制方向的按钮,并设置相应的tag  
  2. auto left_btn = Sprite::create("CloseNormal.png");  
  3. left_btn->setPosition(Point(370,150));  
  4. left_btn->setTag(Tag_left);  
  5. this->addChild(left_btn,1);  
  6.   
  7. auto right_btn = Sprite::create("CloseNormal.png");  
  8. right_btn->setPosition(Point(300,150));  
  9. right_btn->setTag(Tag_right);  
  10. this->addChild(right_btn,1);  
  11.   
  12. auto up_btn = Sprite::create("CloseNormal.png");  
  13. up_btn->setPosition(Point(335,185));  
  14. up_btn->setTag(Tag_up);  
  15. this->addChild(up_btn,1);  
  16.   
  17. auto down_btn = Sprite::create("CloseNormal.png");  
  18. down_btn->setPosition(Point(335,115));  
  19. down_btn->setTag(Tag_down);  
  20. this->addChild(down_btn,1);  
5、因为是用精灵作为按钮,所以需要添加相应的触摸监听事件
[cpp]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. auto listener = EventListenerTouchOneByOne::create();//创建一个触摸监听(单点触摸)  
  2. listener->onTouchBegan = CC_CALLBACK_2(HelloWorld::onTouchBegan, this);//指定触摸的回调函数  
  3. listener->onTouchEnded = CC_CALLBACK_2(HelloWorld::onTouchEnded, this);  
  4. listener->onTouchMoved = CC_CALLBACK_2(HelloWorld::onTouchMoved, this);  
  5. _eventDispatcher->addEventListenerWithSceneGraphPriority(listener, this);//将listener放入事件委托中  
6、最后就是触摸按钮后的响应函数啦。 我是在 按下去后bird 播放动画,松开后bird停止播放动画 。这两个过程分别在touchBegan()和touchEnded()中实现

[cpp]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. bool HelloWorld::onTouchBegan(Touch* touch, Event  *event)  
  2. {  
  3.     auto beginPos = touch->getLocationInView();//获得触摸位置  
  4.     beginPos = Director::getInstance()->convertToGL(beginPos);//坐标转换  
  5.   
  6.     for(int i=0;i<4;i++)  
  7.     {  
  8.         auto dir = (Sprite*)this->getChildByTag(i);//通过tag提取方向按钮  
  9.         if(dir->getBoundingBox().containsPoint(beginPos))//如果触点在按钮中  
  10.         {  
  11.             MoveBy* moveBy;  
  12.             //判断在哪个方向  
  13.             if(i == Tag_left)  
  14.             {  
  15.                 moveBy = MoveBy::create(0.01f,Point(5,-5));  
  16.             }  
  17.             else if(i == Tag_right)  
  18.             {  
  19.                 moveBy = MoveBy::create(0.01f,Point(-5,5));  
  20.             }  
  21.             else if(i == Tag_up)  
  22.             {  
  23.                 moveBy = MoveBy::create(0.01f,Point(5,5));  
  24.             }  
  25.             else if(i == Tag_down)  
  26.             {  
  27.                 moveBy = MoveBy::create(0.01f,Point(-5,-5));  
  28.             }  
  29.   
  30.             auto animate = (Animate*)anim_array->getObjectAtIndex(i);//找出动画数组中的该组动画  
  31.             auto spaw = Spawn::create(animate,moveBy,NULL);  
  32.             bird->runAction(RepeatForever::create(spaw));//如果按钮一直按着,那么bird将一直飞下去  
  33.             break;  
  34.         }  
  35.     }  
  36.   
  37.     return true;//返回true表示接收触摸事件  
  38. }  
  39.   
  40. void HelloWorld::onTouchMoved(Touch* touch, Event  *event)  
  41. {  
  42. }  
  43.   
  44. void HelloWorld::onTouchEnded(Touch* touch, Event  *event)  
  45. {  
  46.     bird->stopAllActions();//松开按钮后停止所有动作  
  47. }  

恩,实现过程就是这样啦,挺容易的。


因为重点是控制精灵播放动画,所以我这里没有做如果当鸟人飞出场景后的处理。


转载请注明来自star特530:http://blog.csdn.net/start530/article/details/20561105

相关文章
|
图形学
unity3d UGUI常用游戏进度条实现方式
测试.png 直接将脚本挂载到进度条image对象上即可,这种方式可以解决当进度条使用图片的时候,防止图片拉伸变形 using UnityEngine; using UnityEngine.
2993 0
|
C++
Qt图片定时滚动播放器+透明过渡动画
解决:[QWidget::paintEngine: Should no longer be called QPainter::begin: Paint device returned engine == 0, type: 1] 需要在哪个控件上绘制,就要在哪个控件类中重写 paintEvent() ,所以本项目 需要使用自定义的MyQLabel继承QLabel
137 0
|
数据安全/隐私保护
CocosCreator3.8研究笔记(二十四)CocosCreator 动画系统-动画编辑器实操-关键帧实现动态水印动画效果(1)
CocosCreator3.8研究笔记(二十四)CocosCreator 动画系统-动画编辑器实操-关键帧实现动态水印动画效果
129 0
|
数据安全/隐私保护 iOS开发 MacOS
CocosCreator3.8研究笔记(二十四)CocosCreator 动画系统-动画编辑器实操-关键帧实现动态水印动画效果(2)
CocosCreator3.8研究笔记(二十四)CocosCreator 动画系统-动画编辑器实操-关键帧实现动态水印动画效果
133 0