Cocos2d-x 中的帧动画

最新推荐文章于 2019-03-08 16:46:08 发布
最新推荐文章于 2019-03-08 16:46:08 发布
阅读量539 收藏 1
点赞数
分类专栏： Cocos2d-x
原文

  http://zengrong.net/post/2006.htm

在 Cocos2d-x 中可以通过 CCAnimcation 来实现一个帧动画。在这种动画中，根据时间的流逝显示不同的纹理，形成动画。这就是我们平常所说的  逐帧动画  。

本文将讨论这种动画的使用方法，以及如何利用现有的工具来简化使用和提高开发效率。

本文基于 Cocos2d-x 2.2.1 

直接使用代码实现动画

当纹理作为单独的图像文件出现的时候，动画是这样实现的：

? View CodeCPP

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
//建立一个帧动画，填充14个纹理
CCAnimation* animation = CCAnimation::create();
for( int i=1;i<15;i++)
{
    char szName[100] = {0};
    sprintf(szName, "Images/grossini_dance_%02d.png", i);
    animation->addSpriteFrameWithFileName(szName);
}
//在2.8秒中显示14帧，计算延迟
animation->setDelayPerUnit(2.8f / 14.0f);
animation->setRestoreOriginalFrame(true);
 
CCAnimate* action = CCAnimate::create(animation);
 
// grossini 是一个CCSprite，使用它播放一个自动回绕的动画
grossini->runAction(CCSequence::create(action, action->reverse(), NULL));

如果纹理处于plist文件中，则可以这样实现：

? View CodeCPP

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 
//将纹理提前加入精灵帧缓存
CCSpriteFrameCache *frameCache = CCSpriteFrameCache::sharedSpriteFrameCache();
frameCache->addSpriteFramesWithFile("animations/grossini.plist");
 
//建立15个元素的精灵帧数组
CCArray* animFrames = CCArray::createWithCapacity(15);
char str[100] = {0};
for(int i = 1; i < 15; i++)
{
    sprintf(str, "grossini_dance_%02d.png",i);
    CCSpriteFrame *frame = frameCache->spriteFrameByName(str);
    animFrames->addObject(frame);
}
 
CCAnimation *animation = CCAnimation::createWithSpriteFrames(animFrames, 0.2f);
CCAnimate *anim = CCAnimate::create(animation);
 
//创建一个精灵用于显示动画
CCSprite *grossini = CCSprite::create();
CCSpriteFrame *frame = frameCache->spriteFrameByName("grossini_dance_01.png");
grossini->setDisplayFrame(frame);
 
//播放一个永久循环的动画
grossini->runAction(CCRepeatForever::create(anim))

使用帧动画定义文件播放动画

使用代码实现动画的缺点是必须将动画的纹理名称硬编码到源码中，这样在修改纹理的时候必须重编编译程序。

如果使用帧动画定义文件，就可以避免这个问题，并得到更多的便利。

  • format 1，定义了一个动画包含哪些帧以及帧纹理的名称，但是却并不能指定这些纹理从哪里加载。因此，我们必须提前加载将这些帧纹理使用的文件加载到缓存中。它可以为一个动画指定平均的帧延迟。
  • format 2，可以直接指定需要的纹理文件的名称，也可以定义每帧的延迟。

CCAnimationCache::addAnimationsWithDictionary 负责解析这两种格式，并将它们转换成 CCAnimation ，同时保存在缓存中。

format 1 动画格式的播放

这是 format 1 格式的内容，文件名为 armatures.plist 。它定义了 dance_1/dance_2/dance_3 这3个动画，每个动画的帧延迟为0.2秒。

这个格式一看就懂，不需要详细介绍。

? View CodeXML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
 
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
    <key>animations</key>
    <dict>
        <key>dance_1</key>
        <dict>
            <key>delay</key>
            <real>0.2</real>
            <key>frames</key>
            <array>
                <string>grossini_dance_01.png</string>
                <string>grossini_dance_02.png</string>
                <string>grossini_dance_03.png</string>
                <string>grossini_dance_04.png</string>
                <string>grossini_dance_05.png</string>
                <string>grossini_dance_06.png</string>
                <string>grossini_dance_07.png</string>
                <string>grossini_dance_08.png</string>
                <string>grossini_dance_09.png</string>
                <string>grossini_dance_10.png</string>
                <string>grossini_dance_11.png</string>
                <string>grossini_dance_12.png</string>
                <string>grossini_dance_13.png</string>
                <string>grossini_dance_14.png</string>
            </array>
        </dict>
        <key>dance_2</key>
        <dict>
            <key>delay</key>
            <real>0.2</real>
            <key>frames</key>
            <array>
                <string>grossini_dance_gray_01.png</string>
                <string>grossini_dance_gray_02.png</string>
                <string>grossini_dance_gray_03.png</string>
                <string>grossini_dance_gray_04.png</string>
                <string>grossini_dance_gray_05.png</string>
                <string>grossini_dance_gray_06.png</string>
                <string>grossini_dance_gray_07.png</string>
                <string>grossini_dance_gray_08.png</string>
                <string>grossini_dance_gray_09.png</string>
                <string>grossini_dance_gray_10.png</string>
                <string>grossini_dance_gray_11.png</string>
                <string>grossini_dance_gray_12.png</string>
                <string>grossini_dance_gray_13.png</string>
                <string>grossini_dance_gray_14.png</string>
            </array>
        </dict>
        <key>dance_3</key>
        <dict>
            <key>delay</key>
            <real>0.2</real>
            <key>frames</key>
            <array>
                <string>grossini_blue_01.png</string>
                <string>grossini_blue_02.png</string>
                <string>grossini_blue_03.png</string>
                <string>grossini_blue_04.png</string>
            </array>
        </dict>
    </dict>
</dict>
</plist>

使用下面的代码将这3个动画串起来并连续播放：

? View CodeCPP

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
 
CAnimationCache *animCache = CCAnimationCache::sharedAnimationCache();
 
//把动画定义文件载入缓存中
animCache->addAnimationsWithFile("animations/animations.plist");
 
//根据动画定义文件中的名称获取3个动画
CCAnimation *normal = animCache->animationByName("dance_1");
normal->setRestoreOriginalFrame(true);
CCAnimation *dance_grey = animCache->animationByName("dance_2");
dance_grey->setRestoreOriginalFrame(true);
CCAnimation *dance_blue = animCache->animationByName("dance_3");
dance_blue->setRestoreOriginalFrame(true);
 
//创建Action进行播放
CCAnimate *animN = CCAnimate::create(normal);
CCAnimate *animG = CCAnimate::create(dance_grey);
CCAnimate *animB = CCAnimate::create(dance_blue);
CCSequence *seq = CCSequence::create(animN, animG, animB, NULL);
 
//创建一个不带纹理的精灵
CCSprite *grossini = CCSprite::create();
//获取一个精灵帧，设置成精灵的第1帧
CCSpriteFrame *frame = frameCache->spriteFrameByName("grossini_dance_01.png");
grossini->setDisplayFrame(frame);
addChild(grossini);
 
//播放动画
grossini->runAction(seq);

format 2 动画格式plist文件内容

这是 format 2 格式的内容，文件名为 armatures-2.plist 。它定义了 dance_1这个动画。其中：

  • delayPerUnit 定义的就是每帧之间的间隔，是 0.2 秒。
  • delayUnits 定义了每帧的延迟值，它会覆盖 delayPerUnit 的定义。实际上，动画持续的时间，就是 所有帧的 delayUnits 的和乘以 delayPerUnit 。
  • notification 中定义的值会保存在 CCAnimationFrame 中。这些值的本意是在动画播放到设置值的帧时，触发一些事件。但是在 Cocos2d-x 2.2.1 中，这个事件触发并没有实现。
  • properties 定义了动画格式的版本以及这个动画中使用的帧来自于哪些纹理。

? View CodeXML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
 
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
    <key>animations</key>
    <dict>
        <key>dance_1</key>
        <dict>
            <key>delayPerUnit</key>
            <real>0.2</real>
            <key>restoreOriginalFrame</key>
            <true/>
            <key>loops</key>
            <integer>2</integer>
            <key>frames</key>
            <array>
                <dict>
                    <key>spriteframe</key>
                    <string>grossini_dance_01.png</string>
                    <key>delayUnits</key>
                    <integer>1</integer>
                    <key>notification</key>
                    <dict>
                        <key>firstframe</key>
                        <true/>
                    </dict>
                </dict>
                <dict>
                    <key>spriteframe</key>
                    <string>grossini_dance_02.png</string>
                    <key>delayUnits</key>
                    <integer>1</integer>
                </dict>
                <dict>
                    <key>spriteframe</key>
                    <string>grossini_dance_03.png</string>
                    <key>delayUnits</key>
                    <real>0.5</real>
                </dict>
                <dict>
                    <key>spriteframe</key>
                    <string>grossini_dance_04.png</string>
                    <key>delayUnits</key>
                    <integer>1</integer>
                </dict>
                <dict>
                    <key>spriteframe</key>
                    <string>grossini_dance_05.png</string>
                    <key>delayUnits</key>
                    <integer>1</integer>
                </dict>
                <dict>
                    <key>spriteframe</key>
                    <string>grossini_dance_06.png</string>
                    <key>delayUnits</key>
                    <integer>1</integer>
                    <key>notification</key>
                    <dict>
                        <key>key1</key>
                        <integer>1234</integer>
                        <key>key2</key>
                        <false/>
                    </dict>
                </dict>
                <dict>
                    <key>spriteframe</key>
                    <string>grossini_dance_07.png</string>
                    <key>delayUnits</key>
                    <integer>1</integer>
                </dict>
                <dict>
                    <key>spriteframe</key>
                    <string>grossini_dance_08.png</string>
                    <key>delayUnits</key>
                    <integer>2</integer>
                </dict>
                <dict>
                    <key>spriteframe</key>
                    <string>grossini_dance_09.png</string>
                    <key>delayUnits</key>
                    <real>0.5</real>
                </dict>
                <dict>
                    <key>spriteframe</key>
                    <string>grossini_dance_10.png</string>
                    <key>delayUnits</key>
                    <integer>1</integer>
                </dict>
                <dict>
                    <key>spriteframe</key>
                    <string>grossini_dance_11.png</string>
                    <key>delayUnits</key>
                    <integer>1</integer>
                </dict>
                <dict>
                    <key>spriteframe</key>
                    <string>grossini_dance_12.png</string>
                    <key>delayUnits</key>
                    <integer>1</integer>
                </dict>
                <dict>
                    <key>spriteframe</key>
                    <string>grossini_dance_13.png</string>
                    <key>delayUnits</key>
                    <integer>1</integer>
                </dict>
                <dict>
                    <key>spriteframe</key>
                    <string>grossini_dance_14.png</string>
                    <key>delayUnits</key>
                    <integer>1</integer>
                    <key>notification</key>
                    <dict>
                        <key>lastframe</key>
                        <true/>
                    </dict>
                </dict>
            </array>
        </dict>
    </dict>
    <key>properties</key>
    <dict>
        <key>spritesheets</key>
        <array>
            <string>animations/grossini.plist</string>
            <string>animations/grossini_blue.plist</string>
            <string>animations/grossini_family.plist</string>
        </array>
        <key>format</key>
        <integer>2</integer>
    </dict>
</dict>
</plist>

使用下面的代码播放这个动画：

? View CodeCPP

1
2
3
4
5
6
7
8
9
10
 
//解析动画定义文件，将动画载入缓存
CCAnimationCache *cache = CCAnimationCache::sharedAnimationCache();
cache->addAnimationsWithFile("animations/animations-2.plist");
 
//创建动画
CCAnimation *animation = cache->animationByName("dance_1");
CCAnimate* action = CCAnimate::create(animation);
 
//播放一个回绕的动画，grossini是一个已存在的精灵
grossini->runAction(CCSequence::create(action, action->reverse(), NULL));

173300598
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
cocos2d-x帧动画播放器
03-26
cocos2d-x 上面用的一个帧动画播放器类 用系统的动作播放动画总感觉不自在，所以自己写了一个，给需要的朋友用用吧。 主要功能： 1:普通动画播放 2:聚合多个动画 3:制定停留哪一个动画的哪一帧 4:停止，继续播放，...
cocos2dx lua 三种创建帧动画的方式
Muzzik的博客
06-17 1839
使用cocostdio中的帧动画并设置回调 self.node = cc.CSLoader:createNode("plaza/gamePropAnim/bingtong.csb") self._root:addChild(self.node) -- 是否反转 if self.data.reverse then self.node:getChildByName("Node_1"):set...
cocos2d-x帧动画实现（写下备忘）
Coding
09-28 921
帧动画就是很多张png的序列图实现轮流播放产生动画效果。 那么首先我们要一套动画的序列图，没有图的可以看引擎例子里面的图。很多张图我们可以采用TP工具将它们压缩到一张png里面去，这样程序只需要读取一次就行了，提高效率。 动画是打地鼠地鼠出洞的表现，代码如下： //新的游戏动画： //创建cache CCSpriteFrameCache* cache=CCSpriteFr
cocos2dx使用帧动画
silent_F的博客
03-08 872
开发语言：lua 开发引擎：cocos2d_x 一般来说，使用cocos2d_x开发游戏的时候都有两种做UI的方式，一种是用代码手写，一种是用cocos studio做UI，帧动画也一样，可以用这里两种方式，下面介绍博主常用的两种方法。 代码手写帧动画 博主这里是先将用来做帧动画的图片合成plis合图，然后创建一个精灵。用plist合图中的图片不断的去替换原来精灵的图片。 cc.Sprite...
Cocos2d-序列帧动画
可可西里
10-21 721
基础原理Cocos2d-x中，动画的具体内容是依靠精灵显示出来的，为了显示动态图片，我们需要不停切换精灵显示的内容，通过把静态的精灵变为动画播放器从而实现动画效果。动画由帧组成，每一帧都是一个纹理，我们可以使用一个纹理序列来创建动画。我们使用Animation类描述一个动画，而精灵显示动画的动作则是一个Animate对象。动画动作Animate是精灵显示动画的动作，它由一个动画对象创建，并由精灵执行
cocos2d-x-dynamic-lighting:Cocos2d-x 教程
06-05
x 动态光照演示这个简单的 Cocos2d-x 项目演示了如何从精灵表加载精灵帧创建动画用法线贴图初始化点光源效果并启发你的动画这是完整的教程：设置为了保持存储库的大小，我们没有将 Cocos2d-x 本身添加到存储库中。...
GifAnimation:实现将gif图片转换为cocos2d-x帧动画
06-21
GifAnimation 实现将GIF动画转换为cocos2d-x帧动画，支持cocos2d-x3.0以上版本，支持跨平台。
cocos2d-x动画资源
04-03
cocos2d-x的动画资源素材，在cocos2d-x中添加如下代码使用： //动画 //创建一个缓存 auto cache = SpriteFrameCache::getInstance(); //先把图片读入内存 cache->addSpriteFramesWithFile("anim.plist"); ...
Cocos2D-X:Cocos2D-X框架。 其他班级
05-22
Cocos2D-X Cocos2D-X框架的便捷类和摘录的个人集合。 欢迎您将它们包括在您的项目中，并根据需要进行调整。 也可以随时优化代码并提交更改。 滑动手势（Cocos2D-X 3.6）： 基本的滑动手势和MoveBy动作。 将其拖放...
Cocos2dx——帧动画（火焰）
04-12
这里主要用帧动画来实现火焰效果，包含了图片文件和代码
cocos2d 动画实现(帧动画)
孤灯夜行的博客
08-16 1050
Vector&lt;SpriteFrame*&gt; Frames; for (int i = 0; i &lt; 7; i++) { auto fileName = StringUtils::format("1_attack_%d.png", i); auto frame = SpriteFrame::create(fileName, Rect(0, 0, 203, 232));...
cocos2d-x 序列帧动画与场景特效笔记
小麦先生
10-09 2213
CCSize winSize = CCDirector::sharedDirector()->getWinSize();   //加载图片实现动画 /*Sprite* sprite = Sprite::create("bear1.png"); sprite->setPosition(Point(200,200)); this->addChild(sprite); CCAnimat
cocos2d-x 3.x(实现帧动画的几种方法)
南风古
04-29 3175
cocos2d-x 3.x(实现帧动画的几种方法) 方法一（动画帧）： //创建一个跑酷的精灵
 auto sprite = Sprite::create("1.png");
 //设置精灵的坐标
 sprite-&gt;setPosition(Vec2(visibleSize.width/2,visibleSize.height/2));
 //添加到当前层
 this-&gt;a...
Android开发BLE 串口调试工具，用来和底层进行一些握手协议的调试
05-01
【Android】开发BLE 串口调试工具，用来和底层进行一些握手协议的调试。
机械设计自动锁垫片机（sw18可编辑+工程图+BOM）非常好的设计图纸100%好用.zip
05-01
机械设计自动锁垫片机（sw18可编辑+工程图+BOM）非常好的设计图纸100%好用.zip
基于Mediapipe的手势识别前端应用可执行程序+说明.zip
05-01
基于Mediapipe的手势识别前端应用可执行程序+说明.zip # 项目简介 * 基于AutoHotkey制作的摄像头手势识别软件。能让你的电脑摄像头在识别手势后，执行自定义的电脑操作命令。同时也集成了语音识别功能，可调用Windows自带API实现简单的语音助手功能。 * 手势识别调用了高性能的Mediapipe动态链接库来免部署实现。而电脑自动化操作使用AutoHotkey脚本语言来实现，它能更方便的对电脑进行深度调用和流程自动化处理。 # 使用介绍 * 测试环境：Win10 64位（专业版完整镜像） * **第一次运行 Visual_Gesture_Recognition.exe**时，会提示下载手势识别的**依赖包**。点击**确定**后，跟着提示**点击自动下载**
node-v4.8.0.tar.xz
最新发布
05-01
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
python烟花代码.zip
05-01
python烟花代码python烟花代码.zip python烟花代码.zippython烟花代码.zippython烟花代码.zippython烟花代码.zippython烟花代码.zippython烟花代码.zippython烟花代码.zippython烟花代码.zippython烟花代码.zippython烟花代码.zippython烟花代码.zippython烟花代码.zippython烟花代码.zippython烟花代码.zippython烟花代码.zippython烟花代码.zippython烟花代码.zippython烟花代码.zippython烟花代码.zippython烟花代码.zippython烟花代码.zippython烟花代码.zippython烟花代码.zippython烟花代码.zippython烟花代码.zippython烟花代码.zippython烟花代码.zippython烟花代码.zippython烟花代码.zippython烟花代码.zippython烟花代码.zippython烟花代码.zippython烟花代码.zip
如何学习cocos2d-x
07-17
2. 学习API：熟悉cocos2d-x的API，包括场景管理、精灵、动画、音频、物理引擎等。 3. 学习示例代码：通过阅读和分析cocos2d-x的示例代码，了解如何使用cocos2d-x开发游戏。 4. 学习实践：通过实践开发小游戏，掌握...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值