So I used a GeometryMask to add a “hole” to a Graphics circle, making a Ring shape. The mask is itself a graphics game object (a white circle with reversed alpha) to create a hole with configurable size.
I wanted to shrink and grow the hole’s radius (as well as the parent’s radius) to give the impression of the ring getting larger or smaller, depending on context. I looked at the GeometryMask instance and saw it had direct access to geometryMask - game-object used for the actual culling.
However, if I apply a tween to that geometryMask, the framerate quickly collapses - and I presume it’s something to do with re-rendering a changed object. I guess the expectation is that the geometryMask remains “baked in” after turned into a mask?
Is that a correct understanding? And is what I’m trying to achieve even possible with Phaser’s toolset? Just trying to prototype a configurable “ring” graphics object that I can customise or animate its outer & inner radii. I have a Plan B so not totally blocked (so I stack Circles on-top of each other to “look” like ring shapes)
Yeah, I was aiming for tweens because I could set the radius to exactly the new figure, rather than figure out a scaling percentage which would be more calculation.
I take it the nature of geometry masks is that redrawing the internal game object is expensive per tick?
I don’t know the internals, but I don’t think transforming the Graphics object (which is geometryMask) is expensive. Many of the examples do that. Could something else be causing the slowdown?
Geometry masks just render the masking object and the masked object. Their other overhead is constant (on WebGL, it comes from setting up the stencil test). Since they render the involved game objects every frame anyway, it doesn’t matter how often they change.
I would first test the Graphics object on its own, without masks or other geometry. Internally, Graphics objects are not a canvas, but a sequence of commands that are executed every time the object renders. If you update them often without clearing them, this will add up and hurt your frame rate very quickly. Curves have additional overhead on WebGL because they also have to be triangulated. Showing the code for the transformation could help us figure out why (and whether) the Graphics object becomes so slow.
Generally, I try to avoid Graphics objects if possible. Shape objects are faster and simpler to handle if you don’t need complex geometry. Could the masked circle be an Ellipse shape instead of a Graphics object? In fact, can this whole effect be achieved by tweaking the stroke size of a single Ellipse object?
@Telinc1 Yeah so each tick of the Tween was invoking onUpdate in its config, and in turn re-rendering the Graphics object acting as the mask (re-calling the fillCircle with the new radius) so I guess I can see how that might hammer the FPS.
Shapes you say? Haven’t played with ellipsis all that much; ATM the game object is just a filled ring of colour so it could ben ellipsis if you’re saying this is a more efficient approach?
If you’re actually redrawing the entire Graphics object, that shouldn’t be a problem. Updating a Graphics object is cheap, and so is rendering a single shape. If you never clear the object, however, you’re only stacking new circles on top of the old ones.