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 相关文章推荐
(推荐一个超好的JS函数库)S.Sams Lifexperience ScriptClassLib
Apr 29 Javascript
JavaScript 权威指南(第四版) 读书笔记
Aug 11 Javascript
DOM基础教程之事件对象
Jan 20 Javascript
node.js下LDAP查询实例分享
Sep 30 Javascript
js中对函数设置默认参数值的3种方法
Oct 23 Javascript
常常会用到的截取字符串substr()、substring()、slice()方法详解
Dec 16 Javascript
微信小程序 点击控件后选中其它反选实例详解
Feb 21 Javascript
Javascript实现登录记住用户名和密码功能
Mar 22 Javascript
vue mint-ui tabbar变组件使用
May 04 Javascript
详解React+Koa实现服务端渲染(SSR)
May 23 Javascript
深入浅析AngularJs模版与v-bind
Jul 06 Javascript
Angular6 写一个简单的Select组件示例
Aug 20 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
基于PHP实现等比压缩图片大小
2016/03/04 PHP
Zend Framework入门教程之Zend_Mail用法示例
2016/12/08 PHP
PHP使用ActiveMQ实例
2018/02/05 PHP
tp5.1 框架数据库-数据集操作实例分析
2020/05/26 PHP
预加载css或javascript的js代码
2010/04/23 Javascript
jQuery源码分析-04 选择器-Sizzle-工作原理分析
2011/11/14 Javascript
jquery.post用法关于type设置问题补充
2014/01/03 Javascript
jQuery中$.each使用详解
2015/01/29 Javascript
JavaScript使用Prototype实现面向对象的方法
2015/04/14 Javascript
浅谈JavaScript 的执行顺序
2015/08/07 Javascript
js判断子窗体是否关闭的方法
2015/08/11 Javascript
原生javascript实现分享到朋友圈功能 支持ios和android
2016/05/11 Javascript
jQuery简单实现iframe的高度根据页面内容自适应的方法
2016/08/01 Javascript
JS对象的深度克隆方法示例
2017/03/16 Javascript
vue学习之mintui picker选择器实现省市二级联动示例
2017/10/12 Javascript
js判断输入框不能为空格或null值的实现方法
2018/03/02 Javascript
JS代码实现电脑配置检测功能
2018/03/21 Javascript
webpack v4 从dev到prd的方法
2018/04/02 Javascript
JS/HTML5游戏常用算法之路径搜索算法 A*寻路算法完整实例
2018/12/14 Javascript
微信小程序在线客服自动回复功能(基于node)
2019/07/03 Javascript
使用layui前端框架弹出form表单以及提交的示例
2019/10/25 Javascript
微信小程序基于ColorUI构建皮皮虾短视频去水印组件
2020/11/04 Javascript
python实现监控windows服务并自动启动服务示例
2014/04/17 Python
python中私有函数调用方法解密
2016/04/29 Python
Python程序运行原理图文解析
2018/02/10 Python
python 查找文件名包含指定字符串的方法
2018/06/05 Python
Python多线程应用于自动化测试操作示例
2018/12/06 Python
python__name__原理及用法详解
2019/11/02 Python
Python面向对象封装操作案例详解 II
2020/01/02 Python
html5使用canvas画一条线
2014/12/15 HTML / CSS
国外平面设计素材网站:The Hungry JPEG
2017/03/28 全球购物
戴尔英国翻新电脑和电子产品:Dell UK Refurbished Computers
2019/07/30 全球购物
市场部业务员岗位职责
2014/04/02 职场文书
冬季施工防火方案
2014/05/17 职场文书
我在伊朗长大观后感
2015/06/16 职场文书
写作之关于描写老人的好段摘抄
2019/11/14 职场文书