欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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事件代码: