With the glitch (left) and without (right)
If you've ever tried to scale imagery (sprites / backgrounds) up while having texture (/pixel) interpolation turned on, you might have encountered some drawing artifacts. These normally look like the left part of above image, being either random black/white dots or a whole semi-transparent outline around the image. This article goes a bit in-depth about why these occur and how to fix them.
Source of problem
The source of this unasked pixel issue is not actually even GameMaker' fault - it's in the pixels.
If you have been using GameMaker since version 7 or lower, you may remember those times when you had different colors in image, such as red, green, blue, and transparency:
Since earlier versions of GameMaker used 24-bit bitmaps, one of image colours could have been sacrificed to indicate transparency, and it might have looked like a separate colour as such. But, since the introduction of 32-bit images (and thus actual transparency) in GameMaker 8.0, you can no longer call transparency a colour.
If you [somehow] don't know how transparency works at all, here's a short explanation:
Every pixel of your images used in GameMaker is composed from 4 components - red, green, blue, and alpha. While first three define what colour you are actually going to get (see Wikipedia if you need more information on this), alpha channel defines how non-transparent (opaque) your colour is going to be. Alpha value of one means that colour is entirely opaque. Alpha value of zero means that colour is entirely transparent (invisible, you could say). And, given that each component can have 256 different values, amount of these absolutely invisible colours is quite large.
And, surprisingly, the "invisible" pixels are what actually ruins the scene here.
Transparent pixels cannot be directly seen, and it would have looked like it should be no problem to differentiate between transparent and non-transparent ones, but that's where the GPU (or CPU, depending on case) kicks in:
Now, I'm not implying that processing units are simple, or any of people creating programs for them are, but in many cases the interpolation algorithm does not always necessarily notice that one of target colours is transparent, and so you may get situations when interpolated "edge" pixels accidentally take transparent pixel colours into account, thus mixing the colours with technically invisible ones.
Solution
Finding "invisible" pixels may seem like a hard task, but it is not. As fact, you can even check the colour of these via colour picker tool:
(here I've made two versions of image, one with transparent contents and one with opaque ones)
Process of fixing colours of unseen pixels is also incredibly simple. As fact, you can even do it from GameMaker itself, thanks to the methods used by Glow filter:
Keep in mind that this will (obviously) only allow you to replace the surroundings to a single colour. If different parts of image have entirely different colours, it would be better to export image and edit it with a more appropriate image editing software (for example, Adobe Photoshop has an option to display/edit different channels of image, while editors like Paint.net and GIMP have different plugins to manipulate alpha channel of image).
You can also download example used to demonstrate the issue:
Update
In GameMaker:Studio above approach may cease to work sometimes (due to texture page generation methods. If that occurs, add glow with alpha of 7 - that will add a 1% opaqueness glow but will also fix the issue.
Hi, I’m having a similar problem in GM2. I have two same color sprites partially overlapping (bird’s body below and its wing drawn above). Both sprites have an outline but the ‘filler’ color is the same – so that the character’s moving wing is a continuation of its body.
With interpolation turned on and the game scaled up, a line is drawn at that same color meeting place. I found semi-transparent pixels there, so I just replaced them with ‘solid’ pixels but the problems persists.
Do you have an idea how I could fix this?
A solution I came up with that kind of works is turning interpolation off, drawing a patch over that border area and then turning interpolation back on.
It looks perfect but the FPS take a substantial hit…
I need this script really.. But link doesn’t work anymore… :(
Fixed with a slightly delay. That wasn’t a script – the post details how to fix, and the example would just show the glitched/fixed versions.
Oh, thanks! I used to check this page a lot. I thought that was script that can draw an outline of any sprite, even above the sprite or anywhere (the single outline) for Game Maker 8.0 Pro. Could not find it at all. Anyway, I hope this thing will be useful too!
Oops, file not found.
I just found this at random and it finally did solve like ALL MY F****** PROBLEMS! Man, I can’t thank you enough, I’m wrestling with this issue for months now, some sprites I used worked others didn’t and I never understood why, I had sleepless nights over this, thought I was going mad :) Now all of a sudden all I wanted to do is possible, because it finally works out. I can’t tell you enough how much of a difference this makes to me and how glad I’m I found this. Thanks!
i want to know how to get the colour pixel from
Please explain your question in more detail.
You always have some good tutorials/fixes/examples to give :)
now i understood better how it works. thanks
Good post. I’ve noticed this issue before and it’s bugged me to no end. These artifacts will also show up when rotating a sprite even if pixel interpolation isn’t on.
Not that we can influence the GPU in any way, but I suppose that the more appropriate thing for it to do to eliminate these artifacts would be to blend the RGB values of these edge pixels based on the ratio of their alpha values?
The appropriate thing would probably be “extruding” RGB values of outer pixels of image outwards (while keeping the transparency), so that any edge pixel would be only surrounded by pixels of same colour, thus not leaving any chance for it to fail. Such would take longer to do right (especially for “corner” pixels where colours would have to be mixed correctly) though.