Sprite: Use the alpha channel from a Sprite as your mask, providing anti-aliased edging - not supported on the Canvas renderer FilteringĪnother common use for Container objects is as hosts for filtered content. Use a Graphics object to create a mask with an arbitrary shape - powerful, but doesn't support anti-aliasing There are two types of masks supported by PixiJS: Update the text's y coordinate to scroll it Add a ticker callback to scroll the text up and down let elapsed = 0.0 'You can put anything in the container and it will be masked!', 'This text will scroll up and be masked, so you can see how masking works. Create contents for the masked container let text = new PIXI.Text( Add the mask as a child, so that the mask is positioned relative to its parent Set the mask to use our graphics object from above Add container that will hold our masked content let maskContainer = new PIXI.Container() Create a graphics object to define our mask let mask = new PIXI.Graphics() Create the application helper and add its render target to the page let app = new PIXI.Application() į( 320 - 104, 180 - 104) Move the contents of the Container to scroll as desired. Any content that extends beyond the rectangular mask will simply not be drawn. content you want to display as children of that masked Container. Add the Container, set its mask property to a Graphics object with a rect, and add the text, image, etc. A Container plus a mask makes that scrollable area easy to implement. It has a frame made of one or more Sprites, then has a scrollable content area that hides content outside the frame. "Masking" is a technique where parts of your scene graph are only visible within a given area. So that's the primary use for Containers - as groups of renderable objects in a hierarchy.Īnother common use for Container objects is as hosts for masked content. It also future-proofs your code, as when you need to add an additional object to a branch of the tree, your animation logic doesn't need to change - just drop the new object into the proper Container, and your logic moves the Container with no changes to your code. Standalone Container objects are very cheap to render, and having a proper hierarchy of Container objects, each containing one or more renderable objects, provides flexibility in rendering order. However, it's a good idea not to do this. Containers as GroupsĪlmost every type of display object is also derived from Container - even Sprites! This means that in many cases you can create a parent-child hierarchy with the objects you want to render. But beyond grouping objects, containers have a few uses that you should be aware of. The Container class provides a simple display object that does what its name implies - collect a set of child objects together.
0 Comments
Leave a Reply. |