how do you use getchild?

[bbyford]

Been working with Pixijs for a month of so now and haven't found a good way of identifying sprites or containers in other containers. How do you get or adjust sprites and containers within containers?

I'm been looking at: .getChildbyName but what name? And .getChildAt but how do i identify it amongst many other objects that could be returned? is there a design pattern I'm missing here, or a built in id for each created sprite that I can use to lookup or a name that I can assign?

Cheers.

[ivan.popelyshev]

You are over-thinking.

getChildAt: https://github.com/pixijs/pixi.js/blob/dev/packages/mixin-get-child-by-name/src/index.js .

getChildByName: https://github.com/pixijs/pixi.js/blob/dev/packages/display/src/Container.ts#L263

If you want a system that finds elements for you by their name inside the tree, or do anything advanced with tree - you have to code it yourself. Pixi display tree is a basic one, because pixi is not a framework. The goal was to make tree for rendering, not a DOM

[bbyford]

ok cool, but if I assign a sprite a somesprite.name = someName and use getChildByName on it's container will bring it back? Or should i simply look after all my objects myself and just use pixi just to draw? or is it ok just to constantly add and remove things from the app.stage as i've been trying not to add and remove to often (e.g. in the Ticker).

[ivan.popelyshev]

That function is the only place where field `name` is used. I think that code tells for themselves. Of course I can write several pages on how different people make names for their tree structures

Default pixi workflow is - you create pixi tree, manage it, add /remove objects when needed.

Advanced, for users who really need it because they understand why pixi tree is not enough for them - make their own tree, or rewrite Container.render() behaviour.

Somewhere between those two there's hybrid approach when you construct tree from single elements every frame.

If you dont know which approach is best for your case, use default, otherwise you'll just make your app difficult to understand for yourself for a ghost benefit, but the bigger problem is that you wont be able to ask other people about it - only a few specialists use something other than default

Edited March 3, 2020 by ivan.popelyshev

[bbyford]

23 hours ago, ivan.popelyshev said:

Default pixi workflow is - you create pixi tree, manage it, add /remove objects when needed.

I guess this is my point. How do you add and remove things when you dont know what they are?! Whats the workflow for adding and removing objects as at the minute I have to add and then clear everything to add more stuff.

[ivan.popelyshev]

> How do you add and remove things when you dont know what they are?!

We assume that whoever makes a tree and who writes logic are the same person. If you dont store links to your created objects in variables "addChild(this.myButton)" , if you dont want to reference them by indices like "getChildAt(1)" , then you have to write your own naming system.

Everyone writes it differently, there are no standards for render trees. If we put something like that in PixiJS, people will complain that library grown with useless API they usually write themselves.

Flash had instance names , but we dont have editor for them, we just have one small function getChildByName with a very simple code.

Edited March 4, 2020 by ivan.popelyshev

[ivan.popelyshev]

@jonforum need help with answering that, I feel like i'm missing something obvious.

[bbyford]

Thanks for baring with me @ivan.popelyshev coming from Unity3d land I've got a mental model of gameobjects which I need to either build into pixi i guess or let go of. I'll try and build a meta structure on top. Thanks!

[ivan.popelyshev]

Oh, unity! We dont have annotations to make stuff easier to bind, no dependency injection. I usually just put everything in object fields.

Edited March 4, 2020 by ivan.popelyshev

[jonforum]

This is what you're looking for ?
It existe probably many other way.
On my side i use this one. see demo and code line 46
https://github.com/pixijs/pixi.js/pull/6351

Also you can take a look on this script, it another version
https://github.com/djmisterjon/ANFT/blob/af9c158e9d5f1639d26f4249bacc3c362feb5ff4/js/libs/poly/polyfill.js#L176

The idea it add a property named child to DisplayObjets
And use it to add references of all childs sprites with name only

Then it allow do thing like this
this.child.spriteName.position.x = 0

also allow array
this.child.spritesNames[8].position.x = 0

Edited March 4, 2020 by jonforum

[bbyford]

really cool, I didnt see anything to detect whether that named child exists or is attached to that object–you just using it knowing it does in this case?

[jonforum]

yes, the system has these limitations unfortunately, and I have no idea how to fix this.

I help myself with jsdoc, it allow Intellisense to suggest me that the existing names and keep references in whole project, provided that I have not forgotten.
It takes discipline and time, but I don't know how to do it any other way. ?
I am open to any idea to this subject, because it a static technique.

And if you not sure in the workflow if the ref existe or are destroyed.
You can do a if condition or use  optional chaining
this.child.SpriteName?.method(param);
the ?. are useful in dynamic cases

More info
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining
Bench perfo are overhere
https://jsbench.me/kck6knyjmg/1

Edited March 4, 2020 by jonforum