Cocos creator---随手记(一)

tech2025-12-03  21

          刚学没多久,试着做了个逻辑比较简单的判断,只是为了记录自己的成长,也是舍不得这段代码,后续做了优化后就删掉了,所以保留一下以作纪念吧!

         内容大概就是一个按钮,有两种状态,红色和绿色,点击就切换

         在按钮为绿色时就可以转动,为红色时,wheel轮子就停止转动

         在wheel轮子转动时,wrench扳手不会触发任何事件,停止转动时可以触发wheel事件

优化前的具象代码:

点击拾取工具代码:

//只能点一次 if (this.shedClickTempt){ return; }else { this.shedClickTempt = true; cc.tween(this.tool) .by(0.2, {position : cc.v3(0,-80)}) .start() this.scheduleOnce(()=>{ this.tool.zIndex = GameData.index; },0.2) //寻找主节点移动 console.log(this.toolRoot.position); let toolRootPos = this.toolRoot.convertToWorldSpaceAR(cc.v2()); let toolPos = this.tool.parent.convertToNodeSpaceAR(toolRootPos); cc.tween(this.shed) .to(0.2, {scaleY : 0.7}) .start() this.scheduleOnce(()=>{ cc.tween(this.tool) .to(0.5, {position : cc.v3(toolPos)}) .call(()=>{ this.tool.active = false; this.toolRoot.active = true; }) .start() },0.2) }

点击按钮代码:

//按钮 //绿灯 转动 不允许扳手触碰 1 第一张图 //红灯 停止 允许扳手触碰 0 第二张图 //扳手触碰后不掉 开启转动后掉 onClickSwicthBtn(){ //在tool解锁的时候点击无效 let tempt = this.toolRoot.getComponent(wrenchTouch).swicthClickTempt; if (tempt){ return; }else { //灯 切换 let script = this.swicthBtn.getComponent("pictureFrame"); script.onClickBtnToChangePicture(); console.log(script.i); //0:green //1:red if (script.i == 0){ //转动 this.wheel.getComponent(cc.RigidBody).type = cc.RigidBodyType.Kinematic; //true 常态 //false 下了螺丝 就要飞天 if (this.wheelTempt){ this.wheel.getComponent(cc.RigidBody).angularVelocity = -50 }else { //角速度不断增加 this.schedule(a =>{ if (this.wheel.getComponent(cc.RigidBody).angularVelocity <= -400){ this.unschedule(a); //沿着轨迹上升(同时改变层级关系)然后掉下来 // this.wheelRoot.zIndex = GameData.index; this.wheelRoot.parent = cc.find("Canvas"); //掉下来最后一刻改变成Dynamic后滚动 this.wheel.getComponent(cc.RigidBody).type = cc.RigidBodyType.Dynamic; return; } this.wheel.getComponent(cc.RigidBody).angularVelocity -= 5; },0.1) } //true this.lightTempt = true; }else if (script.i == 1){ //不转 this.wheel.getComponent(cc.RigidBody).type = cc.RigidBodyType.Static; //false this.lightTempt = false; } } }

挂载wrench的touch移动事件代码片段:

const {ccclass, property} = cc._decorator; @ccclass export default class wrenchTouch extends cc.Component { rootPos; //按钮的点击状态 swicthClickTempt; @property(cc.Node) yellow : cc.Node = null; onLoad () { this.rootPos = this.node.position; } start () { this.node.on("touchstart",()=>{},this); this.node.on("touchmove",this.on_touch_move,this); this.node.on("touchend",this.on_touch_ended,this); this.node.on("touchcancel",this.on_touch_cancel,this) } on_touch_move(event){ //隐藏 this.node.getChildByName("bg").active = false; let rootLoc = event.getLocation(); this.node.position = rootLoc.sub(cc.v3(cc.winSize.width/2,cc.winSize.height/2)); } on_touch_ended(){ let toolPos = this.node.position; //获取按钮值 //0绿是动 不让翘 //1红是停 可以翘 let com = cc.find("Canvas").getComponent(level005); //0 if (com.lightTempt){ this.node.position = this.rootPos; this.node.getChildByName("bg").active = true; }else { if (toolPos.x >= -60 && toolPos.x <= 50 && toolPos.y >= 150 && toolPos.y <= 260){ //swicth this.swicthClickTempt = true; //tool动作 cc.tween(this.node) .to(0.5, {angle : 30}) .to(0.3, {angle : -15}) // .to(0.8, {angle : 30}) // .to(0.3, {angle : -15}) // .to(0.8, {angle : 30}) // .to(0.3, {angle : -15}) .call(()=>{ this.node.active = false; //在拧螺丝的这段时间不让点击按钮 this.swicthClickTempt = false; }) .start() //轮轴动作 cc.tween(this.yellow) .by(0.3, {angle : 30}) .by(0.5, {angle : 0}) // .by(0.6, {angle : 60}) // .by(0.5, {angle : 0}) // .by(0.6, {angle : 60}) // .by(0.5, {angle : 0}) .start() //轮子 com.isStop_wheel(); return this.swicthClickTempt; }else { this.node.position = this.rootPos; this.node.getChildByName("bg").active = true; } } } on_touch_cancel(){} }

level005片段:

isStop_wheel(){ this.wheelTempt = false; }

优化后:

思路:分析哪些模块是通用的,比如说都是点击获取然后移动到相应位置显示toolRoot,touchmove事件都是判断当前位置,在touchend中判断是否在范围内

将点击、移动、加载工具、touch事件中的移动、松手回放等做成通用类型

toolRoot做成预制件,并放置于layout中(惊喜的发现,非人的好用)【动态加载图片、动态加载脚本】

touch事件做一个公共脚本,包含了touchmove的移动、touchend的取消放回

判断范围就用了碰撞组件实现,检测碰撞后播放各自的动画,然后该干嘛干嘛。。。。

点击拾取工具代码:

//只能点一次 if (this.shedClickTempt){ return; }else { this.shedClickTempt = true; // //添加root let toolroot = CreateTool.addToolrootNode(this.toolRoot); //替换图片 cc.resources.load("picture/wrench",cc.SpriteFrame,(e,spframe)=>{ if (e){ console.log(e); } toolroot.getChildByName("tool").getComponent(cc.Sprite).spriteFrame = spframe; }) //tool显示 CreateTool.showToolByMove(this.tool); //shed cc.tween(this.shed) .to(0.2, {scaleY : 0.7}) .start() //移动 CreateTool.moveToolToToolroot(toolroot,this.tool); let pos = CreateTool.moveToolToToolroot(toolroot,this.tool); console.log(pos); this.scheduleOnce(()=>{ cc.tween(this.tool) .to(0.5, {position : cc.v3(pos)}) .call(()=>{ this.tool.active = false; toolroot.active = true; }) .start() },0.2) //加脚本 toolroot.addComponent("Tool005"); //调用动画 }

CreateTool:(创建时的通用部分)

//移动显示 static showToolByMove(tool: cc.Node) { cc.tween(tool) .by(0.2, {position : cc.v3(0,-80)}) .call(()=>{ tool.zIndex = GameData.index; }) .start() } //添加root但不显示 并return toolroot节点 static addToolrootNode(TR: cc.Prefab) { let toolroot = cc.instantiate(TR); toolroot.parent = cc.find("Canvas").getChildByName("layoutRoot"); toolroot.active = false; return toolroot; } static moveToolToToolroot(toolroot: any, tool: cc.Node) { let toolRootPos = toolroot.convertToWorldSpaceAR(cc.v2()); let toolPos = tool.parent.convertToNodeSpaceAR(toolRootPos); return toolPos; // return toolRootPos + toolPos; }

ToolMain:(touch事件的通用部分)

start () { this.node.on("touchstart",()=>{},this); this.node.on("touchmove",this.on_touch_move,this); this.node.on("touchend",this.on_touch_ended,this); this.node.on("touchcancel",this.on_touch_cancel,this) } //点击 //移动 //碰撞 碰撞体在每个关卡中单独设置吧? 设置好后就直接碰撞检测就可以 这个脚本里就写碰撞检测部分 各个关卡设置碰撞的节点的出现和消失!!! //(碰撞组件即可) on_touch_move(event){ //隐藏 this.node.getChildByName("bg").active = false; this.node.parent = cc.find("Canvas"); let rootLoc = event.getLocation(); this.node.position = rootLoc.sub(cc.v2(cc.winSize.width/2,cc.winSize.height/2)); } on_touch_ended(){ this.node.position = cc.v3(0,0); this.node.parent = cc.find("Canvas/layoutRoot"); this.node.getChildByName("bg").active = true; } on_touch_cancel(){} //碰撞 onCollisionEnter(other,self){ console.log("==========="); this.node.parent = other.node }

点击按钮代码:

 

touch事件代码:

最新回复(0)