23 replies to this topic

[Phantom107]

• Title: Extended Blend Modes Visualization
• Description: View the outcome of extended blend mode combinations on a handy sheet.
• GM Version: GM8.0
• Registered: Yes. The blend modes aren't available in the free edition.
• File Type: *.gmk
• File Size: 1.40 MB (Because of the pretty background image. I thought it was worth it!)
• File Link: http://www.host-a.ne... Phantom107.gmk

Extended Blend Modes Visualization

A lot of people (including myself) have been a bit puzzled on the correct use of extended blend modes. To make things easy to understand, and to create "plug and play" accessibility, I have put together a handy sheet. On this sheet you can see the outcome of combinations of blend mode sources and blend mode destinations.

The extended blend mode function according to the GameMaker Manual:

draw_set_blend_mode_ext(src, dest)

Indicates what blend mode to use for both the source and destination color. The new color is some factor times the source and another factor times the destination. These factors are set with this function. To understand this, the source and destination both have a red, green, blue, and alpha component. So the source is (Rs, Gs, Bs, As) and the destination is (Rd, Gd, Bd, Ad). All are considered to lie between 0 and 1.

The sheet is what it's all about. I put it inside this spoiler tag, because it's a relatively big image.

Sheet 1 - Complete tree on stretched gradients, drawn on top of buildings wallpaper

Spoiler

Sheet 2 - Tree that has the right side 50% transparent on local gradients, drawn on top of gray (128, 128, 128) background.

Spoiler

Sheet 3 - Tree that has the right side 50% transparent on local gradients, drawn on top of checkers background.

Spoiler

Sheet 4 - Tree that has the right side 50% transparent on pure white, drawn on top of gray (128, 128, 128) background.

Spoiler

Sheet 5 - Tree that has the right side 50% transparent on pure black, drawn on top of gray (128, 128, 128) background.

Spoiler

There is a *.gmk too, so you can play around with different images to match the sheet to your exact situation.

Warning

Creativebunch brought to my attention that there was something fishy going on. I did some testing with the loop and concluded he was right! After some testing I got it right though, so please re-download if you already have the files on your PC.

- Phantom107

Edited by Phantom107, 04 July 2011 - 04:25 PM.

[Nocturne]

Thats a great help to people who can't visualise how a specific blend mode is going to turn out. Thanks for posting!

[YellowAfterlife]

You have a small typo (scr instead of src - src stands for Source, you know) all over your image.
Additionally, it is possible to make .gmk draw a image like presented, by draw_text and a bit of d3d_transform.
Or (maybe) set window title to blending mode combination string while you're hovering over it with mouse.

Good job anyway.

[Phantom107]

Thanks for the replies!

Also you're right about the typo YellowAfterlife. I know what it stands for (it's written a lot of time in the OP). But it's been fixed, thanks. I chose not to make a loop draw the text in GM, because it would come out less pretty than I can make in GIMP. And if you have my original image next to it, you can lookup the correct source and destination in a matter of seconds anyway.

[Zeddy]

Blend modes are now 50% less cryptic and we all thank you for it.

[Lolligirl]

Thanks, Phantom! This is indeed useful and saves a lot of work for all of us.

[True Valhalla]

This is useful, thanks!

[Smarty]

I'm not completely in agreement that this sheet can serve as a helpful index, because the actual effect of mixing source and destination blend modes isn't necesarily always clear to me:

• The image that is being drawn upon is a gradient. This doesn't give me much of a hold on the back image, to see how the two blended pixels interact. Using recognizable shapes in the image that is being drawn on, maybe using a sufficiently large spectrum, may be more useful.
• All the blending you're doing is either performed on completely opaque or completely transparent pixels, but nothing in between. This is because the tree image doesn't have any semi-transparent pixels. That's a shame, because as far as I understand blending it has as much as an effect on transparency as it has on color. Now we're just seeing the alpha equivalent of using either black or white.

Edited by Smarty, 04 July 2011 - 02:06 PM.

[Zeddy]

Those are good points. Let's have the background be some kind of checkergrid between different colours and 1/0.5/0 alpha and the tree have some kind of half-alpha aura around it or something?

[Phantom107]

The first post has been updated using an additional sheet, which uses a tree sprite that has it's right side 50% transparent, and with the gradients limited to the grid pieces so every grid index has the same spectrum.

edit

Added additional sheets. Getting very interesting results.

Edited by Phantom107, 04 July 2011 - 03:24 PM.

[Smarty]

Those are good points. Let's have the background be some kind of checkergrid between different colours and 1/0.5/0 alpha and the tree have some kind of half-alpha aura around it or something?

Another idea is to draw two images with 50% transparency which overlap for about 50%, against a checkered background so you can clearly see what happens in the intersection area.

[Phantom107]

Another idea is to draw two images with 50% transparency which overlap for about 50%, against a checkered background so you can clearly see what happens in the intersection area.

I made a sheet with that idea, but it required some tuning to get it right. Turning both images to 50% gave really bad results because it's hard to see the actual sprites. So I cranked transparency up to 75% each. I also made the checkers really low contrast so it's still easy on the eye.

It won't allow me to add a 6th image to the OP, so here it is:

Sheet 6 - Transparent tree on transparent tree, drawn on low-contrast checkers.

Spoiler

[creativebunch]

This is incredibly awesome! This is the sort of thing I like to see; Useful to me

But seriously +1, this will definitely come in handy when working with those tricky blend modes.

[Smarty]

I made a sheet with that idea, but it required some tuning to get it right. Turning both images to 50% gave really bad results because it's hard to see the actual sprites. So I cranked transparency up to 75% each. I also made the checkers really low contrast so it's still easy on the eye.

You might want to experiment with the actual sprite. The tree image uses quite dark toned colors, in a spectrum that our eyes aren't very sensitive to discern colors in anyway. Try an image that is brighter and more vivid in colors.

[paul23]

This would be good if it had some reasoning "WHY" a certain blend mode works out a certain way. You know, to prevent thinking it's magic and see that it's perfectly normal.

Xot had a quite good explanation of how blend modes work on his site, maybe use that as starting point?

[Dark Matter]

I have to say, I really like that tree (in the first screenshot)

The gmk itself is good too, though it could make it a little nicer if you put it on some sort of grid, then made labels show the gml for that particular blend mode when you hovered over each one.

[slayer 64]

i should look into blend modes more

[freko]

This is a useful reference. I used to just to ignore extended blend modes, but this give me a liking to take a peek into those.

[Newly Discovered]

quite helpful! thanks a lot phantom!

[Knuked]

Awesome Phantom, I appreciate the work!