上接我的新手引导系列博客文章。 在游戏开发中新手引导的设计、代码编写、测试需要花费较多的时间和精力,特别是测试验证,在反反复复的引导流程中点来点去,会让人有一种要崩溃的感觉。因此在想能否实现让计算机根据我们的新手引导配置,自动去跑我们的引导呢?
答案是肯定的,请看下在的演示:
手工执行引导,注意鼠标指针的移动。
自动执行引导,注意鼠标指针没有移动。
在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,我们需要将事件投递给它。
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矩形信息
{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
有事者,事竟成;破釜沉舟,百二秦关终归楚;苦心人,