Bug when add grafics children on container

Phaser 3
1
  • I created two squares with grafics and one another game object. Before I try add it to container.

THIS GENERATE THE ERROR: gameObject.once is not a function
const container = this.add.container(0, 0, [grafics01, grafics02, ballObj])

But, when a try this, everthing work correct
const container = this.add.container(0, 0, grafics01)
container.add(grafics02)
container.add(ballObj)

  • I belive that is a bug, or am I used container wrong?
2

Can you show all the code here?

3

Here the most important part of full code, the original file has more than 500+ code lines XD.

const createBackground = (context, config) => {
  const graphics = context.add.graphics();

  graphics.fillStyle(config.color, config.alfa || 1);

  graphics.fillRoundedRect(config.x || 0, config.y || 0, config.width, config.height, {
    tl: config.tl || config.corner || 0,
    tr: config.tr || config.corner || 0,
    bl: config.bl || config.corner || 0,
    br: config.br || config.corner || 0,
  });

  graphics.width = config.width;
  graphics.height = config.height;

  return graphics;
};

const createHeader = () => {
  this.headerBackground1 = createBackground(this.context, {
    color: this.config.body.background.color,
    width: this.headerSize.width,
    height: this.headerSize.height,
    tl: this.config.deleteTitle === true ? this.config.headers.background.tl : 0,
    tr: this.config.deleteTitle === true ? this.config.headers.background.tr : 0,
  });

  /**
   * There're an bug in phaser, it doesn't allow you to create container with grafics and game objects at the same time.
   * Aqui existe um bug no phaser, que não permite criar o container com graficos e objetos de jogo ao mesmo tempo.
   *
   * ERROR HERE:
   * const container = this.context.add.container(0, 0, [this.headerBackground1, this.headerBackground2, this.headerChildren])
   *
   * "this.headerChildren" is an container of phaser.
   */

  const container = this.context.add.container(0, 0, this.headerBackground1);

  container.add(this.headerBackground2);
  container.add(this.headerChildren);
  container.setSize(this.headerBackground1.width, this.headerBackground1.height);
  container.y = this.config.deleteTitle !== true ? this.titleContainer.height : 0;

  return container;
};
4

Can you break on this error and look the value in the debugger? Most likely you’ve passed a bad value somehow.

This doesn’t produce an error:

this.add.container(0, 0, [this.add.graphics()]);
5

I resolved the problem using spread operator.
Code with error:
const container = this.context.add.container(0, 0, [this.headerBackground1, this.headerBackground2, this.headerChildren])

Solution:*
const container = this.context.add.container(0, 0, [this.headerBackground1, this.headerBackground2, …this.headerChildren])

Whats wrong?
The variable <this.headerChildren> is an array, and when I try this.add.container(0, 0, [[]]), array inside array, its generate an error on console.

Error:image