`Phaser.GameObjects.Container` 似乎强迫我们使用数组。为什么会这样？幕后有什么考虑吗？

Question

我正在尝试了解 Phaser.GameObjects.Container 的工作原理。这是代码。

class BootScene extends Phaser.Scene {
  constructor() {
    super();
  }
  create() {
    this.menus = this.add.container();
    var menuItemBlue = new Phaser.GameObjects.Text(this, 10, 30, 'Blue');
    this.menus.add(menuItemBlue);
    console.log(this.menus.length);

    this.menus = this.add.container();
    var menuItemRed = new Phaser.GameObjects.Text(this, 10, 50, 'Red');
    this.menus.add(menuItemRed);
    console.log(this.menus.length);
  }
}

var config = {
  width: 320,
  height: 260,
  scene: [BootScene]
}

var game = new Phaser.Game(config);

<script src="https://cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.js"></script>

create() 方法虽然向容器中添加了两个项目，但长度始终为 1。

我也试过这个

this.menus.add([menuItemBlue, menuItemRed]);
console.log(this.menus.length);

输出符合预期，即 2。

好像我一个一个地添加项目，容器只保留最后一个。如果我想保留它们，我必须将所有项目放在一个数组中，然后将数组添加到容器中。我的理解正确吗？

为什么 Phaser.GameObjects.Container 这样工作？幕后有什么考虑吗？

Answer 1

问题是，您正在创建两个容器 this.menus = this.add.container();。
删除第二个 "creation"，它起作用了。
（我以你的例子评论了第二个创建出来，现在它按预期工作了）

just in case: this.add.container() creates a container, and adds it to the scene.

class BootScene extends Phaser.Scene {
  constructor() {
    super();
  }
  create() {
    // First Container
    this.menus = this.add.container();
    var menuItemBlue = new Phaser.GameObjects.Text(this, 10, 30, 'Blue');
    this.menus.add(menuItemBlue);
    console.log(this.menus.length);

    // Second not needed Container
    // this.menus = this.add.container();
    var menuItemRed = new Phaser.GameObjects.Text(this, 10, 50, 'Red');
    this.menus.add(menuItemRed);
    console.log(this.menus.length);
  }
}

var config = {
  width: 320,
  height: 260,
  scene: [BootScene]
}

var game = new Phaser.Game(config);

<script src="https://cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.js"></script>

`Phaser.GameObjects.Container` 似乎强迫我们使用数组。为什么会这样？幕后有什么考虑吗？

`Phaser.GameObjects.Container` seems to force us to use array. Why does it works this way? Is there some consideration under the hood?

javascript

phaser-framework