Hey everyone,
I’m a long-time Roblox UI designer, and this is something I’ve wanted to automate for a long time.
When creating Roblox UI, transparent PNGs sometimes develop black or white outlines around their edges after being imported into Roblox. This happens because transparent pixels can still contain RGB color data, which Roblox’s texture filtering can sample.
I referred to PixelFix implementation for my automation.
The usual solution is to apply an alpha bleed or pixel padding technique to the image before importing it.
The problem is that some design software does not have a built-in solution for this. Affinity Designer 2 is one example. I use Affinity Designer 2 for my UI work, and having to manually fix every exported PNG has always been an annoying extra step.
So I decided to automate the entire process.
This is a small Python utility that watches a folder for new PNG exports.
You simply export your UI from the designing application and put the image or PNG into the Unprocessed folder.
The utility automatically:
1. Detects the new PNG.
2. Waits for the export to finish.
3. Applies the pixel fix.
4. Places the cleaned PNG into the Fixed Outlines Folder.
5. Deletes the original PNG from Unprocessed after successful processing.
So the workflow becomes:
Your Designing Software
Export PNG to “Unprocessed” Folder
Automatic pixel fix goes into “Fixed Outlines” Folder
Old image gets deleted while keeping the new one in “Fixed Outlines” Folder
Upload to Roblox Studio
Summary of Use:
- Set the “Unprocessed” Folder as the default export location of your design software.
- Grab the processed image from the “Fixed Outlines” Folder.
- Upload to Roblox.
Instead of manually fixing every image, the entire process happens in one easy swoop.
Why I made it
As someone who has been designing Roblox UI for a long time, I export a lot of PNG assets.
When you’re working on a large UI project, manually processing every asset gets tedious very quickly. I wanted something where I could export from Affinity, drop the files into one folder, and forget about the pixel fix entirely.
This is especially useful for design software such as Affinity Designer 2, where there isn’t a built-in alpha bleeding option for this specific Roblox workflow.
Features
• Automatic PNG detection
• Automatic pixel and alpha bleed fix
• 4 px bleed by default
• Preserves the original alpha channel
• Only processes new or modified PNGs
• Deletes the source PNG after successful processing
• Runs in the system tray
• No Command Prompt window while running
• Processes images in the background
• Starts automatically with Windows
• Designed for batch UI asset workflows
Installation
The utility requires Python 3.x.
- Install Python from python.org.
During installation, make sure you enable:
Add python.exe to PATH - Install the required packages:
python -m pip install pillow watchdog pystray - Extract the utility.
- Run:
StartWatcher.bat
The utility will run in your system tray. - Export your PNGs into:
Unprocessed - The fixed versions will automatically appear in:
Fixed Outlines - Run
InstallStartup.batif you want it to launch automatically whenever Windows starts.
The utility handles the transparent pixel RGB values after export.
Important
The utility does not modify the visible artwork or alpha values. It fills the RGB values of transparent pixels around the artwork so Roblox’s texture filtering has proper color information to sample.
Download
The code is open source so you can search and guarantee there are no viruses.
This is primarily aimed at Roblox UI designers who frequently work with transparent PNG assets and want to remove the manual pixel-fixing step from their workflow.
I’ve been wanting something like this for a long time, especially for Affinity Designer, so I figured I’d share it with other UI designers who run into the same issue.
Pixelfix was the original tool, but it was slow and you had to do it manually, this is the final upgrade, no more tedious send:to everytime you want to fix the bleed.