cocos creator中開發的新手引導

使用cocos creator 製作新手引導

其中的點擊屏蔽借用了這位大哥CocosCreator 新手引導 圓圈圈中部分能點擊 ，圈外點擊無效的分享，表示感謝

首先用一個類來管理新手引導的數據，代碼如下

var GuideData = {
    //外部不可直接訪問
    _isGuide: true,  
    _stageID: 101,
    _stageStep: 1,
    _isComplete: false,
    initData: function () {
        if (!!tempData) {
            this._isGuide = tempData.is_guide;
            this._stageID = tempData.stage_id;
            this._stageStep = tempData.stage_step;
            this._isComplete = tempData.is_complete;
        } else {
            // console.log("!!! not have guide info use default", this.isGuide, this.stageName, this.stageStep);    
        }
    },
    setData: function (ID, step, isComplete) {
        this._stageID = ID;
        this._stageStep = step;
        this._isComplete = isComplete;
        this.UpdateGuideInfo();
    },
    UpdateGuideInfo: function () {
        var stageInfo = {
            is_guide: this._isGuide,
            stage_id: this._stageID,
            stage_step: this._stageStep,
            is_complete: this._isComplete,
        }
    },
    getGuideInfo: function () {
        var stageInfo = {
            isGuide: this._isGuide,
            stageID: this._stageID,
            stageStep: this._stageStep,
            isComplete: this._isComplete
        }
        return stageInfo;
    },
    getGuideState: function () {
        return this._isGuide;
    },
    setCloseGuide: function () {
        this._isGuide = false;
        this.UpdateGuideInfo();
    },
    setOpenGuide: function () {
        this._isGuide = true;
        this.UpdateGuideInfo();
    },
}

module.exports = GuideData;

然後是一個新手引導的管理類，用於引導的切換，關閉

var guideData = require("GuideData");
cc.Class({
    extends: cc.Component,
    properties: {
        shieldingBtn: cc.Node,
    },
    onLoad() {
        this.guides = this.node.children;
        this.shieldingBtnContol();
    },
    /**
     * 打開引導
     * @param {JSON} data 要打開的引導階段信息 
     */
    OpenGuide: function(data) {
        var guide = guideData.getGuideState();
        var stageID = data.stageID;
        guideData.setData(data.stageID, data.stageStep, data.isComplete);
        if (guide) {
            this.guides.forEach(element => {
                if (element._name == stageID) {
                    element.active = true;
                    let jsName = "Guidance" + stageID;
                    element.getComponent(jsName).InitData(data);
                    return;
                }
            });
        }
    },

    /**
     * 切換引導
     * @param {JSON} event 要切換到的引導階段信息
     */
    ChangeGuide: function(event) {
        guideData.setData(event.stageID, event.stageStep, event.isComplete);
        this.CloseGuide(event.stageID - 1);
        this.OpenGuide(event);
    },
    /**
     * 關閉當前引導引導
     * @param {number} stageID  要關閉引導階段ID 
     */
    CloseGuide: function(stageID) {
        if (stageID == 100) {
            return;
        } else {
            this.guides.forEach(element => {
                if (element._name == stageID) {
                    element.active = false;
                }
            });
        }
    },

    shieldingBtnContol: function() {
        var guideInfo = guideData.getGuideInfo();
        let finallyLottery = dataOperateFunc.getBlobMapByKey("finallyLottery");
        let bldg = bldgInfoData.getSingeBldgInfo(1104);
        if (bldg.level > 0 || (finallyLottery != undefined && finallyLottery != 1)) {
            this.shieldingBtn.active = false;
        } else {
            this.shieldingBtn.active = true;
        }

    },
});

抽象出一個引導類，用於具體的引導任務實現，具體的引導可以通過繼承改類進行修改

var guideData = require("GuideData");
var IGuidance = cc.Class({
    extends: cc.Component,
    properties: {
        _isCatchTouch: true,
    },
    onLoad() {
        this.touchArea = cc.find("mask/touchArea", this.node);
        this.tipMesgLabel = cc.find("tipMessage", this.node);
        this.node.on(cc.Node.EventType.TOUCH_START, this.CanTouch, this);
        cc.game.on('LevelTwentyFour', this.CompletionOpration, this);
        this.canTouch = true;
    },
    CanTouch: function (event) {
        if (this.canTouch) {
            this.OnTouchBg(event);
        } else {
            console.log("the is set can`t touch");
        }
    },
    OnTouchBg: function (event) {
        let point = event.getLocation();
        let retWord = this.touchArea.getBoundingBoxToWorld();
        let space = 40;

        retWord.width -= space;
        retWord.width = retWord.width <= 0 ? 0 : retWord.width;
        retWord.height -= space;
        retWord.height = retWord.height <= 0 ? 0 : retWord.height;
        if (retWord.contains(point)) {
            this.node._touchListener.setSwallowTouches(false);
        } else {
            this.node._touchListener.setSwallowTouches(true);
        }
    },
    InitData: function (data) {
        this.stageID = data.stageID;
        this.stageStep = data.stageStep;
        this.isComplete = data.isComplete;
        this.ShowGuide();
    },
    CompletionOpration: function (data) {
        this.stageStep = data.stageStep;
        this.isComplete = data.isComplete;
        if (data.stageID == this.stageID) {
            this.ShowGuide();
        }
    },
    ShowGuide: function () {
        beginnerGuide.data.forEach(element => {
            if (element.stage_id == this.stageID) {
                if (element.step == this.stageStep) {
                    if (this.isComplete) {
                        if (!!element.des_after) {
                            this.tipMesgLabel.getComponent(cc.RichText).string = element.des_after;
                        } else {}
                    } else {
                        if (!!element.des_front) {
                            this.tipMesgLabel.getComponent(cc.RichText).string = element.des_front;
                        } else {
                            return;
                        }
                    }
                }
            }
        });
    },

});

代碼不是完整代碼，記錄下製作的思想，以後有了新的想法可以再來修改，希望能對有需要的人有點用，我就是個菜雞，希望能得到大神指點，練就絕世神功。。。。。