Recommended Posts

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.

Share this post


Link to post
Share on other sites

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 :)

Share this post


Link to post
Share on other sites

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).

Share this post


Link to post
Share on other sites

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 by ivan.popelyshev

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

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 by ivan.popelyshev

Share this post


Link to post
Share on other sites

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 by jonforum

Share this post


Link to post
Share on other sites

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.

yU2XeqeN_o.png

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 by jonforum

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.