Finally, you can enable automatic sorting of an object's children using the sortableChildren option combined with setting the zIndex property on each child. To add a child at a given point in a parent's list, use addChildAt(). If you'd like to re-order a child object, you can use setChildIndex(). Even though each sprite's properties are set to the same values, the parent-child chain amplifies each change: // Create the application helper and add its render target to the page const app = new PIXI.Application( We'll create three sprites, each a child of the last, and animate their position, rotation, scale and alpha. Similarly, an object's position is relative to its parent, so if a parent is set to an x position of 50 pixels, and the child is set to an x position of 100 pixels, it will be drawn at a screen offset of 150 pixels, or 50 + 100. If a child is then set to 0.5 alpha, it won't be 50% transparent, it will be 0.5 x 0.5 = 0.25 alpha, or 75% transparent. If a parent's alpha is set to 0.5 (making it 50% transparent), all its children will start at 50% transparent as well. If you have a game object that's made up of multiple sprites, you can collect them under a container to treat them as a single object in the world, moving and rotating as one.Įach frame, PixiJS runs through the scene graph from the root down through all the children to the leaves to calculate each object's final position, rotation, visibility, transparency, etc. Hide a parent, and the children will also be hidden. When a parent is rotated, its children are rotated too. When a parent moves, its children move as well. (A helpful tool for exploring your project is the Pixi.js devtools plugin for Chrome, which allows you to view and manipulate the scene graph in real time as it's running!) Parents and Children Most PixiJS objects can also have children, and so as you build more complex scenes, you will end up with a tree of parent-child relationships, rooted at the app's stage. When you add a sprite or other renderable object as a child to the stage, it's added to the scene graph and will be rendered and interactable. The scene graph's root node is a container maintained by the application, and referenced with app.stage. If you've built games before, this should all sound very familiar, but if you're coming from HTML and the DOM, it's worth understanding before we get into specific types of objects you can render. Let's talk about what's in the scene graph, and how it impacts how you develop your project. Every frame, PixiJS is updating and then rendering the scene graph.
0 Comments
Leave a Reply. |