cocos2d-objc 3.0+ 游戏开发学习手册(三): CCAction 的简单使用与触摸

图片来自网络

导语

在游戏中,角色(cocos2d中的术语为精灵)都是具有丰富的动作效果,合理的使用这些动作比如闪烁,跳跃,翻转,都会带来体验上的差异.cocos2d为我们提供了多种CCAction类,本文通过对CCAction的简单使用示例,帮助大家了解在实际应用中如何借助这些Action实现自己的动画效果.

CCActionMoveTo

cocos2d 3.0之前的版本中,位移动作是CCMoveTo,在3.0新版本之后所有的命名都发生了变化: CCAction+动作名称.

  • 示例1:(在MainScene.m的init 方法中添加代码) // 设置背景 CCNodeColor *bg = [CCNodeColor nodeWithColor:CCColor.grayColor]; [self addChild:bg]; // 创建精灵 CCSprite *qq = [CCSprite spriteWithImageNamed:@"qq.png"]; qq.position = ccp(100, 100); [self addChild:qq]; // 添加动画 : 用2秒的时间移动到位置(300,100) CCActionMoveTo *moveAction = [CCActionMoveTo actionWithDuration:2.0 position:ccp(300, 100)]; [qq runAction:moveAction];

运行效果:

moveTo

CCActionSequence

根据示例我们看到,在cocos2d中实现动画非常简单! 但有时候我们需要游戏角色(精灵)执行的动画可能是比较复杂的,例如移动一段距离后翻转或者放大或者闪烁等,因此我们需要执行一组动作才可以,cocos2d已经为我们提供了一个CCActionSequence 动作队列来实现这种需求.

  • 示例2: 组合动画 // 创建精灵 CCSprite *qq = [CCSprite spriteWithImageNamed:@"qq.png"]; qq.position = ccp(100, 100); [self addChild:qq]; // 添加动画 CCActionMoveTo *moveAction = [CCActionMoveTo actionWithDuration:2.0 position:ccp(300, 100)]; // 添加动画2 CCActionMoveTo *action2 = [CCActionMoveTo actionWithDuration:2.0 position:ccp(300, 300)]; // 添加动画3 CCActionMoveTo *action3 = [CCActionMoveTo actionWithDuration:2.0 position:ccp(150, 300)]; // 添加动画4 : 闪烁3次 CCActionBlink *action4 = [CCActionBlink actionWithDuration:2.0 blinks:3]; // 添加动画5 : 放大2倍 CCActionScaleTo *action5 = [CCActionScaleTo actionWithDuration:2.0 scale:2]; // 创建动画执行队列,并添加需要执行的动作 CCActionSequence *sequence = [CCActionSequence actions:moveAction,action2,action3,action4,action5, nil]; // 运行动画 [qq runAction:sequence];

运行效果:

组合动画

CCActionCallFunc

游戏开发中我们经常需要在某个动作执行完毕后再做一些业务逻辑上的处理,这就需要我们监听某个动画的完成情况.cocos2d中我们常常使用CCActionCallFunc来监听一个动画结束后的回调处理.

  • 示例3: 监听动画完成 // 创建精灵 CCSprite *qq = [CCSprite spriteWithImageNamed:@"qq.png"]; qq.position = ccp(100, 100); [self addChild:qq]; // 添加动画 CCActionMoveTo *moveAction = [CCActionMoveTo actionWithDuration:2.0 position:ccp(300, 100)]; // 添加动画回调动作 CCActionCallFunc *endAction = [CCActionCallFunc actionWithTarget:self selector:@selector(endMoveToAction)]; // 创建动画执行队列 CCActionSequence *sequence = [CCActionSequence actions:moveAction,endAction, nil]; [qq runAction:sequence];
动画完成回调方法:
 - (void)endMoveToAction{
        CCLOG(@"动画执行完毕 ~~");
    }

运行效果:

动画完毕回调

Touch(触摸)

cocos2d中如果要响应触摸,需要在显示的场景类(MainScene)中开启用户交互:

// 设置开启触摸  
self.userInteractionEnabled = YES;

然后实现触摸响应的方法即可:

- (void)touchBegan:(UITouch *)touch withEvent:(UIEvent *)event{
         // 获取触摸位置
        CGPoint p = [touch locationInNode:self];
        // 创建动画
        CCActionMoveTo *moveAction = [CCActionMoveTo actionWithDuration:2 position:p];
        // 运行动画
        [self.qq runAction:moveAction];
  }

示例效果:

触摸移动效果

运行上面触摸的例子后,如果你多次连续点击屏幕,会发现精灵图片(本例中的qq图片)移动的最后结果与我们实际希望的并不相同,甚至会移出屏幕,不必担心,这是由于CCActionMoveTo类自身的原因: 它本身可以被同时多次调用,但某一刻的结果是每个单次调用的总和,下面我们通过stopAction来修正这个问题~

stopAction

cocos2d中我们可以任意的触发和停止action,经常用到的方法是: stopAction:(CCAction * action) : 停止指定的action stopActionByTag:(NSInteger) : 停止指定tag值的action stopAllActions : 停止所有action 在我们的触摸示例中,我们可以用stopActionByTag的方式修正代码,只需要修改两个地方即可: 1. 在每次触摸事件开始(touchBegan)时停止上一个动画 2. 给动画设置一个tag值 修改后的代码如下:

- (void)touchBegan:(UITouch *)touch withEvent:(UIEvent *)event{
        // 移除上一个动画效果
        [self.qq stopActionByTag:0];

        CGPoint p = [touch locationInNode:self];
        CCActionMoveTo *moveAction = [CCActionMoveTo actionWithDuration:0.3 position:p];
         // 给动画设置tag值
        [moveAction setTag:0];
        [self.qq runAction:moveAction];
}

边界处理

如果点击触摸在屏幕边缘的时候,我们发现精灵会有一部分内容超出屏幕,导致显示不完整.例如下图:

精灵超出屏幕

另外,我们希望移动的时间可以根据距离变化而不同,最后的代码如下:

- (void)touchBegan:(UITouch *)touch withEvent:(UIEvent *)event{

        [self.qq stopActionByTag:0];
        CGPoint p = [touch locationInNode:self];
        // 获取屏幕size
        CGSize screenSize = [CCDirector sharedDirector].viewSize;
        // 根据两点之间的距离计算移动时间
        CGFloat duration = ccpDistance(p, self.qq.position) / 200.0;
        // 限制边界值
        p.x = clampf(p.x, self.qq.contentSize.width / 2, screenSize.width - self.qq.contentSize.width / 2);
        p.y = clampf(p.y, self.qq.contentSize.height / 2,screenSize.height - self.qq.contentSize.height / 2);

        CCActionMoveTo *moveAction = [CCActionMoveTo actionWithDuration:duration position:p];
        [moveAction setTag:0];
        [self.qq runAction:moveAction];
   }

clampfcocos2d中提供的一个边界检测方法,只需要我们提供最大值最小值,它就会确保我们的值不会超过 这个范围,其实它的实现也非常简单:

 float clampf(float value, float min_inclusive, float max_inclusive) {
    if (min_inclusive > max_inclusive) {
        CC_SWAP(min_inclusive,max_inclusive);
    }
    return value < min_inclusive ? min_inclusive : value < max_inclusive? value : max_inclusive;
}

最终效果:

边界修正效果

结束语

我们简单介绍了游戏开发中会经常使用CCAction的用法,很多看似复杂的效果其实都是通过简单的动画组合而成.而cocos2d中提供的action也非常丰富,希望大家能够通过基本的练习可以触类旁通,因为它们都用法都十分相近,掌握起来也不会特别困难.例如大家可以思考一下如何实现一个始终运动的游戏背景,就像下面这样:

运动背景

悄悄提示: CCActionRepeatForever 可以实现不断重复的效果,然后再根据本文介绍的内容就完全可以实现这样的需求了,大家快动动手吧~~

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏小文博客

前端利器——Fscapture

1351
来自专栏葡萄城控件技术团队

如何使用纯前端控件集 WijmoJS 中的可视化在线设计器

WijmoJS Designer,一种全新的在线Web托管工具,为WijmoJS纯前端控件集提供了可视化设计图面和 Java代码生成器。 WijmoJS Des...

2752
来自专栏Material Design组件

Human Interface Guidelines —— Buttons

1586
来自专栏娱乐心理测试

移动端图标生成工具

1550
来自专栏理论坞

那些你不知道的Photoshop冷知识⑤——CC2015评测专题

笔者在探索新版本时,首先注意的便是首选项的变化,可以发现这次更新之后首选项侧边栏多了不少东西,点进去之后才发现原来是进行了重新分类,那么有哪些好玩的功能呢?介绍...

894
来自专栏Golang语言社区

nwui —— 又一个go语言图形界面解决方案

Github: https://github.com/go-nwui/nwui 最近开的一个大坑,具体实现就是自动生成htm+css+js然后调用nw.js来显...

3786
来自专栏施炯的IoT开发专栏

《101 Windows Phone 7 Apps》读书笔记-Groceries

课程内容 Ø Panarama控件     Groceries是一个简易的购物清单应用程序,我们可以用它来一步一步建立自定义的购物清单。根据个人的喜好,我们...

1925
来自专栏Rindew的iOS技术分享

iOS 一个可滑动缩放的轮播图

2326
来自专栏日常学python

用python来给图片加水印

有时候我想在图片上添加自己的水印来防止别人盗图,所以今天给大家分享如何用python给我们的图片添加上水印。我们先来看看效果。

1423
来自专栏Google Dart

AngularDart Material Design 卡片 顶

材料卡是由Google材料团队(也称为mdc-web)提供的卡片样式。 这是一个允许在AngularDart应用程序中使用样式的包装器。 有关如何使用这些样式的...

1544

扫码关注云+社区

领取腾讯云代金券