cocos2d-x 帧动画学习
2024-04-05 12:57:41
今天学了一下cocos2d-x的帧动画，在这里记录一下，如果有什么错误的地方还请大家指出，我及时改正。在这里我创建了一个SpriterLayer的类，他是继承自CClayer的，在这里我先把头文件的定义贴出来：
1 #ifndef SPRITER_LAYER_H
2 #define SPRITER_LAYER_H
3
4 #include "cocos2d.h"
5
6 USING_NS_CC;
7
8 class SpriterLayer : public CCLayer
9 {
10 public:
11 virtual ~SpriterLayer();
12 virtual bool init();
13 CREATE_FUNC(SpriterLayer);
14
15 static CCScene *createScene();
16
17 CCSize size;
18
19 void initSpriteOne();
20 void initSpriteTwo();
21 void initSpriteThree();
22 void initSpriteFourth();
23
24 void animationEnd();
25
26 void ccTouchesBegan(CCSet *pTouches, CCEvent *pEvent);
27 void update(float delta);
28
29 CCPoint location;
30 };
31
32 #endif在这里我们提供了一个静态函数用来创建一个场景，然后定义了四个精灵帧动画，顺便也学习一下android的动画，之后还定义了一个动画结束之后的回调函数，接着我们重新实现了它的ccTouchesBegan函数以此来接收触摸事件，接着我们实现了update函数用来更新精灵的位置，从而实现行走动作，最后定义了一个CCPoint的对象，用来实现触目位置的记录。
接着我把其实现文件贴出来，代码如下：
1 #include "SpriterLayer.h"
2
3 SpriterLayer::~SpriterLayer()
4 {
5
6 }
7
8 bool SpriterLayer::init()
9 {
10 if(!CCLayer::init())
11 return false;
12
13 location.x = 30;
14 location.y = 100;
15 size = CCDirector::sharedDirector()->getWinSize();
16
17 CCLayerColor *colorLayer = CCLayerColor::create(ccc4(150, 150, 150, 230),size.width,size.height);
18 addChild(colorLayer);
19
20 CCSpriteFrameCache::sharedSpriteFrameCache()->addSpriteFramesWithFile("role.plist");
21
22 initSpriteOne();
23
24 initSpriteTwo();
25
26 initSpriteThree();
27
28 initSpriteFourth();
29
30
31 setTouchEnabled(true);
32
33 scheduleUpdate();
34
35
36 return true;
37 }
38
39 CCScene *SpriterLayer::createScene()
40 {
41 CCScene *scene = NULL;
42
43 scene = CCScene::create();
44
45 SpriterLayer *layer= SpriterLayer::create();
46
47 scene->addChild(layer);
48
49
50 return scene;
51 }
52
53 void SpriterLayer::initSpriteOne()
54 {
55 CCSprite *sprite = CCSprite::createWithSpriteFrameName("Img_ZRun1.png");
56 addChild(sprite);
57 sprite->setPosition(ccp(100,size.height/2));
58
59 CCArray *frameArray = CCArray::create();
60 frameArray->retain();
61
62 for (int i=1;i<7;i++)
63 {
64 CCSpriteFrame *frame = CCSpriteFrameCache::sharedSpriteFrameCache()->spriteFrameByName(CCString::createWithFormat("Img_ZRun%d.png",i)->getCString());
65 frameArray->addObject(frame);
66 }
67 CCAnimation *animation = CCAnimation::createWithSpriteFrames(frameArray,0.1f);
68
69 CCAnimate *animate = CCAnimate::create(animation);
70 CCAction *action = CCRepeatForever::create(animate);
71
72 sprite->runAction(action);
73 }
74
75 void SpriterLayer::initSpriteTwo()
76 {
77 CCSprite *sprite = CCSprite::createWithSpriteFrameName("Img_Zhici1.png");
78 addChild(sprite);
79 sprite->setPosition(ccp(300,size.height/2));
80
81 CCArray *frameArray = CCArray::create();
82 frameArray->retain();
83
84 for (int i=1;i<9;i++)
85 {
86 CCSpriteFrame *frame = CCSpriteFrameCache::sharedSpriteFrameCache()->spriteFrameByName(CCString::createWithFormat("Img_Zhici%d.png",i)->getCString());
87 frameArray->addObject(frame);
88 }
89
90 CCAnimation *animation = CCAnimation::createWithSpriteFrames(frameArray,0.1f);
91 CCAnimate *animate = CCAnimate::create(animation);
92
93 //CCAction *action = CCSequence::create(CCSpawn::create(animate,CCMoveTo::create(2.0f,ccp(700,100)),NULL),NULL);
94
95 CCAction *action = CCSequence::create(animate,CCCallFunc::create(this,callfunc_selector(SpriterLayer::animationEnd)),NULL);
96
97 sprite->runAction(action);
98
99 }
100
101 void SpriterLayer::initSpriteThree()
102 {
103 CCSprite *sprite = CCSprite::createWithSpriteFrameName("Img_Zhn1.png");
104 addChild(sprite);
105 sprite->setPosition(ccp(500,size.height/2));
106
107 CCArray *frameArray = CCArray::create();
108 frameArray->retain();
109
110 for (int i=1;i<17;i++)
111 {
112 CCSpriteFrame *frame = CCSpriteFrameCache::sharedSpriteFrameCache()->spriteFrameByName(CCString::createWithFormat("Img_Zhn%d.png",i)->getCString());
113 frameArray->addObject(frame);
114 }
115
116 CCAnimation *animation = CCAnimation::createWithSpriteFrames(frameArray,0.1f);
117 CCAnimate *animate = CCAnimate::create(animation);
118
119 CCAction *action = CCRepeatForever::create(animate);
120
121 sprite->runAction(action);
122
123 }
124
125
126 void SpriterLayer::initSpriteFourth()
127 {
128 CCSprite *sprite = CCSprite::createWithSpriteFrameName("Img_Zwlak1.png");
129 addChild(sprite,0,1);
130
131 sprite->setPosition(ccp(30,100));
132
133 CCArray *frameArray = CCArray::create();
134 frameArray->retain();
135
136 for (int i=1;i<7;i++)
137 {
138 CCSpriteFrame *frame = CCSpriteFrameCache::sharedSpriteFrameCache()->spriteFrameByName(CCString::createWithFormat("Img_Zwlak%d.png",i)->getCString());
139 frameArray->addObject(frame);
140 }
141
142 CCAnimation *animation = CCAnimation::createWithSpriteFrames(frameArray,0.1f);
143 animation->setRestoreOriginalFrame(true); //动画完成之后还原为第一帧
144 CCAnimate *animate = CCAnimate::create(animation);
145
146 CCAction *action = CCRepeatForever::create(animate);
147
148 sprite->runAction(action);
149 }
150
151 void SpriterLayer::animationEnd()
152 {
153 CCLog("animation finish");
154 }
155
156 void SpriterLayer::ccTouchesBegan(CCSet *pTouches, CCEvent *pEvent)
157 {
158 CCTouch *touch = (CCTouch *)( pTouches->anyObject());
159
160 #ifdef DEBUG
161 CCPoint point = touch->getLocation();
162 CCLog("location x=%2.2f\t y=%2.2f\n",point.x,point.y);
163
164 CCPoint viewPoint = touch->getLocationInView();
165 CCLog("viewLocation x=%2.2f\t y=%2.2f\n",viewPoint.x,viewPoint.y);
166 #endif
167
168 location = touch->getLocationInView();
169
170 }
171
172 void SpriterLayer::update(float delta)
173 {
174 CCSprite *sprite = (CCSprite *)this->getChildByTag(1);
175
176 if (sprite!=NULL)
177 {
178 if(sprite->getPositionX()>location.x)
179 {
180 sprite->setScaleX(-1);
181 }
182 else
183 {
184 sprite->setScaleX(1);
185 }
186
187 sprite->setPosition(ccp(location.x,100));
188 }
189 }接下来从init函数一步一步往下看：
实现我们调用了父对象的init方法，接着我们在添加了一个CCLayerColor层，这个主要是一个背景色，不然背景是黑色的不太好看。接着我们调用
1 CCSpriteFrameCache::sharedSpriteFrameCache()->addSpriteFramesWithFile("role.plist");这行代码是把我们所需要的资源添加到缓冲池里，这个plist文件是用TexturPackerGUI生成的，具体的大家google一下吧。
接着我们初始化调用initSpriteOne函数初始化我们的第一个精灵，代码如下：
1 void SpriterLayer::initSpriteOne()
2 {
3 CCSprite *sprite = CCSprite::createWithSpriteFrameName("Img_ZRun1.png");
4 addChild(sprite);
5 sprite->setPosition(ccp(100,size.height/2));
6
7 CCArray *frameArray = CCArray::create();
8 frameArray->retain();
9
10 for (int i=1;i<7;i++)
11 {
12 CCSpriteFrame *frame = CCSpriteFrameCache::sharedSpriteFrameCache()->spriteFrameByName(CCString::createWithFormat("Img_ZRun%d.png",i)->getCString());
13 frameArray->addObject(frame);
14 }
15 CCAnimation *animation = CCAnimation::createWithSpriteFrames(frameArray,0.1f);
16
17 CCAnimate *animate = CCAnimate::create(animation);
18 CCAction *action = CCRepeatForever::create(animate);
19
20 sprite->runAction(action);
21 }我们首先创建出一个精灵对象，这个地方的图像资源是从我们刚刚加入的缓冲池里取出的。接着我们创建了一个CCArray的数组用来存放我们的frame对象。接着我们通过一个循环把fram对象从缓冲池取出来加入到我们刚刚创建的数组，取出我们所需的frame之后我们就可以开始创建我们的动画了:
1 CCAnimation *animation = CCAnimation::createWithSpriteFrames(frameArray,0.1f);
根据我们取出的序列帧创建一个动画，动画的间隔时间设置为0.1f,接着我们创建CCAnimate对象，创建完成之后调用下面的代码创建action
1 CCAction *action = CCRepeatForever::create(animate);
在这里我们创建了一个重复动画，看这个方法的名字我们就知道这个动画是一只在循环的，接着我们就可以为精灵执行我们的动画了
1 sprite->runAction(action);
不知道在window下怎么生成gif，效果大家自己编译出来看吧
接着我们看看第二个精灵动画,代码如下：
1 void SpriterLayer::initSpriteTwo()
2 {
3 CCSprite *sprite = CCSprite::createWithSpriteFrameName("Img_Zhici1.png");
4 addChild(sprite);
5 sprite->setPosition(ccp(300,size.height/2));
6
7 CCArray *frameArray = CCArray::create();
8 frameArray->retain();
9
10 for (int i=1;i<9;i++)
11 {
12 CCSpriteFrame *frame = CCSpriteFrameCache::sharedSpriteFrameCache()->spriteFrameByName(CCString::createWithFormat("Img_Zhici%d.png",i)->getCString());
13 frameArray->addObject(frame);
14 }
15
16 CCAnimation *animation = CCAnimation::createWithSpriteFrames(frameArray,0.1f);
17 CCAnimate *animate = CCAnimate::create(animation);
18
19 CCAction *action = CCSequence::create(animate,CCCallFunc::create(this,callfunc_selector(SpriterLayer::animationEnd)),NULL);
20
21 sprite->runAction(action);
22
23 }这个精灵的大部分代码和第一个精灵的是相同的，唯一不同的是这个帧动画只会执行一次，执行完成动画之后会调用animationEnd函数。
第三个精灵和第一个是一样的就不看了，我们看看碟四个精灵，看看我们如何实现行走：
1 void SpriterLayer::initSpriteFourth()
2 {
3 CCSprite *sprite = CCSprite::createWithSpriteFrameName("Img_Zwlak1.png");
4 addChild(sprite,0,1);
5
6 sprite->setPosition(ccp(30,100));
7
8 CCArray *frameArray = CCArray::create();
9 frameArray->retain();
10
11 for (int i=1;i<7;i++)
12 {
13 CCSpriteFrame *frame = CCSpriteFrameCache::sharedSpriteFrameCache()->spriteFrameByName(CCString::createWithFormat("Img_Zwlak%d.png",i)->getCString());
14 frameArray->addObject(frame);
15 }
16
17 CCAnimation *animation = CCAnimation::createWithSpriteFrames(frameArray,0.1f);
18 animation->setRestoreOriginalFrame(true); //动画完成之后还原为第一帧
19 CCAnimate *animate = CCAnimate::create(animation);
20
21 CCAction *action = CCRepeatForever::create(animate);
22
23 sprite->runAction(action);
24 }这个动画其实和第一个是一样的，我们要重写CCLayer的ccTouchesBegan函数获取当前触摸的坐标，接着我们看看ccTouchesBegan函数的实现：
1 void SpriterLayer::ccTouchesBegan(CCSet *pTouches, CCEvent *pEvent)
2 {
3 CCTouch *touch = (CCTouch *)( pTouches->anyObject());
4
5 #ifdef DEBUG
6 CCPoint point = touch->getLocation();
7 CCLog("location x=%2.2f\t y=%2.2f\n",point.x,point.y);
8
9 CCPoint viewPoint = touch->getLocationInView();
10 CCLog("viewLocation x=%2.2f\t y=%2.2f\n",viewPoint.x,viewPoint.y);
11 #endif
12
13 location = touch->getLocationInView();
14
15 }在这里我们看到有个debug信息，我们看到有两个函数：getLocation和getLocationInView，这两个函数是用来转换我们所取坐标的，一个取得的是opengl的坐标，另外一个则是cocos2d的坐标，在这里我们要使用的是cocos2d的坐标，所以把该坐标值赋值给location。
接着我们在update函数中实现对第四个精灵对象的移动，updae函数如下：
1 void SpriterLayer::update(float delta)
2 {
3 CCSprite *sprite = (CCSprite *)this->getChildByTag(1);
4
5 if (sprite!=NULL)
6 {
7 if(sprite->getPositionX()>location.x)
8 {
9 sprite->setScaleX(-1);
10 }
11 else
12 {
13 sprite->setScaleX(1);
14 }
15
16 sprite->setPosition(ccp(location.x,100));
17 }
18 }这样我们就实现了对精灵位置的移动，看上去就是行走状态了。
声明：该代码所使用的图片来源于网络
转载于:https://www.cnblogs.com/jjxxjnzy/p/3673121.html
cocos2d-x 帧动画学习相关推荐
- cocos2d+lua实现帧动画播放
使用Cocos2d播放帧动画的方法有两种: 先来介绍一下流程: 1.得到动画的每一帧的数组FrameArray 2.将帧动画数组包装成Animation对象 3.将Animation对象转化为可以播放 ...
- Carson带你学Android：这是一份全面详细的属性动画学习攻略！
前言 属性动画的使用 是 Android 开发中常用的知识 本文将献上一份全面 & 详细的属性动画学习指南,将详细介绍属性动画的所有内容,包括:意义.作用.应用场景.功原理 & 具体使 ...
- Carson带你学Android：这是一份全面详细的动画学习指南
前言 动画的使用 是 Android 开发中常用的知识 可是动画的种类繁多.使用复杂,每当需要 采用自定义动画 实现 复杂的动画效果时,很多开发者就显得束手无策 本文将献上一份Android动画的全面 ...
- MAC_COCOS2D-X学习——Cocos2dx帧动画实现火焰效果
这一次来讲讲帧动画,来做一个酷炫的火焰效果,首先看看效果 首先,创建helloworld项目,先编译一下. 接着创建MyAction.hpp和MyAction.cpp.记得勾选helloworld-d ...
- Android动画学习之补间动画和逐帧动画，移动互联网app开发
| fromXScale | 指定动画开始时X轴上的缩放系数 | 值为1.0表示不再变化 | | fromYScale | 指定动画开始时Y轴上的缩放系数 | 值为1.0表示不再变化 | | toXS ...
- Android动画学习记录一（Android动画种类、补间动画和帧动画）
Android动画学习记录一(动画种类.补间动画和帧动画) 动画种类.补间动画和帧动画 Android动画学习记录一(动画种类.补间动画和帧动画) 一.动画种类 二.View动画 2.1 补间动画 补 ...
- 安卓学习笔记33：实现逐帧动画
文章目录 一.逐帧动画 (一)逐帧动画概念 (二)逐帧动画实现方式 二.利用动画资源文件实现逐帧动画 - 功夫熊猫 (一)运行效果 (二)涉及知识点 (三)实现步骤 1.创建安卓应用[PandaAni ...
- android 同根动画_Android（java）学习笔记141：Android下的逐帧动画（Drawable Animation）...
1. 帧动画: 帧动画顾名思义,一帧一帧播放的动画就是帧动画. 帧动画和我们小时候看的动画片的原理是一样的,在相同区域快速切换图片给人们呈现一种视觉的假象感觉像是在播放动画,其实不过是N张图片在一帧一 ...
- 黑马Android76期学习笔记01基础--day07--广播，有、无序广播、特殊广播接受者、样式和主题，this与context的区别、普通对话框，进度条对话框、帧动画
1.广播Broadcastreceiver 1.定义一个广播接收者(定义一个类并继承BroadcastReceiver) public class OutGoingCallReveiver exten ...
最新文章
- java instanceof 报错_java instanceof方法
- 以太坊（Ethereum）开发框架 Truffle 入门（四）：编译合约
- Maven自动化构建工具
- AVL,B,B+,红黑
- java捕捉了异常_java 异常捕获与异常处理
- 初识HTML、CSS
- Android之RecyclerView实现时光轴
- 局域网共享设置——权限问题
- 华三 h3c 基于IP子网的vlan
- sncr脱硝技术流程图_SNCR脱硝技术
- 红帽RHCA考试内容解析
- Linux常用软件包管理器命令
- 汉澳sinox2013支持的PCI/USB无线网卡，购买必看
- jquery.seat-charts.1.1.15 选座座位插件的方法介绍
- 赛码输入输出java_（赛码编程）博弈问题
- android aidl oneway用法
- parted扩展磁盘分区（实践篇）
- 嵌入式工程师必备技能--如何使用示波器查看IIC波形
- 预先下载的keras库中神经网络模型指定存放路径及如何上传的问题
- android仿空间短视频播放