🔍 Finding the Lost Pixels in Pixel Washer
Pixel Washer is a chill game about washing pixels. It's early in development, and the web demo is far from perfect, but we're going to improve the game one wash at a time.
So let's fix the most critical issue in the game right now, which is:
🔎 The Lost Pixels
In Pixel Washer, you play as Pigxel the pig and you're placed in places to power wash. There are gorgeous sprites all over the place but they're covered with dirt! It's your job to power wash them until they are squeaky clean.
The problem we're going to solve is: sometimes it's hard to find those last few dirty pixels. It's a pretty big problem! Players often end up at a "99% complete" state, with no idea where those last few pixels are hiding out.
Pixel Washer aims to be chill, and this is not a chill problem. So let's fix it.
📺 Watch the video
Why you can't see the dirty pixels
How do the pixels get lost? Let's take a closer look.
Typically lost pixels are being drawn over dark pixels, or stuck in spots like the edges, where they're hard to see. Sometimes the sprites themselves have patterns that look sort of like dirt, which creates blind spots for players.
📝 Ways to find the pixels
There are about ninety billion ways to solve this, but let's discuss a handful:
- Composite operation to draw light over dark
- Skip the dark pixels entirely
- Highlight the dirt
- Delete stragglers
- Round up
- Mini-map that shows approximate location
- TODO list
- Magnifying glass tool
😎 Chill (no worries).
Like any directive, this one can be interpreted in infinite ways. For my purposes, "chill" means no nagging (e.g. a popup warning), and preferably no extra work (e.g. having to toggle between tools).
It is inherently not chill to have lost pixels, so we need to solve that, but we also need to solve it in such a way that it's still chill. We're not upset or panicking about our lost pixels – it's cool, we'll find 'em.
Keeping this in mind, we'll talk about the pros/cons of each solution. Let's jump in!
1) Composite operation to draw light over dark
Right now all dirt pixels are dark, but we could instead use an algorithm that will draw the dirt more lightly when it's being drawn over dark pixels.
- ✅ Pro: makes the hardest to see pixels easier to see.
- 🚫 Con: incomplete fix – can still get hard-to-see pixels. I do NOT want to put any restrictions on the sprites themselves, so if they want to be splattered with different colors of pixels, that's fine.
2) Skip the dark pixels
This means just not creating dirt data for pixels that are of a certain level of darkness.
- ✅ Pro: you would only have to clean pixels that are easy-ish to see.
- 🚫 Con: hard to come up with an exact algorithm to target the pixels. I could use some arbitrary darkness measurement, or some kind of "what people see" algorithm. This could require lots of tweaking over time, so I see this as an expensive fix.
- 🚫 Con: incomplete fix – can still get hard-to-see pixels.
3) Highlight the dirt
Draw the dirt yellow, maybe briefly, via an event or button press.
- ✅ Pro: should be easy-ish to implement, definitely will help find things.
- 🚫 Con: hard to optimize? (Most of these are, probably.)
- 🚫 Con: OP? Pixel Washer is inherently a very easy game, but there still is such as thing "too easy" even for this game.
- 🚫 Con: could be hard or tine-consuming to design – Is it limited? Can you use it all day? Does it have it a cooldown? Is it tracked?
- 🚫 Con: how to teach? – Remember: NO NAGGING!
4) Delete stragglers
This would be like: no solo pixels, or say, every dirt pixel needs at least 2 neighbors or it gets deleted.
- ✅ Pro: probably solves the problem (?).
- 🚫 Con: might make it too easy?
- 🚫 Con: have to design how to snap up – maybe no solo pixels? Must be attached to N other pixels? Might need lots of design attention and tweaking over time.
- 🚫 Con: hard to optimize?
- 🚫 Con: feels like a cop out? Like ignoring my lovely pixel data somehow? (Maybe it's fine.)
5) Round up
Say you want to just clean 95% of a surface, then it'll snap to grid and say, OK you cleaned it 100%.
- ✅ Pro: would "definitely" (I definitely overuse this word) solve the problem.
- 🚫 Con: again it ignores my lovely data I worked hard on, but that's fine.
- 🚫 Con: would require some design, e.g. how much do I allow the player to snap? 0% would surely feel like too much??
6) Mini-map that shows approximate location
(In the Pixel Washer voice) Yo, you like the 1986 masterpiece Aliens? Me too. I hear the sounds from that movie in my sleep. Soooooooo good!
- ✅ Pro: easy-ish to implement (famous last words).
- ✅ Pro: cool interface, fun screenshots & GIFs. Maybe it's disabled by default but you just press a button and it appears.
- ✅ Pro: fun? Maybe. It sounds cool. Arbitrary +1
- 🚫 Con: not an exact tool, could still be frustrating (probably true for each).
7) TODO list
This idea is like the task list in Untitled Goose Game. Sure it's a task list but it's pretty chill. I mean Pixel Washer wants you to wash stuff, so it's just a list of that stuff. It's technically like just a different renderer of the sprites in the game. Like a text-based MUD inside of Pixel Washer?! Pretty cool to think about.
- ✅ Pro: easy-ish to implement. Data's all there. Scrolling lists are easy to make.
- ✅ Pro: cool interface, would make for good screenshots, GIFs, etc.
- ✅ Pro: fun? I like it, yeah, sounds cool.
- 🚫 Con: not an exact tool, could still be frustrating. Puts extra pressure on the names of things, which right now probably needs some work. But I think that's OK because I think that the names of things is an area with some interesting potential for creativity and maybe even secrets!
8) Magnifying glass tool
Ya know, press a button or hit a key and maybe you go from "washing" mode to "magnifier" mode. Or maybe you toggle the effect on/off and it just zooms or doesn't based on that.
- ✅ Pro: cool interface, would make for awesome screenshots & GIFs.
- 🚫 Con: must teach player to use it. And I don't wanna.
- 🚫 Con: it's the exact gameplay as when you're just washing, isn't it? Just move your mouse (and later: gamepad) around a surface. Might be too samey.
- 🚫 Con: probably expensive to implement. Maybe. Definitely harder than some of the other stuff.
🛠 Let's make some game
I'm going to use Pixel Washer's game design pillars to help me choose which option(s) to implement. One of the core pillars is "chill" gameplay. This makes me want to lean towards the passive, automatic tweaks that wouldn't require any tutorials or nagging to explain to the player.
Let's implement:
- Glow on hover
- Percent clean slider (AKA snap to grid)
Glow on hover
So the first past of implementing this feature was surprisingly easy. There's already a mouse component that handles whether an entity is being hovered over or not, and there's naturally already flexible code that handles the rendering of the dirt.
The first pass really jumps at you, doesn't it? It makes it so clear where each section of dirt is. To me it's over-powered in that state and I wouldn't want to be the default setting for sure.
But some folks might want the dirt highlighted that much, and the game can do that, so let's just make a setting. There's now a hover highlight effect, which starts at zero. You can slide it up to make it pretty subtle, or quite loud. Whatever you want. It's optional, which is very chill.
Funnily enough, this solution isn't a 100% fix. It can still be hard to find individual pixels. Which makes this pair well with the round up (or snap to grid) approach.
Here's how I did that:
Percent clean slider
This was even easier to implement, and even more powerful. ⚡️
First, there's another slider in the settings, this one set to 100%. This is how much dirt you have to clean on an object before it is marked as clean.
So if I drop the slider to 50%, then I only need to clean half of an object before it snaps up to 100% clean and is finished.
And yes, if I set it to 0% then if you so much as touch a dirty object, it instantly becomes clean. Which is super fun, but almost feels like it would need to be its own setting? Like maybe an instant-touch speed runner mode or something.
In the actual game, I do kind of feel like this is over-powered. So, there's some designing to do here. I set the range of effect from 90-100%. By default you still have to clean 100% of an object, but if you slide it all the way down, that means you only have to clean an object to 90% to finish it.
And that 90% number is something that will probably need tweaking, and could end up being a pain to design. But the round-up approach was easy to implement, I hope easy to understand, and really does solve the problem of the lost pixels.
Easy & Optional
What I like about these 2 changes is that they were easy to implement, and are totally optional. The default game has not changed, really, which is good because I think everything else is working well. And now if you want a different, easier experience, it's right at your fingertips.
Also this is just the first pass of finding the lost pixels. All the other options we talked about are still on the table. Personally I like the TODO list, and the mini-map because they could both be off by default, but again, right at your fingertips.
🐷 Play these changes in the web demo
There are lots of other issues to fix, of course! The bug that bugs me the most is that blurry font on Windows, because I want crisp, clean pixels. From what I can tell Microsoft Edge just doesn't support font-smoothing the way I want, so I might need to create a more complicated text drawing process (but we'll see).
jeremyjackson89
If you have your own thoughts on Pixel Washer, join the Valadria Discord where my friends & followers are helping me make a good game.
❤️ If you enjoyed this, help me out:
- Add Pixel Washer to your Steam washlist
- Tell a friend (or post in your favorite Discord or Reddit)
- Buy my book! (or if you have already, a kind review?? mmmm love those yes)
