Implement auto-boot on the browser (v)

Pick up my Novice Guide Series blog post.
In game development, novice-led design, code writing, testing takes a lot of time and effort, especially test validation, in the back-and-forth of the guidance process points to point, will make people have a feeling of collapse. So is it possible to get the computer to run our boot automatically based on our novice boot configuration?

The answer is yes, please take a look at the demo below:

Manually perform the boot and note the movement of the mouse pointer.

Automatically executes the boot, noting that the mouse pointer is not moving.

In Sz. Start Auto Boot in guide

Just add an open switch to your boot configuration

guideConfig = {    tasks:{...},                        //引导任务    fingerImage:‘res/finger.png‘,       //手型图片    false,                  //是否开启遮罩    true                   //是否自动引导

Isautoguide:true can turn on auto-boot, very simple. You can turn it on and off at any time in your game, which is useful for testing.

Implementation of automatic booting

Currently Sz. Guide only implements the automatic boot function on the browser, the idea is to follow the node name in the boot configuration, locate the node in the game rendering, and simulate the mouse action, trigger the node control event to complete.

Simulate mouse events in the browser

It is convenient to use JavaScript to simulate mouse events on a browser, using the Initmouseevent function to accomplish:

Initmouseevent (Type,//string Type: The type of event to trigger, such as ' click '. Bubbles//Boolean type: Indicates whether the event should be bubbling, and the value should be set to true for mouse event impersonation. Cancelable,//BOOL Type: Indicates whether the event can be canceled, and the value should be set to true for mouse event impersonation. View//Abstract View: The view of event grants, which is almost entirely document.defaultview.Detail//INT Type: Additional event information This should generally default to 0 when initialized. ScreenX,//INT type: The x-coordinate of the event distance to the left of the screenScreenY,//int type: The y-coordinate of the event distance from the top of the screenClientX,//INT type: The x-coordinate of the event distance to the left of the visible areaClientY,//int type: The y-coordinate of the upper edge of the event distance visible areaCtrlkey,//Boolean type: Indicates whether the Ctrol key is pressed and the default is False. Altkey,//Boolean type: Indicates whether the ALT key is pressed and the default is False. Shiftkey,//Boolean type: Indicates whether the SHIF key is pressed and the default is False. Metakey,//Boolean type: Indicates whether the META key is pressed and the default is False. button//INT type: Represents the mouse button being pressed, the default is 0.Relatedtarget//(object): The associated object of the event. Used only when simulating mouseover and mouseout. )

The Initmouseevent function is very much, but for us to only need to simulate Touchbegan and touchended, the corresponding mouse event type is MouseDown and MouseUp, we also need to be concerned about the location of the control you want to click X and Y. Only these parameters are needed to complete our task.

Mouse events are generated, and events need to be dispatched to the document's node, COCOS2D-JS the default canvas node is named Gamecanvas, and we need to deliver the event to it.

//Get GamecanvasvarPT = ...//Calculate location by coordinates conversionvarCanvas = document.getElementById ("Gamecanvas");//Initialize mouse eventsvarMouseDown = Document.createevent ("MouseEvent"); Mousedown.initmouseevent ("MouseDown",true,true, window,0,0,0, Pt.x, Pt.y,true,false,false,false,0,NULL);//Assign mouse events to canvasCanvas.dispatchevent (MouseDown);

coordinate system

The cococs2d is known as the bottom-left corner (x=0,y=0), while in the DOM element the origin of the coordinates is the upper-left corner (x=0, y= 0), and for the cocos2d coordinate system, see Dongsheng's article Cocos2d-js coordinate system.

Node coordinates

By booting the locator, we get to the node object and get the relative position of the node's parent node through the node.getposition () function.

World coordinates

Hand Wizard on the guide layer, the guide layer is the entire screen size. To make the Hand wizard point correctly to the node being anchored, you also need to convert the node coordinates to the world coordinates in COCOS2D. Convert a point to a world coordinate point by using the transform function of the parent point section:

var point = Locatenode.getparent (). Converttoworldspace (Locatenode.getposition ());

COCOS2D World coordinates to canvas coordinates

The final step is to convert the coordinates in the game to canvas coordinates, then execute the mouse simulation function and click on the controls we've positioned.
1. Get the canvas rectangle information

 function gethtmlelementposition(Element) {    varDocelem = document.documentelement;varwin = window;varbox =NULL;if(Cc.isfunction (Element.getboundingclientrect))    {box = Element.getboundingclientrect (); }Else{if(elementinstanceofhtmlcanvaselement) {box = {left:0, Top:0, Width:element.width, height:element.height}; }Else{box = {left:0, Top:0, Width:parseint(element.style.width), Height:parseint(Element.style.height)}; }    }return{left:box.left + win.pagexoffset-docelem.clientleft, Top:box.top + win.pageyoffset-docelem.clienttop, Width:box.width, height:box.height};}

The above code to get a DOM node rectangle information, in fact, do not write this method, you can directly call Cc.inputManager.getHTMLElementPosition (), the engine already has this method.

2. Coordinate conversion
The left of the canvas rectangle corresponds to the game World X coordinate, and the mouse position is x offset rect.left

X + rect.left
The top of the canvas rectangle is opposite to the game's bounding y coordinate, rect.top + rect.height for the game world corresponding to the bottom of the browser, the greater the Y coordinate in the game, the smaller the y in the canvas:
Rect.top + rect.height-y

Please see the following code for details:

Mousesimulation: function(x, y) {    varCanvas = document.getElementById ("Gamecanvas");varRECT = cc.inputManager.getHTMLElementPosition (canvas);//gethtmlelementposition (canvas);    varPT = CC.P (x + rect.left, rect.top + rect.height-y);varMouseDown = Document.createevent ("MouseEvent"); Mousedown.initmouseevent ("MouseDown",true,true, window,0,0,0, Pt.x, Pt.y,true,false,false,false,0,NULL);    Canvas.dispatchevent (MouseDown); SetTimeout ( function () {        varMouseUp = Document.createevent ("MouseEvent"); Mouseup.initmouseevent ("MouseUp",true,true, window,0,0,0, Pt.x, Pt.y,true,false,false,false,0,NULL);    Canvas.dispatchevent (MouseUp); }, -);}

Now that all the problems have been resolved, the Mousesimulation function is inserted into the boot process to experience the automatic boot of the refreshing bar!

Automatic execution, note that the mouse pointer is not moving, the boot prompt is moving

Implement auto-boot on the browser (v)