SoFunction
Updated on 2025-04-06

Cocos2d realizes scratch card effect

This article shares the specific code for Cocos2d to realize the scratch card effect display for your reference. The specific content is as follows

The code in this article is suitable for Cocos2d-x Quick-Community3.6

local TestScene = class("TestScene", function()
 return ("TestScene")
end)

function TestScene:ctor()
 
end

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

function TestScene:initUI()
 --Scratch card bottom container
 local scratchLayer = ()
 scratchLayer:setContentSize(self:getBoundingBox())
 self:addChild(scratchLayer)

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

 --createRenderTexture
 local scratch = :create(scratchLayer:getBoundingBox().width,scratchLayer:getBoundingBox().height)
 scratch:setPosition(scratchLayer:getBoundingBox().width/2,scratchLayer:getBoundingBox().height/2)
 scratch:retain()

 --The elf who needs to be hung up This article is replaced by a pure white background
 local bg = :createWithTexture(nil, (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)

 --Rendering
 scratch:begin()
 bg:visit()
 scratch:endToLua()

 scratchLayer:addChild(scratch)

 --useDrawNodecreate模拟的刮除媒介
 local eraser = :create()
 --The scraping medium is a circle The radius is20 Definition can be defined by yourself
 local r = 20

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

 eraser:retain()

 --Start adding touch events
 scratchLayer:addNodeEventListener(cc.NODE_TOUCH_EVENT, function (event)
 --First scrape off the click area
 eraser:setPosition(,)

 eraser:setBlendFunc(,)

 scratch:begin()
 eraser:visit()

 --[[
  Focus:Because the number of callbacks is limited,If no processing is done,
  When we swipe quickly on the screen, we don't call it enough,Scrape points will be generated
  And there is no scraping in the middle。
  The following code is to scrape off the middle rectangle area twice
 ]]
 local isEnded = false
 if  ~= "began" then
  if  then
  --Rectangle width and height
  local width = self:getP2PDis(event, )
  local height = 2*r
  --Rectangle midpoint
  local midPos = ((+)/2,(+)/2)
  --Rotation angle
  local rotate = self:getP2PAngle(, event)

  --Rectangle scraping media
  local polygonEraser = :create()
  local points = {
   (-width/2,-height/2),
   (-width/2,height/2),
   (width/2,height/2),
   (width/2,-height/2)
  }
  polygonEraser:drawPolygon(points, {
   fillColor = cc.c4f(0, 0, 0, 0),
   borderWidth = 1,
   borderColor = cc.c4f(0, 0, 0, 0),
  })

  --Scrape the rectangular area
  polygonEraser:setRotation(-rotate)

  polygonEraser:setPosition(midPos)

  polygonEraser:setBlendFunc(,)

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

 if not isEnded then
  scratch:endToLua()
 end

  = (,)

 if  == "ended" then
   = nil
 end

 return true
 end)
end

--Two-point spacing
function TestScene:getP2PDis(p1,p2)
 local x =  - 
  local y =  - 
  return (((x,2)+(y,2)))
end

--Two-point connection line angle
function TestScene:getP2PAngle(p1,p2)
  local x =  - 
  local y =  - 
  return 180 * (math.atan2(y, x) / )
end

return TestScene

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.