cocoscreator 小遊戲“新手引導”簡單實例

在開發小遊戲過程中，【新手引導】是非常重要的一個功能，以下展示比較簡單快速實現該功能。

運用的知識點：

Mask 遮罩組件,

Blockinputevents 該組件將攔截所屬節點 bounding box 內的所有輸入事件（鼠標和觸摸），防止輸入穿透到下層節點，一般用於上層 UI 的背景。

cocoscreator界面：

界面上有三個按鈕，觸發新手引導，小手指向第一個按鈕，只有小手區可以點擊，其它區域不可以點擊；當用戶點擊時，則觸發第二個新手引導。以次類推

<code>guide.js 腳本
cc.Class({
    extends: cc.Component,

    properties: {

       headNode:cc.Node, // 小手節點
       maskNode:cc.Node, // 綁定mask組件
       // 引導 三個按鍵
       butNode:[cc.Node],

    },
    onLoad () { 
    },

    onClickBut:function(target,data){
        switch( data ){
            case "but1":
                // mask 組件 和 小手節點 x,y 位置改變，來實現下一次新手引導
                this.maskNode.x = this.butNode[1].x;
                this.headNode.x = this.butNode[1].x;
            break;

            case "but2":
                this.maskNode.x = this.butNode[2].x;
                this.headNode.x = this.butNode[2].x;
                break;
            case "but3":
                console.log("but3。。。。");
                break;

        }
    },
    start () {

    },

    // update (dt) {},
});/<code>

閱讀更多 cocosCreator開發 的文章

關鍵字: 小遊戲 新手 腳本語言