Blend mode exploration program
I created a demo of the C2 blend modes that makes it easier to experiment with them.
(Update 1: I made an update that includes a realtime subpixel model visualization.)
(Update 2: I made a new version (v4b) you can download here, or try on Scirra Arcade.)
(Update 3: Version (v4e) small fixes, and Scirra version now shows link to this post correctly.
Scirra Arcade: Blend composite modes sandbox
The subpixel model is shown at the right, and updates in realtime, as you adjust the opacity settings.
(This post got a bit bigger than I was expecting.)
I'm going to try and answer this in three parts.
1: The quick answer (Basically TL;DR because there's a lot to R)
2: What does "Additive" do?
3: What do the other modes do?
But before going into the details, I'll try to give what might be a more intuitive answer, even if it's less explanatory.
--------------------------------------------- The quick(ish) answer ---------------------------------------------
Terms: The term "Destination" means the background, and "Source" means the foreground object.
The Additive blend mode
Additive: Directly adds the Source (foreground object) and Destination (background) color values. If the Source object is 50% gray (middle gray) and the Destination background is also 50% gray, then Additive blending the Source into the Destination will result in 100% "gray" which is white.
The transparent Destination problem
All of the other blend modes are transparency compositing modes. (explained in more detail later)
When Construct renders a scene, it goes through the objects in Z-order, from bottom to top, and pastes them one-by-one into the background.
Each time it's about to paste an object, THAT object is the Source, and everything else that has already been pasted is the Destination.
The bottom layer of most projects has a solid color like white. This is the first thing that will get pasted, and it will make the entire background (Destination) solid and totally opaque.
The other blend modes rely on the background (Destination) to have some transparency. This is a problem, because If the Destination had a solid background color blended into it then it will be solid everywhere, and will never be transparent.
We need a transparent blank slate (like a special layer) we can render on separately from the rest of the main game. So, after we blend some objects onto that special layer, we can then paste that entire layer into the game.
A normal layer won't quite work, because even if the layer has a transparent background, when Construct goes to paste a sprite from that layer into the background, the background will be the rest of the game objects that were already pasted, including the solid background color from the bottom layer.
It turns out we can create that special layer described earlier. Create a layer with a transparent background, and then in the layer's properties, set "Force own texture" to True. This will force the layer to render separately from the game, and it will start out totally transparent.
The other modes
Destination Over: Put the Source object behind the Destination. You'll see the Source object peek through wherever the Destination is transparent.
Source Atop: This is exactly like blending onto a clipping mask. This paints the Source onto the Destination like a skin. Where the Destination is transparent the Source will not appear.
Destination Out: Punch a transparent hole in the Destination, using the opacity of the Source. Where the Source is opaque the Destination will be made transparent.
Destination In: Punch a transparent hole in the Destination, using the transparency of the Source. Where the Source is transparent the Destination will be made transparent.
All the others: The other modes all do kind of weird stuff that's generally not very practical (at least as far as I've found), either because they're just the reverse of a more manageable mode described above,
or because they don't appear to work, as is the case with XOR.
(edit: 99Instances2Go pointed out that XOR doesn't work in webGL, but does work when webGL is disabled.)
My understanding (and I may be wrong) is that this list of modes comes from HTML5, so many of them are included in Construct for completeness rather than because there is a common usage for them.
--------------------------------------------- What does "Additive" do? ---------------------------------------------
Additive blend mode
A source image sits over a destination image. Each pixel in the source image is sitting over a pixel in the destination image.
For each overlapping pair of pixels:
Additive says add the Red value from the Source pixel and the Red value from the Destination pixel, and use that for the resulting pixel's Red value. Likewise, add Source and Destination Green values to get the resulting Green value, and same for the Blue values.
So, suppose you have a Sprite that's 1 pixel by 1 pixel wide (pretty small) and it's RGB color is (50, 0, 50) dark purple, and it's on a gray background colored (10, 10, 10). If you set the Sprite to Additive blend mode, the resulting color you get from blending it is (50 + 10, 0 + 10, 50 + 10) which is (60, 10, 60).
--------------------------------------------- What do the other modes do? ---------------------------------------------
The term "alpha" in computer graphics, (in this case anyway) basically means "opacity".
(As in "opacity" vs "transparency".)
In the same way that an image has a red channel to tell each pixel how red it should be, an image's "alpha" channel tells each pixel how transparent or opaque it should be. For a given pixel, an alpha value of 0 means totally transparent, whereas alpha at maximum means totally opaque.
"RGB blend modes" - vs - "alpha compositing modes"
The term "blend mode" is a bit broad in a way that can be confusing.
There are "blend modes" as in fun with RGB math. (normalish-color-blending)
And there are "blend modes" as in "alpha compositing modes", which merge images in weird and not-so-weird ways based on their transparencies. (weirdish-transparency-blending)
I will use the term "alpha compositing mode" for that weirdish-transparency-blending kind for the rest of this post to avoid confusion.
So to clarify, RGB math blend modes (normalish-color-blending) is what you find in programs like Photoshop and Gimp.
e.g. Additive, Multiply, Screen, Lighten, Difference, etc.
They all do different RGB math, but they all treat transparency exactly the same nice and intuitive way.
By contrast, alpha compositing modes (weirdish-transparency-blending), is more like working with clipping masks and hole-punches, and occasionally ... angry ghosts.
They also have weirder names.
e.g. Destination Out, Source Atop, Destination Over, ... XOR!
Now you may have noticed that "Additive" is in the "RGB blend modes" group, and "Destination Out" is in the "alpha compositing modes" group,
and yet, both are listed in the same dropdown menu in Construct 2. It's not incorrect to call all of them "blend modes", but it's an example of what I meant earlier when I said the term "blend mode" can be confusingly broad, especially when you're starting out.
Some Background (so to speak)
So another term for those "alpha compositing modes" is "PorterDuff" modes.
Named for Thomas Porter and Tom Duff, the Toms.
They came up with a simple system for describing the alpha compositing of images.
Specifically they noted all possible simple alpha compositing modes, and named them.
These are the 12 modes. (I'll abreviate Source as "s" and Destination as "d")
So, there are 12, but Construct only includes 10 of them, omitting "d copy " and "clear", because those two are not especially useful. (We'll see why later.)
In Construct "s over" (Source Over) is listed as "Normal", because this is the basic and intuitive "one thing is on top of another thing" compositing mode.
What do "alpha compositing modes" do?
So what did Porter and Duff figure out. Why are there exactly 12 modes?
To understand we need to think about individual pixels instead of the entire image.
Let's try to walk through the most basic "alpha compositing mode", which is "s over" or "Normal" as Construct calls it.
We'll start with a Blue Source and Orange Destination image.
Now let's assume our Blue Source and Orange Destination are just 1 pixel each.
The Source pixel is sitting directly over the Destination pixel.
Next, imagine that both pixels are half transparent.
The Orange Destination pixel has an opacity of 50%.
The Blue Source pixel has an opacity of 50%.
What should the Resulting pixel look like?
Let's start with an empty Result pixel.
To add the half transparent Destination pixel, we'll slice the Result pixel in half, with a horizontal divider, and fill in the top half Orange, leaving the bottom half empty.
The result pixel is now 50% Orange. (The top half)
Next, To add the Blue Source pixel, which is also half transparent, we'll slice the Result pixel in half, with a vertical divider, and fill in the left half Blue.
When we fill in the Blue for the Source pixel, we cover up some of the Orange from the Destination pixel, and we also cover up some of the left over transparency.
In the diagram below, the very bottom left square shows this "sub-pixel" breakdown of the Result pixel.
The orange slice on the top, and the blue slice on the side, partially covering the orange slice.
Notice that the result pixel has been split into 4 chunks.
* Source only
* Destination only
* Both (Source and Destination)
In the example we walked through, we colored the "Destination only" chunk Orange, and the "Source only" chunk Blue, and the "Both" chunk we colored Blue as well, because in the "s over" (Source Over) mode, the "Source" gets to paint "Over" whatever lands in the Both chunk of the result pixel.
Now, notice that if we turned the opacity of the Source pixel up to 75%, this would push it's slice over to the right so that Blue would fill 75% of the pixel, and there would be even less of the Orange showing through. If we turned the Source pixel up to 100%, the Blue would push all the way to the right edge and totally cover the paint from the Orange Destination pixel.
That's the last important concept in the slicing-up-the-result-pixel analogy. When you change the opacity (the alpha) of a Source or Destination pixel, you change where the slices end up, and thus how much of the pixel each chunck covers.
If that's the "Normal" mode What about the others?
So, we just walked through 1 possible process for allocating Source and Destination colors to the 4 chunks of that Result pixel.
What if we did something weird though, like put the Orange destination color in the "Both" Chunk?
Well we'd get the "d over" (Destination Over) mode, where the "Destination" gets to paint "Over" whatever lands in the Both chunk of the result pixel.
So how many combinations can we come up with from this system?
Well, if we don't allow Source and Destination to be allocated to chunks they should never be in, then we get the following:
* Neither: This chunk will always contain nothing. That's it's 1 and only option.
* Source only: This chunk can contain the Source color or nothing. 2 options.
* Destination only: This chunk can contain the Destination color or nothing. 2 options.
* Both: This chunk can contain the Source color, or the Destination color, or nothing. 3 options.
So that's 1 * 2 * 2 * 3 combinations, which is 12.
So why does Construct omit some of them?
Well one of the combinations is allocating nothing to all 4 chunks. That one's called "clear" ... yeah.
Not so useful, since it just erases everything in every pixel all the time. (I told you we'd see why later.) :]
Table of alpha compositing mode
So now that we've seen that each alpha compositing mode is just some combination of filling in pixel chunks with either Source, Destination, or Nothing, could we visualize that as a table?