I removed the background and a pink edge was left
Oct 25, 2026 Β· Art and sound Β· νκ΅μ΄
I removed the background from art drawn on magenta and put it in the game. At small sizes it looked fine, but wherever it is shown large, like an icon, a pink outline showed along the edges. I first noticed it on the Solitaire card art. I already knew about this problem when I made Cloud Hop's art, and it still didn't end in one pass.
The tools in this post are scripts written in Swift. Swift is Apple's programming language, and once the developer tools are installed on a Mac you can run a file like a script with swift file.swift. The image reading and writing features come with macOS, so there is no library to install. How the background is removed is covered in the earlier post. This one is only about the fringe left afterwards.
The pixels where the background meets the art are a mix of two colors. Just outside the chick's dark outline the color is neither clean magenta nor the chick's own color, but something in between. If you erase by how close a pixel is to the background color, clean magenta goes away, while the blended in-between colors fall outside the tolerance and stay. That becomes a 2 to 3px fringe along the edge.
Erasing the fringe would shave the art, so I don't erase it. I change its color instead. The tool finds edge pixels whose hue is in the background color's range and paints them with the color of the neighboring pixel on the inside. Transparency stays the same. The shape doesn't change, and the pink edge takes on the art color just inside it.
swift tools/art/defringe.swift --hue 280-330 sprite.pngFor a magenta background the target hue range is 280 to 330 degrees. For art drawn on a green background you give 95 to 165. The file is overwritten in place. I ran this tool on every cell of Cloud Hop and most of the pink fringe disappeared.
The wind lines on the blue cloud stayed
But the blue cloud still had a problem. The blue cloud carries thin white lines (wind lines) that mark it as a moving cloud. The light pink at the edge of these thin white lines wasn't removed by the earlier tool.
So I wrote a tool just for this art (unpink.swift). It turns the light pink into white and turns the dark purple outside the outline into the outline's navy. A piece of wind line that had come loose at the lower right was almost entirely pink, so I deleted it. That blue cloud alone needed two more passes in one day: first the light pink and purple, then the purple left at the lower right.
Other frames also had a little purple outside their outlines. I thought about running the same tool on all of them, but didn't. The red balloon and the spring have colors of their own that fall within the same criteria, and running the tool would have changed their real colors too. So I left a little fringe there. This taught me that one criterion can't be used for every piece of art.
Right after removing a background, a zoomed-in look makes most of it seem fine, but the fringe shows when the art is used large, like an icon, or placed on a dark background. Adding one more step after removing the background, painting edge colors with the inner color, solves most of it. Art with thin lines, where the inner color is ambiguous, still needs separate handling.
References
- Wikipedia, Alpha compositing (blended edge pixels): https://en.wikipedia.org/wiki/Alpha_compositing
- Wikipedia, HSL and HSV (hue): https://en.wikipedia.org/wiki/HSL_and_HSV
Games from this post
Cloud HopBounce from cloud to cloud and climb as high as you can. Gray clouds fall apart, and storm clouds must be stomped from above!
Play
More posts
- I deployed, and the old page kept showing for an hour Oct 25, 2026
- Why there is always a cloud within reach in Cloud Hop Oct 25, 2026
- Why the crumbling clouds never sit on the path Oct 25, 2026
- Three tries in one day to decide what not to deploy Oct 25, 2026
- A ten-line FPS counter for browser games Oct 25, 2026