Phaser 3 Radar Animation Issue - Unable to Hide/Mask Overflowing Triangle

Hi there,

I’m new to Phaser 3. Just started learning it a few days ago. Now, I need your help to fix a little issue.

Basically, I’m trying to make a Radar Screen Animation. Most of its functionality is already done, but I’m unable to hide the overflowing triangle (Radar signal/light) inside the circle.

I tried a lot of techniques like using GameObject Triangle instead of Geom Triangle, Layer Mask, Physics overlap, Geom Intersects, getBounds() etc. without any success.

Here are 2 example codes I’ve written:-

Example 1

===

Example 2

===

Example # 1 is almost done. We just need to hide the overflowing triangle. If it is fixed then we’re good to go.

Whereas, In example # 2, a lot of functionality is messed up. For example, the triangle is not detecting any overlap with enemy/friendly Radar signatures. Also, the triangle is not displaying/working correctly if we change the given Radar settings.

But, the only positive thing in example # 2 is that the overflowing triangle is hidden/masked appropriately. I want to achieve this thing in example # 1. But, I can’t do that because of the limitation of Geom Triangle

Please have a look at the source code and demo to better understand my problem. I’ve also added brief comments where the code is not working.

Thanks

I’ll take a look. I’d guess you should use Example 1, add a second graphics, draw a filled circle on that, then mask this.graphics with it.

1 Like

Perfect!!! Thank you so much. :heart_eyes: