第四章：动作

最新推荐文章于 2025-01-22 15:00:00 发布
转载 最新推荐文章于 2025-01-22 15:00:00 发布 · 806 阅读 · 0
收录于
cocos2dx

当前文章被收录于：

cocos2dx
7 篇文章 0 人学习
订阅专栏 查看详情
本文深入解析 Cocos2d-x 中的动作系统，包括 Action 类的基本概念、如何改变 Node 对象属性，以及 MoveTo、MoveBy、RotateTo、ScaleTo 等基本动作的使用方法。详细讲解了 By 和 To 的区别、如何执行动作以及如何使用 Sequence、Spawn、Reverse 等高级功能。

Action类如其名，它可以改变Node对象的属性，Action对象是随着时间改变Node的属性。任何一个以Node为基类的对象都有可执行的动作对象。例如，你可以在一个时间段内将Sprite精灵从一个位置移动到另一个位置。

如下为MoveTo和MoveBy两个动作的实例:

1
2
3
4
5
6
7
// Move sprite to position 50,10 in 2 seconds.
auto moveTo = MoveTo::create(2, Vec2(50, 10));
mySprite1->runAction(moveTo);
 
// Move sprite 20 points to right in 2 seconds
auto moveBy = MoveBy::create(2, Vec2(20,0));
mySprite2->runAction(moveTo);

By和To的区别

或许你已经注意到了每个动作都有By和To两个状态。为什么呢？因为它们所执行的结果是不同的。By相当于这个节点是相对的。To是绝对的，意思是它并不考虑到这个节点的当前状态。让我们看一个具体的例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
auto mySprite = Sprite::create("mysprite.png");
mySprite->setPosition(Vec2(200, 256));
 
// MoveBy - lets move the sprite by 500 on the x axis over 2 seconds
// MoveBy is relative - since x = 200 + 200 move = x is now 400 after the move
auto moveBy = MoveBy::create(2, Vec2(500, mySprite->getPositionY()));
 
// MoveTo - lets move the new sprite to 300 x 256 over 2 seconds
// MoveTo is absolute - The sprite gets moved to 300 x 256 regardless of
// where it is located now.
auto moveTo = MoveTo::create(2, Vec2(300, mySprite->getPositionY()));
 
auto seq = Sequence::create(moveBy, delay, moveTo, nullptr);
 
mySprite->runAction(seq);

i0

基本动作以及如何执行动作

基本动作通常是一个单一的动作，只完成一个目标。让我们看看几个例子：

移动（Move）

在规定的时间内移动Node的位置。

1
2
3
4
5
6
7
8
9
10
11
auto mySprite = Sprite::create("mysprite.png");
 
// Move a sprite to a specific location over 2 seconds.
auto moveTo = MoveTo::create(2, Vec2(50, 0));
 
mySprite->runAction(moveTo);
 
// Move a sprite 50 pixels to the right, and 0 pixels to the top over 2 seconds.
auto moveBy = MoveBy::create(2, Vec2(50, 0));
 
mySprite->runAction(moveBy);

i1

旋转（Rotate）

在2秒内顺时针旋转Node。

1
2
3
4
5
6
7
8
9
auto mySprite = Sprite::create("mysprite.png");
 
// Rotates a Node to the specific angle over 2 seconds
auto rotateTo = RotateTo::create(2.0f, 40.0f);
mySprite->runAction(rotateTo);
 
// Rotates a Node clockwise by 40 degree over 2 seconds
auto rotateBy = RotateBy::create(2.0f, 40.0f);
mySprite->runAction(rotateBy);

i3

缩放（Scale）

在两秒内将Node放大10倍

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
auto mySprite = Sprite::create("mysprite.png");
 
// Scale uniformly by 3x over 2 seconds
auto scaleBy = ScaleBy::create(2.0f, 3.0f);
mySprite->runAction(scaleBy);
 
// Scale X by 5 and Y by 3x over 2 seconds
auto scaleBy = ScaleBy::create(2.0f, 3.0f, 3.0f);
mySprite->runAction(scaleBy);
 
// Scale to uniformly to 3x over 2 seconds
auto scaleTo = ScaleTo::create(2.0f, 3.0f);
mySprite->runAction(scaleTo);
 
// Scale X to 5 and Y to 3x over 2 seconds
auto scaleTo = ScaleTo::create(2.0f, 3.0f, 3.0f);
mySprite->runAction(scaleTo);

i4

淡入淡出

Node淡入

FadeIn修改透明度的值(0~255之间)。与之相反的动作是“淡出”

1
2
3
4
5
6
7
8
9
auto mySprite = Sprite::create("mysprite.png");
 
// fades in the sprite in 1 seconds
auto fadeIn = FadeIn::create(1.0f);
mySprite->runAction(fadeIn);
 
// fades out the sprite in 2 seconds
auto fadeOut = FadeOut::create(2.0f);
mySprite->runAction(fadeOut);

i2

色调（Tint）

Tint使节点的NodeRGB从当前值改变到用户设置值。

1
2
3
4
5
6
7
8
9
auto mySprite = Sprite::create("mysprite.png");
 
// Tints a node to the specified RGB values
auto tintTo = TintTo::create(2.0f, 120.0f, 232.0f, 254.0f);
mySprite->runAction(tintTo);
 
// Tints a node BY the delta of the specified RGB values.
auto tintBy = TintBy::create(2.0f, 120.0f, 232.0f, 254.0f);
mySprite->runAction(tintBy);

i5

动画（Animate）

通过Animate可以很容易地实现精灵的帧动画效果。只要简单的每隔一段时间替换_display frame_即可。如下例子：

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
auto mySprite = Sprite::create("mysprite.png");
 
// now lets animate the sprite we moved
 
Vector<SpriteFrame*> animFrames;
animFrames.reserve(12);
animFrames.pushBack(SpriteFrame::create("Blue_Front1.png", Rect(0,0,65,81)));
animFrames.pushBack(SpriteFrame::create("Blue_Front2.png", Rect(0,0,65,81)));
animFrames.pushBack(SpriteFrame::create("Blue_Front3.png", Rect(0,0,65,81)));
animFrames.pushBack(SpriteFrame::create("Blue_Left1.png", Rect(0,0,65,81)));
animFrames.pushBack(SpriteFrame::create("Blue_Left2.png", Rect(0,0,65,81)));
animFrames.pushBack(SpriteFrame::create("Blue_Left3.png", Rect(0,0,65,81)));
animFrames.pushBack(SpriteFrame::create("Blue_Back1.png", Rect(0,0,65,81)));
animFrames.pushBack(SpriteFrame::create("Blue_Back2.png", Rect(0,0,65,81)));
animFrames.pushBack(SpriteFrame::create("Blue_Back3.png", Rect(0,0,65,81)));
animFrames.pushBack(SpriteFrame::create("Blue_Right1.png", Rect(0,0,65,81)));
animFrames.pushBack(SpriteFrame::create("Blue_Right2.png", Rect(0,0,65,81)));
animFrames.pushBack(SpriteFrame::create("Blue_Right3.png", Rect(0,0,65,81)));
 
// create the animation out of the frames
Animation* animation = Animation::createWithSpriteFrames(animFrames, 0.1f);
Animate* animate = Animate::create(animation);
 
// run it and repeat it forever
mySprite->runAction(RepeatForever::create(animate));

很难以文字形式描述一个动画，所以请运行《开发者指南示例》中动作部分的代码查看动作效果。

减速（Easing）

Easing用一个给定的加速度来使动画更加顺畅。需要记住的是，无论速度快慢，ease动作总是同时开始和结束。在游戏中如果你想模拟一些物理特效，但又不想过度且麻烦地使用多个非常基本的动作，那么此时Ease动作将是模拟物理特效的一个很好的方法。这里有另一个给菜单和按钮添加动画的很好的例子。

下图显示了一些常用的减速功能：

easing-functions

Cocos2d-x支持上图中所显示的大部分减速功能。这些功能也是容易实现的。让我们一起看看一个特殊的用例。屏幕的上方添加一个Sprite对象，并使其上下跳动。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// create a sprite
auto mySprite = Sprite::create("mysprite.png");
 
// create a MoveBy Action to where we want the sprite to drop from.
auto move = MoveBy::create(2, Vec2(200, dirs->getVisibleSize().height - newSprite2->getContentSize().height));
auto move_back = move->reverse();
 
// create a BounceIn Ease Action
auto move_ease_in = EaseBounceIn::create(move->clone() );
 
// create a delay that is run in between sequence events
auto delay = DelayTime::create(0.25f);
 
// create the sequence of actions, in the order we want to run them
auto seq1 = Sequence::create(move_ease_in, delay, move_ease_in_back,
    delay->clone(), nullptr);
 
// run the sequence and repeat forever.
mySprite->runAction(RepeatForever::create(seq1));

运行“开发者指南示例”中的这部分的代码可以查看动作效果。

序列动作以及如何执行它

Sequence可以使一系列的动作对象按顺序执行。这一系列对象可以是任何数量的动作对象、函数，甚至是另外一个序列动作。函数？是的！Cocos2d-x中有一个CallFunc对象，它允许你创建一个function()函数并可以传递到Sequence中执行。这就允许你在序列动作对象中添加自己的函数功能，而不是仅仅局限于Cocos2d-x中提供的动作对象。如下例为序列动作被执行时的状态：

sequence

序列动作的例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
auto mySprite = Sprite::create("mysprite.png");
 
// create a few actions.
auto jump = JumpBy::create(0.5, Vec2(0, 0), 100, 1);
 
auto rotate = RotateTo::create(2.0f, 10);
 
// create a few callbacks
auto callbackJump = CallFunc::create([](){
log("Jumped!");
});
 
auto callbackRotate = CallFunc::create([](){
log("Rotated!");
});
 
// create a sequence with the actions and callbacks
auto seq = Sequence::create(jump, callbackJump, rotate, callbackRotate, nullptr);
 
// run it
mySprite->runAction(seq);

那么，Sequence对象做了什么呢？

它可以按顺序执行如下动作：

Jump -> callbackJump -> Rotate -> callbackRotate

运行“开发者指南示例”中的代码查看动作效果。

Spawn

Spawn与Sequence类似，不同的是使用Spawn时所有动作是同时执行的。你可以有很多动作对象，甚至其他Spawn对象。

spawn

Spawn的作用与运行多个连续的runAction()语句所产生的结果是相同的。然而，使用Spawn的优点在于你可以将其放到一个序列中，从而实现特定的效果。而runAction()是不可以的。将Spawn和Sequence结合使用讲会实现很多强大的功能。

举例：

1
2
3
4
// create 2 actions and run a Spawn on a Sprite
auto mySprite = Sprite::create("mysprite.png");
 
auto moveBy = MoveBy::create(10, Vec2(400,100));

使用Spawn:

1
2
3
// running the above Actions with Spawn.
auto mySpawn = Spawn::createWithTwoActions(moveBy, fadeTo);
mySprite->runAction(mySpawn);

使用连贯的runAction()语句：

1
2
3
// running the above Actions with consecutive runAction() statements.
mySprite->runAction(moveBy);
mySprite->runAction(fadeTo);

两个产生的效果是相同的。但是，其中一个可以在Sequence中使用Spawn。如下流程图所示：

spawn_in_a_sequence

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// create a Sprite
auto mySprite = Sprite::create("mysprite.png");
 
// create a few Actions
auto moveBy = MoveBy::create(10, Vec2(400,100));
auto fadeTo = FadeTo::create(2.0f, 120.0f);
auto scaleBy = ScaleBy::create(2.0f, 3.0f);
 
// create a Spawn to use
auto mySpawn = Spawn::createWithTwoActions(scaleBy, fadeTo);
 
// tie everything together in a sequence
auto seq = Sequence::create(moveBy, mySpawn, moveBy, nullptr);
 
// run it
mySprite->runAction(seq);

运行“开发者指南示例”中的代码查看动作效果。

Reverse（逆序）

Reverse的作用完全像它的名字一样，例如运行一系列动作时，你完全可以调用reserve()函数使动作逆序执行。然而，这并不只是简单的逆序运行，实际上还将原始的Sequence和Spawn的属性也转换为逆序。

Using the Spawn example above reversing is simple. 上面Spawn中的例子使用逆序就会很简单：

1
2
// reverse a sequence, spawn or action
mySprite->runAction(mySpawn->reverse());

大部分Action和Sequence对象都是可逆的！

使用很简单，但是让我们来验证一下是不是这样，如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// create a Sprite
auto mySprite = Sprite::create("mysprite.png");
mySprite->setPosition(50, 56);
 
// create a few Actions
auto moveBy = MoveBy::create(2.0f, Vec2(500,0));
auto scaleBy = ScaleBy::create(2.0f, 2.0f);
auto delay = DelayTime::create(2.0f);
 
// create a sequence
auto delaySequence = Sequence::create(delay, delay->clone(), delay->clone(),
delay->clone(), nullptr);
 
auto sequence = Sequence::create(moveBy, delay, scaleBy, delaySequence, nullptr);
 
// run it
newSprite2->runAction(sequence);
 
// reverse it
newSprite2->runAction(sequence->reverse());

发生了什么呢？如下步骤清单或许对我们有帮助：

  • 创建mySprite
  • 设置mySprite位置为（50,56）
  • 开始运行sequence
  • 在两秒内sequence将mySprite移动了500个像素，mysprite新位置为（550,56）
  • sequence延迟2秒
  • 在两秒内sequence将mySprite扩大两倍
  • 延迟了6秒多（注意，这里我们运行了另外一个sequence来完成这个）
  • 在sequence上运行一reverse，因此我们可以向后重新运行每个动作。
  • sequence被延迟了6秒
  • 在2秒内sequence将mySprite扩大了两倍
  • sequence延迟了两秒
  • 在两秒内，sequence移动mySprite了-500个像素，mySprite的新位置为（50,56）

你可以看到reverse()用起来很简单，但是其实逻辑上并不简单。Cocos2d-x已经为你完成了这复杂的逻辑。

Pepper/Nao初级教程：第四章 Pepper/Nao的常用指令盒介绍
Naoqi之家
10-24 9374
第五章 Pepper App开发技术 4.1 Pepper对话 制作对话App的方法有很多，其中一个方法是使用Speech Reco.和Say指令盒来实现。 4.1.1 Speech Reco.指令盒 Speech Reco.指令盒可以识别声音中的关键字。在参数“Word list”中设置关键字，多个关键字可以用英文分号隔开。当识别到后会在指令盒后输出这个关键字字符串。一般可以与“Switch ...
Tableau基础-第九章(仪表盘 创建动作)
weixin_43074152的博客
08-07 2460
从头开始学Tableau-第九章(仪表 创建动作) 第一章 第二章 第三章 第四章 第五章 第六章 第七章 第八章 数据源 上一章我们知道了如何创建仪表盘，让我们可以从不同角度分析公司的经营状况，现在我们希望多表之间的联动，点击地图上的某个省份或城市时其他的图标显示对应省份的城市数据。（上一章我们说过“添加至筛选器”）今天讲的更为完善。 我们的目的是点击地图上的省份时，对应的产品市场...
cocos2dx-lua 常用到的动作【转载】
qq_39685400的博客
04-26 2157
cocos2dx-lua 常用到的动作【转载】 原文链接：https://www.cnblogs.com/meixinghao/articles/3900049.html 1 移动到指定位置： local move = CCMoveTo:create(time, ccp(posx, posy)) 参数time:移动到指定位置所用的时间 参数:ccp(posx, posy) 移动到指定位置的坐标 C...
第四章 利用Kinect抠图和自动拍照程序
baolinq的博客
08-31 1万+
第四章  利用Kinect抠图和自动拍照程序   在本篇博客中，我将详细介绍Kinect的一种特殊数据源，BodyIndex(人物索引二值图)，Kinect就是利用这个数据源来区分目标是人体还是其他物体，有没有觉得功能很强大。说到这里，很多朋友就应该会想到如何利用Kinect去抠图了，主要是依靠这个数据源，把 Kinect获取的图像中的人体和其他物体（主要是背景）区分开来。另外一点是关于自动拍
cocos2dx_lua卡牌翻转
u014206831的博客
02-12 2137
local fun = function(curNode, BgNode) local scaleToHide = cc.ScaleTo:create(0.1, 0, 1.0) local function funcScaleToShow() local scaleToShow = cc.ScaleTo:create(0.1, 1.0, 1.0) BgNode:setVisible(true) BgNode:run...
cocos lua 动画详解
lxr_17的博客
08-12 1736
注：笔者不把一大段代码贴出来，分段解释比较舒服一点 MoveBy:通过修改节点对象的位置属性来改变节点对象的x,y像素。 x,y的坐标是相对于这个对象的位置来说的。 几个MoveBy动作可以同时被调用，最终的运动是这几个单独运动的综合 MoveTo:移动节点对象到位置x,y。x,y是绝对坐标，通过修改它的位置属性来改变它们的值。 几个MoveTo动作可以被同时调用，并且最终的运动是几个单独运动的综合。 [javascript]view plaincopy ----------------..
Cocos2d-x 学习笔记(11.4) ScaleTo ScaleBy
weixin_30544657的博客
07-29 321
1.ScaleToScaleBy 对node进行缩放。ScaleBy是ScaleTo的子类。 1.1 成员变量 create方法 ScaleTo ScaleBy 成员变量一样： float _scaleX; float _scaleY; float _scaleZ; float _startScaleX; // startWithT...
【tusterのFPGA作业教程】第四章：实验3——俄罗斯方块的旋转测试与动作（1）
luomucraft的博客
04-15 8884
本实验的解决关键在于能否正确填写下发的实验表格。如果能理解表格中填写的各位置函数关系并在代码相应位置对应更改，就可以轻松完成所有实验内容。上图为下发的实验表格，经观察可知：示例的I型模块旋转过程分为四个form，每旋转90°为一个form，依次对应“00”“01”“10”“11”状态。旋转前组成I型模块的四个点阵由数字1-4表示，旋转后的I型模块位置用〇表示，旋转过程中的阻挡位置用×表示。旋转中心用带圈的数字③表示。每个点阵由两个坐标函数pnx, pny表示。坐标原点位于点阵屏的左上角，即。
【tusterのFPGA作业教程】第四章：实验3——俄罗斯方块的旋转测试与动作（2）
luomucraft的博客
04-18 1499
由上一节可知，我们需要先完成I型模块的顺时针旋转对应的表格。表中测试空位、测试阻挡、旋转后的坐标和边界条件与逆时针原理相似，因此本节不再赘述，直接展示结果。由设计任务，我们需要在ctrl_Irotate.vhd文件中添加顺时针旋转的程序，类比逆时针旋转的程序，结合上表，易得出以下程序段。注意：在ctrl_Irotate.vhd文件中我们还需要加入test_Rp3, rotate_Lp3变量声明语句完整的代码将在文末给出。
【黑神话悟空】蛇女替换天命人MOD免费分享！天命人外观变为第四章中的蛇女！！
weixin_47655774的博客
10-17 416
黑神话：悟空》是一款由游戏科学开发的动作角色扮演游戏，该游戏以中国古典名著《西游记》为背景，通过现代游戏设计和技术重现了孙悟空的故事，提供了精美的画面、动态的战斗体验以及深入的故事情节，让玩家沉浸在充满挑战与奇幻色彩的神话世界中。
第四章 动作功能
Small_Bird
05-21 809
第四章 动作功能 1.     CCAction动作基类的关系 2.     即时动作的具体类 3.     持续动作类的结构图 4.     可变速度的动作类 5.     类CCGrid3DAction的继承关系 6.     类CCTileGrid3DAction的继承关系 7.     精灵缓冲池 8.     Cocos2D-X引擎游戏结构
《计算机网络 自顶向下方法》（第7版）答案（第四章）
热门推荐
SWY's Workshop
11-24 4万+
《计算机网络 自顶向下方法》第四章 答案
jsp动作元素
Java-Bobby的专栏
04-03 563
<br />今天学习 第四章jsp动作元素<br />当执行一个简单的jsp文件时，竟出现了错误，语法没错呀，可为什么就出错了呢？<br />就是因为自己的命名方式有错误。自己定一个对象为time，谁知系统也有个对象叫time，字体还为蓝色，当时只顾着急没注意，想想真马虎，提示栈满，哎~~~~~~~当换个对象名就对了<br /><jsp:param>动作元素<br />语法<br /><jsp:param> name="参数名" valude=“参数值”/>注意后面还有一个/要写。传递参数<br /><js
第四章 JSP_02
我的博客
03-25 1314
JSP动作标签 JSP 2.0 规范中提供了20多个标准的使用XML语法写成的动作标签，这些标签可用来实现特殊的功能，例如，转发用户请求、操作JavaBean、包含其他文件等。 动作标签是在请求处理阶段按照在页面中出现的顺序被执行的。JSP 动作标签的优先级低于指令标签，在JSP页面被执行时将首先进入翻译阶段，程序会先查找页面中的指令标签，将它们转换成 Servlet，从而设置整个JSP页面。...
cocos 学习笔记（三）动作
君浪的博客
04-01 391
前两节根据一般游戏能想到的，分别学习了两大交互：触摸、菜单。已经能实现许多功能，但是此时做出来的东西却感觉有些……死气沉沉？这是因为少了动画效果。 动画在游戏中十分重要，如果不能动，就基本变成文字游戏了。因此这次学习了《权威》的第四章：动作特效与动画。 依然接着上一节的例子来学习，上次做了一个能收放自如且随处乱摆的菜单（虽然有些丑…），每次只要点击MENU就可以弹出来。但是弹出的太突兀了，因此可
[Stable diffusion]人物动作姿势提示词
m0_64365896的博客
11-29 1045
在AI绘画中，在提示词中如果不指定动作姿势，AI会随机做一些动作POS（基本都是比较固定的），在关键字中加入动作提示词，可以提升模特的构图美感，下面是几组常用的动作关键字。在AI绘画中，在提示词中如果不指定动作姿势，AI会随机做一些动作POS（基本都是比较固定的），在关键字中加入动作提示词，可以提升模特的构图美感，下面是几组常用的动作关键字。
【AI中数学-概率论-综合实例-包括python实现】 动作的语言：隐马尔可夫模型识别人体动作
最新发布
人工智能(AI)技术，大模型技术，深度学习，机器学习，计算机视觉，AI工具实践应用等分享
01-22 1182
隐马尔可夫模型（HMM）在人体动作识别中有着广泛的应用，尤其是在步态识别、手势识别以及多种活动识别任务中。通过将这些任务分解为一系列隐状态的序列，并且利用 HMM 进行建模，能够高效地从时序数据中提取出模式和规律。
05 牧师与魔鬼动作分离版
m0_62978196的博客
10-29 160
动作分离的目的是继续让FirstController的功能进一步简化，通过回调函数的作用让动作管理者协调动作的调用，即完成游戏对象的移动，这样可以让各种动作易于管理，提高代码的复用性。
爬虫——动作链、xpath、打码平台使用
kdq18486588014的博客
08-03 473
第四章 动作链、xpath、打码平台使用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值