Access children in extended container

Phaser 3
1

I’m trying to use container.getByName(child); to access more than one container children but I’m not succeeding:

In Dialog.js I’m creating the sprites and instantiating the container

export default class Dialog extends Phaser.Scene {
    constructor(settings) {
		super('Dialog');
   }
	create() {
        this.middleCenter = this.add.sprite(0, 0, 'atlas','ui-menu-background');
		this.topLeft = this.add.sprite(0,0,'atlas', 'dialog-bubble-topLeft').setScale(this.pScale);
                
        this.speechBubble = new NineSlices({
			'scene': this,
			'children': [this.middleCenter, this.topLeft]
		});
}

Then I’m extending a container where I’d like to access each child:

export default class NineSlices extends Phaser.GameObjects.Container {
	constructor(settings) {
	      super(settings.scene, settings.position.x, settings.position.y, settings.children);
             this.middleCenter = this.getByName('middleCenter');
             this.topLeft = this.getByName('topLeft');

}

But I’m getting null or undefined or the first child

I’ve tried to assign names in Dialog scene like this: this.middleCenter.name = 'middleCenter';
or I’ve tried to pass an object to the container constructor (but it throws an error) like this:

this.speechBubble = new NineSlices({
			'scene': this,
			'children': {'middleCenter': this.middleCenter, 'topLeft':this.topLeft},
			'position': 0,
			'centerWidth': this.dialogLine.maxWidth,
			'centerHeight': 200,
			'verticalOffset': 200
		});
2

You would have to set the names earlier, before new NineSlices(…).

I think the second idea is a little better though:


function create () {
  this.speechBubble = new NineSlices({
    scene: this,
    children: { middleCenter: this.middleCenter, topLeft: this.topLeft },
    position: 0,
    centerWidth: this.dialogLine.maxWidth,
    centerHeight: 200,
    verticalOffset: 200
  });
}

class NineSlices extends Phaser.GameObjects.Container {
  constructor (settings) {
    // https://caniuse.com/object-values
    super(settings.scene, settings.position.x, settings.position.y, Object.values(settings.children));
    this.middleCenter = settings.children.middleCenter;
    this.topLeft = settings.children.topLeft;
  }
}

But do you need each slice (topLeft etc.) as a property on both the scene and the container?

3

Yes, I’ve tried, but I didn’t manage to get it to work in the container

In the scene I’m creating the sprites, then I’m passing them to the container where I perform position calculations of each sprite and then I position the container in the scene (the container is a rudimentary 9 slices object). I’m not sure there’s a better way.

The quickest way to solve it without getByName(); was:

this.middleCenter = settings.children[0];
this.topLeft = settings.children[1];
this.top = settings.children[2];
this.topRight = settings.children[3];
this.right = settings.children[4];
this.bottomRight = settings.children[5];
this.bottom = settings.children[6];
this.bottomLeft = settings.children[7];
this.left = settings.children[8];
this.tail = settings.children[9];
1 Like