Blending Modes

Hey guys,

I just encountered a problem yesterday - the blending modes / effects in Construct don't seem to match up with the blending modes in other compositing / image editing apps, like Photoshop, After Effects, Fusion, Shake, etc. - that's a problem, since most of the art in games is being done in those apps and not being able to use the same blending would result in either having to bake things down to a simple image (which would mean that you couldn't take the elements and use them for parallax scrolling, which would suck big time), or you get some freakishly weird results.

The way I build up paintings, textures and stuff is to start simple, keeping simple elements in layers and then blend them together, so that I get my final result. So, let's take a look at a concrete example:

<img src="http://www.thomasmahler.com/files/construct/images/scythsTreasure_01.jpg">

This image is still very simple. Basically, I have a brownish background, a light source that emulates the sun, a couple of trees and tree-backdrops with varying opacity values and inbetween those trees, I have some mist layers that are basically just white fog with an overlay blending mode.

So, let's look at the image in it's bare essence and let's look at the difference between Photoshops and Constructs Blending Modes:

1) Up to this point, things are still very simple: In Construct, I set the light to be a little weaker and the tree backdrops opacity is a bit lower, but it's still very much the same thing:

<img src="http://www.thomasmahler.com/files/construct/images/comparison_01.jpg">

Now comes the kicker:

2) I quickly painted a layer of mist / fog, set it to 65% opacity and the blending mode to overlay (used the exact same settings in both apps):

<img src="http://www.thomasmahler.com/files/construct/images/comparison_02.jpg">

I mostly use Overlay and Soft Light for lighting effects in a compositing app and it's SUPER useful. I have no idea how the overlay effect in Construct works, it's never given me anything but very weird results. All the blending modes work the exact same way in every compositing app out there, so it's fucking weird that Construct gives me completely different results. I tried both applying it as an effect and applying the mode to a whole layer, but it seems to be based on the same algorithm, since the results are exactly the same.

3) Here's the fog layer in solitude, normal and 100% opacity. It's just a simple color wash, as you see:

<img src="http://www.thomasmahler.com/files/construct/images/comparison_03.jpg">

Now, if the blending modes don't work properly in Construct, creating good graphics in it will be really hard, since you concept stuff in an image editing app like Photoshop anyway. I could make it static (but that'd suck big time, since it'd ruin the effect) or always try to figure out how to set-up the image twice, would would basically double development time and costs in terms of art - which would also suck BIG TIME.

I'm pretty sure that blending mode stuff must be online somewhere, since it works the same in every singe image editing app out there. Having all of them work like in your application is _vital_ in order to get proper art into Construct.

I blame premultiplied alpha!

Shviller's right, it might be an issue with premultiplication (a special form of alphablending Construct uses which is faster and better quality).

Is it just the overlay blend which doesn't look right? I might've got the formula wrong, I pulled it off an old web page I think. Overlay blend uses the following formula in the shader:

    front.rgb = back.rgb < 0.5f ?
		(2 * back.rgb * front.a * front.rgb)
		: 1.0f - (2 * (1.0f - back.rgb * front.a) * (1.0f - front.rgb));[/code:1l7gse77]

Now I don't remember writing this but I probably threw in a few front.a multiplications to do the premultiplication, and they might be wrong.  You could try replacing those lines in Overlay.fx with:

[code:1l7gse77]    front.rgb = back.rgb < 0.5f ?
		(2 * back.rgb * front.a * front.rgb)
		: 1.0f - (2 * (1.0f - back.rgb) * (1.0f - front.rgb));[/code:1l7gse77]
or even
[code:1l7gse77]    front.rgb = back.rgb < 0.5f ?
		(2 * back.rgb * front.a * front.rgb)
		: 1.0f - (2 * (1.0f - back.rgb) * (1.0f - front.rgb * front.a));[/code:1l7gse77]
I don't have your artwork or a reliable reference to the maths behind blending modes (which is often fairly complicated), so you might have to trial and error it a bit.  Or, it'd help if you had reliable information on how rendering works in Photoshop and the likes, because if there is a subtle difference to how Construct and Photoshop render a scene with the same blending parameters, it will of course look different.  The rendering and blending code in Construct (and doubtless Photoshop too) is more complicated than you might think - artists only need to think about what effects look like, but the programmers have to work out the math!  Also, things like the order in which opacity and blend is applied might make a difference.

Where there any other blends that had problems or was it just overlay?

Ashley, I've found a reference on Photoshop's blend modes, and threw a "proper" effect together:

http://dl.getdropbox.com/u/762468/Overl ... per%29.zip

I haven't properly tested it yet, though. Thomas, please give it a spin!

However, there's one thing that's bugging me, Ashley. How does this code work?

back.rgb < 0.5f ? X : Y[/code:2eet5jkq] What if back.r < 0.5 and back.g > 0.5? Would it follow X for r and Y for b? Probably not, and that can cause more problems. I didn't want to take any chances, so made three separate expressions for r, g and b.

(Oh, and in case anyone needs it, here's the specification: [url=http://www.adobe.com/devnet/pdf/pdfs/blend_modes.pdf]http://www.adobe.com/devnet/pdf/pdfs/blend_modes.pdf[/url]).

Just tried it, I think Shvillers effect is spot on. I'm terribly tired right now and need a nap, I'll confirm it later on with another comparison. Need to get some sleep first though

PS: You guys are awesome This board so fucking rocks!

Actually, don't need a comparison anymore. Shvillers version of Overlay is 1:1 what you'd get in other compositing apps.

So you guys could throw the old one out and use the new code - I don't really see how the old effect could help in any way, it's really unpredictable.

Thanks Shviller, I've put that one in the next build so it wont happen again

Has only overlay been changed in the next build? Or has other effects like multiply?

Just overlay.