Masked semi-transparent overlay

Phaser 3
1

Hi,

i have a little game running with some gameobjects.
I want to add a semi-transparent layer over all content while placing moving circular “cutouts” in which the content can be seen without overlay.

I think i need to solve this with masks. Unfortunately I am totally new to game development and do not know how to apply them.

While demos like this look promising,
https://labs.phaser.io/view.html?src=src\display\masks\spotlight.js
I fail to adapt it to my situation.

  • Outside of the mask, I need semi-transparency. Does this need i have to create a full screen mask with “grey” values and a black circle? How would I do this?
  • The mask is only being applied to a single game object. Does this mean I have to add the mask to every single of my objects? Or maybe in a container? What would the performance indication of something like this be?
  • Is it possible to create the Circle as shown with phaser shapes or is the “gradient edge” not arcivable?

Whats the simplest and especially most performant way to get my “overlay with holes”.

Thank you!!

2

I use a RenderTexture for that.

3

Hi, thanks

I started by adding my semi-transparency overlay as a render texture which sounds like what I want.

let rt = this.add.renderTexture(0, 0, gameWidth, gameHeight);
rt.fill(0x000000, 0.5);

This gives me my overlay - now i need the mask - I attempted this:

let spotlight = this.make.sprite({
  x: 400,
  y: 300,
  key: "spotlight",
  add: false
});
let mask = rt.createBitmapMask(spotlight)
mask.invertAlpha = true;
rt.setMask(mask);

I took the spotlight from here:
https://labs.phaser.io/view.html?src=src\display\masks\spotlight.js

Is this your recommended approach?
I’m thinking of creating a Circle Shape with a gradient for the mask - would that benefit me in any way over the png image?

Nik

1 Like
4

How would you add gradient to a shape though? The only way I know is using the graphics game object which is really expensive. I’d just stick to the png.

5

I went with the png and things look good.
Thanks for your support!