Cocos3--8. Enabling Novice booting

1. Clipping range with Clippingnode

To write a clipping interface:

function Createclipnode (node, stencil, inverted) {    var clip_node = new CC. Clippingnode ();    Set the template node (that is, the area to be cropped)    clip_node.stencil = stencil;    Add nodes to be cropped (displayed)    clip_node.addchild (node);    if (inverted! = undefined) {        //Set invert (because we need to keep the content outside the template area and crop out the contents of the area)        clip_node.setinverted (inverted);    }    Clip_node._stencil = stencil;    return clip_node;}

To create a cropping node at the boot layer:

    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, n, +);    Stencil.ignoreanchorpointforposition (false);    This.clip_node = Createclipnode (Mask, stencil, true);    This.addchild (This.clip_node, ui.mask_z);

This creates a full-screen black mask layer and then cuts out the stencil area on top. To change the area, we just need to change the position and size of the stencil.

Then write the cropped function in the guide layer:

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 the screen stencil.setposition (CC.P (10000, 10000));}    }

The function is to set the properties of the template using the anchor point, size, and position of the reference node ref, so that it can be cropped according to the reference node.

2. Simple process of booting

For a simple boot implementation, it is where the boot begins and the end of the boot ends. And when to start, when to end, if the volume is small and the start and end conditions are more special,

You can find the relevant place to start and end the boot. If the volume is large and the condition is more generalized (such as the end of a button event, the end of a sliding event, etc.), the condition can be abstracted and then configured.

Here's a simple way to start with the interface for starting and ending the boot.

Get the last boot step from the file stream first, here's the local storage:

Local Storagevar storage = {    Ls:cc.sys.localstorage,};storage.set = function (key, value) {    This.ls.setItem (k EY, value);} Storage.get = function (key) {    var value = This.ls.getItem (key);    if (Value! = ") {        return value;    }} Storage.remove = function (key) {    This.ls.removeItem (key);} Global Interfacevar guide = {    node:node,};//arrow://0 down, 1 right, 2 up, 3 leftguide.steps = [    ///0    {        name: ' btn_right ',        str: ' Press and hold the button to control the force and throw the sandbags into the red area. ',        arrow:1,    },    //...];/ /Gets the number of steps last boot completed guide.cur_step = storage.get (' guide ') | | 0;

Then prepare to start and end the boot interface:

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;} 

Node in the guide above is the root node of the boot interface. When the boot starts to Guide.start, the step count is the current step, which guides the current step, and obtains the text content to boot from the steps configured above.

and the name of the reference node (the reference node hangs to the current interface node object called Guide.start), as well as arrows (text, arrows display I don't say much), and then update the cropping area, display text, arrows, and so on. Increases the current number of steps at the end of the boot.

While the actual design of each boot, such as in step I, the place to start call Guide.start (i), at the end of the boot guide.end (i) can be. This is designed to be a simple single-line guide for simple

The beginner's Guide is enough.

3. Results

You crossing are tired, too. The following is my game "Jump House" in, interested students can come down to play it, thank you!

【】

"Jumping House" game

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

Cocos3--8. Enabling Novice booting