Joe-proofing Temple of Yog

I: Is it a game or is it a Retinal Prank Device?

It took us a minute to figure out why Joe was suddenly terrible at FIFA.

At one of our Wednesday rituals, he just wasn't connecting with the rest of the team. He was sending passes straight to defenders, firing his shots wide. Wildly wide. Spending our players energy reserves without abandon. Sometimes he wasn’t sure he even had the ball. Eventually he tired of our harassment and let us in on his dark secret.

"I can't see my indicator. Can I be Red?"

Joe's player indicator was a green that, in his eyes, matched the pitch in hue, value, and saturation in all the wrong ways.

In this FIFA 14 screengrab through a color blind view mode (protanopia simulation), the green player indicator is nearly invisible on both the pitch and in the minimap. Good luck finding it! Image source: https://www.youtube.com/watch?v=YhNiEkNHJ-s

Joe wasn’t as bad as this performance (or lack thereof) let on. He had the skills. It seemed more like the game artists had locked Joe out from being Player 2. Whistle blow, red card, misconduct, dismissal, etc.

I recently googled that approximately 5% of men and .5% of women can’t easily distinguish between certain colors. These people have some missing cones in their retinas, which evidently means that sometimes they can’t be Player 3. But other times it means they can no longer see the parameters of the game at all. Good games can quickly turn into confusing and directionless simulations if developers let crucial information be communicated solely through color.

Joe and Mike switched controllers and and in a few moments we were back in the game. What I'm about to say may shock you, dear reader, but...could all of this have been prevented?

II: Honey, we’re havin’ twins

When I first came onto the devteam of the indie game Temple of Yog as the lead artist I was presented with a different set of challenges regarding color. The game is a dual-screen retro roguelike for Wii U. The core mechanic of the game involves using the Wii U GamePad as a crystal ball of sorts to navigate procedurally generated mazes and beasts in Light and Shadow realms, displayed on the TV and GamePad at the same time.

The shadow realm is generated by a cocktail of camera and shader effects in Unity. Which

from an optimization standpoint is fantastic as you’re only required to call a single set of sprites for use in both realms.

From an art perspective, this meant creating a palette that would communicate a clear visual hierarchy in both modes. That covers the bases for most players. But I wanted my good ol' buddy Joe to be able to play the game without impediment. And other players who perceive color differently, they should be able to play the game as well. So with no plans (or time) to implement color mode settings in the game, I decided to attempt a “design for all” approach when it came to color selection in Temple of Yog.

Planning a workflow that accounted for these complexities was crucial to not wasting time making game art that would be invisible to certain players. And I didn’t want to waste anytime going back and fixing things (a nice dream). So it was important to get it right the first time.

III: Joeproofing our game

I took inventory of my constraints and set to work establishing a palette and a workflow to check every asset for visibility in both the Light and Shadow Realms. I know there are many fantastic programs dedicated to pixel art but I use Photoshop for my familiarity with its automation features.

Once the palette was chosen, I set to work creating a Shadow Realm Gradient Map adjustment layer I could put in any document to quickly replicate the effects created in the engine. The shader pushes light values to the warm oranges and yellows, midtones to pink, and dark values to deep purple and blue. I toggled the visibility of the adjustment later to see how the shader effect would impact the color visibility of the base palette.

A demo of my Gradient Map thermal replicator in Photoshop.

With the palette established, it was finally time to start creating sprites. Thousands and thousands of sprites.

In Temple of Yog, conquering the wilderness in the first age has an aesthetic effect on the map. All plant life begins to wither and die as the player moves through the six achievable ranks, each with it’s own set of sprites.

Envrionment degradation in Light and Shadow Realms.

As I moved from sprite set to sprite set, my adjustment layer traveled with me, always patiently waiting at the top of my Layers window to check how value, hue and saturation choices would display in both realms.

But the adjustment layer was not the only trick I employed to check for visual coherence. It worked for me but I still had no idea how to make sure players with visual deficiencies would see the game. Fortunately, Photoshop has color deficient viewing modes built in. No plugins necessary. It's as simple as going to View > Proof Setup and selecting a Color deficientness view mode. A few mouse clicks during development is all it takes to make your game accessible for the ~5-6% of gamers that have a form of color blindness.

There’s also a ColorBlind Unity package you can download and install using this quick tutorial by Alan Zucconi.

IV: But...I still made some mistakes

I confess I failed to remember to use the proof color trick when designing the rank indicator. It’s not exactly essential information but we did put it there for a reason. Color deficient players might still be able to infer what rank they are playing in by the changes in the environment artwork, but the indicator I spent all that time designing will be useless to them for the first few months of release. Meanwhile, their friends who were fortunate enough to be born able to see the full visual spectrum will know at a glance whether or not the tribute they are sacrificing is “Pitiful” or “Exalted.” To those who currently can't...my bad. We’re planning to fix it via update.

Where I failed. Current rank indicator (left) and planned update (right).

V: Other than that I’m pretty much a hero

This approach might be a very small step towards making Temple of Yog more accessible, but it's not trivial. Checking the color deficient viewing modes in Photoshop or Unity during asset creation allows developers to see through color deficient eyes and foretell moments of confusion and frustration in their potential audience in seconds flat. If you're a gamedev, implement this into your workflow, talk to your teammates and retain a segment of your audience you might lose otherwise.

The attention programmers pay to squashing bugs should also be given by artists to check and account for art that causes disability and lessens the scope of the player pool. I mean, if your art is preventing someone from playing your game...isn't that a bug?

Yes, I know the old nihilistic mantra we tell ourselves to atone for our sins: design constraints and hardware limitations don't always make it feasible to account for every type of player for every game.

But if you make an effort to identify accessibility bugs, sometimes quick and convenient solutions exist right under our noses. I suggest we pick our noses more often.

Temple of Yog by CHUDCHUD Industries is currently available in the Nintendo eShop on Wii U.