Recreating every sprite at a higher resolution simply isn't practical. Not only would it require reanimating hundreds of frames, but it also wouldn't be the best use of my time as a programmer. Instead of replacing the art, I began looking for a scalable solution that would improve readability while preserving the game's existing style.

Shaders do exactly what I just described, and if I can find a way to develop one to create a blur effect, I can then apply the resultant material to any sprites that require it, following a pretty extensible and scalable improvement to my game's visuals.

There is a bit of a problem, though; there is not a streamlined way to make a blur (a bit of a weird ommission in my opinion), so I had to do research on how to make a custom shader.

I researched PLENTY of videos and tutorials, and it was still a struggle to find exactly what I needed. I researched a lot on glow, outlines, and anything that could simulate what I was trying to achieve. After plenty of hours, I found that the best approach was to have a copy of the sprite one layer behind, and this would both be transparent black and have the blur shader. This is a good approach because the blur can be a separate shader from whatever shaders are placed on the main sprite, which is necessary as the sprite already use a shader for color palettes (a facet worthy of a future devlog!). Actually achieving the blur was a different story, so this is where I needed to learn a LOT more about shader graphs.

What follows is mostly me following tutorials, but I wanted to go over the process to reflect on what I learned here.

This now works for static images, and when placing it onto the higher-fidelity portraits, we can already see this drastically improves clarity!

I can now place it onto our in-game sprites as well! However, the shader does not automatically animate the blurred sprite. Recall that the blur is an entirely separate GameObject, so I could set up the blur sprites for every single animation... for every single fighter... and projectile... that's a lot of work isn't it?

Here's a more sophisiticated approach; why don't we have a separate script that automatically generates a GameObject with a sprite set to this blur material and keeps said sprite updated with a source sprite? This way I do not need to add in work for 100+ animations, I can just add the script to each fighter and projectile!

Visual clarity is a necessity for any game, but especially so for fighting games, and seeing a lack of it encouraged me to find industry standard solutions. It then took a decent amount of research to develop a custom shader graph, but this solution lets me easily set all foreground elements as visually distinct from the background, a great exemplar of working smarter, not harder! And after attending Southeast Game Exchange in July 2026, player feedback does note an improvement on visual clarity! I highly recommend using these tools for any pixel art game or art piece.

This project reinforced an important lesson for me: the first solution isn't always the best one. Rather than manually editing hundreds of animations, I stepped back and asked how the problem could be solved once instead of repeatedly. By separating the blur into its own shader and automating it with OutlineAnimator, I ended up with a solution that's reusable, maintainable, and easy to tweak as the project evolves.

From there, I can probably take what I have learned in a further direction. I mentioned in the 'Research' section that there are multiple strategies to make foreground elements stand out, but this devlog was only incorporating one of them into my game. Perhaps I will look into post-processing filters to decrease background saturation, and there may be a less process-intensive way of rendering the blurs, but this addresses the core issue for now! I am excited to see what other improvements will come along to this game's visuals, a facet I originally wrote off but now have a stronger direction for!