美文网首页
访问节点和组件

访问节点和组件

作者: kzc爱吃梨 | 来源:发表于2020-07-13 13:41 被阅读0次

你可以在属性检查器里修改节点和组件,也能在脚本中动态修改。动态修改的好处是能够在一段时间内连续地修改属性、过渡属性,实现渐变效果。脚本还能够响应玩家输入,能够修改、创建和销毁节点或组件,实现各种各样的游戏逻辑。要实现这些效果,你需要先在脚本中获得你要修改的节点或组件。

  • 获得组件所在的节点
  • 获得其它组件
  • 使用 属性检查器 设置节点和组件
  • 查找子节点
  • 全局节点查找
  • 访问已有变量里的值

获得组件所在的节点

获得组件所在的节点很简单,只要在组件方法里访问 this.node 变量:

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

获得其它组件

你会经常需要获得同一个节点上的其它组件,这就要用到 getComponent 这个 API,它会帮你查找你要的组件。

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

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

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

var rotate = this.getComponent("SinRotate");

在节点上也有一个 getComponent 方法,它们的作用是一样的:

start: function () {
    cc.log(this.node.getComponent(cc.Label) === this.getComponent(cc.Label));  // true
}

获得其它节点及其组件

仅仅能访问节点自己的组件通常是不够的,脚本通常还需要进行多个节点之间的交互。例如,一门自动瞄准玩家的大炮,就需要不断获取玩家的最新位置。Cocos Creator 提供了一些不同的方法来获得其它节点或组件。

利用属性检查器设置节点

最直接的方式就是在 属性检查器 中设置你需要的对象。以节点为例,这只需要在脚本中声明一个 type 为 cc.Node 的属性:

// Cannon.js

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

这段代码在 properties 里面声明了一个 player 属性,默认值为 null,并且指定它的对象类型为 cc.Node。这就相当于在其它语言里声明了 public cc.Node player = null;。脚本编译之后,这个组件在 属性检查器 中看起来是这样的:

player-in-inspector-null

接着你就可以将层级管理器上的任意一个节点拖到这个 Player 控件:

player-in-inspector

这样一来它的 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);
    },

    // ...
});

利用属性检查器设置组件

在上面的例子中,如果你将属性的 type 声明为 Player 组件,当你拖动节点 Player Node属性检查器,player 属性就会被设置为这个节点里面的 Player 组件。这样你就不需要再自己调用 getComponent 啦。

// Cannon.js

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);
    },

    // ...
});

你还可以将属性的默认值由 null 改为数组 [],这样你就能在 属性检查器 中同时设置多个对象。
不过如果需要在运行时动态获取其它对象,还需要用到下面介绍的查找方法。

相关文章

  • 访问节点和组件

    你可以在属性检查器里修改节点和组件,也能在脚本中动态修改。动态修改的好处是能够在一段时间内连续地修改属性、过渡属性...

  • (四)常用节点和组件接口

    (四)常用节点和组件接口 在通过访问节点和组件介绍的方法获取到节点或组件实例后,这篇文章将会介绍通过节点和组件实例...

  • (三)访问节点和组件

    (三)访问节点和组件 你可以在 属性检查器 里修改节点和组件,也能在脚本中动态修改。动态修改的好处是能够在一段时间...

  • 2018-06-19 cocosCreator节点的相互访问

    访问节点和其他组件 获得其它组件 1.var label = this.getComponent(cc.Label...

  • 无标题文章

    一、访问受控的DOM节点想要访问受React控制的DOM节点,首先必须能够访问到负责控制这些DOM的组件。这可以通...

  • Cocos Creator之访问节点和组件

    获取自身节点 在组件方法里访问 this.node 变量就可以获取自身节点: 获得自身节点上的其它组件 获得同一个...

  • (八)监听和发射事件

    (八)监听和发射事件 监听事件 事件处理是在节点(cc.Node)中完成的。对于组件,可以通过访问节点 this....

  • 监听和发射事件

    监听事件 事件处理是在节点(cc.Node)中完成的。对于组件,可以通过访问节点 this.node 来注册和监听...

  • react 之 ref

    Refs 可以直接访问 dom 节点或者 react 组件。 在传统的 react 数据流中,父组件与子组件的数据...

  • vue 处理边界情况

    访问根级组件实例 $root $root访问的是根节点的属性,小型项目可以用在根节点设置属性等提供给子页面调用,...

网友评论

      本文标题:访问节点和组件

      本文链接:https://www.haomeiwen.com/subject/trxacktx.html