top of page
Search

Any Color You Want (As Long as it's Red & Green)

Updated: Jul 13, 2021

JAY: Hey everyone! It’s been a pretty wild past several months huh? Throughout the pandemic, we had to shut down the studio and everyone had to work from home (pretty standard stuff at this point). Needless to say, production really slowed down to a crawl. But fear not! Now that the team is all vaccinated up, we’re back in full force and better than ever. That being said, with the return of the blog, we wanted to try something a bit different. Instead of just having one writer for each post, we’re playing around with the possibility of multiple writers giving their insights on a single post. This time around, it’s me, Chris, and Lucas! So, let the experiment begin!


A title card saying "Any Color You Want (As Long As It's Red & Green) with a greyscale background and colored letters. There are Collapsus blocks with color blind test images in the lower left corner

One of the big questions we often get has to do with our color pallet shader. Originally, we had 10 different pallets all with distinct sprites that we’d swap out when you switched pallets. However, we then started working on a high-contrast mode, and that led us to realize that it might be cool to have not only our pallets for accessibility but also just some fun ones that people could use if they were sick of the standard look of the game. And then it hit us… If we were going to start handling this with a shader rather than a bunch of sprites, why not include our tools in the game itself and have players be able to make their own pallets in addition to the ones we’re packing in ourselves! Pretty great, right?! So, with that piece of design inspiration out of the way, let me pass it over to Chris Quay so he can talk about what he’s been up to and then talk a bit about the art side of the shader as well. Chris, take it away!


. . .


CHRIS: Hey all! Chris here, and I figure it's time for a little update on how stuff's going. As of this last month, I've officially graduated cum laude from UC’s DAAP with a degree in Fine Arts and a certificate in Game Art! I'M FREEEEEEEEEEE!


Chris in his cap and gown dabbing
Look at that handsome lad!

So with all the school things out of the way, I've officially joined the Wraith team as an artist and designer! For now, I'll mainly be helping out with getting Collapsus out the door, on top of branding things, merch things, and annoying Jay things. Ya know, the important stuff. For the time being, I'm still working from home, but I'm sure I'll be able to bug the team in person sometime in the near future!


As for the things I've been working on, there's a bit of a list! During my final semester, I managed to develop and release a game all on my own (Azure Skies! It's fun! Play it!) HERE, made a new animation about Katamari Damacy HERE, and since then I’ve been helping revamp this website and did all the little illustrations of the team you see on the about us page!


It even won an award! Waow!

Alright, back on the topic of Collapsus. We’ve been hard at work trying to get the game up to snuff, make it look good, feel good, and especially play good. As you may know, we’re big on accessibility here at Wraith, and so every asset has been designed with the intent to be shiftable to different colorblind palettes so that people with different types of color blindness can still play the game. In case you’ve ever been curious as to how this works, here's a look at the game before all the shaders and filters have been applied:


An animated Collapsus menu without any color pallets applies so all the gameplay assets are red and green
That's, uh, a lot of red & green

Well, that’s absolutely nightmarish. For reference, literally every asset in the game is made in this way so it can be changed around, from buttons to blocks. So now, with that image planted firmly in your head, I’ll pass it over to our team programmer Lucas Lacer to give you a more technical breakdown of how all that works.


. . .

LUCAS: Hey all, I’m Lucas! You’ve not heard from me before, I’m the lead programmer for Wraith and, apparently, I also write blog posts now too! This year, as I’m sure you can attest, has been a strange one. Both seemingly interminable and non-existent at the same time. Lockdowns started slamming into place shortly after PAX East 2020, and so we stopped going to physical events and we all started working from home. I myself managed to avoid the plague for a whole year before it finally caught up to me, and I caught COVID-19 near the beginning of April. While I was spared the most extreme symptoms and was able to wait it out from the comfort of my own home, make no mistake! This thing is certainly unpleasant! After leaving quarantine, I spent a good 12+ hours outside. Nothing makes you appreciate the sun like being stuck in a room for two straight weeks! Fortunately, the team is well on its way to being fully vaccinated, and thus far I’ve been the only one to contract the virus. And so, the work continues!


So, as Chris mentioned, we’ve been doing some work on an interesting way to easily incorporate color blindness-friendly palettes. The answer, of course, is Black Magic! No, seriously though, we decided to use post-processing which, let’s be honest with ourselves, basically is black magic. In Unity, this means writing a shader and then creating materials that use that shader. Now, the shader we wrote is fairly simple, only about 100 lines, and in addition to allowing us to freely recolor objects also includes the components to make things interact correctly with the various masks used throughout the project. This is the part dealing with the colors:


fixed4 fragmentFunction(v2f IN) : SV_TARGET {  fixed4 textureColor = tex2D(_MainTex, IN.uv);  if(textureColor.g >= textureColor.r)  {   textureColor.rgb = _PrimaryColor.rgb * textureColor.g;  }  else if(textureColor.r > textureColor.g)  {   textureColor.rgb = _SecondaryColor.rgb * textureColor.r;  }    return textureColor; }
That's some code!

So without getting into too much detail, it checks to see if a pixel is more red or more green and then switches it to one of the two colors specified by the programmer using it (that’s me!) So by specifying, for example, hexcodes 0066FD and 5197FF, you get the standard colors for the Square block. Or you can use 018A95 and 13C2CF to get a combination of colors that we use in a palette suited for those with Tritanopia, or blue-yellow color blindness.



3 square blocks. On the left, one that has no color pallet so it's red & green. In the middle, one with the "default" color pallet, so it's a darker & lighter blue. On the right, one designed with tritanopia in mind, so it's a dark teal and a seafoam green
Here's what that looks like

This shader has been applied to almost every object in the game, allowing you to go from this:


Animated gameplay of Collapsus with no color pallet applied, so all the blocks, background, and other elements are in red & green
OH NO! That's really cursed!

To this:


An animated GIF of Collapsus with the "Default" pallet applied
Okay, that's better!

And now that order (and color) has been restored, I think I can leave you all in good conscience. Here’s hoping that this next year will be a bit better than the last. See you at the next event.


Comentarios


bottom of page