一、 需求分析

【1】實現(xiàn)手指觸摸刮開效果；【2】優(yōu)化：判斷刮開與否（能否正常看到獎項）。

二、 游戲場景可視化編輯

三、 手指觸摸刮刮卡動態(tài)刮開效果的實現(xiàn)

Mask為反向遮罩節(jié)點，必須確保大小和位置為（0，0）。

運用反向遮罩和繪圖來實現(xiàn)。 首先為Mask節(jié)點添加Mask組件。記得將Inverted（即反向遮罩）勾上。

原理：類似于PS中的遮罩，或者沙畫，比如你在玻璃上寫了幾個字，但是我在你玻璃上鋪上了一層灰色的沙子（MaskBg），在沙子上撒了一點特侖蘇，留下了“刮獎區(qū)”三個字。你想把下面的東西顯示出來，只能拿到Mask節(jié)點上面的那把刷子，將沙子掃開。

新建GameMgr.js，并掛載到Canvas節(jié)點上。代碼如下：

四、 隨機刮開獎項

在GameMgr.js中增加如下代碼即可：

五、 刮開面積計算與刮開結果后的回調處理

增加當擦除到70%的時候所有texture消失，執(zhí)行回調事件。

本方法是先根據(jù)接觸點的大小在圖片上排列一個點矩陣，每個點矩陣有一個檢測范圍且只能被檢測一次，每次被檢測刮開的數(shù)都會執(zhí)行++操作，直到接觸點等于目標點（刮開的范圍可以自己設置）后，遮罩的圖片消失，并執(zhí)行回調函數(shù)。

注：該方法不用設置主節(jié)點Mask節(jié)點的大小，在代碼會改變它的大小的。

1. 初始化遮罩層的記錄點數(shù)組

2. 刮出面積計算

3. 回調處理

添加一個對話框，隱藏，當刮開面積達到一定比例后，說明用戶已經刮開獎項了，可以彈出對話框提示領取方式等。

4. 思考：只刮開周邊區(qū)域沒看到文字也彈出不合理

方法一：縮放maskBg即可（如果獎項沒有顯示在中央則會不合理）

方法二：如下，添加覆蓋獎項的節(jié)點，調整位置、大小和透明度。

之后，運行結果如下（即使周邊全部刮開，內容沒顯示，也不會彈出兌獎方式）：

一、 小結

1、做游戲開發(fā)，首先要學會將任務拆解，其次要設計好游戲中的主要算法，考慮好采用的數(shù)據(jù)結構，之后，逐步實現(xiàn)步步為營。

2、有問題的朋友，可以聯(lián)系我們獲取本節(jié)課完整視頻。