Jump to content


Photo
* * * * * 2 votes

Extended Blend Modes Visualization


  • Please log in to reply
23 replies to this topic

#1 Phantom107

Phantom107

    Graphics Enthusiast

  • GMC Member
  • 2653 posts
  • Version:GM:Studio

Posted 02 July 2011 - 10:30 PM

  • 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.

  • 17

#2 Nocturne

Nocturne

    Nocturne Games

  • Administrators
  • 19883 posts
  • Version:GM:Studio

Posted 02 July 2011 - 10:45 PM

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

#3 YellowAfterlife

YellowAfterlife

    GMC Member

  • Global Moderators
  • 3771 posts
  • Version:GM:Studio

Posted 02 July 2011 - 10:57 PM

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.
  • 0

#4 Phantom107

Phantom107

    Graphics Enthusiast

  • GMC Member
  • 2653 posts
  • Version:GM:Studio

Posted 02 July 2011 - 11:05 PM

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.
  • 0

#5 Zeddy

Zeddy

    Totally Radical Dude

  • GMC Member
  • 1849 posts
  • Version:GM:Studio

Posted 03 July 2011 - 10:33 AM

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

#6 Lolligirl

Lolligirl

    HEYYEYAAEYAAAEYAEYAA

  • GMC Member
  • 157 posts
  • Version:GM:Studio

Posted 03 July 2011 - 05:00 PM

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

#7 True Valhalla

True Valhalla

    ಠ_ಠ

  • Retired Staff
  • 5198 posts
  • Version:GM:Studio

Posted 03 July 2011 - 08:25 PM

This is useful, thanks!

 

I posted about this on GameMaker Blog »


Edited by True Valhalla, 20 February 2014 - 03:18 AM.

  • 0

#8 Smarty

Smarty

    GMC Member

  • Retired Staff
  • 7462 posts
  • Version:GM:Studio

Posted 04 July 2011 - 01:41 PM

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.

  • 0

#9 Zeddy

Zeddy

    Totally Radical Dude

  • GMC Member
  • 1849 posts
  • Version:GM:Studio

Posted 04 July 2011 - 02:29 PM

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?
  • 0

#10 Phantom107

Phantom107

    Graphics Enthusiast

  • GMC Member
  • 2653 posts
  • Version:GM:Studio

Posted 04 July 2011 - 03:10 PM

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.

  • 0

#11 Smarty

Smarty

    GMC Member

  • Retired Staff
  • 7462 posts
  • Version:GM:Studio

Posted 04 July 2011 - 05:46 PM

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.
  • 0

#12 Phantom107

Phantom107

    Graphics Enthusiast

  • GMC Member
  • 2653 posts
  • Version:GM:Studio

Posted 04 July 2011 - 09:03 PM

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

  • 2

#13 creativebunch

creativebunch

    The Bunchiest

  • GMC Member
  • 893 posts
  • Version:GM:Studio

Posted 05 July 2011 - 09:15 AM

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

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

#14 Smarty

Smarty

    GMC Member

  • Retired Staff
  • 7462 posts
  • Version:GM:Studio

Posted 05 July 2011 - 11:37 AM

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.
  • 0

#15 paul23

paul23

    GMC Member

  • Global Moderators
  • 3680 posts
  • Version:GM:Studio

Posted 05 July 2011 - 12:04 PM

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?
  • 0

#16 Dark Matter

Dark Matter

    RPG Expert

  • GMC Member
  • 3196 posts
  • Version:GM:Studio

Posted 09 July 2011 - 10:03 AM

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

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.
  • 0

#17 slayer 64

slayer 64

    GMC Member

  • GMC Member
  • 3725 posts
  • Version:GM8.1

Posted 17 July 2011 - 03:41 PM

i should look into blend modes more
  • 0

#18 freko

freko

    The Professional

  • GMC Member
  • 504 posts
  • Version:GM8

Posted 23 July 2011 - 08:37 AM

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.
  • 0

#19 Newly Discovered

Newly Discovered

    Harmonious Genius

  • GMC Member
  • 2475 posts
  • Version:GM8

Posted 07 January 2012 - 08:27 AM

quite helpful! thanks a lot phantom!
  • 0

#20 Knuked

Knuked

    GMC Member

  • New Member
  • 242 posts
  • Version:GM:HTML5

Posted 08 January 2012 - 11:37 PM

Awesome Phantom, I appreciate the work!
  • 0

#21 esco

esco

    GMC Member

  • GMC Member
  • 303 posts
  • Version:GM:Studio

Posted 04 April 2012 - 07:28 PM

Awesome Phantom, I appreciate the work!


This thread is pure genius and should really be stickied up somewhere for everyone to see! :thumbsup: :thumbsup: :thumbsup:
  • 0

#22 sixtyseconds

sixtyseconds

    GMC Member

  • New Member
  • 9 posts

Posted 22 April 2012 - 09:29 PM

Exactly what I was looking for! Thank you!
  • 0

#23 Qon

Qon

    GMC Member

  • GMC Member
  • 85 posts

Posted 02 July 2012 - 04:55 AM

I have like 5 bookmarks, this is one of them ;)
(I don't use bookmarks usually, I have 500 tabs open instead haha)

I downloaded and modified/rewrote it to fit my case. I had to replace those "begin" and "end" with {} and repeat with for loops and make sure the rectangle was drawn on top of the trees and changed the sprite and so on xD
But now I have anaqlyphic stereosqopiq 3D for my 3D engine :D
  • 0

#24 Ruub

Ruub

    Finn The Human

  • GMC Member
  • 536 posts
  • Version:GM:Studio

Posted 09 April 2013 - 03:11 PM

necroreplytime!

 

It was really helpfull! THOUGH, when transparent sprites overlap, the results fly in all directions! It's really a world of difference :c In a bad way xD


Edited by Ruub, 09 April 2013 - 03:11 PM.

  • 0




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users