How to create circle image in container or rexui sizer

Phaser 3
1

Hi there.

First, I’m trying to make an FB Leader board like this image https://prnt.sc/owv7q4. I captured it from Caro - an instant game.

And I’m new in Phaser 3.

I know how to create circle image by using mask. But my problem is i can’t use mask for a child in a container. I spent whole day to search solution on GG

Let me tell you how i make Leader board.

I use greate UI plugin of Rex, Scroll panel contains a sizer, that sizer contain many containers as row of rank.

In container i want to create an circle image and i didn’t success with mask

Then i changed my solution to using sizer instead of container. Failed again.

Please help me find better solution.

If i need to post my code here, please tell me.

Thanks so much

Screenshot_47
Screenshot_47.png838×964 154 KB

2

Scrollable panel controls the mask of children. Thus the image’s circle mask will be replaced by scrollable panel’s mask.

BTW, p3 seems does not support a mask masked by another mask, or a game object masked by more then 1 mask. Therefore… I guess circle masked image won’t work.

3

Thank for your reply?
So, how i can create a circle image?
No way?

As i know, with Phaser 2, we can create a circle bitmapdata then fill it by an image to make a circle image.
Does Phaser 3 support same feature?

4

Create circle mask at bitmapdata (canvas) is a solution. You might try to create a circle masked image by canvas texture.

Or I could add another plugin to create this kind of image (without using mask). Here is a demo, document.