Use cocos2d-js to create a new player guide-source article (3)

Use cocos2d-js to create a new player guide-source article (3)

The previous article has explained the implementation details of the positioner. This article mainly describes the components of the Implementation Guide and the entire guide process, and provides the source code of the entire Guide.

The entire guiding framework consists of the following parts:
-Pilot Configuration
-Positioner
-Boot task Processor

Bootstrap Configuration

See the figure below:

UI guiding steps:

Turn off the first light control name "_ fire1" turn off the second light control name "_ fire2" Light up the first light control name "_ fire1" Light up the second light control name "_ fire2" click the Home icon Control name "_ btnHome" and click the Task icon Control name "_ btnTask"

The Design of UI operations has been determined, and the Control name is crucial for guidance. We must first make these preparations.
Here we introduce the concept of task and step: Bootstrap is composed of multiple tasks, which are called tasks. One task is called a task, and one task contains multiple Bootstrap steps, which are called step. (This is the same as the Task Group and Task mentioned in the previous article, but it is just a different saying. When writing code, I think the tasks and steps are used to express them so that the code is clearer)

Detailed guidance requirements: <喎?http: www.bkjia.com kf ware vc " target="_blank" class="keylink"> VcD4KPGJsb2NrcXVvdGU + large + MtbQts + large/large + LbIPC9ibG9ja3F1b3RlPgo8cD621NOmtcTS/large = "brush: java;"> Var guideConfig = {tasks: {1: [{log: Turn off the first light, command: sz. guideCommand. GC_FINGER_HINT, locator: _ fire1}, {log: Turn off the second light, command: sz. guideCommand. GC_FINGER_HINT, locator: _ fire2}, {log: Save progress, command: sz. guideCommand. GC_SAVE_PROGRESS}, {log: light the first light, command: sz. guideCommand. GC_FINGER_HINT, locator: _ fire1}, {log: light the second light, command: sz. guideCommand. GC_FINGER_HINT, locator: _ fire2},], 2: [{log: 'click home', command: sz. guideCommand. GC_FINGER_HINT, locator: _ btnHome}], 3: [{log: 'click task', command: sz. guideCommand. GC_FINGER_HINT, locator: _ btnTask}]}, locateNodeDurationTime: 0.1, fingerImage: 'res/finger.png '}; // pilot command sz. guideCommand = {GC_SET_PROPERTY: 1, // set the property GC_FINGER_HINT: 2, // The manual prompts GC_SAVE_PROGRESS: 3 // save progress };

Currently, sz. GuideCommand has only three built-in commands: setting properties, manual prompts, and saving progress.

Boot task Processor

From the preceding task configuration, the processing of the task steps is a sequential execution process, but the UI operation is an asynchronous process. Only after the UI operation is complete can the next task be performed. For javascript, processing asynchronous events and callback functions are the best. However, for better code readability and maintainability, we use the top-name async library to process tasks and steps, this can solve the depth of the callback function.

Async

Here we only use two async functions:

Async. eachSeries (tasks, iterator, callback)

We use async. eachSeries to traverse our entire task array. iterator is an iterator function used to process every task. After callback is complete for all tasks, we use it to leave the guide.

Async. series ({}, [callback])

We use async. series to process several main actions of a step object: Step start, step processing, step completion
The core here is step processing. we can expand the step object to increase flexibility at the beginning and end of the step.
For example, if you need to check the gold coins and grades before a step starts, this step will not be triggered if it is not met. In the next article, I will give you a demo of the relevant code.

Process all tasks

// Obtain the task array var tasks = [...] // use the eachSeries function to traverse all task objects async. eachSeries (tasks, function (task, cb) {// traverses the step object in the task, and Stephen Andle is the process function async. eachSeries (task, Stephen Andle, function () {// when all the steps in a task are completed, the Progress self is automatically saved. _ guideLayer. save (true, cb) ;};}, function () {// when all tasks are completed, exit the bootstrap self. _ exitGuide () ;}); // process var Stephen Andle = function (step, callback) {async. series ({// step start stepBegin: function (cb) {self. _ guid ELayer. _ setLocateNode (null); if (step. onEnter) {step. onEnter. call (this. _ guideLayer, cb) ;}else {cb (); // execute the cb function to trigger the following stepProcess function }}, // step by step process: function (cb) {if (step. delayTime) {self. _ guideLayer. scheduleOnce (function () {self. _ processStep (step, cb) ;}} else {// execute the specific step processing operation and pass in the setp object. After the step is completed, the cb function is automatically executed, go to the setpEnd function self. _ processStep (step, cb) ;},// step completion stepEnd: function () {if (ste P. onExit) {step. onExit. call (this. _ guideLayer, callback);} else {// The callback parameter is the parameter of Stephen Andle, and all the tasks of executing the callback function are completed. Callback ();}}});};

The core of task processing is step processing. The most important step processing is to correctly execute step instructions.

_ ProcessStep: function (step, cb) {var self = this; // print the step log if (step. log) {cc. log (guide: <+ step. log +, step begin>);} // generate the step completion function. Run this function in a unified manner to print the step log var finish = function () {if (step. log) {cc. log (guide: <+ step. log +, step finished>);} if (step. delayTime) {setTimeout (cb, step. delayTime * 1000) ;}else {cb () ;}; // process step command switch (step. command) {// set the property case sz. guideCommand. GC_SET_PROPERTY: this. _ guideLayer. locateNode (step. locator, function (node) {var property = step. args [0]; var args = step. args. slice (1); node [property]. apply (node, args) ;}); break; // The case sz prompt is displayed in the manual mode. guideCommand. GC_FINGER_HINT: this. _ guideLayer. locateNode (step. locator, function (node) {self. _ guideLayer. fingerToNode (node, finish, true); if (step. onLocateNode) {step. onLocateNode. call (this. _ guideLayer, node) ;}}); break; // save progress case sz. guideCommand. GC_SAVE_PROGRESS: this. _ guideLayer. save (false, finish); break; default: cc. log (guide command is not define );}}

Detection of UI events in the locating Area

As mentioned in the previous article, the detection of UI events in the positioning area is implemented through the observer mode. When I strip the guiding framework from the original project, I think that too many people may have their own observer implementations. In addition, implementing the UI event detection with the observer will make the Code become too dependent. Therefore, the observer mode is not used in sz. Guide to detect events.
The UI event detection mainly uses the dynamic capabilities of the javascript language to intercept event functions. The general idea is as follows:

Save the original event function variable. Use the new function to overwrite the original event function. Execute the original event function in the new function and execute its own logic in the new function.

Sz. Guide uses sz. UILoader in Event Management

// _ OnWidgetEvent is the event handler function on UILoader. All UI events will trigger var widgetEvent = sz. uiloader. _ onWidgetEvent; sz. uiloader. _ onWidgetEvent = function (sender, type) {// first execute the original event function if (widgetEvent) {widgetEvent (sender, type);} // execute the event function self in this class. _ onWidgetEvent (sender, type);} _ onWidgetEvent: function (sender, type) {var locateNode = this. _ locateNode; // check whether the positioning node is the current event node if (locateNode & (sender = this. _ locateNode | sender. getName () === locateNode. getName () {this. _ setLocateNode (null); // execute the step callback function to complete the current step this. _ setpCallback ();}},

Summary

Sz. Guide currently implements a simple and basic Guide function, and there are still many incomplete aspects that need to be added and improved. However, the general idea is clear, and it is very easy to write a pilot task without disrupting the logic structure of the existing code. After all your games are complete, you can easily place your guide into the game.

If you are interested, you can try to modify the configuration in guideConfig. js, add more pilot steps, and click the following functional buttons in sequence for pilot use. Their control names are respectively:

_ BtnHome, _ btnTask, _ btnPlunder, _ btnBag, _ btnFriends, _ btnSetting