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 相关文章推荐
Firefox和IE浏览器兼容JS脚本写法小结
Jul 07 Javascript
javascript 面向对象的JavaScript类
May 04 Javascript
Jquery 实现表格颜色交替变化鼠标移过颜色变化实例
Aug 28 Javascript
一个简单的实现下拉框多选的插件可移植性比较好
May 05 Javascript
使用Raygun对Node.js应用进行错误处理的方法
Jun 23 Javascript
javascript图片预加载实例分析
Jul 16 Javascript
JS判断是否在微信浏览器打开的简单实例(推荐)
Aug 24 Javascript
微信页面倒计时代码(解决safari不兼容date的问题)
Dec 13 Javascript
页面间固定参数,通过cookie传值的实现方法
May 31 Javascript
详解Vue项目编译后部署在非网站根目录的解决方案
Apr 26 Javascript
vue-quill-editor富文本编辑器简单使用方法
Sep 21 Javascript
Vue.js 中的 v-cloak 指令及使用详解
Nov 19 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
全国FM电台频率大全 - 7 吉林省
2020/03/11 无线电
PHP获取用户访问IP地址的5种方法
2016/05/16 PHP
PHP 信号管理知识整理汇总
2017/02/19 PHP
Laravel 解决419错误 -ajax请求错误的问题(CSRF验证)
2019/10/25 PHP
javascript贪吃蛇完整版(源码)
2013/12/09 Javascript
理解jQuery stop()方法
2014/11/21 Javascript
怎么通过onclick事件获取js函数返回值(代码少)
2015/07/28 Javascript
XML文件转化成NSData对象的方法
2015/08/12 Javascript
微信小程序 video组件详解
2016/10/25 Javascript
javascript性能优化之分时函数的介绍
2018/03/28 Javascript
详解微信小程序获取当前时间及日期的方法
2019/04/28 Javascript
微信小程序实现搜索指定景点周边美食、酒店
2019/05/18 Javascript
Vue组件基础用法详解
2020/02/05 Javascript
JS数据类型(基本数据类型、引用数据类型)及堆和栈的区别分析
2020/03/04 Javascript
vue-cli3项目打包后自动化部署到服务器的方法
2020/09/16 Javascript
Python中的模块导入和读取键盘输入的方法
2015/10/16 Python
Ubuntu下安装PyV8
2016/03/13 Python
matplotlib 纵坐标轴显示数据值的实例
2018/05/25 Python
selenium + python 获取table数据的示例讲解
2018/10/13 Python
python 堆和优先队列的使用详解
2019/03/05 Python
Django项目之Elasticsearch搜索引擎的实例
2019/08/21 Python
python tkinter组件摆放方式详解
2019/09/16 Python
Python语法垃圾回收机制原理解析
2020/03/25 Python
Python导入模块包原理及相关注意事项
2020/03/25 Python
澳大利亚美容产品及化妆品在线:Activeskin
2020/06/03 全球购物
盛大二次面试题
2016/11/18 面试题
国际贸易专业个人求职信格式
2014/02/02 职场文书
马智宇婚礼主持词
2014/03/22 职场文书
遗失说明具结保证书
2015/02/26 职场文书
幼儿园六一儿童节演讲稿
2015/03/19 职场文书
2015小学语文教师个人工作总结
2015/05/20 职场文书
2015年保险公司个人工作总结
2015/05/22 职场文书
开业庆典致辞
2015/08/01 职场文书
Nginx配置SSL证书出错解决方案
2021/03/31 Servers
纯CSS实现酷炫的霓虹灯效果
2021/04/13 HTML / CSS
MongoDB 常用的crud操作语句
2021/06/20 MongoDB