PIXIJS, help with radial mask

[ricardo duinkerken]

Dear members, 

For a project im a working on i need to make a countdown timer, for the visuals i am stuck on how to achieve it.

Is there any functionality pixijs has that could achieve this:

So far i have looked into the PIXI.sprite.mask

but if possible i would like to achieve a radial mask or similar effect that would not require me having a spritesheet or list/array of pictures for the countdown animation.

 

[ivan.popelyshev]

Hello and Welcome to the forums!

1. if you dont have texture to mask - just use Graphics beginFill() with color you want

2. if you actually want to mask something - you can make radial or square mask,

I dont understand what is actually your problem, do you need an example that does exactly what you want? Its just a trivial Graphics. Please give me more information.

Edited May 1, 2020 by ivan.popelyshev

[ricardo duinkerken]

i need to make the exact thing as in the gif. so when i set a mask its just a single static piece. how does one make the mask so that it slowly reveals. just like the lighter part in the gif. is that possible with with a mask or other way.?

1. the lighter part should slowly deplete revealing the background color of the timer (which in the mockup atm is almost the same color as the just the background but)

2. i looked around but i didnts see a way to make the radial mask? that slowly unsegments the lighter colour. revealing the background color.

3. using graphics beginfill doesnt satifsy either. as when i do a grpahics.drawcircle it wil fill the entire circle and not segmented parts. atleast i havent seen a way to do a radial fill based on amount of degrees to be filled.

 

so if i try reformat the question:

i am looking for a way to to do

A. a radial mask that exposes based on a 360 degrees fill amount.

B. any other way that would make it possible to to slowly reveal a set amount of circle as in the example gif

and preferably a way where i dont have to set a spritesheet or array of images and update the mask with a new sprite every frame.

 

hopefully this made the question clearer.

thanks for the fast response

 

[ivan.popelyshev]

> i havent seen a way to do a radial fill based on amount of degrees to be filled.

right, so that's your problem

arc + two lines should do it. Usually people know about that from experience with other renderers and API's , like canvas2d

[Exca]

There was a similar topic few years ago, the example I made in that should work with current pixi. Might make an example of this next week.

In the example below a mask was used due to animation behind the radial, but same could be applied to just using graphics and drawing two lines + arc.