【游戏客户端】实现刮刮乐效果

【游戏客户端】实现刮刮乐效果

      之前的博客中,我和大家分享了如何做:

  • 商业化的充值活动 :【商业化充值活动博客】
  • 抽卡系统:【抽奖,抽卡系统博客】
  • 装备系统:【装备系统博客】
  • 红点系统:【红点系统博客】
  • 商店&拍卖系统:【商店&拍卖系统】
  • UI环绕特效:【UI环绕特效】

      你永远猜不到策划会提什么需求,今天要给大家分享比较好玩的刮刮卡效果实现的思路 

【游戏客户端】实现刮刮乐效果_第1张图片

 (一)  利用RenderTexture实现刮卡图层 

      之前我们曾经使用过RenderTexture类实现屏幕的截图,而这次实现刮卡的效果同样需要用到这个类(这也太好用了吧)

      首先我们需要一个UI图片控件,这个图片展示我们的挂卡层纹理(如下图的灰色“挂卡区”)

【游戏客户端】实现刮刮乐效果_第2张图片

      然后创建一个RenderTexture的实例,然后把我们的UI图片控件绘制一遍让画布记录下来,记录下来之后,我们的UI图片控件就可以被释放了。此时展示在屏幕上的,虽然没什么变化,但其实已经不再是原来的UI控件,而是替换成RenderTexture的实例了

 (二)  利用DrawNode创建一个“橡皮擦”

      DrawNode可以绘制几何图形,矩形,三角形,圆形任君选择。而我们实现橡皮擦的逻辑就是,让DrawNode在RenderTexture实例上绘制,然后遮盖住原先的像素点,从而实现让刮奖层“消失”的效果

 【游戏客户端】实现刮刮乐效果_第3张图片

      而我们的刮奖过程实际是让画布变透明,所以我们需要这个橡皮擦是透明的,而且在橡皮擦和RenderTexture画布进行颜色混合绘制时候,只显示我们的橡皮擦颜色,因此就要用到我们的混合函数glBlendFunc(GL.ONE, GL.ZERO)了,混合函数知识openGL博客有提到大家可以跳转去看

【openGL2021版】粒子系统(全)

 (三)  利用Layout相应触摸事件

【游戏客户端】实现刮刮乐效果_第4张图片

      RenderTexture并不能响应触摸事件,因此我们需要一个layout来相应刮卡的事件。可以构建一个长宽和画布相等的layout,然后利用onTouchBegin,onTouchMove来监听好移动事件,当触摸点进行移动时,我们就根据触摸点的位置重新设置drawNode的位置,然后让画布和橡皮擦进行混合绘制,这样就能实现刮刮卡的效果了

好啦今天就到这里



点赞,关注!!!

你可能感兴趣的:(cocos2dx原理,cocos2dx实战项目,ar)