Cocos Creator 2.X 小技巧-簡單版自定義多邊形遮罩及模板修改

前陣子做了個帶有杯子的游戲，各種各樣的杯子需要帶有指示線；不做處理的時候是這個樣子的：

實際開發(fā)中需要把兩邊多余的部分隱藏掉，這時候第一個想到的是應該用  Mask 來遮罩處理，但是發(fā)現(xiàn) Mask 組件的三個遮罩類型并不能滿足所有情況：

因為杯子原圖其實是一個 166*166 的圖，所以遮罩會保留杯子兩側的虛線。

后來在引擎 CCMask.js

（路徑：Creator\2.2.2\resources\engine\bin\.cache\dev\cocos2d\core\components） 源碼中發(fā)現(xiàn) CCMask  聲明了 this._graphics

并且執(zhí)行了 _createGraphics 方法。

在 _createGraphics 里創(chuàng)建了 Graphics 組件。

了解了之后我們可以在 Cocos 里獲取 cc.Mask 組件的 _Graphics，并用 Graphics 組件的繪圖接口來自定義一個形狀的遮罩；

首先我們創(chuàng)建一個渲染節(jié)點 glass，在 glass 下添加一個子節(jié)點（命名：mask），再把紅色虛線放在 mask 節(jié)點下，給mask節(jié)點掛上Mask組件，再新建一個腳本 PolygonMask；

寫一個 mask 方法獲取 Mask 組件的 _graphics：

mask() {        let graphics = this.node.getComponent(cc.Mask)['_graphics'];    }

獲取 _graphics 之后我們需要一個點數(shù)組來繪制自定義多邊形遮罩。怎么獲取這個點數(shù)組呢？

想到可以用 PolygonCollider 組件里的 Points 多邊形頂點數(shù)組來代替；給 mask 節(jié)點掛上 PolygonCollider 組件，我們手動編輯一下，繪制出需要遮罩的輪廓：

然后在代碼中獲取：

mask() {        let graphicsPosArr = this.node.getComponent(cc.PolygonCollider).points;        let graphics = this.node.getComponent(cc.Mask)['_graphics'];        graphics.clear(false);        graphics.moveTo(graphicsPosArr[0].x, graphicsPosArr[0].y);        for (let i = 1; i < graphicsPosArr.length; i++) {            graphics.lineTo(graphicsPosArr[i].x, graphicsPosArr[i].y);        }        graphics.close();        graphics.stroke();        graphics.fill();    }

在 start 函數(shù)中執(zhí)行以下 mask 方法，預覽運行：

使用 Cocos Creator 開發(fā)時，當我們新建一個 TypeScript 腳本時，默認的腳本內容頂部總有一些沒用的東西：

今天我們來修改一下腳本模板，刪掉這些沒用的東西并把它改成自己想要的樣子。

第一步：點擊 Cocos 右上角的”編輯器“按鈕。

點擊之后會彈出 Cocos 安裝目錄的 resource 文件夾，雙擊打開 static 文件夾：

繼續(xù)雙擊打開 template：

在 template 文件夾中找到 new-scripts.ts，并用編譯器打開它，如果想修改 js 模板就打開 new-scripts.js 來修改：

打開是這個樣子的，把不想要的東西刪掉，然后保存就可以了。

修改了一下腳本模板內容：

• 腳本功能：描述腳本用途；
  

• 修改內容：每次修改腳本時，記錄一下修改了什么，防止后面忘記自己改了什么
  

• 修改時間：記錄一下上次修改此腳本的時間
  

原模板的兩個 @property 刪掉了，平時新建的時候每次都要刪，以后就省事兒了~

生命周期函數(shù)解開注釋了，感覺挺常用的。

修改保存之后下次再新建的腳本就是咱們更改后的新模板了。

往期精彩