Create black-tinted shadow in canvas renderer

Phaser 3
1

In my game, I have a dynamically generated field. And I want to create a shadow in runtime.
It is very easy with WebGL renderer - I just create render texture, draw field there, and then apply tint = 0.
But tint is not supported in canvas renderer.

Is there any other way to create a shadow like this? I’ve tried to use setPixel on underlying canvas texture but it doesn’t have any effect.

2020-10-30_16-48-03
2020-10-30_16-48-03718×870 162 KB

2

Luckily I have found a solution myself:

    private paintCanvasTextureBlack(texture: CanvasTexture) {
		let data = texture.getData(0, 0, texture.width, texture.height)
		let dataArr = data.data
		for (let i: number = 0; i < dataArr.length; i += 4) {
			if (dataArr[i + 3] > 0) {
				dataArr[i] = 0
				dataArr[i + 1] = 0
				dataArr[i + 2] = 0
			}
		}
		
		texture.putData(data, 0, 0)
	}

It goes through every non-transparent pixel (alpha > 0) and changes its color to black (0, 0, 0)

1 Like