NO IMAGE
目錄

最近在公司專案裡寫了一個小模組,類似刮刮卡那種,覺得挺好玩,記錄一下

就像所有的刮刮卡一樣,一層灰色的蓋板,然後手指滑動可以刮開,看到下面隱藏的內容

環境:Cocos3.10 lua,主要在lua部分實現

 

首先新增一張底圖

local BotSprite = g_getChildNodeByName(tempNode,"Image")

然後新增一張遮蓋圖層,就是用來被刮的那部分

self.cha = CCSprite:create("frame/dkuang198.png")

把她挪到指定的位置上

local BotSprite = g_getChildNodeByName(tempNode,"Image")

然後是渲染部分

self.pRTex = cc.RenderTexture:create(display.width, display.height)
self.pRTex:setPosition(cc.p(display.cx, display.cy))  
self.pRTex:setAnchorPoint(cc.p(0.5,0.5))
self.pRTex:addTo(tempNode)  
self.pRTex:begin()
self.cha:visit()
self.pRTex:endToLua()

 關於RenderTexture的說明有很多,個人理解是類似照相機一樣,可以把當前圖片的紋理狀態拍攝下來,成為一個類似靜態的圖片東西,所以最關鍵就是begin和endToLua這兩句類似快門的作用,在這兩句中間的visit,就是拍下的圖片當前的紋理狀態了

 

然後是橡皮檫部分(圓形實心)

local pEarse = cc.DrawNode:create()
local fRadius = 30.0                      
local nCount = 100                           
local coef = 2.0 * math.pi/nCount             
local circle = {}                        
for i=1, nCount do   
local rads = i*coef                       
circle[i] = {}
circle[i].x = fRadius * math.cos(rads)            
circle[i].y = fRadius * math.sin(rads)            
end
pEarse:drawPolygon(circle, nCount, ccc4f(0, 0, 0, 0), 0, ccc4f(0, 0, 0, 0)) 
pEarse:retain()

這裡沒什麼好說的,drawPolygon函式是cocos提供的,circle 頂點陣列是從網上看到的方法,不知道原出處是哪裡,所以不知道貼誰的連結,具體思路就是:cocos提供了一個函式畫多邊形,然後我用這個函式畫了一個多邊形,只不過這個多邊形有一百條邊,看起來就好像是一個圓形

對了,沒有父節點的空間,記得新增retain(),屬於記憶體管理的一個函式,作用: 1s

 

最後一步,一個動作,用來讓你擦擦擦

tempNode:setTouchEnabled(true)  
tempNode:addTouchEventListener(function(sender,event)  
if event == ccui.TouchEventType.began then 
local temppos = sender:getTouchBeganPosition()
pEarse:setPosition(temppos.x 75,temppos.y)
local blendFunc = {GL_ONE, GL_ONE}
pEarse:setBlendFunc(blendFunc)
self.pRTex:begin()
pEarse:visit()
self.pRTex:endToLua()
return true  
elseif event == ccui.TouchEventType.moved then
local  temppos = sender:getTouchMovePosition()
pEarse:setPosition(temppos.x 75,temppos.y)
local blendFunc = {GL_ONE,GL_ONE}
pEarse:setBlendFunc(blendFunc)
self.pRTex:begin()
pEarse:visit()
self.pRTex:endToLua()
elseif event == ccui.TouchEventType.ended then
end  
end)  

這裡說明一下,沒有用底圖來做事件,也沒有用擦除圖層來做事件,而是選擇了一個父節點,是因為這是專案裡的一個小遊戲,為了方便一把刪除
ccui.TouchEventType.began這個判斷,是為了讓玩家不用執行擦除,僅點點點就可以擦完圖片,可以要也可以不要,個人覺得不要會更有刮刮卡的感覺
pEarse:setPosition:要不停的記錄橡皮擦的位置並顯示出來

setBlendFunc:這個函式和引數是非常關鍵的一步,叫混合圖層因子,建議剛開始的時候不要使用GL_ONE之類的引數來設定,直接就設定兩個引數(很簡單,不是1就是0),會比較好記憶,反正關於圖層的因子,現在也沒看明白是什麼意思

接下來的三個函式已經上面提過,給當前圖層拍個照而已

上面的事情做完,已經可以在lua裡顯示出一個刮刮ka的動作了

擦除圖層的百分比計算,暫時沒寫,寫了在記錄