Cocos creator---随手记（一）
程序员文章站
2024-03-16 16:36:10
...
刚学没多久，试着做了个逻辑比较简单的判断，只是为了记录自己的成长，也是舍不得这段代码，后续做了优化后就删掉了，所以保留一下以作纪念吧！
内容大概就是一个按钮，有两种状态，红色和绿色，点击就切换
在按钮为绿色时就可以转动，为红色时，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事件代码：
下一篇： “粉末游戏“碰撞检测