Chromatus

Where there is darkness, there is color.

[chromatus-game]

Chromatus progress - some enemies will get their revenge 

[chromatus-game]

We now have background art in-engine!

[chromatus-game]

Finally, some in-engine environment art!

Also doors.

[chromatus-game]

Shading the World of Chromatus

Between the name Chromatus, our tagline of “where there is darkness, there is color,”  and my earlier posts about a color wheel, you might be inclined to think that Chromatus is going to involve colors.

Well you’d be right!

Backgrounds, characters, and objects in Chromatus have a need to have their colors changed dynamically based on what is happening in the game. As such, I had to work on a simple method for Mac (the artist) to easily define “highlights” that change color.

Originally, the method was to create a second texture which acted as a mask over objects. White areas in the mask would get colored in during gameplay. This is a problem, however. To implement this in unreal engine, it would involve a separate material instance for every single frame of animation that used the effect. That’s a pain in the ass to setup, so we went with a simpler approach.

One of the main points of the art style is that it is almost entirely black, white, and shades of gray. This means we are wasting most of the color information in our textures. Knowing this, I created a material which changed what each color channel is used for.

The red channel in any texture would act as the mask, where a red value of 0 means no color overlay and a value of 1 means the full color overlay (therefore, 0.5 means a half-bright color overlay, and so on). This leaves the green, blue, and alpha channels. Alpha is kept as transparency, since we still need that, while green and blue are multiplied together in order to give us 65536 shades of gray. The result is some strange looking textures, such as this frame from an explosion animation:

In game, however, it looks just fine:

You can see that all of the blue in the original has turned into white, and the red has turned into the currently selected color (blue in this case). To see how the full animation looks with coloring, check out Mac’s previous post.

If you want to use this effect yourself, here’s how the material setup looks:

The node at the top left is from a material parameter collection, which is what we use to define what the current color is in the level.

That’s all for now, thanks for reading!

[chromatus-game]

[chromatus-game]

Building the world of Chromatus, one building at a time.

[chromatus-game]

BOOM

Things explode, in lots of different colors.

[chromatus-game]

Pixelated Color Doughnuts

Earlier I posted an image of what I now realize looks like a pixelated colorful doughnut. It’s actually a color wheel, which will end up being central to Chromatus.

Along with that image, I mentioned that it took me around 4 hours to come up with that image. Here’s a little bit about why it took me so long and how I generated it.

For a multitude of reasons, I needed to come up with an algorithm to generate a pixelated color wheel on the fly. Coming up with the algorithm in Unreal engine would have been a big pain in the behind, so I turned to another tool in my arsenal: Wolfram Mathematica. For those that are unfamiliar, Mathematica is a programming environment that includes a massive standard library focused on mathematics (among many other things). It uses a functional-style language known as the Wolfram Language.

The first order of business was to come up with a set of functions that would give me a color value based on where the pixel I’m drawing is. This is a fairly simple set of functions:

I can then easily feed an angle to these three functions to generate a color value:

Next I need a function to adjust the color based on how far from the center it is. This also makes sure we aren’t dividing by zero (if we are, we just use the value of zero):

I set a limit of “pixels” up to to 7 units away from the center which is why you see the magic number 7 in there.

Here’s the final function I use to generate colors:

That’s it for the colors themselves; creating those was quick. The rest of my functions were developed heavily through trial and error, and unfortunately I don’t have a great explanation of how they work.

What I will say is that GenerateRect converts polar coordinates (angle and distance from center) to Cartesian coordinates (x and y) in order to position the rectangles (pixels). GenerateRing creates a color and a rectangle for a number of angles, defined by the equation 360/(16+4*dist) where dist is the distance from the center. Adjusting that equation changes how the final result is filled in.

Finally, I used Mathematica’s Manipulate function to vary some of the parameters when generating the wheel:

Once I was satisfied with how it looked in Mathematica, I had to port all of the code over to Blueprint.

To give you an idea of what it looks like in Blueprint, here’s the FindBlue function:

Here’s the GenerateRect function:

If you want to check out Mathematica, I highly suggest looking at Wolfram’s website. It includes, in my opinion, great documentation on all of what Mathematica can do.

If you can’t afford a Mathematica license, fear not! You should check out Jupyter which is a very similar environment except it’s free and open source (it also uses Python instead of Wolfram Language). If you want something a bit simpler, I highly suggest looking at Processing.

That’s it for now, thanks for reading!

[chromatus-game]

Prototyping a thing. Would you believe this took around 4 hours for me to make? Yeah, this was procedurally generated and it was way harder than it should have been.

[chromatus-game]

The beginning

Hello there! My name is Sam, and I’m the programmer for Chromatus. Mac and I will be posting all kinds of stuff here as we develop the game.

We are very very early in the development process (barely past the concept stage!) so there isn’t much to talk about yet, but here’s a cool image from Mac:

We’ll be posting plenty of development updates as we go along. Make sure to check back often!