Cocos Creator之访问节点和组件

李小白是一只喵

发布于 2021-04-28 11:23:30

1.8K0

发布于 2021-04-28 11:23:30

文章被收录于专栏：算法微时光

image.png

获取自身节点

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

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

获得自身节点上的其它组件

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

使用函数getComponent，实例:

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");

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

cc.log(this.node.getComponent(cc.Label) === this.getComponent(cc.Label));  // true

查找异常

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

   start: function () {
        var label = this.getComponent(cc.Label);
        if (label) {
            label.string = "Hello";
        }
        else {
            cc.error("Something wrong?");
        }
    }

获得其它节点及其组件

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

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

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

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

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

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

// 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：

// 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. 利用属性检查器设置组件

基本方式和节点一样：

// 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 来获取组件了。

查找子节点

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

直接获取列表

// CannonManager.js

cc.Class({
    extends: cc.Component,

    start: function () {
        var cannons = this.node.children;
        // ...
    }
});

使用 getChildByName

this.node.getChildByName("Cannon 01");

如果子节点的层次较深，可以使用cc.find

cc.find("Cannon 01/Barrel/SFX", this.node);

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

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

image

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度