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
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 desired area?
Then you need to use a CanvasTexture and use lighter or multiply as globalCompositeOperation.
1 Like
Thank you
Do you have any examples with the code?
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 of the images.
1 Like
sounds good, thank you
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
1 Like