2.cc.Node(一)场景树

本文介绍Cocos Creator游戏开发的基本概念,包括场景管理、cc.Node与cc.Component的使用方法,以及组件生命周期等关键信息。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.creator是由一个一个的游戏场景组成,通过代码逻辑来控制场景跳转;creator场景是一个树形结构;有父节点与孩子节点;cc.Node就是场景树中的节点对象了;任何一个节点都有一个cc.Node,换言之cc.Node挂载组件

2.cc.Node的属性

3.所有的组件都扩展自cc.Component; 每个cc.Component组件实例都有个成员node,指向它关联节点的cc.Node; name: 每一个cc.Component组件通过name属性可以获得节点的名字;

组件实例入口函数:

     onLoad: 在组件加载的时候调用;
     start: 组件第一次激活前, 调用在第一次update之前;
     update(dt): 每次游戏刷新的时候调用,
     
     lateUpdate(dt): 在update之后调用;
     enabled:组件是否被启动;
     onEnable: 组件被允许的时候调用;
     onDisable: 组件不被允许的时候调用;

4.代码组件

  每个代码组件实例都继承自cc.Component(构造函数),所以有一个node数据成员指向cc.Node; cc.Class({...}) 定义导出了一个新的类的构造函数,它继承自cc.Component; 当为每个节点添加组件的时候,会实例化(new)这个组件类,生成一个组件实例;(js语法new); 当组件加载运行的时候,代码函数里面的this指向这个组件的实例;  代码组件在挂载的时候扩展自cc.Component, 里面有个成员node会指向节点(cc.Node); 所以在代码组件里面,可以使用this.node来访问这个组件实例说挂载的节点对象; 代码里访问cc.Node总要属性;

例:

 game_script_script.js

// Learn cc.Class:
//  - [Chinese] https://docs.cocos.com/creator/manual/zh/scripting/class.html
//  - [English] http://docs.cocos2d-x.org/creator/manual/en/scripting/class.html
// Learn Attribute:
//  - [Chinese] https://docs.cocos.com/creator/manual/zh/scripting/reference/attributes.html
//  - [English] http://docs.cocos2d-x.org/creator/manual/en/scripting/reference/attributes.html
// Learn life-cycle callbacks:
//  - [Chinese] https://docs.cocos.com/creator/manual/zh/scripting/life-cycle-callbacks.html
//  - [English] https://www.cocos2d-x.org/docs/creator/manual/en/scripting/life-cycle-callbacks.html

cc.Class({
    extends: cc.Component,

    properties: {
        // foo: {
        //     // ATTRIBUTES:
        //     default: null,        // The default value will be used only when the component attaching
        //                           // to a node for the first time
        //     type: cc.SpriteFrame, // optional, default is typeof default
        //     serializable: true,   // optional, default is true
        // },
        // bar: {
        //     get () {
        //         return this._bar;
        //     },
        //     set (value) {
        //         this._bar = value;
        //     }
        // },
    },

    // LIFE-CYCLE CALLBACKS:

    onLoad () {

        //this, -->当前组件实例
        console.log(this);

        //找到指向这个组件实例所挂载的节点
        console.log("==================");
        console.log(this.node);
        console.log(this.node.name);

        //找到当前节点的父节点
        console.log(this.node.parent);
        console.log(this.node.parent.name);

        //找到孩子节点
        var childs = this.node.children;
        for(var i = 0; i < childs.length; i++) {
            console.log(childs[i].name);
        }
        
        console.log(this.node.childrenCount);

        //方法
        var new_node = new cc.Node();
        //添加节点
        this.node.addChild(new_node);
        //查找节点  局部搜索
        var item = this.node.getChildByName("item1");
        console.log(item.name);
        //全局搜索不建议使用

        //位置
        var pos = item.getPosition(); //相对位置
        console.log(pos);
        pos = cc.p(100, 100);
        item.setPosition(pos);

        // setLocalZOreder 绘制顺序

    },

    start () {

    },

    // update (dt) {},
});

 

 

 

 

### 如何在 Cocos Creator 中使用 `cc.Node.on` 方法绑定事件 在 Cocos Creator 中,`cc.Node.on` 是种常用的方式来为节点绑定特定类型的事件监听器。以下是关于其工作原理以及具体使用的详细说明。 #### 基础概念 `cc.Node.on` 方法允许开发者通过指定事件类型,在某个节点上注册回调函数。当触发对应的事件时,会自动执行已注册的回调逻辑[^2]。 #### 参数解析 根据引用描述,`on` 函数具有以下参数: - **type**: 事件类型,例如 `"touchstart"` 或自定义事件名称。 - **callback**: 当事件被触发时要执行的回调函数。 - **target**: 回调函数的作用域 (`this`),通常设置为目标对象本身或者组件实例。 - **useCapture**: (可选)布尔值,默认为 `false`。如果设为 `true`,则表示此事件会在捕获阶段触发;否则将在冒泡阶段触发。 #### 示例代码 下面是个完整的例子展示如何利用 `cc.Node.on` 来响应按钮点击事件: ```javascript // 创建个脚本并挂载到场景中的任意节点下 cc.Class({ extends: cc.Component, properties: { labelComponent: cc.Label, buttonNode: cc.Button // 这里假设已经拖拽关联好Button节点 }, onLoad() { // 绑定点击事件至buttonNode this.buttonNode.node.on('click', function () { console.log("Button was clicked!"); // 修改Label显示的文字内容 this.labelComponent.string = 'You pressed the button!'; }.bind(this)); // 如果需要支持移除事件,则可以保存回调引用 const touchStartCallback = function(event){ console.log("Touch started", event); }; this.buttonNode.node.on('touchstart', touchStartCallback); // 后续可以通过off方法解除绑定 // this.buttonNode.node.off('touchstart', touchStartCallback); } }); ``` 上述代码展示了两个典型的应用案例:个是简单的 `'click'` 事件处理程序,另个则是更复杂的 `'touchstart'` 事件处理器,并演示了如何手动管理事件订阅与取消订阅的关系。 #### 动态资源加载后的注意事项 假如涉及到动态加载图片或其他素材作为 Sprite Frame 并应用到 Node 上的情况,请记得适时清理不再使用的资源以防止内存泄漏。比如按照给定模式释放精灵帧资源[^3]: ```typescript releaseSprite(node: cc.Node): void{ if (!cc.isValid(node)) return; const spriteComp = node.getComponent(cc.Sprite); if(spriteComp && spriteComp.spriteFrame){ spriteComp.spriteFrame.decRef(); spriteComp.spriteFrame = null; } } ``` 以上就是有关于 `cc.Node.on` 的基本介绍及其实际运用方式。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值