Additional blending modes

I've been trying to create a lighting system and stumbled upon the screen.setBlending() function. You can do some really cool things with it, but so far it's restricted to two blending modes: normal and additive. Looking on https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation, there appears to be many more blending modes available that would be useful and fun to play around with. Here's a cool lighting test I made with a modded version of microstudio (I added a couple of blending modes to make this work): https://drive.google.com/file/d/1Fng3FGytDFsMNxrAUV9vfgw0EPF4THZk/view?usp=sharing. Ignore the game itself, it's just a project I started but never got around to finishing.

It shouldn't be that hard to implement, the example I made only required two lines of code to be added to microengine.js.

Thanks in advance

You took the words out of my mouth ... :)

Definitely gets my 'Up Vote'

Thank you for all the new toys @gilles :)

Had a go with the blending modes, but somehow I don't get the right results.

:embed https://microstudio.io/TinkerSmith/blending/


I used https://www.w3schools.com/tags/playcanvas.asp?filename=playcanvas_globalcompop as a reference.

On some other pages (where people also got different results) some mention that it needs the alpha value of the color, but even adding that did not make a difference.
Wouldn't surprise if I just got it wrong, the way I use it.

.... help ...

I think I fixed the test :-)

The problem here is that you are not painting on a transparent background, which totally breaks destination-over for example (and many others). In the test below, I made sure to fill the canvas with transparency first:

:embed https://microstudio.io/gilles/blendingfixed/

More explanations in the description:


Thanks for adding this! I updated the example I made so now it doesn't have to be downloaded. Also added a bunch more dynamic lights. https://microstudio.io/Apples9/lettherebelight/BN6AP25J/

:embed https://microstudio.io/Apples9/lettherebelight/BN6AP25J/

Anyone is welcome to use this as a library of sorts, as the code is all commented (and in the draw function).

Told'ya it was probably the way I used it, LOL. Thanks for looking into it and clarifying why it happened.
Have to admit though, have to wrap my head around it ... => MORE COFFEE


P.S. .. can't find it, is it not public?

It wasn't, but it is now.


Note that it doesn't work if it's pitch black and it looks terrible if there isn't any darkness.

I should be able to fix that eventually using other blending modes

Wow, that looks great! Definitely getting the 'thumbs up' from me.

Post a reply



Validate your e-mail address to participate in the community