Jump to content

PIXIJS, help with radial mask

ricardo duinkerken

Recommended Posts

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.


Link to comment
Share on other sites

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 by ivan.popelyshev
Link to comment
Share on other sites

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


Link to comment
Share on other sites

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.


Link to comment
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.

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.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...