Manipulating children of the group on the fly

[leonidas]

Hello folks.

 

So, I am trying to manipulate children of the group on the fly.

 

This is my code where group and children are generated

     dealersListGenerator(parentElement: Phaser.Group, dealersCollection: Array<any>, game: Phaser.Game, updateSingleChild?: boolean) {        console.log("Dealers List Yo!");        let baseY = -10;        for (let i = 0; i < dealersCollection.length; i++) {            const debugName = dealersCollection[i].dealerName;            const dealerTextGroup = game.add.group(parentElement, "dealerTextGroup", true);            dealerTextGroup.x = 0;            dealerTextGroup.y = baseY += 20 + 10;            dealerTextGroup.name = dealersCollection[i].dealerName;            const dealerText = game.add.text(0, 0, dealersCollection[i].dealerName, { "fill": "green" });            dealerText.fontSize = 12;            dealerText.anchor.setTo(0.5, 0.5);            dealerText.inputEnabled = true;            dealerText.input.useHandCursor = true;            dealerText.name = dealersCollection[i].dealerName;            dealerText.alpha = 1;            const dealerProduct = game.add.text(dealerText.width + 10, 0, dealersCollection[i].dealersProduct, { "fill": "blue" });            dealerProduct.fontSize = 12;            dealerProduct.anchor.setTo(0.5, 0.5);                      dealerTextGroup.add(dealerText);            dealerTextGroup.add(dealerProduct);           parentElement.add(dealerTextGroup);            dealerText.events.onInputOver.add(e => {                TweenMax.to(e.scale, 1, { x: "0.8", y: "0.8" });                e.setText("SOLD!");            });            dealerText.events.onInputOut.add(e => {                TweenMax.to(e.scale, 1, { x: 1, y: 1, easing: Linear.easeInOut });            });            dealerText.events.onAddedToGroup.add(e => {                console.warn(e);            });        }    }

This method gets called on create() and everything works fine (except on onAddedToGroup event, but that's my least concern right now).

 

Then I have another method to access and manipulate individual child in the group.

updateTextValue(elements:Array<Phaser.Text>| any, elementName:string, game:Phaser.Game  ) {                    elements.forEach(element => {                            if (element.name === elementName) {                                        element.children.forEach(subEelement => {                                            subEelement.setText("SOLD!");                                        });                            }                    });    }

Down on the road, when this method gets called provided argument for elements is children of wrapper parentElement from the previous method (parentElement,children).

 

I can console log desired element, even manipulate with removeChildAt() method. Other than that child stays unaffected.

 

Where an I messing up? . 

[drhayes]

I'm not clear what your question is. You said, "Other than that child stays unaffected." Unaffected by what? What are you trying to do?

[leonidas]

I'm not clear what your question is. You said, "Other than that child stays unaffected." Unaffected by what? What are you trying to do?

for example subEelement.setText("SOLD!")

[Skeptron]

Shouldn't it be element.forEach() instead of element.children.forEach() ? (provided that element is a group)

[drhayes]

If "children" is an array, it has a forEach method on it. That shouldn't be the problem.

 

The child stays unaffected even when you change its position? Are you sure the children are all being displayed? This method isn't getting a collection of elements that aren't on the screen for some reason?