What blend mode can give me that effect?

  • I really need that effetct in my game:

    https://onedrive.live.com/redir?resid=3 ... hoto%2cjpg

    But I couldn't achieve this.. with the "overlay" effect it got close, but is invisible in black backgrounds...

    Can someone help me? <img src="{SMILIES_PATH}/icon_e_confused.gif" alt=":?" title="Confused">

    Zathan

    My english is poor , but i have done quickly something like your picture;

    http://gigatron3k.free.fr/html5/C2/FX/cblend

    If it's right i must include some variables like blend factor etc...

    However, I still don't see what you want to do ..

    Regards

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • I tried to compare the result of the luminosity effect with the lightness effect in an image editor, but the results seem to be expected. Disregard the bug idea.

  • The HSL effects should work fine if everything is opaque. Dealing with alpha in HSL mode can be very tricky but if you're not using that then the results should be correct. If you think anything is wrong please file a bug report. There is nothing in this thread I can investigate, and last I checked it worked OK.

    Hmm... ok Ashley, thank you very much for the answer!

    Gigatron

    Here is a capx to better demonstrate the effect I want.

    https://onedrive.live.com/redir?resid=3 ... ile%2ccapx

    As you can see, when the sprite with the blend is on front of a black one, it disappear, instead of 'turn' white, like the image I attached on the post. As I said, coreldraw have a blend mode called 'lightness', that does exactly what I want.. but seems like C2 don't.

    I was trying to find a way to achieve this with blend modes, with no need for sprite duplications.. but seems like that will be the way hehe

    By the way, thank you for the example you made! how exactly did you get this result?

  • Zathan

    If it's become invisible with Overlay blend then we can continue the test like this ;

    if (back.r<0.1 && back.g<0.1 && back.b<0.1 ) {front.r=1.0;front.g=1.0;front.b=1.0;} // set to white

    http://gigatron3k.free.fr/html5/C2/FX/cblend2

  • Zathan

    If it's become invisible with Overlay blend then we can continue the test like this ;

    if (back.r<0.1 && back.g<0.1 && back.b<0.1 ) {front.r=1.0;front.g=1.0;front.b=1.0;} // set to white

    http://gigatron3k.free.fr/html5/C2/FX/cblend2

    Hehe awesome!

    how did you do it? Can't be done by events, right?

  • > Zathan

    > If it's become invisible with Overlay blend then we can continue the test like this ;

    >

    > if (back.r<0.1 && back.g<0.1 && back.b<0.1 ) {front.r=1.0;front.g=1.0;front.b=1.0;} // set to white

    >

    > http://gigatron3k.free.fr/html5/C2/FX/cblend2

    >

    Hehe awesome!

    how did you do it? Can't be done by events, right?

    There is always a solution with C2...This partially solve your problem, i have done this quickly

    and will PM you to the link of the file.

    Regards

  • Hey Zathan,

    I'm not positive, but I think the blend mode shown in the image is a "Value" (aka Brightness) preserving blend, based on the HSV color space.

    I think the Luminosity blend mode in C2 is a "Lightness" preserving blend, based on the HSL color space.

    HSL & HSV

    HSL and HSV are similar, but ...

    In HSL, setting "Lightness" (L) to 100% will turn any color pure White, regardless of what it was to begin with. That's likely why the Luminosity blend didn't recreate the effect you were looking for.

    In HSV setting the "Value" (V) to 100% will turn pure Black to pure White and will turn any color to the brightest possible version of that color which preserves the RGB ratios, thus preserving hue.

    I've used a lot of image processing tools and in my experience a "Value" based blend is a pretty uncommon thing which is why C2 likely doesn't have one built in. That said, it can definitely be added thanks to C2's extensibility.

    Here is an example in which I "Value" blend white rectangles into the same image you provided.

    The results appear to be essentially identical.

    What's going on

    Because the white square has a "Value" of 100%, it turns black to white, and boosts the colored areas such that for every pixel, the largest RGB component is maxed and the other components are scaled up proportionally preserving the original hue.

    This makes sense if you think about how it affects black. For black, the RGB values are all the same (0,0,0), so the maximum among them is "0". If you slide the "max" value of 0 up to 100%, and then slide the other values up (also zeros) to maintain the same ratio of RGB amounts, then all the values will now be 100%.

    Likewise, for a color like a dark orange ( 50%, 25%, 0% ), setting it's "Value" to 100%, will make it a bright orange. The max among the RGB components is the 50% red. If you slide that 50% up to 100% (maxing it out) we have doubled it, and so to preserve the relative RGB ratios we double the other values as well. So we go from dark orange ( 50%, 25%, 0% ), to bright orange ( 100%, 50%, 0% ), and voila, we've maxed out the brightness ("Value") without changing the RGB ratios.

    A side effect of the HSV formula is that colors will never get blown out, or clipped, the way they will if you use an addition-based formula.

    Seeing it in HSV color space

    Finally, here I've taken your original image and broken it into individual channels in the HSV color space.

    H: hue

    S: saturation

    V: value

    As you can see, the "Value" channel has your white square simply pasted directly into the channel data, perfectly overwriting everything it overlaps with the "HSV Value" of white, which is 100%. However, the hue and saturation data from the background image are preserved.

    So in summary. I think its "Value" blend.

  • fisholith

    Wow, that's an awesome explanation! hehehe

    Guys, thank you very much for all the help! It's propably the best forum ever..

    People who know what they're doing and want to help.

    Again, thank you!

  • Happy to help.

    And yeah the C2 forums and community are pretty awesome. Everyone I've encountered has been really nice and helpful.

    I can make a Value/Brightness blend effect shader for you, though it may be a day or two before I can get to it, if that's okay.

    Let me know if you need it sooner.

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)