在浏览器上实现自动引导（五）-优快云博客

在游戏开发中新手引导的设计、代码编写、测试需要花费较多的时间和精力，特别是测试验证，在反反复复的引导流程中点来点去，会让人有一种要崩溃的感觉。因此在想能否实现让计算机根据我们的新手引导配置，自动去跑我们的引导呢？

答案是肯定的,请看下在的演示：

手工执行，注意鼠标指针的移动

手工执行引导，注意鼠标指针的移动。

自动执行，注意鼠标指针没有移动

自动执行引导，注意鼠标指针没有移动。

在sz.Guide中开始自动引导

只需要在你的引导配置中加入开启开关

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

isAutoGuide: true 即可打开自动引导，非常的简单。你可以在你的游戏过种中随时开启和关闭，对于测试非常有用。

自动引导的实现

目前sz.Guide只实现了在浏览器上的自动引导功能，实现的思路就是根据引导配置中的节点名字，在游戏渲染中定位节点，并模拟鼠标动作，触发节点控件的事件来完成的。

浏览器中模拟鼠标事件

使用javascript在浏览器上模拟鼠标事件是非常方便的，可以使用initMouseEvent函数来完成：

 
         initMouseEvent(
        
         type,   
         //string类型 ：要触发的事件类型，例如‘click'。 
        
         　　bubbles,
         // Boolean类型：表示事件是否应该冒泡，针对鼠标事件模拟，该值应该被设置为true。 
        
         　　cancelable,
         // bool类型：表示该事件是否能够被取消，针对鼠标事件模拟，该值应该被设置为true。
        
         　　view,
         // 抽象视图：事件授予的视图，这个值几乎全是document.defaultView. 
        
         　　detail,
         // int类型：附加的事件信息这个初始化时一般应该默认为0。 
        
         　　screenX,
         // int类型 ： 事件距离屏幕左边的X坐标 
        
         　　screenY,
         // int类型 ： 事件距离屏幕上边的y坐标 
        
         　　clientX,
         // int类型 ： 事件距离可视区域左边的X坐标 
        
         　　clientY,
         // int类型 ： 事件距离可视区域上边的y坐标 
        
         　　ctrlKey,
         // Boolean类型 ： 代表ctrol键是否被按下，默认为false。 
        
         　　altKey,
         // Boolean类型 ： 代表alt键是否被按下，默认为false。 
        
         　　shiftKey,
         // Boolean类型 ： 代表shif键是否被按下，默认为false。 
        
         　　metaKey,
         // Boolean类型： 代表meta key 是否被按下，默认是false。 
        
         　　button,
         // int类型： 表示被按下的鼠标键，默认是零. 
        
         　　relatedTarget
         // (object) ： 事件的关联对象.只有在模拟mouseover 和 mouseout时用到。
        
         　　)

initMouseEvent函数非常之多，但对与我们这里来说只需要模拟touchBegan和touchEnded，对应的鼠标事件类型为mousedown和mouseup，我们还需要关心的就是想要点击的控件的位置x和y。仅需要这些参数就能完成我们的任务了。

生成了鼠标事件，还需要将事件分派到document的节点中， cocos2d-js默认的canvas节点名为gameCanvas，我们需要将事件投递给它。

 
         //获取gameCanvas
        
         var pt = ...
         //通过座标转换计算位置 
        
         var canvas = document.getElementById(
         "gameCanvas"
         );
        
         //初始化鼠标事件
        
         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中
        
         canvas.dispatchEvent(mousedown);

坐标系统

使用过cococs2d的都知道坐标原点为左下角(x=0,y=0), 而在dom元素中坐标原点为左上角(x=0, y= 0)，关于cocos2d坐标系的学习请参见关东升老师的文章《Cocos2d-JS 坐标系》。

节点坐标

我们通过引导定位器，获得到了节点对象，通过node.getPosition()函数获取节点所在父节点中的相对位置。

世界坐标

手型精灵在引导层上，引导层为整个屏幕大小。要让手型精灵正确指向定位到的节点，还需要将节点坐标转换为cocos2d中的世界坐标。通过父点节的转换函数，转换一个点为世界坐标点：

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

Cocos2d世界坐标转换到canvas坐标

目前最后一步就是将游戏中的坐标转换为canvas坐标，然后去执行鼠标模拟函数，点击我们定位的控件。

1.获取canvas矩形信息

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

上面这段代码获取一个dom节点的矩形信息，其实不用自己编写这个方法，你可以直接调用cc.inputManager.getHTMLElementPosition()，引擎已经有这个方法了。

2.坐标转换

canvas矩形的left对应游戏世界x坐标，鼠标位置即x上偏移rect.left

 
         x + rect.left 
        
         canvas矩形的top与游戏异界y坐标相反，rect.top + rect.height为游戏世界对应浏览器的底部，游戏中y坐标越大，对应canvas的中的y越小： 
        
         rect.top + rect.height - y

具体请看下面代码：

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