首页 前端知识 cocos creator(9)

cocos creator(9)

2024-06-20 09:06:22 前端知识 前端哥 498 527 我要收藏

1.场景管理

在这里插入图片描述

director类控制场景


const {ccclass, property} = cc._decorator;

@ccclass
export default class NewClass extends cc.Component {

    @property(cc.Label)
    label: cc.Label = null;

    @property
    text: string = 'hello';

    // LIFE-CYCLE CALLBACKS:

    // onLoad () {}

    start () {
        //加载到第二个场景
        cc.director.loadScene("game2"),function(){
            //当前已经加载到新场景了
        };

    // update (dt) {}
}

在这里插入图片描述
预加载

const {ccclass, property} = cc._decorator;

@ccclass
export default class NewClass extends cc.Component {

    @property(cc.Label)
    label: cc.Label = null;

    @property
    text: string = 'hello';

    // LIFE-CYCLE CALLBACKS:

    // onLoad () {}

    start () {
        //加载第二个场景
       // cc.director.loadScene("game2"),function(){};
        
       //预加载
       cc.director.preloadScene("game2",function(){
            //这个场景已经加载到内存了,但是还没有用
            cc.director.loadScene("game2");//加载完后才跳到game2,没加载完之前一直在game1

       });
    }

    // update (dt) {}
}

常驻节点
可以使一个节点,不会因为切换场景而消失

cc.game.addPersistRootNode(this.node);//添加一个常驻节点
cc.game.removePersistRootNode(this.node);//取消一个常驻节点————再次切换场景时该节点才会消失

2.键鼠操作

鼠标点击操作

const {ccclass, property} = cc._decorator;

@ccclass
export default class NewClass extends cc.Component {

    @property(cc.Label)
    label: cc.Label = null;

    @property
    text: string = 'hello';

    // LIFE-CYCLE CALLBACKS:

    // onLoad () {}

    start () {
        //监听,被调用就会被执行
        //MOUSE_DOWN 鼠标点击
        //MOUSE_UP 鼠标松开
        //MOUSE_WHEEL 鼠标滚轮
        //MOUSE_MOVE 鼠标移动
        //MOUSE_LEAVE 鼠标移开
       
        this.node.on(cc.Node.EventType.MOUSE_DOWN,function(event){//监听名称+事件参数
            console.debug("摁下鼠标了"+event.getLocation());//当鼠标点击时,输出内容和鼠标点击的坐标
             //判断是左键还是右键
        	if(event.getButton() == cc.Event.EventMouse.BUTTON_LEFT){
            	console.debug("左键");
        	}
        	if(event.getButton() == cc.Event.EventMouse.BUTTON_RIGHT){
            	console.debug("右键");
        	}
        });
    }

    // update (dt) {}
    protected onDestroy(): void {
        this.node.off(cc.Node.EventType.MOUSE_DOWN);//事件销毁前取消监听
    }
}

![在这里插入图片描述](https://img-blog.csdnimg.cn/353716736b1841ec86b96d30dcec5e95.png
键盘操作

const {ccclass, property} = cc._decorator;

@ccclass
export default class NewClass extends cc.Component {

    @property(cc.Label)
    label: cc.Label = null;

    @property
    text: string = 'hello';

    // LIFE-CYCLE CALLBACKS:

    // onLoad () {}

    start () {
        //键盘监听,被调用就会被执行
       cc.systemEvent.on(cc.SystemEvent.EventType.KEY_DOWN, function(event){
            //console.debug(event.keyCode);//输出按键自带编号

            //监听按键少用if 多用switch
            if(event.keyCode == cc.macro.KEY.w){//macro.KEY可以直接选择按键
                console.debug("w");
            }
            if(event.keyCode == cc.macro.KEY.q){
                console.debug("q");
            }
       });
    }

    // update (dt) {}
    
}

在这里插入图片描述

3.触摸与自定义事件

const {ccclass, property} = cc._decorator;

@ccclass
export default class NewClass extends cc.Component {

    @property(cc.Label)
    label: cc.Label = null;

    @property
    text: string = 'hello';

    // LIFE-CYCLE CALLBACKS:

    // onLoad () {}

    start () {
        //监听,被调用就会被执行
       //cc.systemEvent.on(cc.SystemEvent.EventType.KEY_DOWN, function(event){
            //console.debug(event.keyCode);//输出按键自带编号

            //监听按键少用if 多用switch
            //if(event.keyCode == cc.macro.KEY.w){//macro.KEY可以直接选择按键
            //    console.debug("w");
            //}
            //if(event.keyCode == cc.macro.KEY.q){
            //    console.debug("q");
            //}
       //});
    
       //触摸事件
       //TOUCH_START 开始触摸
       //TOUCH_END 结束触摸
       //TOUCH_MOVE 移动触摸
       //TOUCH_CANCEL 异常取消
       this.node.on(cc.Node.EventType.TOUCH_START, function(event){
            console.debug("触摸");
            //判断几个手指触摸
            console.debug("触摸" +event.getID());

        });
    
    }


    // update (dt) {}
    
}

显示触摸的ID和点击位置
在这里插入图片描述

自定义事件

const {ccclass, property} = cc._decorator;

@ccclass
export default class NewClass extends cc.Component {

    @property(cc.Label)
    label: cc.Label = null;

    @property
    text: string = 'hello';

    // LIFE-CYCLE CALLBACKS:

    // onLoad () {}

    start () {
        //监听,被调用就会被执行
       
       //触摸事件
       //在匿名函数里要用self来调用this
       let self = this;
       this.node.on(cc.Node.EventType.TOUCH_START, function(event){
            //发送事件的方法1 emit
            //self.node.emit("myevent1");
            //发送事件的方法2
            self.node.dispatchEvent(new cc.Event.EventCustom("myevent1",true)); //false只在本节点触发,true可以传递给父节点

        });
        
        //监听自定义事件
        this.node.on("myevent1",function(event){
            console.debug("自定义事件");
        });
    }


    // update (dt) {}
    
}

通过触摸来实现自定义的事件
==**触摸事件**==

4.碰撞检测

给精灵添加组件BoxCollider CircleCollider圆形碰撞组件 PolygonCollider多边形碰撞组件
Size是原本大小
Offset 碰撞检测区域 初始值和精灵大小相同
Tag标记
Editing 自己手动拖动碰撞大小

const {ccclass, property} = cc._decorator;

@ccclass
export default class NewClass extends cc.Component {

    @property(cc.Label)
    label: cc.Label = null;

    @property
    text: string = 'hello';

    // LIFE-CYCLE CALLBACKS:

    // onLoad () {}

    start () {
       //碰撞检测
       //开启碰撞检测
       cc.director.getCollisionManager().enabled = true

    }
    //产生碰撞
    onCollisionEnter(other){
        console.debug("碰撞发生" + other.tag);//显示碰撞的编号
    }

    //碰撞持续
    onCollisionStay(other){
        console.debug("碰撞持续");
    }

    //碰撞结束
    onCollisionExit(other){
        console.debug("碰撞结束");
    }


    // update (dt) {}
    
}

在这里插入图片描述

转载请注明出处或者链接地址:https://www.qianduange.cn//article/12990.html
标签
cocos2d
评论
发布的文章

vue3生成聊天对话框功能

2024-07-10 18:07:36

json基本格式

2024-07-08 09:07:01

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!