cocos2d-x 新手引导

总结了下,新手引导的要点有以下几个:

  • 画面的变化.
  • 触摸和按钮响应.
  • 逻辑处理及代码组织.

下面我们就详细讲述这几个要点:

一.画面的变化.

对个这个不同的游戏的做法不尽相同,归结起来大概有这么几种:

1.画面整体变暗

这个比较简单,cocos2d就有现成接口:

效果如下:

QQ截图20130711150001

然后你可以在这层之上添加精灵,最后的效果可能是这个样子的:

9358d109b3de9c827a7330c36c81800a19d8436c

注:图片源自网络,如果有版权问题~你丫去死吧! 请联系我!

 

2.局部高亮

比较简单的方法是准备几张张局部高亮的图片,随着引导进度变化而切换!优点是可以做的比较精美,缺点是资源量会比较大!另一种方法是在画面整体变暗的基础上抠掉部分区域,还好cocos2d提供了CCClippingNode接口(2.1+版)!

CCClippingNode类比较复杂,但我们只用明白两个东西就好:一个是CCClippingNode的Stencil,一个CCClippingNode的Child,怎么理解呢?请看下图:

hhh

 

这个东西相信大家都有印象吧,上面的图案(镂空部分)就是 CCClippingNode的Stencil(模板),实体部分就是CCClippingNode的child(底板),是不是很好明白,让我们用代码来实现吧:

让我来加入模板:

CCDrawNode是用来绘制几何图形的,drawPolygon使用绘制多边形,参数为顶点数组,顶点数量,边框宽度,和填充颜色!这里要注意一点:千万不要addChild(m_pAA);因为一旦addchild,m_pAA就会被绘制出来,我们是要用它做剪裁!他会在CCClippingNode内部被使用!

我们会看到这样的效果:

QQ截图20130711194737

 

额,貌似和我们想想的不太一样啊,为什么呢?那是因为CCClippingNode有一个选项是是否反向,既显示Stencil呢还是child减去Stencil的部分!默认为显示显示镂空(Stencil)部分(false),因此我们要改变选项:

效果如下,是不是很棒:

QQ截图20130711195641

 

 

3.组合效果(将2的矩形改成圆,再加上图片)

让我们先看这张图片,是不是很棒?右下角黄色矩形区域是高亮的,在配上图片说明,很不错的效果!

QQ截图20130711144242

让我们来实现类似的效果吧,用到的资源:

circle hand

 

上面是全部的代码,效果图如下(动态的会更好)没有加圆圈和手之前和之后:

QQ截图20130711201424 QQ截图20130711201442

那么如何改变高亮区域得位置呢?很简单,只用改变pStencil的位置即可!可以考虑记为成员变量在ccTouchesBegan中改变位置,这样就会高亮区域就会跟着你的鼠标走啦!


二.触摸和按钮响应

 

1.开启触摸 阻止穿透响应 判断落点

让我们继续看下面的这张图片:

QQ截图20130711144242

 

这张图片中应该只有右下角的”冒险”按钮能够响应的到,那么怎么实现呢?这个要用到我之前的文章  COCOS2D-X 游戏实战经验(一) 触摸响应 中的知识,建议先看下这篇文章,我在这里说下思路:

  • 为了让其他区域的按钮响应不到,我们应该提高上层(CClayer)的响应优先级为-128和按钮一样,这样的话如果上层(CClayer)后加入游戏addchild的话,会先收到触摸消息.
  • 在收到触摸消息ccTouchBegan时,判断点击的地方是否在黄色矩形区域中,在的话return false 交给下层的按钮去响应,否则return true 阻止消息继续传递.

下面是代码片段:

1).开启触摸

2).提升触摸响应优先级为-128

3).在ccTouchBegan判断触点

大功告成,快去试一下吧!

 

2.精确命中

手机上和电脑上的触摸事件的区别在于:电脑上我们是用鼠标点击,而手机上使用手指去摁,触摸的精度的高低不言而喻!让我们来看下面这张图片:

QQ截图20130712112739

 

让我们看右上角的X号按钮,在手机上点击它来说应该是很困难的!他的真实尺寸应该是红色矩形的区域(假设:50×50),为了让玩家在引导时,能够很方便的点击到它,我们将实际的可触摸区域设置为蓝色区域(假设:100×100),这样应该很好点到了吧!

这样会有一个新的问题,如果点击到红色和蓝色之间的区域,下面的x按钮时响应不到的,那么怎么办呢?我们需要修改touch的数据(设置为按钮的正中心),然后touch事件将会以新的数据向下传递!这样下面的按钮就能响应到了!

让我们看看代码吧:

 

三.逻辑处理及代码组织

这里我大概说下新手引导的架构,代码肯定贴不出来,太多太乱,说的不对的地方,欢迎大家拍砖吐槽!>_<

1.首先创建了一个CTeachLayer继承自CCLayer,添加到游戏的最上层(UI层之上),记住,要先添加游戏的其层,最后添加CTeachLayer,可以保存全局指针!

2.用一个枚举记下你要引导的所有步骤,在根据枚举值去设置高亮的位置及触摸区域!可以记下当前引导的进度,以方便下次继续引导!

3.游戏逻辑中免不了要判断引导(例:出第3波怪的时候引导玩家使用清屏道具),用全局的指针去设置引导的步骤!

4.引导完成后移除CTeachLayer,游戏开始!

阅读更多
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页