Implement automatic guidance on the browser (5) and implement browser Guidance

Implement automatic guidance on the browser (5) and implement browser Guidance

Pick up a series of blog articles from my beginner guide.
It takes a lot of time and effort to design, code writing, and test new hands in game development, especially test and verification, it will make people feel like they want to crash. Therefore, is it possible to enable the computer to automatically run our guidance based on the guidance configurations of our new users?

The answer is yes. Please refer to the demo below:

Manual guide. Pay attention to the movement of the mouse pointer.

Automatic boot is performed. Note that the mouse pointer is not moved.

Start automatic boot in sz. Guide

You only need to add the Enable switch in your boot configuration.

GuideConfig = {tasks :{...}, // pilot task fingerImage: 'res/finger.png ', // hand image isShowMask: false, // whether to enable mask isAutoGuide: true // whether automatic guide is enabled}

IsAutoGuide: true to enable automatic boot, which is very simple. You can enable or disable it at any time in your game, which is useful for testing.

Implementation of Automatic Guidance

Currently, sz. guide only implements the automatic Guide function on the browser. The idea is to locate the node in game rendering based on the name of the node in the Guide configuration and simulate the mouse action, the node control event is triggered.

Simulate mouse events in the browser

It is very convenient to use javascript to simulate mouse events in the browser. You can use the initMouseEvent function to complete the process:

InitMouseEvent (type, // string type: type of the event to be triggered, for example, 'click '. Bubbles, // Boolean type: indicates whether the event should be bubbling. For mouse event simulation, this value should be set to true. Cancelable, // bool type: indicates whether the event can be canceled. This value should be set to true for mouse event simulation. View, // abstract view: view granted by the event. This value is almost all document. defaultView. detail, // int type: the default value is 0 when initializing the attached event information. ScreenX, // int type: the event is the X coordinate screenY on the left of the screen. // int type: the event is the y coordinate clientX on the screen. // int type: the X coordinate clientY of the event to the left of the visible area, // int type: the y coordinate ctrlKey of the event to the top of the visible area, // Boolean type: indicates whether the ctrol key is pressed, the default value is false. AltKey, // Boolean type: indicates whether the alt key is pressed. The default value is false. ShiftKey, // Boolean type: indicates whether the shif key is pressed. The default value is false. MetaKey, // Boolean type: indicates whether the meta key is pressed. The default value is false. Button, // int type: indicates the mouse key to be pressed. The default value is zero. relatedTarget // (object): the associated object of the event, which is only used to simulate mouseover and mouseout. )

There are many initMouseEvent functions, but for us, we only need to simulate touchBegan and touchEnded. The corresponding mouse event types are mousedown and mouseup, we also need to care about the position x and y of the control to be clicked. We only need these parameters to complete our task.

A mouse event is generated and you also need to assign the event to the document node. The cocos2d-js's default canvas node is named gameCanvas and we need to ship the event to it.

// Obtain gameCanvasvar pt =... // calculate the position var canvas = document through coordinate conversion. getElementById ("gameCanvas"); // initialize the mouse event var mousedown = document. createEvent ("MouseEvent"); mousedown. initMouseEvent ("mousedown", true, true, window, 0, 0, 0, pt. x, pt. y, true, false, 0, null); // assign the mouse event to the canvas. dispatchEvent (mousedown );

Coordinate System

All cococs2d users know that the coordinate origin is in the lower left corner (x = 0, y = 0), and in dom elements, the coordinate origin is in the upper left corner (x = 0, y = 0 ), for more information about cocos2d coordinate system, see Guan Dongsheng's article Cocos2d-JS coordinate system.

Node coordinates

We get the node object through the pilot locator and use the node. getPosition () function to get the relative position of the parent node of the node.

World coordinates

The hand genie is on the boot layer, and the boot layer is the whole screen size. To make the hand genie point to the located node correctly, you also need to convert the node coordinates to the world coordinates in cocos2d. Use the Conversion Function of the parent node to convert a vertex to the coordinate point of the world:

Var point = locateNode. getParent (). convertToWorldSpace (locateNode. getPosition ());

Cocos2d world coordinate transformation to canvas Coordinate

At present, the last step is to convert the coordinates in the game to canvas coordinates, then execute the mouse simulation function, and click the control we located.
1. Get the canvas rectangle Information

function getHTMLElementPosition(element) {    var docElem = document.documentElement;    var win = window;    var box = null;    if (cc.isFunction(element.getBoundingClientRect)) {        box = element.getBoundingClientRect();    } else {        if (element instanceof HTMLCanvasElement) {            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 gets the rectangle information of a dom node. You don't need to write this method by yourself. You can directly call cc. inputManager. getHTMLElementPosition (). The engine already has this method.

2. Coordinate Transformation
The left of the canvas rectangle corresponds to the x coordinate of the game world. The cursor position is the offset of rect. left on x.

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

For details, see the following code:

mouseSimulation: function(x, y) {    var canvas = document.getElementById("gameCanvas");    var rect = cc.inputManager.getHTMLElementPosition(canvas);//getHTMLElementPosition(canvas);    var pt = cc.p(x + rect.left, rect.top + rect.height - y);    var mousedown = 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 () {        var mouseup = 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);    }, 100);}

So far, all the problems have been solved. Insert the mouseSimulation function into the guiding process and try the auto-guided process!

Automatic execution. Note that the mouse pointer is not moved and the guiding prompt is moving.