Cocos Creator之访问节点和组件

2021-04-28 11:23:30 浏览数 (1)

image.png

获取自身节点

在组件方法里访问 this.node 变量就可以获取自身节点:

代码语言:javascript复制
start: function () {
    var node = this.node;
}
获得自身节点上的其它组件

获得同一个节点上的其它组件。

使用函数getComponent,实例:

代码语言:javascript复制
start: function () {
    var label = this.getComponent(cc.Label);
    var text = this.name   'started';

    // Change the text in Label Component
    label.string = text;
}

函数可以直接传入一个类名(对用户定义的组件而言,类名就是脚本的文件名,并且区分大小写。):

代码语言:javascript复制
var rotate = this.getComponent("SinRotate");

对于每个节点。也有一个 getComponent 方法:

代码语言:javascript复制
cc.log(this.node.getComponent(cc.Label) === this.getComponent(cc.Label));  // true
查找异常

如果节点上找不到想要的组件,getComponent 返回 null。 所以使用时候需要添加对应的判断:

代码语言:javascript复制
   start: function () {
        var label = this.getComponent(cc.Label);
        if (label) {
            label.string = "Hello";
        }
        else {
            cc.error("Something wrong?");
        }
    }

获得其它节点及其组件

接下来学习下,如何访问其他的节点以及其组件。

例如,一门自动瞄准玩家的大炮,就需要不断获取玩家的最新位置。

Cocos Creator 提供了一些不同的方法来获得其它节点或组件。

1. 利用属性检查器设置节点

属性检查器 中设置需要的对象。

以节点为例,这只需要在脚本中声明一个 type 为 cc.Node 的属性:

代码语言:javascript复制
// Cannon.js

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

代码的意思就是在properties 里面声明了一个 player 属性,默认值为 null,并且指定它的对象类型为 cc.Node。

脚本编译之后,这个组件在属性检查器中看起来是这样的:

image.png

然后可以将层级管理器中的任意一个节点拖到这个 Player 控件:

image.png

这样 player 属性就会被设置成功,可以直接在脚本里访问 player:

代码语言:javascript复制
// Cannon.js

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

    start: function () {
        cc.log("The player is "   this.player.name);
    },

    // ...
});
2. 利用属性检查器设置组件

基本方式和节点一样:

代码语言:javascript复制
// Cannon.js

// 通过模块化方式获取脚本 “Player”
var Player = require("Player");

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

    start: function () {
        cc.log("The player is "   this.player.name);
    },

    // ...
});

修改代码中的类型为组件的类。

然后将挂载了 Player.js 的 Player Node 拖拽到这个组件的 player 属性框中:

image.png

这样 player属性就相当于是这个节点上的 Player 脚本组件了,就不需要再自己手动调用 getComponent 来获取组件了。

查找子节点

顾名思义,基本有三个方式.

  1. 直接获取列表
代码语言:javascript复制
// CannonManager.js

cc.Class({
    extends: cc.Component,

    start: function () {
        var cannons = this.node.children;
        // ...
    }
});
  1. 使用 getChildByName
代码语言:javascript复制
this.node.getChildByName("Cannon 01");
  1. 如果子节点的层次较深,可以使用cc.find
代码语言:javascript复制
cc.find("Cannon 01/Barrel/SFX", this.node);

注意:当 cc.find 只传入第一个参数时,将从场景根节点开始逐级查找。也就是全局名字查找

0 人点赞