Using PNG Image Files

From YoYoGames Wiki

Some or all of the functions in this article may work only in the registered version of Game Maker.

png files are image files that have a transparency setting for each pixel in the image. They get more and more common. By using partially transparent pixels, in particular close to the edges of the image, the images look a lot better. Also they can be used to create all sorts of effects.

Unfortunately it is not possible to directly add png files in Game Maker. When you add sprites in Game Maker the transparency information in png files is lost. As in other images, the color of the botom-left pixel will determine which pixels are fully transparent and you can check the Smooth edges option to make the edges of the image partially transparent, but the original transparency information is not used.

However, when you add or replace a sprite resource during the running of the game the alpha channel can be taken into account. To this end you should use one of the following functions:

sprite_add_alpha(fname,imgnumb,precise,preload,xorig,yorig)
sprite_replace_alpha(ind,fname,imgnumb,precise,preload,xorig,yorig)

For information about the precise meaning of the arguments, see the help file and look in the section Changing Resources. (The functions are only available in the Pro edition.)

The easiest way to use this is as follows. When you create the game, add the png file as a sprite. Ignore the fact that it does not look correct. Say we create a sprite called spr_ball from an image file ball.png. Now take some object of which a single instance appears in the first room. (You can create a special object for this if you want.) From the Other events add a Game start event. In it add a Code action and include the following line:

sprite_replace_alpha(spr_ball,'sprites/ball.png',1,true,true,0,0);

This will replace the sprite without the transparency information with one that includes that information. When you distribute the game you must of course make sure that a folder sprites exists that contains the png file(s).

You can also use

sprite_set_alpha_from_sprite(ind,spr);

ind represents the index of the sprite that you want to add an alpha channel to. spr represents the name of the grayscale image.

The main advantage of using this command, is that no external resources are needed, so someone could not steal your images. To use this function, you must have a grayscale image of the alpha channel. The image tells Game Maker what each pixel of the image what its alpha transparency should be. For example, pure white means that it shouldn't be transparent at all, whereas pure black tells the pixels to be fully transparent. Of course, you can have varying shades of gray to represent different levels of transparency (EX: The color halfway between white and black, #808080 or rbg 128,128,128 would be exactly halfway transparent.)

You can rip the alpha channel of large quantities of png files easily by running these ImageMagick commands that can be execute from the windows command prompt after ImageMagick is installed:

cd PATH_WHERE_THE_PNG_FILES_ARE_LOCATED

mogrify -format png -path "OUTPUT_PATH_HERE" -channel alpha -negate -separate *.png

You might wonder why this has to be so complicated and why you cannot simply add the png files directly. The reason is that the image editor and the level editor in Game Maker do not support alpha channels. Rewriting these would be a considerable amount of work. It is definitely on the todo list for a future version of Game Maker but when that will be added has not yet been decided.