Jump to content


Photo
* * * * * 4 votes

Tools to learn GM:S blendmodes / Premultiply Alpha


  • Please log in to reply
13 replies to this topic

#1 The Reverend

The Reverend

    GMC Member

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

Posted 30 August 2014 - 09:14 AM

CONTENTS

 

This Post contains several things I made to udnerstand and work with surfaces:

 

Tool 1: GMS Blend mode test

A Tool to test different extended blend-modes and thus hopefully start to understand how they work.

 

Tool 2: Masking in GMS

A tool that explains how premultiplying alpha into a sprite and shape color works and how that can be used to draw on a surface and to make masks for surfaces similar to masks in drawing programs.

 

Gimp Script: Premultiply Alpha

A Gimp Script-Fu script to premultiply alpha into an image.

 

 

TOOL 1: GMS blend mode test

 

Downloads:

 

Windows install version: https://www.dropbox....(v1-0).zip?dl=0

 

Windows no install version: https://www.dropbox....nstall.zip?dl=0

Tested the no-install-version on two systems and both anti-virus-scanners rang alarm. One even automatically removed it and I had to manually get it out of quarantine.

 

Android Version: https://play.google....ames.gms_bm_gen

 

The Program has a fixed resolution width of 1024px. So on most mobiles everything will be a bit small. On a 5" display it's just so useable with a pen. On Tablets it's much easier to use.

 

 

Description:

 

This tool will help understand how blend modes in Game Maker: Studio and maybe also other programs work. I made this for a
project of mine. Main purpose was to find different ways to blend light halos into a scene. Either by directly blending the halo
sprites with the background or by blending the halo sprites with a surface creating a light map and then blending that surface
with the background.

For that purpose you can choose a sprite to be blended, set it‘s attributes like size, color and alpha and set the blend mode.
This sprite will then be drawn multiple times to the upper left quadrant with a solid black background, to the upper right quadrant
with a solid white background and to the lower left quadrant with a solid concrete photo-background.

Then the sprite will also be drawn on a map-surface and that map will then be drawn to the lower right quadrant with a solid
concrete photo-background as well. You can choose the clearing type of that surface and how it is blended with the background.

Finally you can also set the brightness of the concrete photo-background. This is important when the blendmodes add or multiply
color values.

There are some minor bugs left like sprites being drawn in other quadrants when scaled up. At the moment I do not plan to fix
those bugs or add another feature. I learned from this what I needed to learn and that‘s that. I hope no one minds.

 

 

Example Screenshots:

 

screenshot_01-small.png

 

 

__________________________________________________________________________________

 

 

TOOL 2: Masking in GMS

 

Nov 30th 2014: Added another little tool I made to learnmore about premultiplying alpha into a sprite or color and like this drawing on a surface and then masking the surface.

 

The whole idea is comparing different methods of drawing on a surface by setting up a reference and then different examples on other methods.

  • drawing to the application surface in bm_normal
  • drawing to a surface and then to the application surface both in bm_normal
  • drawing to a surface in bm (src_alpha_sat | zero) and then to the application surface in bm (one | inv_src_alpha)
  • premultiplying and then drawing to the application surface
  • premultiplying, drawing to a surface and then to the application surfacein both in bm (one | inv_src_alpha)
  • and the same as the last but drawing a mask on the surface in bm (one | src_alpha) or (one | inv_src_alpha)

There's an explanation to each example when hitting the i-buttons at the bottom of each example and I'll also include the .gmz in case you want to read the code. I tried to clean it up a bit after I was finished, but it's not really optimized. Though I guess it's still easy enough to read with the comments I added.

 

Downloads:

 

Here's the .gmz:

https://www.dropbox....in_GMS.gmz?dl=0

 

the .exe:

https://www.dropbox....in_gms.exe?dl=0

 

and a screenshot:

masking_in_GMS_screenshot.png

 

Edit Dec 17. 2014:

Added Fonts to the test to show different way to premultiply their alpha.

__________________________________________________________________________________

 

 

GIMP Script: Premultiply Alpha

 

Description:

This script copies the active layer and premultiplies the alpha values into the colors of the copied layer. The original layer is kept but will be set invisible.

 

This can be used to easily premultiply the alpha values into the colors of an image.

 

You can do the same to any sprite ressource within GMS as well (not sure from what version on though). Open the sprite properties and then the editor. Just beneath the menu there's a tool bar and the the right most icon is 'Pre-Multiply Alpha'. There's one important thing to know though: Usually you'll create your sprites in an external program like GIMP. Depending on how you create and save the file premultiplying in GMS could lead to very bright borders. I don't yet know when that happens, but guess it's something about how the fully transparent pixels were saved.

 

The script actually just does the steps descriped in this post:

http://kevin.c.krink...pha-using-gimp/

It's probably not well coded since lhalf a day ago I didn't know anything about scripting in GIMP yet, but it does work and that's what counts I guess :)

 

Installation:

Save the script in your GIMP-scripts folder wich on windows usually is located at C:\user\<username>\.gimp-2.x\scripts

If GIMP is already running, go to Filters -> Script-Fu -> Refresh scripts

 

Usage:

  • Select the layer you want to have premultiplied
  • Apply the mask if the layer still has any (the script will fail if a mask exists)
  • Select: Colors -> Premultiply Alpha
  • Export to PNG

Download:

https://www.dropbox...._alpha.scm?dl=0


Edited by The Reverend, 31 May 2015 - 06:03 PM.

  • 8

Logo_150x150.png


Now Available for free on YoYo Games Marketplace


#2 Nocturne

Nocturne

    Nocturne Games

  • Administrators
  • 25708 posts
  • Version:GM:Studio

Posted 30 August 2014 - 09:18 AM

VERY nice little tool... And the minor bugs don't affect it's value at all. Thanks for Sharing! However, I'm moving the topic to the appropriate forum, as it's not a Technical Issue, but a tool... ;) Oh, and I've pinned it too! this really is something that people should be aware of.


  • 1

U1FVsm3.png

40799.png


#3 Squarebit

Squarebit

    GMC Member

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

Posted 30 August 2014 - 11:22 AM

This looks great, however I am unable to download it as Chrome flags this as malicious malware and deletes it. :S


  • 0

OjJP6YH.png

@sqrbt 


#4 Nocturne

Nocturne

    Nocturne Games

  • Administrators
  • 25708 posts
  • Version:GM:Studio

Posted 30 August 2014 - 11:33 AM

Its fine. This is just another example of Chrome "nannying" it's users. You CAN switch this off from the "Privacy" section of Chromes setting. I don't know why Google have removed the ability for users to keep or discard the download... 


  • 2

U1FVsm3.png

40799.png


#5 Squarebit

Squarebit

    GMC Member

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

Posted 30 August 2014 - 11:49 AM

Disabled the thingy and downloaded again, and it's working perfectly fine.

Sorry about the suspicion!

Great tool, thank you! +1


  • 0

OjJP6YH.png

@sqrbt 


#6 dark_master4

dark_master4

    GMC Member

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

Posted 31 August 2014 - 03:20 PM

I would much appreciate a version that doesn't require an installation, especially as GM:S easily allows it.


  • 0

My YoYoGames Marketplace (Has scripts, shaders and poker chips)


GM:Studio
Desktop Intel i5-4440 3.1ghz, 8gb RAM, NVIDIA GeForce GTX 770 2gb
Laptop AMD Athlon x64 2.1ghz, 4gb RAM, 256mb shared VRAM


#7 The Reverend

The Reverend

    GMC Member

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

Posted 31 August 2014 - 10:02 PM

Added a link to a no-install version.


  • 0

Logo_150x150.png


Now Available for free on YoYo Games Marketplace


#8 dark_master4

dark_master4

    GMC Member

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

Posted 31 August 2014 - 11:16 PM

Thank you very much! This tool is very handy.


Edited by dark_master4, 31 August 2014 - 11:21 PM.

  • 0

My YoYoGames Marketplace (Has scripts, shaders and poker chips)


GM:Studio
Desktop Intel i5-4440 3.1ghz, 8gb RAM, NVIDIA GeForce GTX 770 2gb
Laptop AMD Athlon x64 2.1ghz, 4gb RAM, 256mb shared VRAM


#9 The Reverend

The Reverend

    GMC Member

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

Posted 30 November 2014 - 02:49 PM

Added a new tool that shows how premultiplying alpha and masking works. I learned most of it in another post on these forums:

http://gmc.yoyogames...opic=474273&hl=

 

Hope it'll help some people understand more about surfaces and premultiplication of alpha values.

 

(Note: I wrote this answer just in case some interested people were following this topic and so they would get a notice there's something new here)


  • 1

Logo_150x150.png


Now Available for free on YoYo Games Marketplace


#10 The Reverend

The Reverend

    GMC Member

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

Posted 14 December 2014 - 11:28 AM

Added a GIMP script to premultiply Alpha into an image


  • 1

Logo_150x150.png


Now Available for free on YoYo Games Marketplace


#11 ryanmc.nz

ryanmc.nz

    GMC Member

  • New Member
  • 14 posts
  • Version:GM:Studio

Posted 19 April 2015 - 04:45 AM

A big thank you for the masking examples in tool #2! I've been studying blend modes and alpha masks the past few days (eg. the brilliant blend mode example by Phantom107), however I'm a bit stuck.

 

I'm currently figuring out how to use an image with transparency as the alpha mask for another image that also has transparency.

Specifically...an animated alpha mask that I'm generating with code and a couple of images on a surface.

 

My end goal is to have a sort of "materializing" effect when a monster spawns in a platformer game. The most crucial part of the experiment is that my main target platform is HTML5.

Here's a video capture of the animated alpha mask that I've coded so far:

https://www.youtube....h?v=65vqtSia_hc

 

I realized that the premultiplied alpha mask method should do the trick, but I've ran into a bit of an issue that has led me to believe that using alpha masks and premultiplied alpha is currently broken in GameMaker Studio, when exporting to HTML5.

 

When I ran your masking examples under Windows 7, it works perfectly. The premultiplied alpha test looks like this:

http://i.imgur.com/rL7PdaV.png

 

However, when I run it in HTML5 it fails (using the latest stable version of both Chrome and GameMaker Studio).

When running it in HTML5 with WebGL disabled, the premultiplied alpha looks like this:

http://i.imgur.com/XKV4XjI.png

 

When running it in HTML5 with WebGL enabled, the entire tool just fails to run. The canvas shows up black, and the browser console starts spewing out error messages:

http://i.imgur.com/MxPGoq2.png

 

At this stage, I'm kinda lost. I've tried pretty much all of the alpha mask examples I could find on the forum (including examples for blend modes, surfaces, etc, some dating back to 2009).

Everything works brilliantly when I export to Windows, but when trying HTML5 on both Chrome and Firefox, with WebGL either enabled or disabled, the only luck I've had is with blend mode examples. Premultiplied alpha masks on surfaces aren't playing nice.

Do you think this is a bug that I should report to the staff?

 

I've noticed this is a staff pick and it's pinned in the learning section, so maybe a staff member could pop in and help me out a bit. Am I heading down a dark and scary road by trying this in HTML5?

I feel like doing it on surfaces is correct, but I'm unsure whether this is something that a shader should be used for, or if the task can be solved entirely with GML.

 

If anyone has a clue how to get this premultiplied alpha mask example working in HTML5, I'm all ears! :)


Edited by ryanmc.nz, 19 April 2015 - 08:10 AM.

  • 0

~ Ryan


#12 The Reverend

The Reverend

    GMC Member

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

Posted 30 April 2015 - 03:44 AM

I'm sorry I didn't reply earlier. I didn't see this message until yesterday.

 

Unfotunately I do not have the HTML Module and thus cannot test it.

 

I just created a rather simple test gmz:

https://www.dropbox....ltiply.gmz?dl=0

 

It has two sprites: original and premultiplied.

 

  • First it shows the original sprite.
  • When hitting space it shows the premultiplied sprite.
  • Next the premultiplied sprite gets drawn on a surface and the surface to the application surface.
  • and lastly I tested what happens if I draw the sprite on a surface, create a new sprite from that surface and then draw that new sprite to the application surface.

If everything's working as it should, the screen should look the same in every mode. Then you could add some masking and see if it's still working.

 

There's not more to that program than that. So I guess if it's not working in HTML then we're either missing something or the export module does have a bug. Feel free to use that gmz if you contact support. And if you do find a solution, please post it here so others can read about it.

 

Edit: The blend-modes used should work even without WebGL:

_one

_zero

_inv_src_alpha

_src_alpha

so that part should not be the Problem.


Edited by The Reverend, 31 May 2015 - 05:54 PM.

  • 0

Logo_150x150.png


Now Available for free on YoYo Games Marketplace


#13 ryanmc.nz

ryanmc.nz

    GMC Member

  • New Member
  • 14 posts
  • Version:GM:Studio

Posted 01 May 2015 - 10:07 AM

I'm sorry I didn't reply earlier. I didn't see this message until yesterday.

 

Unfotunately I do not have the HTML Module and thus cannot test it.

 

I just created a rather simple test gmz:

https://www.dropbox....ltiply.gmz?dl=0

 

It has two sprites: original and premultiplied.

 

  • First it shows the original sprite.
  • When hitting space it shows the premultiplied sprite.
  • Next the premultiplied sprite gets drawn on a surface and the surface to the application surface.
  • and lastly I tested what happens if I draw the sprite on a surface, create a new sprite from that surface and then draw that new sprite to the application surface.

If everything's working as it should, the screen should look the same in every mode. Then you could add some masking and see if it's still working.

 

There's not more to that program than that. So I guess if it's not working in HTML then we're either missing something or the export module does have a bug. Feel free to use that gmz if you contact support. And if you do find a solution, please post it here so others can read about it.

 

Edit: The blend-modes used should work even without WebGL:

_one

_zero

_inv_src_alpha

_src_alpha

so that part should not be the Problem.

 

Cheers for the follow up The Reverend, and especially for the new example project.

This has helped get an idea of what I need to isolate out when targeting HTML5.

 

I've ran that example and it was successful on Windows as well as HTML5 (with both WebGL enabled and disabled), and the appearance was correct across all tests.

So it sounds like perhaps the problem on HTML5 only occurs when actual masking is added to the technique.

 

I'll chuck in some masking with this new gmz and see if I can replicate the same problem with it in Chrome and Firefox.

I haven't heard from staff yet, so whatever the outcome is I'll post it on here and let them know if it doesn't work, just in case it definitely is a bug.

 

Thanks again for the help! I really appreciate it :)


  • 0

~ Ryan


#14 ryanmc.nz

ryanmc.nz

    GMC Member

  • New Member
  • 14 posts
  • Version:GM:Studio

Posted 09 May 2015 - 09:11 AM

After some further testing with that recent additional example, I managed to get masking working correctly with blend modes in HTML5 (with WebGL enabled).

At this stage my only clue on what caused the original example to fail loading entirely in HTML5, is the absence of the GML script for converting an existing sprite resource into a pre-multiplied sprite.

That's the only real difference I could think of.

The masking itself seems to work fine when isolated away from dealing with converting existing resources to be pre-multiplied.

 

Also, I wanted to upload my changes to provide you with a demonstration and to see it working in HTML5, but upon accidentally re-opening the .gmz file in the folder above, GameMaker Studio has written over the contents of the .gmx folder I had been working with (sigh).... :(

 

Thanks again for the help, I really appreciate it.


Edited by ryanmc.nz, 09 May 2015 - 09:13 AM.

  • 0

~ Ryan