cocos3——8.實現新手引導

1.使用ClippingNode裁剪範圍

  編寫裁剪接口：

function createClipNode(node, stencil, inverted) {
    var clip_node = new cc.ClippingNode();
    // 設置模板節點（就是要裁剪的區域）
    clip_node.stencil = stencil;
    // 添加要被裁剪掉的節點（顯示的內容）
    clip_node.addChild(node);
    if (inverted != undefined) {
        // 設置反轉（因爲我們需要保留模板區域外面的內容，裁剪掉區域裏的內容）
        clip_node.setInverted(inverted);
    }

    clip_node._stencil = stencil;
    return clip_node;
}

  在引導層創建裁剪節點：

    // create clip node
    var mask = cc.LayerColor.create(cc.color(0, 0, 0, ui.mask_a), ui.screen_width, ui.screen_height);
    var stencil = cc.LayerColor.create(cc.color.GREEN, 100, 100);
    stencil.ignoreAnchorPointForPosition(false);
    this.clip_node = createClipNode(mask, stencil, true);
    this.addChild(this.clip_node, ui.mask_z);

  這裏是創建了一個全屏的黑色遮罩層，然後在上面裁剪掉stencil的區域。要改變區域，我們只需要改變stencil的位置和大小就可以了。

  然後在引導層中寫裁剪的函數：

node.clipNode = function (ref) {
    this.clip_ref = ref;
    var stencil = this.clip_node.stencil;
    if (ref) {
        stencil.setAnchorPoint(ref.getAnchorPoint());
        stencil.setContentSize(ref.getContentSize());
        stencil.setPosition(ref.getParent().convertToWorldSpace(ref.getPosition()));
    } else {
        // set out of screen
        stencil.setPosition(cc.p(10000, 10000));
    }
}

  這個函數就是用傳進來的參考節點ref的錨點、大小、位置來設置模板的屬性，這樣就能按參考節點進行裁剪了。

2.引導的簡單流程

  對於簡單的引導實現，就是在引導開始的地方開始、引導結束的地方結束。而什麼時候開始、什麼時候結束，如果量小且開始、結束條件都比較特殊的話，

就可以找到相關的地方開始和結束引導。如果量大且條件比較一般化（比如按鈕事件結束、滑動事件結束之類的），可以將條件 抽象話，然後進行配置。

  下面就說簡單的方式吧，先準備一下引導開始和結束的接口。

  先從文件流獲取上次引導的步數吧，這裏用的local storage：

// local storage
var storage = {
    ls: cc.sys.localStorage,
};

storage.set = function (key, value) {
    this.ls.setItem(key, value);
}

storage.get = function (key) {
    var value = this.ls.getItem(key);
    if (value != '') {
        return value;
    }
}

storage.remove = function (key) {
    this.ls.removeItem(key);
}

// global interface
var guide = {
    node: node,
};

// arrow: // 0 down, 1 right, 2 up, 3 left
guide.steps = [
    // 0
    {
        name: 'btn_right',
        str: '請按住按鈕，控制力度，將沙包扔進紅色區域。',
        arrow: 1,
    },
    // ...
];

// 獲取上次引導完成的步數
guide.cur_step = storage.get('guide') || 0;

  然後準備開始和結束引導的接口：

guide.start = function (step) {
    if (step == this.cur_step) {
        console.log('guide start:', step, ',', this.cur_step);

        this.started = true;
        this._show(true);
        var info = this.steps[this.cur_step];
        this.node.updateData(info);
    }
}

guide.end = function (step) {
    if (!this.started) {
        return;
    }
    this.started = false;

    if (step == undefined) {
        step = this.cur_step;
    }
    if (step == this.cur_step) {
        console.log('guide end:', step, ',', this.cur_step);

        storage.set('guide', ++this.cur_step);
        this._show(false);
    }
}

guide._show = function (show) {
    if (show) {
        if (!this.node.getParent()) {
            this.node.init();
            ui.scene.addChild(this.node);
        }
    }
    this.node.visible = show;
}

  上面guide裏的node就是引導界面的根節點。引導開始guide.start的時候，判斷步數是當前步，就引導當前步，從上面配置的steps裏面獲取要引導的文字內容，

以及參考節點的名字（參考節點會掛到guide.start被調用的當前界面node對象下）、以及箭頭等（文字、箭頭的顯示我就不多說了），然後更新裁剪區域、顯示文字、箭頭等。在引導結束的時候將當前步數增加。

  而實際設計各個引導的時候，比如在第i步的時候，去開始的地方調用guide.start(i)，在引導完的時候掉guide.end(i)就可以了。這裏設計的是簡單的單線引導，對於簡單的

新手引導已經夠用了。

  

3.結果

  各位看官也累了。下面是我遊戲《跳房子》裏的截圖，有興趣的同學可以下來玩玩吧，多謝啦！

【下載地址】

《跳房子》遊戲下載地址

http://zhushou.360.cn/detail/index/soft_id/2766861