Drawing PNG images with an alpha mask - new in version 4.42

Posted by Nick Gammon on Mon 06 Jul 2009 05:39 AM — 6 posts, 27,782 views.

Nick Gammon Australia Forum Administrator Mon 06 Jul 2009 05:39 AM #0

Version 4.42 of MUSHclient introduces a new script function WindowDrawImageAlpha. This behaves in a similar way to WindowDrawImage however it lets you draw a PNG image which has an imbedded alpha channel, and respects the alpha information in such an image.

The images in the next posting show the general idea. What this lets you do is have images with soft edges. Previously an image had to be rectangular, with a possible single transparent colour through which you could see the underlying image. Now you can make an alpha channel (with a suitable painting program) which lets you gradually blend into the background.

An example of doing this is here:


win = GetPluginID ()  -- get a unique name
WindowCreate (win, 0, 0, 365, 285, 12, 0, ColourNameToRGB("white"))  -- create window

-- Grid
  for i = 1, math.max (WindowInfo (win, 3), WindowInfo (win, 4)) / 20 do
    WindowLine (win, i * 20, 0, i * 20, WindowInfo (win, 4), 0xC0C0C0, 0, 1)
    WindowLine (win, 0, i * 20, WindowInfo (win, 3), i * 20, 0xC0C0C0, 0, 1)
  end -- for

check (WindowLoadImage (win, "im", "C:/alpha_test.png"))

check (WindowDrawImageAlpha (win, "im", 20, 20, 0, 0, 1)  )

WindowShow (win,  true)  -- show it

Previously you could do something similar with WindowMergeImageAlpha - however this required two images, which was a bit fiddly to set up, whereas this new function just lets you use a single existing image with an alpha channel.

The alpha channel effectively is a 4th byte per pixel (the others being the red, green and blue components of the pixel). This 4th byte specifies the transparency of the pixel, from fully transparent (0) to fully opaque (255), in the range 0 to 255. As you can see from the mask in the image below the black parts (which have a value of 0) are transparent, so the background shows through. The white parts (which have a value of 255) are opaque, so you do not see the background. The grey parts (somewhere between 1 and 254) let the background image show through partially.

This will only work for PNG images which have an alpha channel imbedded in them.

Nick Gammon Australia Forum Administrator Mon 06 Jul 2009 05:42 AM #1

Original image:

Alpha mask in Photoshop:

Resulting image in Photoshop (checkerboard shows transparent area):

Resulting miniwindow in MUSHclient drawn using code above:

Nick Gammon Australia Forum Administrator Mon 06 Jul 2009 06:26 AM #2

The function prototype for WindowDrawImageAlpha is:



long WindowDrawImageAlpha(BSTR Name, BSTR ImageId, long Left, long Top, long Right, long Bottom, double Opacity, long SrcLeft, long SrcTop);

In addition to the window name, and image ID, you specify where the image is to be drawn (Left, Top, Right, Bottom), the Opacity (from 0 to 1) and the starting position of the image in the loaded image.

The Opacity parameter lets you draw semi-transparent images (apart from any extra transparency introduced by the alpha mask). So for example, by specifying an opacity of 0.5 you would have a "ghostly" image drawn on top of the background.

SrcLeft and SrcTop let you specify to pull out a sub-image from the loaded image. Thus, a loaded image could be a "tiled" set of icons, and by specifying the left and top of each tile, you would get part of the image.

Nick Gammon Australia Forum Administrator Mon 06 Jul 2009 06:30 AM #3

Resulting miniwindow in MUSHclient drawn with 50% opacity (ie. an Opacity value of 0.5):

David Haley USA Mon 06 Jul 2009 03:20 PM #4

Very cool. It's starting to feel like one could write an entire custom graphical client in MUSHclient. :-)

Nick Gammon Australia Forum Administrator Mon 06 Jul 2009 11:42 PM #5

Funny you should say that ...