How can I make the spotlight effect (as in the image), but without WebGL (config type WEBGL in the game settings)? In the examples on the site, there are solutions, but it uses WEBGL. and I have a strict restriction in the project - CANVAS [flashlight_and_spotlight_phaser3]

No, you’ll have to look at the Mozilla tutorial. Not sure how it works with alpha though. Maybe altering the pixels yourself is easier. But, you can also try something else: Use the mask example. The black is actually the background color. So draw your background twice. Try playing with the alpha…

Thanks. However, in this example, the mask is cut out along the contour of the created shape, the image is visible inside it, on the background, but everything else is black. And how to make the background image completely visible, but semi-transparent - and only the spotlight shone through the desi…

Do you have any examples with the code?

I am looking to do the same thing. I found this example which will work in canvas mode. http://labs.phaser.io/edit.html?src=src/tilemap/snake%20distance.js Ron

Spotlight effect on config type CANVAS

Phaser 3

Milton February 25, 2021, 2:04pm 4

Then you need to use a CanvasTexture and use lighter or multiply as globalCompositeOperation.

Topic		Replies	Views
Phaser 3.24.0 canvas Mask not working on img within a container Phaser 3	3	694	May 25, 2021
Issues with Canvas texture mask Phaser 3	1	241	September 5, 2023
Masked semi-transparent overlay Phaser 3	4	4233	August 12, 2019
Fog of War Phaser 3	2	1800	May 27, 2020
Is there any way to apply a mask to a canvas on my DOM element? Phaser 3	5	699	June 4, 2021

Spotlight effect on config type CANVAS

Related topics