Cocos creator---随手记（一）

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

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

         在按钮为绿色时就可以转动，为红色时，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事件代码：