CocosCreator 脚本控制节点和组件

最新推荐文章于 2025-02-13 09:25:46 发布

脱碳甲醛

最新推荐文章于 2025-02-13 09:25:46 发布

阅读量3.5k

点赞数 2

分类专栏： CocosCreator 文章标签：节点获取组件获取节点属性更改

本文链接：https://blog.csdn.net/qq_43575267/article/details/88809103

版权

CocosCreator 专栏收录该内容

7 篇文章

订阅专栏

本文详细介绍了CocosCreator中如何获取和操作节点及组件。包括通过`this.node`获取组件所在节点，`cc.find`查找任意节点，`getComponent`获取组件。还讲解了节点的常用接口，如激活/关闭、位置、旋转、尺寸和颜色的修改，以及组件的生命周期回调。最后讨论了节点的创建、克隆和销毁方法。

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

获取节点

获得组件所在的节点

只要在组件方法里访问 this.node 变量

start: function () {
     var node = this.node;
     node.x = 100;
 }

获取其他节点
- 在属性检查器里设置节点
  若果要获取的节点是一个不用改变的常量，最简单的方法是在 JS 文件中声明为默认成员，设置类型，然后直接在属性检查器里将节点拉进去即可。

   cc.Class({
       extends: cc.Component,
   	properties: {
    	// 声明 player 属性
    	player: {
       	default: null,
          	type: cc.Node
        	}
    	}
});

查找子节点
- 有时候，游戏场景中会有很多个相同类型的对象，像是炮塔、敌人和特效，它们通常都有一个全局的脚本来统一管理。如果用属性检查器来一个一个将它们关联到这个脚本上，那工作就会很繁琐。为了更好地统一管理这些对象，我们可以把它们放到一个统一的父物体下，然后通过父物体来获得所有的子物体。
- 获得所有子节点：node.children

start: function() {
var children = this.node.children;
    for (var i = 0; i < children.length; i++) {
    var node = children[i];
    }
}

获得指定名字子节点：getChildrenByName

 this.node.getChildByName("Children1")

查找任意节点
可以使用 cc.find 根据传入的路径进行逐级查找。输入一个参数时，将从场景根节点开始逐级查找。或者输入第二个参数 this 将从本节点开始寻找。

this.backNode = cc.find("Canvas/Menu/Back");
cc.find("Cannon 01/Barrel/SFX", this.node);

获取组件

在我们获取节点之后，就可以通过 getComponent 方法获取其组件。
getComponent 方法传入一个组件名称，例如 cc.Label

也可以为 getComponent 传入一个类名。对用户定义的组件而言，类名就是脚本的文件名，并且区分大小写。例如 “SinRotate.js” 里声明的组件，类名就是 “SinRotate”。

start: function () {
      var label = this.getComponent(cc.Label);
      var text = this.name + ' started';

      // Change the text in Label Component
      label.string = text;
  }
  var rotate = this.getComponent("SinRotate");

在上面通过属性检查器获取节点的例子中，如果你将属性的 type 声明为 Player 组件，当你拖动节点 “Player Node” 到属性检查器，player 属性就会被设置为这个节点里面的 Player 组件。

var Player = require("Player");

cc.Class({
  extends: cc.Component,
  properties: {
      // 声明 player 属性，这次直接是组件类型
      player: {
          default: null,
          type: Player
      }
  },

  start: function () {
      var playerComp = this.player;
      this.checkPlayer(playerComp);
  },

  // ...
});

常用节点接口

激活/关闭节点

节点默认是激活的，我们可以在代码中设置它的激活状态，方法是设置节点的 active 属性。
设置 active 属性和在编辑器中切换节点的激活、关闭状态，效果是一样的。当一个节点是关闭状态时，它的所有组件都将被禁用。同时，它所有子节点，以及子节点上的组件也会跟着被禁用。
要注意的是，子节点被禁用时，并不会改变它们的 active 属性，因此当父节点重新激活的时候它们就会回到原来的状态。
```
this.node.active = false;
this.node.active = true;
```

更改节点位置

this.node.x = 100; this.node.y = 50;
this.node.setPosition(100, 50);
this.node.setPosition(cc.v2(100, 50));
this.node.position = cc.v2(100, 50);

更改节点旋转

this.node.rotation = 90;
this.node.setRotation(90);

更改节点尺寸

this.node.setContentSize(100, 100);
this.node.setContentSize(cc.size(100, 100));
this.node.width = 100; this.node.height = 100;

更改节点锚点位置

this.node.anchorX = 1; this.node.anchorY = 0;
this.node.setAnchorPoint(1, 0);

颜色和不透明度

在使用 Sprite, Label 这些基本的渲染组件时，要注意修改颜色和不透明度的操作只能在节点的实例上进行，因为这些渲染组件本身并没有设置颜色和不透明度的接口。

mySprite.node.color = cc.Color.RED;
mySprite.node.opacity = 128;

cc.color 可以用 new 创建，括号里写入RGB颜色值（0~255），也可以用上面的特殊字符创建特定颜色。

opacity 设置透明度，值的范围为0~255

var myColor = new cc.Color(255, 255, 255);

组件接口——生命周期

cc.Component 是所有组件的基类，任何组件都包括如下的常见接口（假设我们在该组件的脚本中，以 this 指代本组件）：

this.node：该组件所属的节点实例
this.enabled：是否每帧执行该组件的 update 方法，同时也用来控制渲染组件是否显示
onLoad：组件所在节点进行初始化时（节点添加到节点树时）执行
onEnable：当组件的 enabled 属性从 false 变为 true 时，或者所在节点的 active 属性从 false 变为 true 时，会激活 onEnable 回调。倘若节点第一次被创建且 enabled 为 true，则会在 onLoad 之后，start 之前被调用。
onDisable：当组件的 enabled 属性从 true 变为 false 时，或者所在节点的 active 属性从 true 变为 false 时，会激活 onDisable 回调。
start：会在该组件第一次 update 之前执行，通常用于需要在所有组件的 onLoad 初始化完毕后执行的逻辑
update(dt)：作为组件的成员方法，在组件的 enabled 属性为 true 时，其中的代码会每帧执行
update：会在所有动画更新前执行，但如果我们要在动效（如动画、粒子、物理等）更新之后才进行一些额外操作，或者希望在所有组件的 update 都执行完之后才进行其它操作，那就需要用到 lateUpdate 回调。
onDestroy：当组件或者所在节点调用了 destroy()，则会调用 onDestroy 回调，并在当帧结束时统一回收组件。

节点的创建和销毁

创建新节点
- 除了通过场景编辑器创建节点外，我们也可以在脚本中动态创建节点。通过 new cc.Node() 并将它加入到场景中，可以实现整个创建过程。

cc.Class({
  extends: cc.Component,

  properties: {
    sprite: {
      default: null,
      type: cc.SpriteFrame,
    },
  },

  start: function () {
    var node = new cc.Node('Sprite');
    var sp = node.addComponent(cc.Sprite);

    sp.spriteFrame = this.sprite;
    node.parent = this.node;
  },
});

克隆已有节点
- 有时我们希望动态的克隆场景中的已有节点，我们可以通过 cc.instantiate 方法完成。

cc.Class({
  extends: cc.Component,

  properties: {
    target: {
      default: null,
      type: cc.Node,
    },
  },

  start: function () {
    var scene = cc.director.getScene();
    var node = cc.instantiate(this.target);

    node.parent = scene;
    node.setPosition(0, 0);
  },
});

创建预制节点
- 和克隆已有节点相似，你可以设置一个预制（Prefab）并通过 cc.instantiate 生成节点。

cc.Class({
  extends: cc.Component,

  properties: {
    target: {
      default: null,
      type: cc.Prefab,
    },
  },

  start: function () {
    var scene = cc.director.getScene();
    var node = cc.instantiate(this.target);

    node.parent = scene;
    node.setPosition(0, 0);
  },
});

销毁节点
- 通过 node.destroy() 函数，可以销毁节点。值得一提的是，销毁节点并不会立刻被移除，而是在当前帧逻辑更新结束后，统一执行。当一个节点销毁后，该节点就处于无效状态，可以通过 cc.isValid 判断当前节点是否已经被销毁。

cc.Class({
  extends: cc.Component,

  properties: {
    target: cc.Node,
  },

  start: function () {
    // 5 秒后销毁目标节点
    setTimeout(function () {
      this.target.destroy();
    }.bind(this), 5000);
  },

  update: function (dt) {
    if (cc.isValid(this.target)) {
      this.target.rotation += dt * 10.0;
    }
  },
});