一，cocos creator 基本概念

最新推荐文章于 2025-05-13 02:44:06 发布

原创最新推荐文章于 2025-05-13 02:44:06 发布 · 482 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#cocos2d

前端专栏收录该内容

4 篇文章

订阅专栏

一，基本概念

场景：cocos creator 是由一个一个场景组成的，场景是一个树形结构，场景是由各种层级关系的节点组成；

节点和组件：cocos creator 的工作流程是以组件式开发为核心的，组件式开发也叫组件-实体系统，简单来说，就是以组合而非继承的方式进行实体的构建。节点（node），是承载组件的实体，我们通过将具有各种功能的组件挂载到节点上，让节点具有各式各样的表现和功能。
在这里插入图片描述

二，场景&节点与组件

新建空白项目
在这里插入图片描述

1 场景创建Scene

一般Scene文件下.scene文件皆是场景
在这里插入图片描述

2.1节点创建（右键添加）

在这里插入图片描述

2.2创建节点（直接拖拽）

在这里插入图片描述

注：节点有很多种，看属性，为node，皆是节点

2.3.1组件

在这里插入图片描述

2.3.2脚本

一般是Script文件下的JavaScript文件
在这里插入图片描述

三，坐标

在这里插入图片描述

四，事件响应

触摸事件(node.on)

在这里插入图片描述
官方文档示例node.on

this.node.on(cc.Node.EventType.TOUCH_START, this.memberFunction, this);  // if "this" is component and the "memberFunction" declared in CCClass.
node.on(cc.Node.EventType.TOUCH_START, callback, this);
node.on(cc.Node.EventType.TOUCH_MOVE, callback, this);
node.on(cc.Node.EventType.TOUCH_END, callback, this);
node.on(cc.Node.EventType.TOUCH_CANCEL, callback, this);
node.on(cc.Node.EventType.ANCHOR_CHANGED, callback);
node.on(cc.Node.EventType.COLOR_CHANGED, callback);

操作步骤：
在这里插入图片描述

代码
在这里插入图片描述

    onLoad(){
        this.node.on(cc.Node.EventType.TOUCH_START, function(){
            cc.log("触摸开始")
        },this);

    },

运行结果
在这里插入图片描述

键盘事件（cc.systemEvent）

代码


    onLoad(){
        // this.node.on(cc.Node.EventType.TOUCH_START, function(){
        //     cc.log("触摸开始")
        // },this);
        cc.systemEvent.on(cc.SystemEvent.EventType.KEY_DOWN,function(e){
            cc.log("键盘按下:",e.keyCode)
            switch (e.keyCode){
                case cc.macro.KEY.space:{
                    cc.log("你按下的是空格键")
                }
            }
        },this);
    },

运行结果
鼠标移动到空格位置，点击键盘字母
在这里插入图片描述

响应自定义事件

1 监听事件

    onLoad(){
    //以当前节点监听一个事件
        this.node.on("fire",function(msg){
            cc.log("监听自定义事件！","fire",msg);
    },this)

    },

2 发射事件emeit

    //响应事件emit（只能派送给自己）
    update(dt){
        this.node.emit("fire","开火");
    },

});

在这里插入图片描述

3 发射事件dispatchEvent
传递数据

    onLoad(){
        //以当前节点监听一个事件;接收的是dispatchEvent触发
            this.node.on("remoteFire",function(msg){
                cc.log("监听自定义事件！","remoteFire",msg);
    
        },this)
    
        },
    

    //响应事件dispatchEvent（可做事件传递，参数2表示事件是否向上传递）
    update(dt){
        // this.node.emit("fire","开火");
        let msgForDispatchEvent =new cc.Event.EventCustom("remoteFire",true);
        msgForDispatchEvent.detail="远程开火！";
        this.node.dispatchEvent(msgForDispatchEvent);
   
    },