gl.readPixels alpha always return 255?

đŸ‡ŻđŸ‡” GDevelopæ—„æœŹèȘžăƒ•ă‚©ăƒŒăƒ©ăƒ  (Japanese Forum)
#1

I want to read the pixel values from js-event


const canvas = document.getElementsByTagName("canvas")[0];
canvas.id = "canvas";
const gl = canvas.getContext("webgl");

let data = new Uint8Array(canvas.width * canvas.height * 4);
gl.readPixels(0, 0, canvas.width, canvas.height, gl.RGBA, gl.UNSIGNED_BYTE, data);

console.log(data) // rgb values return correct, but the alpha value always '255'

Is this a PIXI.js issue?

ĐĄursor and transparent area
#2

Is this an issue at all?
I mean, did you check with pixels that should return a lower value?

#3

The canvas has no transparency so this seems normal.

#4

Add a sprite in the game event and make the opacity 254 and so on.
Why can’t I get alpha if I read it in WebGL readPixels in that state?

#5

This is working well in GDevelop. But your canvas is not transparent, it has a background color. This background color is not transparent, so alpha is 255.

#6

I understand.

Can GDevelop make the background of the canvas transparent?
If GD can’t do that, change the game design.

#7

For now I don’t think it’s possible.

#8

Thank you for your answer!

But do you know the reason you can’t?
Is it a issue with the Gdevelop framework or PixiJS? Or HTML5 architecture?

I want to understand this situation for the my project.

#9

I think there is a way to set up the Pixi.js canvas as transparent, but it’s not an option in GDevelop for now. We would need to add an option. Or you can take a look yourself in the GDevelop directory, in Resources/GDJS/Runtime/pixi-renderers/runtimegame-pixi-renderer.js (example on macOS: /Applications/GDevelop\ 5.app/Contents/Resources/GDJS/Runtime/pixi-renderers/runtimegame-pixi-renderer.js). Try to add transparent: true here: https://github.com/4ian/GDevelop/blob/master/GDJS/Runtime/pixi-renderers/runtimegame-pixi-renderer.js#L41-L42

and relaunch a preview.
Be sure to keep a backup of the original file. We won’t be supporting files that have arbitrary changes if there is a bug, it’s just a quick hack to see if it works :slight_smile:
If something goes wrong, reinstall GDevelop.

#10

Whoa! That’s great!
Dear Mr., you are my God! I’m try it!

Thank you so mach! :heart_eyes:

1 Like
#11

I was able to get an “alpha” using the method you taught me.
This is used to calculate the area of the color.
Thanks for everything.

4 Likes
#12