Cocos2d实现刮刮卡效果


Posted in Javascript onDecember 20, 2018

本文实例为大家分享了Cocos2d实现刮刮卡效果展示的具体代码,供大家参考,具体内容如下

本文代码适用于Cocos2d-x Quick-Community3.6

local TestScene = class("TestScene", function()
 return display.newScene("TestScene")
end)

function TestScene:ctor()
 
end

function TestScene:onEnter()
 self:initUI()
end

function TestScene:initUI()
 --刮刮卡底层容器
 local scratchLayer = display.newLayer()
 scratchLayer:setContentSize(self:getBoundingBox())
 self:addChild(scratchLayer)

 scratchLayer:setTouchEnabled(true)
 scratchLayer:setTouchMode(cc.TOUCH_MODE_ONE_BY_ONE)

 --创建RenderTexture
 local scratch = cc.RenderTexture:create(scratchLayer:getBoundingBox().width,scratchLayer:getBoundingBox().height)
 scratch:setPosition(scratchLayer:getBoundingBox().width/2,scratchLayer:getBoundingBox().height/2)
 scratch:retain()

 --需要被挂掉的精灵 本文以纯白背景代替
 local bg = cc.Sprite:createWithTexture(nil, cc.rect(0,0 , scratchLayer:getBoundingBox().width,scratchLayer:getBoundingBox().height))
 bg:setColor(cc.c3b(255,255,255))
 bg:setPosition(scratchLayer:getBoundingBox().width/2,scratchLayer:getBoundingBox().height/2)

 --渲染
 scratch:begin()
 bg:visit()
 scratch:endToLua()

 scratchLayer:addChild(scratch)

 --利用DrawNode创建模拟的刮除媒介
 local eraser = cc.DrawNode:create()
 --刮除媒介是个圆 半径为20 具体可自行定义
 local r = 20

 eraser:drawSolidCircle(cc.p(0,0),
 r,
 0,
 r,
 1,
 1,
 cc.c4f(0,0,0,0)
 )

 eraser:retain()

 --开始添加触摸事件
 scratchLayer:addNodeEventListener(cc.NODE_TOUCH_EVENT, function (event)
 --首先把点击区域刮除
 eraser:setPosition(event.x,event.y)

 eraser:setBlendFunc(gl.ONE,gl.ZERO)

 scratch:begin()
 eraser:visit()

 --[[
  重点:因为点击事件回调次数限制,如果没有下面处理,
  当我们快速在屏幕上滑动的时候调用次数不够,会产生一个一个刮除点
  而中间并没有刮除。
  以下代码为刮除两次移动中间矩形区域
 ]]
 local isEnded = false
 if event.name ~= "began" then
  if eraser.lastPos then
  --矩形宽高
  local width = self:getP2PDis(event, eraser.lastPos)
  local height = 2*r
  --矩形中点
  local midPos = cc.p((event.x+eraser.lastPos.x)/2,(event.y+eraser.lastPos.y)/2)
  --旋转角度
  local rotate = self:getP2PAngle(eraser.lastPos, event)

  --矩形刮除媒介
  local polygonEraser = cc.DrawNode:create()
  local points = {
   cc.p(-width/2,-height/2),
   cc.p(-width/2,height/2),
   cc.p(width/2,height/2),
   cc.p(width/2,-height/2)
  }
  polygonEraser:drawPolygon(points, {
   fillColor = cc.c4f(0, 0, 0, 0),
   borderWidth = 1,
   borderColor = cc.c4f(0, 0, 0, 0),
  })

  --刮除矩形区域
  polygonEraser:setRotation(-rotate)

  polygonEraser:setPosition(midPos)

  polygonEraser:setBlendFunc(gl.ONE,gl.ZERO)

  polygonEraser:visit()
  scratch:endToLua()
  isEnded = true
  end
 end

 if not isEnded then
  scratch:endToLua()
 end

 eraser.lastPos = cc.p(event.x,event.y)

 if event.name == "ended" then
  eraser.lastPos = nil
 end

 return true
 end)
end

--两点间距
function TestScene:getP2PDis(p1,p2)
 local x = p1.x - p2.x
  local y = p1.y - p2.y
  return math.abs(math.sqrt(math.pow(x,2)+math.pow(y,2)))
end

--两点连接线倾斜角度
function TestScene:getP2PAngle(p1,p2)
  local x = p1.x - p2.x
  local y = p1.y - p2.y
  return 180 * (math.atan2(y, x) / math.pi)
end

return TestScene

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
分享一个自定义的console类 让你不再纠结JS中的调试代码的兼容
Apr 20 Javascript
基于javascript制作微博发布栏效果
Apr 04 Javascript
Angular2-primeNG文件上传模块FileUpload使用详解
Jan 14 Javascript
angular和BootStrap3实现购物车功能
Jan 25 Javascript
Angularjs处理页面闪烁的解决方法
Mar 09 Javascript
JS简单验证上传文件类型的方法
Apr 17 Javascript
vue router路由嵌套不显示问题的解决方法
Jun 17 Javascript
Angularjs上传文件组件flowjs功能
Aug 07 Javascript
基于VUE.JS的移动端框架Mint UI的使用
Oct 11 Javascript
详解React中setState回调函数
Jun 14 Javascript
解决vue2 在mounted函数无法获取prop中的变量问题
Nov 15 Javascript
如何使用three.js 制作一个三维的推箱子游戏
Jul 29 Javascript
浅谈Fetch 数据交互方式
Dec 20 #Javascript
cocos2dx+lua实现橡皮擦功能
Dec 20 #Javascript
element-ui table span-method(行合并)的实现代码
Dec 20 #Javascript
fetch 如何实现请求数据
Dec 20 #Javascript
JS闭包经典实例详解
Dec 20 #Javascript
JS闭包原理与应用经典示例
Dec 20 #Javascript
Mint UI组件库CheckList使用及踩坑总结
Dec 20 #Javascript
You might like
提问的智慧
2006/10/09 PHP
PHP 高手之路(二)
2006/10/09 PHP
深入PHP数据缓存的使用说明
2013/05/10 PHP
PHP请求远程地址设置超时时间的解决方法
2016/10/29 PHP
jQuery插件开发的两种方法及$.fn.extend的详解
2014/01/16 Javascript
jQuery获取当前对象标签名称的方法
2014/02/07 Javascript
Javascript基础知识(一)核心基础语法与事件模型
2014/09/29 Javascript
JS通过ajax动态读取xml文件内容的方法
2015/03/24 Javascript
javascript DOM的详解及实例代码
2017/03/06 Javascript
详解AngularJS 路由 resolve用法
2017/04/24 Javascript
Vue仿支付宝支付功能
2018/05/25 Javascript
layui结合form,table的全选、反选v1.0示例讲解
2018/08/15 Javascript
vue-rx的初步使用教程
2018/09/21 Javascript
微信小程序分享海报生成的实现方法
2018/12/10 Javascript
uni-app之APP和小程序微信授权方法
2019/05/09 Javascript
微信小程序实现拍照画布指定区域生成图片
2019/07/18 Javascript
微信小程序按钮点击动画效果的实现
2019/09/04 Javascript
JS Html转义和反转义(html编码和解码)的实现与使用方法总结
2020/03/10 Javascript
python实现问号表达式(?)的方法
2013/11/27 Python
Python实现定时精度可调节的定时器
2018/04/15 Python
如何使用Python的Requests包实现模拟登陆
2018/04/27 Python
替换python字典中的key值方法
2018/07/06 Python
python读写配置文件操作示例
2019/07/03 Python
python 图片二值化处理(处理后为纯黑白的图片)
2019/11/01 Python
关于Django Models CharField 参数说明
2020/03/31 Python
浅谈HTML5 Web Worker的使用
2018/01/05 HTML / CSS
英国时尚服饰电商:Boohoo
2017/10/12 全球购物
The North Face北面德国官网:美国著名户外品牌
2018/12/12 全球购物
设置器与访问器的定义以及各自特点
2016/01/08 面试题
励志演讲稿200字
2014/08/21 职场文书
大一工商管理职业生涯规划:有梦最美,行动相随
2014/09/18 职场文书
团党委领导干部党的群众路线教育实践活动个人对照检查材料思想汇
2014/10/05 职场文书
地道战观后感
2015/06/04 职场文书
2016年小学中秋节活动总结
2016/04/05 职场文书
为什么你写的height:100%不起作用
2021/05/10 HTML / CSS
一篇文章告诉你如何实现Vue前端分页和后端分页
2022/02/18 Vue.js