Login
Community
DARK THEME

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/

Link

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:

https://microstudio.dev/i/gilles/blendingfixed/

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

WOWSERS Apples9


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

It wasn't, but it is now.

https://microstudio.dev/i/Apples9/lettherebelight/

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

Progress

Status

Preview
Cancel
Post
Validate your e-mail address to participate in the community