游戏通用的新手引导模块的开发模式教程.
目前提供cocos2d-js版的，等有时间我再把其他语言的版本放出来.(注：如果需要多个引导同时存在，或者非模态方式，需要修改配置)
目的：其实我是一个很懒的人，所以设计目的我优先考虑的是让Guide通用以后做的所有的游戏，整个Guide模块开发周期(3天+调试=一周)，剩下的工作.....=>只需要配置上控件就好。
开发思路中:Guide模块与游戏本身逻辑几乎分离，可完全根据配置来实现新手引导(同时可以多款游戏)。
我先大概介绍下实现的功能包含哪些内容：
(1):兼容 引导时候的点击,拖动,坐标变化,放大缩小等。
(2):兼容 按钮点击后服务端短线（提示重链）等。
(3):兼容 几乎所有引导中出现的游戏异常和问题。
(4):不兼容 如果考虑多个引导同时引导，需要把单例给改掉，不用getInstance方法,ModalLayer也需要修改。
//@@@@@@@GuideComponent.js@@@@@@@@@@@@@
var GuideComponent = {};//整个游戏运行过程中获取控件的变量
GuideComponent["Scene_Main"] = {}; //主城(模块)
GuideComponent["Scene_Recruit"] = {}; //招募(模块)
GuideComponent["Scene_Team"] = {}; //队伍(模块)
GuideComponent["Scene_TeamEdit"] = {}; //队伍编辑(模块)
GuideComponent["Scene_Explore"] = {}; //剧本(模块)
//以下是单步新手引导的配置 GuideComponent["所在模块名"]["控件名称"]
//(注：这里的控件，只要在相关的模块代码中关联就好，1.初始化的时候赋值 2.关闭模块时销毁=null)
//单个引导的控件
GuideComponent["Scene_Main"]["recruit"] = null;
//UI控件
GuideComponent["Scene_Recruit"]["btn"] = null;
GuideComponent["Scene_Main"]["team"] = null;
GuideComponent["Scene_Team"]["btn"] = null;
GuideComponent["Scene_TeamEdit"]["card"] = null;
GuideComponent["Scene_Main"]["explore"] = null;
GuideComponent["Scene_Explore"]["city"] = null;
GuideComponent["Scene_Explore"]["item"] = null;
GuideComponent["Scene_Explore"]["go"] = null;
//@@@@@@@@@@@@@@GuideTask.js @@@@@@@@@@@@@
<span style="font-size:24px;">/**
* Created by cx on 14-3-20.
*这里是引导的详细配置，可以放在服务端给客户端读取，也可以独立配置再客户端
*/
var GuideTaskInfo = [];
//第1步引导
GuideTaskInfo[0] = {};
GuideTaskInfo[0]["arrowRect"] = "left";//up,left,right,down 箭头方向
GuideTaskInfo[0]["shape"] = "circle";//circle,rect//引导区域的遮罩形状
GuideTaskInfo[0]["moduleName"] = "Scene_Main";//选项框(模块名称)
GuideTaskInfo[0]["componentName"] = "recruit";//控件名称(二级选项,控件名称)
GuideTaskInfo[0]["touchEvent"] = "click";//促发事件 click,move
GuideTaskInfo[0]["step"] = "1";//步骤id
GuideTaskInfo[0]["desc"] = "引导时显示的描述@@@@@@!";//描述
GuideTaskInfo[0]["descPos"] = null;//描述框坐标
GuideTaskInfo[0]["isShowDragArrowView"] = false;//显示滑动图片
GuideTaskInfo[0]["dragArrowViewRotate"] = 0;//滑动指向图片的旋转角度
//第2步
GuideTaskInfo[1] = {};
GuideTaskInfo[1]["arrowRect"] = "up";//up,left,right,down
GuideTaskInfo[1]["shape"] = "rect";//circle,rect
GuideTaskInfo[1]["moduleName"] = "Scene_Recruit";//选项框(模块名称)
GuideTaskInfo[1]["componentName"] = "btn";//控件名称(二级选项,控件名称)
GuideTaskInfo[1]["touchEvent"] = "click";//促发事件 click,move
GuideTaskInfo[1]["step"] = "2";//步骤id
GuideTaskInfo[1]["desc"] = "点击此处，可招募将士。";//描述
GuideTaskInfo[1]["descPos"] = null;//描述框坐标
GuideTaskInfo[1]["isShowDragArrowView"] = false;//显示滑动图片
GuideTaskInfo[1]["dragArrowViewRotate"] = 0;//滑动指向图片的旋转角度
//第3步
GuideTaskInfo[2] = {};
GuideTaskInfo[2]["arrowRect"] = "left";//up,left,right,down
GuideTaskInfo[2]["shape"] = "circle";//circle,rect
GuideTaskInfo[2]["moduleName"] = "Scene_Main";//选项框(模块名称)
GuideTaskInfo[2]["componentName"] = "team";//控件名称(二级选项,控件名称)
GuideTaskInfo[2]["touchEvent"] = "click";//促发事件 click,move
GuideTaskInfo[2]["step"] = "3";//步骤id
GuideTaskInfo[2]["desc"] = "刚招募的将士必须先编队,以整军备战!";//描述
GuideTaskInfo[2]["descPos"] = cc.p(winSize.width/2, winSize.height/2+100);//描述框坐标
GuideTaskInfo[2]["isShowDragArrowView"] = false;//显示滑动图片
GuideTaskInfo[2]["dragArrowViewRotate"] = 0;//滑动指向图片的旋转角度</span>
//@@@@@@@@@@@@@@ Guide.js最重要的文件再这里 @@@@@@@@@@@@
<span style="font-size:24px;">/**
* Created by cx on 14-3-17.
* 新手引导
*/
//@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ Guide @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
//@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ Guide @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
//@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ Guide @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
var Guide = function(){
//Guide.getInstance().showModalGuide(GuideComponent["Scene_Main"]["recruit"]);
this.currExtP = null;//ext point
this.guideTask = null;
this.currStep = null;//guideTaskStep:1,2,3,4,5
this.guideLayer = new GuideLayer();//GuideLayer.create();
this._currComponent = null;
this.isDebugTest = false;
this.runing = false;
this.isRuning = function(){
return this.runing;
}
/**
* 执行下一个步骤
* */
this.runNextStep = function(){
// cc.log("run next step@@@@@@@@@@@@@@@@@@@@@@@@@@@@@"+(this.currStep+1));
this.runing = false;
if(this.isDebugTest){
this.stopGuide();
return;
}
//这里执行...
this.allowTableViewDrag();//允许其继续使用
++this.currStep;
if(this.currStep<this.guideTask.length){
//
this._runGuide();
}else{
this.stopGuide();
if(this.endCallBack!=null){
this.endCallBack();
}else{
//
}
}
// cc.log("执行下一步骤@@@@@@@@@@@@@");
}
this.endCallBack=null;
/**
* w完成引导回调
* */
this.setEndGuideCallBack = function(_endCallBack){
this.endCallBack = _endCallBack;
};
/**
* 停止引导
* */
this.stopGuide = function(){
this.unRegisterSchedule();
this.hideModalGuide();
this.runing = false;
G.ISGUIDE = false;
}
/**
* 运行Guide
* param:数据格式Array
* GuideTaskInfo[0] = {};
* GuideTaskInfo[0]["arrowRect"] = "down";//up,left,right,down
* GuideTaskInfo[0]["shapre"] = "circle";//circle,rect
* GuideTaskInfo[0]["moduleName"] = "Scene_Main";//选项框(模块名称)
* GuideTaskInfo[0]["componentName"] = "recruit";//控件名称(二级选项,控件名称)
* GuideTaskInfo[0]["touchEvent"] = "click";//促发事件 click,move
* GuideTaskInfo[0]["step"] = "1";//步骤id
* */
this.runGuide = function(guideTaskData){
if(guideTaskData==null){
return;
}
//
this.registerSchedule();//开始引导...
if(!(guideTaskData instanceof Array)){
// cc.log("runGuide() param must Array");
return;
}
if(guideTaskData.length<=0){
// cc.log("runGuide() guideTaskData is NULL");
return;
}
this.guideTask = guideTaskData;
this.currStep = 0;//from 0
this._runGuide();
}
/**
* .....
* GuideTaskInfo[0] = {};
* GuideTaskInfo[0]["arrowRect"] = "down";//up,left,right,down
* GuideTaskInfo[0]["shapre"] = "circle";//circle,rect
* GuideTaskInfo[0]["moduleName"] = "Scene_Main";//选项框(模块名称)
* GuideTaskInfo[0]["componentName"] = "recruit";//控件名称(二级选项,控件名称)
* GuideTaskInfo[0]["touchEvent"] = "click";//促发事件 click,move
* GuideTaskInfo[0]["step"] = "1";//步骤id
* GuideTaskInfo[0]["descPos"] = "ccp(x,x)/null";//描述框坐标
* GuideTaskInfo[0]["isShowDragArrowView"] = false;//显示滑动图片
* GuideTaskInfo[0]["dragArrowViewRotate"] = 180;//滑动指向图片的旋转角度
* */
this.tempComponentPositionX = null;
this.tempComponentPositionY = null;
this.isContinueFind = false;
this._runGuide = function(){
if(this.currStep>=this.guideTask.length){
//引导结束-执行相关操作
this.stopGuide();
return;
}
var taskInfo = this.guideTask[this.currStep];
if(!GuideComponent.hasOwnProperty(taskInfo["moduleName"]) || !GuideComponent[taskInfo["moduleName"]].hasOwnProperty(taskInfo["componentName"])){
cc.log("引导控件不存在:Val:"+taskInfo["moduleName"]+"=>:"+taskInfo["componentName"]);
this.hideModalGuide();
}else{
if(JsInterface.getInstance().getDebug()){
// cc.log(taskInfo["moduleName"]+"=>:"+taskInfo["componentName"]);
}
}
var component = GuideComponent[taskInfo["moduleName"]][taskInfo["componentName"]];
// if(component==null){
// return;
// }
// if(this.tempComponentPositionX==component.getPositionX() || this.tempComponentPositionY==component.getPositionY()){
if(this.tempComponentPositionX!=null){
// return;
}
// }
// this.tempComponentPositionX = component.getPositionX();
// this.tempComponentPositionY = component.getPositionY();
//
this.showModalGuide(component,taskInfo.shape,taskInfo.touchEvent,taskInfo.arrowRect,taskInfo.desc,taskInfo.isShowDragArrowView,taskInfo.dragArrowViewRotate,taskInfo.descPos);
},
this.hideModalGuide = function(){
if(this.guideLayer.getParent()){
this.guideLayer.getParent().removeChild(this.guideLayer);
}
}
/**
* touch事件回调
* */
this.touchEventCallBack = function(selfObj){
//
selfObj.runNextStep(Guide.getInstance());
},
this.denyTableViewDrag = function(){
//cc.log("deny@@@@@@@@@");
var pxparent = this._currComponent.getParent();
while(pxparent){
if(pxparent instanceof cc.TableView){
pxparent.setMoveTouchEnable(false);
}
pxparent = pxparent.getParent();
}
},
this.allowTableViewDrag = function(){
//cc.log("allow@@@@@@@");
var pxparent = this._currComponent.getParent();
while(pxparent){
if(pxparent instanceof cc.TableView){
pxparent.setMoveTouchEnable(true);
}
pxparent = pxparent.getParent();
}
},
/**
* component:控件(不可为空...)
* shapre:形状
* touchEvent:touch事件
* arrowRect:箭头方向
* desc:描述
* descPos:ccp()/null 描述的坐标
* */
this.showModalGuide = function(component,shape,touchEvent,arrowRect,desc,isShowDragArrowView,dragArrowViewRotate,descPos){
if(this.isDebugTest){
this.registerSchedule();
}
shape = typeof shape == "undefined" ? GuideLayer.SHAPE_TYPE_RECT : shape;
touchEvent = typeof touchEvent == "undefined" ? GuideLayer.TOUCH_EVENT_TYPE_CLICK : touchEvent;
arrowRect = typeof arrowRect == "undefined" ? GuideLayer.ARROW_RECT_TYPE_LEFT : arrowRect;
desc = typeof desc == "undefined" ? "" : desc;
isShowDragArrowView = typeof isShowDragArrowView == "undefined" ? 0 : isShowDragArrowView;
dragArrowViewRotate = typeof dragArrowViewRotate == "undefined" ? 0 : dragArrowViewRotate;
// if(component!=null){
// //cc.log((component["getContentSize"]==undefined)+"==========");
// }
if(component==null){
//cc.log("控件未获取成功..........");
this.isContinueFind = true;
return;
}else{
this.runing = true;
this.isContinueFind = false;
//设置控件的回调函数
component[Guide.CALLBACK_FUNCKEY] = this.componentCallBackFunc;
}
this._currComponent = component;
this.denyTableViewDrag();
this.getExtP(component);
var size = component.getContentSize();
if(this.guideLayer.getParent()){
this.guideLayer.getParent().removeChild(this.guideLayer);
}
var scene = cc.Director.getInstance().getRunningScene();
scene.addChild(this.guideLayer,1500);
this.guideLayer.showModalGuide(shape,component,this.currExtP,size.width,size.height,touchEvent,arrowRect,desc,isShowDragArrowView,dragArrowViewRotate,descPos);
}
/**
* 控件自身出发后回调
* */
this.componentCallBackFunc = function(){
//
Guide.getInstance().runNextStep();
}
this.getCurrScale = 1;
this.getExtP = function(cpm){
this.currExtP = cc.p(0,0);
var parentC = cpm;
var winSize = cc.Director.getInstance().getWinSize();
var preSize = null;
var isFirst = true;
this.getCurrScale = 1;
while(parentC){
var parentx = parentC.getPositionX();
var parenty = parentC.getPositionY();
var thisanchor = parentC.getAnchorPoint();
var selfCurrCpSize = parentC.getContentSize();
var componentScale = parentC.getScale();
if(componentScale!=1){
this.getCurrScale *= componentScale;
}
//这里特殊处理
if(!(parentC instanceof cc.Layer)){
parentx -= thisanchor.x*selfCurrCpSize.width;//ok
parenty -= thisanchor.y*selfCurrCpSize.height;
}
this.currExtP.x += parentx;//ok
this.currExtP.y += parenty;//ok
parentC = parentC.getParent();
}
}
this.getPxx = function(){
this.currExtP = cc.p(0,0);
var parentC = cpm;
var winSize = cc.Director.getInstance().getWinSize();
var preSize = null;
while(parentC){
var parentx = parentC.getPositionX();
var parenty = parentC.getPositionY();
var thisanchor = parentC.getAnchorPoint();
var selfCurrCpSize = parentC.getContentSize();
parentx -= parentC.getAnchorPoint().x*selfCurrCpSize.width;//ok
parenty -= parentC.getAnchorPoint().y*selfCurrCpSize.height;//ok
// }
if(preSize==null){
preSize = selfCurrCpSize;
}else if(preSize.width == selfCurrCpSize.width && preSize.height == selfCurrCpSize.height){
//
parentx += parentC.getAnchorPoint().x*selfCurrCpSize.width;
parenty += parentC.getAnchorPoint().y*selfCurrCpSize.height;
}
preSize = selfCurrCpSize;
this.currExtP.x += parentx;//ok
this.currExtP.y += parenty;//ok
parentC = parentC.getParent();
}
}
this.runRelocalGuideCount = 0;
this.update = function(){
//cc.log("update guide schedule");
//j记录P
if(this.isContinueFind==true){
this._runGuide();
this.hideModalGuide();
return;
// cc.log("一直运行.....");
}else{
if(!this.guideLayer.getParent()){
var scene = cc.Director.getInstance().getRunningScene();
scene.addChild(this.guideLayer);
}
}
if(this.runRelocalGuideCount++ > 30){
this._runGuide();
this.runRelocalGuideCount = 0;
}
//动作播放.,..
this.guideLayer.controllerArrowMove();
}
/**
*
* 注册监听
*
* */
this.registerSchedule = function(){
cc.Director.getInstance().getScheduler().scheduleUpdateForTarget(this,0,false);
}
/**
* 取消监听状态
* */
this.unRegisterSchedule = function(){
cc.Director.getInstance().getScheduler().unscheduleAllCallbacksForTarget(this);
}
}
//@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ GuideLayer @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
//@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ GuideLayer @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
//@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ GuideLayer @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
var GuideLayer = cc.Layer.extend({
res_arrow : "res/guide/arrow.png",//箭头
res_descbg : "res/guide/descbg.png",//描述框
res_drag_arrow : "res/guide/drag_arrow.png",//拖动的箭头
selfColorLayer:null,
pClip:null,
currPosition:null,
currSize:null,
_touchEvent:null,
_arrowRect:null,
_desc:null,
_isShowDragArrowView:null,
_dragArrowViewRotate:null,
spArrow:null,
spDescbg:null,
spDragArrow:null,
descPoint_x:0,//描述x坐标
descPoint_y:0,//描述y坐标
descLable:null,
arrowMoveDistance:15,//
descTextColor:cc.c3b(0,0,0),
currComponent:null,//当前控件
ctor:function(){
this._super();
this.retain();
var winSize = cc.Director.getInstance().getWinSize();
this.selfColorLayer = cc.LayerColor.create(cc.c4f(0,0,0,150));
this.pClip = cc.ClippingNode.create();
this.pClip.setVisible(true);
this.pClip.setInverted(true);
this.pClip.addChild(this.selfColorLayer);
this.addChild(this.pClip);
this.spArrow = cc.Sprite.create(this.res_arrow);//箭头
this.spDescbg = cc.Sprite.create(this.res_descbg);//描述
this.spDragArrow = cc.Sprite.create(this.res_drag_arrow);//拖动提示试图
this.spDragArrow.setAnchorPoint(cc.p(0,0.5));
this.spDescbg.setPosition(winSize.width/2,winSize.height/2);
this.spDragArrow.setPosition(500,300);
this.spArrow.setPosition(500,300);
this.spDragArrow.setVisible(false);
this.addChild(this.spArrow,10);
this.addChild(this.spDescbg,15);
this.addChild(this.spDragArrow,5);
this.drawShape(GuideLayer.SHAPE_TYPE_CIRCLE,cc.p(0,0),1,1);
var descLableSizeHeight = 180;
this.descLable = cc.LabelTTF.create('', "Arial", 33, cc.size(360,descLableSizeHeight), cc.TEXT_ALIGNMENT_LEFT, cc.VERTICAL_TEXT_ALIGNMENT_CENTER);
this.descLable.width = 50;
this.descLable.setAnchorPoint(cc.p(0, 0));
this.descLable.setPosition(cc.p(180, this.spDescbg.getContentSize().height-descLableSizeHeight-10));
this.descLable.setColor(this.descTextColor);
this.spDescbg.addChild(this.descLable);
this.spDescbg.setVisible(false);
return true;
},
/**
* 模态引导
*
*
* touchEvent:click/touch
* */
showModalGuide:function(GuideLayer_SHAPE_TYPE,component,componentPoint,p_width,p_height,touchEvent,arrowRect,desc,isShowDragArrowView,dragArrowViewRotate,descPos){
this.currComponent = component;
this._touchEvent = typeof touchEvent=="undefined" ? "click":touchEvent;
this._arrowRect = typeof arrowRect=="undefined" ? "down" : arrowRect;
this._desc = typeof desc=="undefined" ? "" : desc;
this._isShowDragArrowView = typeof isShowDragArrowView == "undefined" ? 0:this._isShowDragArrowView;
this._dragArrowViewRotate = typeof _dragArrowViewRotate == "undefined" ? 0:this._dragArrowViewRotate;
//scale start
if(typeof component!="undefined"){
if(Guide.getInstance().getCurrScale!=1){
p_width = p_width*Guide.getInstance().getCurrScale;
p_height = p_height*Guide.getInstance().getCurrScale;
if(Guide.getInstance().getCurrScale>1){
//
componentPoint.x -= (p_width-component.getContentSize().width)/2;
componentPoint.y -= (p_height-component.getContentSize().height)/2;
}else if(Guide.getInstance().getCurrScale<1){
//
componentPoint.x += (component.getContentSize().width-p_width)/2;
componentPoint.y += (component.getContentSize().height-p_height)/2;
}
}
}
//scale end
this.currPosition = componentPoint;//
this.currSize = cc.size(p_width,p_height);//
this.drawShape(GuideLayer_SHAPE_TYPE,componentPoint,p_width,p_height,component);
this.setArrowRect(arrowRect,componentPoint,p_width,p_height);
this.showDragArrowView(componentPoint,p_width,p_height,isShowDragArrowView,dragArrowViewRotate);
if(this._desc!=""){
this.spDescbg.setVisible(true);
this.descLable.setString(desc);
//descPos
if(descPos!=null){
this.spDescbg.setPosition(descPos);
}else{
var winSize = cc.Director.getInstance().getWinSize();
this.spDescbg.setPosition(cc.p(winSize.width/2,winSize.height/2));
}
}else{
this.spDescbg.setVisible(false);
}
// cc.log("添加了@@@@@@@");
},
/**
* 判断是否点钟本身
* */
isTouchSelf:function(touchPoint,component,anchorX,anchorY){
anchorX = typeof anchorX=="undefined" ? 0 : anchorX;
anchorY = typeof anchorY=="undefined" ? 0 : anchorY;
//
var componentPoint = component.getPosition();
var componentSize = component.getContentSize();
var minx = componentPoint.x-componentSize.width*anchorX;
var maxx = minx+componentSize.width;
var miny = componentPoint.y-componentSize.height*anchorY;
var maxy = miny+componentSize.height;
if(touchPoint.x>=minx && touchPoint.y>=miny && touchPoint.x<=maxx && touchPoint.y<=maxy){
return true;
}
return false;
},
//判断是否点中描述窗口
isTouchDescBg:function(t_point){
//如果选中描述窗口，则隐藏描述窗口
var descPoint = this.spDescbg.getPosition();
var minx = t_point.x;
var maxx = this.spDescbg.getContentSize().width+t_point.x;
return false;
},
onTouchBegan:function(pTouch,pEvent){//this._touchEvent
//
var thisPoint = pTouch.getLocation();
var minx = this.currPosition.x;
var miny = this.currPosition.y;
var maxx = this.currPosition.x+this.currSize.width;
var maxy = this.currPosition.y+this.currSize.height;
if(this.spDescbg.isVisible() && this.isTouchSelf(thisPoint,this.spDescbg,this.spDescbg.getAnchorPoint().x,this.spDescbg.getAnchorPoint().y)){//窗口
// this.spDescbg.setVisible(false);
// return true;//屏蔽之后按键
}else if(thisPoint.x>=minx && thisPoint.y>=miny && thisPoint.x<=maxx && thisPoint.y<=maxy){
return false;//允许
}
Guide.getInstance()._runGuide();
return true;//屏蔽
},
closeGuideModal:function(){
cc.unregisterTouchDelegate(this);
this.setVisible(false);// = false;
},
onExit:function(){
this._super();
cc.unregisterTouchDelegate(this);
},
onEnter:function(){
this._super();
cc.unregisterTouchDelegate(this);
cc.registerTargetedDelegate(-998,true,this);
},
/**
* 绘制形状
* */
drawShape:function(GuideLayer_SHAPE_TYPE,pPosition,pwidth,pheight,component){
var color = cc.c4f(59,58,55,1);
var borderColor = cc.c4f(0.97, 0.76, 0.8, 1);
var drawNode = cc.DrawNode.create();
//component
switch(GuideLayer_SHAPE_TYPE){
case GuideLayer.SHAPE_TYPE_CIRCLE:
var radius = pwidth/2;
var nCount = 200;
var angel = 2*Math.PI/nCount;
var pointAry = [];
for(var i=0;i<nCount;++i){
var radian = i*angel;
pointAry[i] = {};
pointAry[i].x = radius*Math.cos(radian)+pwidth/2+pPosition.x;
pointAry[i].y = radius*Math.sin(radian)+pwidth/2+pPosition.y;
}
drawNode.drawPoly(pointAry,color,1,borderColor);
drawNode.setPosition(cc.p(0,0));
this.pClip.setStencil(drawNode);
break;
case GuideLayer.SHAPE_TYPE_RECT:
var rectCount = 4;
var drawPointAry = [];
drawPointAry[0] = pPosition;
drawPointAry[1] = cc.p(pPosition.x+pwidth,pPosition.y);
drawPointAry[2] = cc.p(pPosition.x+pwidth,pPosition.y+pheight);
drawPointAry[3] = cc.p(pPosition.x,pPosition.y+pheight);
drawNode.drawPoly(drawPointAry,color,1,borderColor);
drawNode.setPosition(cc.p(0,0));
this.pClip.setStencil(drawNode);
break;
}
},
actionStarP : null,//起点坐标=箭头用
actionStopP : null,//终点坐标=箭头用
/**
* 防止箭头位置箭头
* */
setArrowRect:function(arrowRect,componentPoint,p_width,p_height){
//
var actionStarP = cc.p(0,0);
var actionStopP = cc.p(0,0);
this.actionStarP = actionStarP;
this.actionStopP = actionStopP;
switch(arrowRect){
case GuideLayer.ARROW_RECT_TYPE_UP://上方
//px固定
//cc.log("上方");
this.spArrow.setRotation(90);
actionStarP.x = componentPoint.x+p_width/2;
actionStarP.y = componentPoint.y+p_height+this.spArrow.getContentSize().height/2+this.arrowMoveDistance;
actionStopP.x = actionStarP.x;
actionStopP.y = componentPoint.y+p_height+this.spArrow.getContentSize().height/2;
//moveFlag = GuideLayer.ARROW_RECT_TYPE_UP;
break;
case GuideLayer.ARROW_RECT_TYPE_DOWN://下方
//cc.log("下方");
this.spArrow.setRotation(270);
//px固定
actionStarP.x = componentPoint.x+p_width/2;
actionStarP.y = componentPoint.y-this.spArrow.getContentSize().height/2-this.arrowMoveDistance;
actionStopP.x = actionStarP.x;
actionStopP.y = componentPoint.y-this.spArrow.getContentSize().height/2;
//moveFlag = GuideLayer.ARROW_RECT_TYPE_DOWN;
break;
case GuideLayer.ARROW_RECT_TYPE_LEFT://左方
//py固定
this.spArrow.setRotation(0);
//cc.log("左方");
actionStarP.y = componentPoint.y+p_height/2;
actionStarP.x = componentPoint.x-this.spArrow.getContentSize().width/2-this.arrowMoveDistance;
actionStopP.y = actionStarP.y;
actionStopP.x = componentPoint.x-this.spArrow.getContentSize().width/2;
//
//moveFlag = GuideLayer.ARROW_RECT_TYPE_LEFT;
break;
case GuideLayer.ARROW_RECT_TYPE_RIGHT://右方
//py固定
this.spArrow.setRotation(180);
//cc.log("右方");
actionStarP.y = componentPoint.y+p_height/2;
actionStarP.x = componentPoint.x+p_width+this.spArrow.getContentSize().width/2+this.arrowMoveDistance;
actionStopP.y = actionStarP.y;
actionStopP.x = componentPoint.x+p_width+this.spArrow.getContentSize().width/2;
//moveFlag = GuideLayer.ARROW_RECT_TYPE_RIGHT;
break;
}
this.currMoveArrowP.x = actionStarP.x;
this.currMoveArrowP.y = actionStarP.y;
this.spArrow.setPosition(actionStarP);//设置坐标位置
//这里判断左，右，上，下移动...
// var arrowAction = cc.RepeatForever.create(cc.Sequence.create(cc.MoveTo.create(0.5,actionStarP),cc.MoveTo.create(0.5,actionStopP)));
// this.spArrow.runAction(arrowAction);
},
currMoveArrowP:cc.p(0,0),//当前箭头移动的位置
moveFlag:null,//0:正向/1:反向
/**
* 控制箭头移动...
* */
controllerArrowMove:function(){//start在远方
var t;
if(this.actionStarP==null){
return;
}
if(this.actionStarP.x==this.actionStopP.x){//移动Y
t = this.actionStarP.y-this.actionStopP.y;
//正式流出
if(this.currMoveArrowP.y==this.actionStarP.y){
this.moveFlag = 'Z';
}else if(this.currMoveArrowP.y == this.actionStopP.y){
this.moveFlag = 'F';
}
if(t>0){//上向下
this.moveFlag=="Z" ? this.currMoveArrowP.y-- : this.currMoveArrowP.y++;
}else{//下向上
this.moveFlag=="F" ? this.currMoveArrowP.y-- : this.currMoveArrowP.y++;
//aaa
}
}else{//移动X
t = this.actionStarP.x-this.actionStopP.x;
//正式流出
if(this.currMoveArrowP.x==this.actionStarP.x){
this.moveFlag = 'Z';
}else if(this.currMoveArrowP.x == this.actionStopP.x){
this.moveFlag = 'F';
}
if(t>0){//上向下
this.moveFlag=="Z" ? this.currMoveArrowP.x-- : this.currMoveArrowP.x++;
}else{//下向上
this.moveFlag=="F" ? this.currMoveArrowP.x-- : this.currMoveArrowP.x++;
//aaa
}
}
this.spArrow.setPosition(this.currMoveArrowP);
},
/**
* 转动滑动提示的箭头
* componentPoint:物体坐标左下角的
* p_width:sp宽度
* p_height:sp高度
* isShowDragArrowView:0隐藏 1:显示
* dragArrowViewRotate:角度0-270
* */
showDragArrowView:function(componentPoint,p_width,p_height,isShowDragArrowView,dragArrowViewRotate){
if(isShowDragArrowView!=0){
//
var point = cc.p(0,0);
point.x = componentPoint.x+p_width/2;
point.y = componentPoint.y+p_height/2;
this.spDragArrow.setPosition(point);
this.spDragArrow.setRotation(dragArrowViewRotate);
this.spDragArrow.setVisible(true);
}else{
this.spDragArrow.setVisible(false);
}
}
/**
*
* */
});
//形状
GuideLayer.SHAPE_TYPE_CIRCLE = "circle";//
GuideLayer.SHAPE_TYPE_RECT = "rect";//
//事件
GuideLayer.TOUCH_EVENT_TYPE_CLICK = "click";
GuideLayer.TOUCH_EVENT_TYPE_MOVE = "move";
//方向
GuideLayer.ARROW_RECT_TYPE_UP = "up";
GuideLayer.ARROW_RECT_TYPE_DOWN = "down";
GuideLayer.ARROW_RECT_TYPE_LEFT = "left";
GuideLayer.ARROW_RECT_TYPE_RIGHT = "right";
//
Guide.instance = null;
Guide.getInstance = function(){
if(Guide.instance==null){
Guide.instance = new Guide();
}
return Guide.instance;
}
Guide.CALLBACK_FUNCKEY = "guideCallBack";
Guide.ComponentCallBackFunc = function(component){
//执行
if(component==null){
// cc.log("guide component控件被销毁");
return;
}
if(component.hasOwnProperty(Guide.CALLBACK_FUNCKEY)){
var callback = component[Guide.CALLBACK_FUNCKEY];
delete component[Guide.CALLBACK_FUNCKEY];
callback();
}
}
/*
事件类型(TouchEventType):mouseClick,mouseDrag
箭头位置(ArrowRect): up,left,right,down
文字描述(TextDesc):.......文本框
模块名称(LayerName): 选项... => 空间名称(ComponentName);
*/
//@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ GuideModel @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
//@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ GuideModel @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
//@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ GuideModel @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
var GuideModel = function(){
this.data=null;
/**
* 更新引导数据
* */
this.updateDate = function(){
//
this.data = GuideTaskInfo;
//cc.log("update data");
Guide.getInstance().setEndGuideCallBack(function(){
GuideModel.getInstance().endGuide();
});
Guide.getInstance().runGuide(this.data);
}
/**
*
* */
/**
* 引导完成执行...
* */
this.endGuide = function(){
//
//cc.log("看看是否右调用到这里？？？？？？？？？");
Guide.getInstance().stopGuide();
//告诉服务端引导完成
//这里调用＝＝＝通知引导结束
}
}
GuideModel.instance = null;
GuideModel.getInstance = function(){
if(GuideModel.instance==null){
GuideModel.instance = new GuideModel();
}
return GuideModel.instance;
}
</span>
感谢这些年遇到所有一切美好的人和事 auth:cx,email:181391227@qq.com
扫一扫
8774
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
