Every game goes through several iterations over the course of its development. Iterations can range from involving minor tweaks to the numbers in a mechanic, to complete gameplay overhauls. The most fun to see are iterations that involve major visual revisions.

Color Balls

After all the ideation stages, deciding on technical stack, and honing the scope of our first project, John (zoator) and I arrived at the minimal concept of Color Balls.

Color Balls is a high-speed anti-gravity racing game with a colorful twist. Set in a vibrant abstract universe, the colors of your ball and the world determine how fast (or slow) you get to go. Modify the track with bright colors as you zip through tunnels planning the perfect route for your next lap.

While the wording of that pitch has changed over the course of development, we arrived at that core concept at the very start. We needed to see how it held up.

First Prototype

We needed to see if our core concept would be fun enough to build into a first game. I took a two-week vacation from my day job during which we cranked this first prototype out, to share with friends who knew we were working on this project.

Note the strong presence of a lot of vanilla Unity visual settings, materials and UI. The painting mechanism is based on triangles on the singular level mesh treated as submeshes that can be assigned a different material. We used a different material for each of the eight colors (CMYK, RGB, none). This approach has several technical flaws, but it was relatively quick to come up with and implement, and it sufficiently tested the core idea of the game: is it fun to try to strategize around picking colors, placing down colored trails to speed you up next lap, while dodging obstacles?

We explained the premise of the game to our gamer friends and handed them this prototype to try out and tell us their answer to the above question.

The answer was a pretty solid “Yes”, so we moved on to the next iteration.

First Official Alpha

We wanted to see how well we could communicate the concept of the game and see if players enjoyed it when we weren’t handholding them through the experience. We wanted objective feedback on the game. For this we needed a cohesive gameplay experience paired with a survey with specific questions that could inform our future design direction. It was important to improve the visuals enough to at least not distract them from the gameplay, so that we could focus on the questions that were important to us at this stage: understanding the game mechanics, good controls, and having fun.

We did away with the Unity UI replacing it with our first pass at an in-game UI. Cleaning up the lighting helped a lot, made the paint look less blocky with some quick shader magic, and made the obstacles distinct from the level. We fixed the UVs on the level so that the texture better indicates the direction the level will be going in.

Closed Alpha

This was the first major graphics overhaul of the game. We wanted to settle on a visual style that was clean, within our scope, and complemented our gameplay. In addition it involved a UI overhaul which is an important part of the visual style in a racing (-ish) game. While at it of course we also gathered feedback on lots of gameplay and design aspects.

We got some help from various freelance artists for a few assets, but we didn’t set aside a large budget to work with graphics at this stage as we knew we’d replace it soon. Most of the improvements are technical – lightbaking, a refraction shader on the obstacles, depth of field scatter, particle effects. The level bump and texture was made more subtle and the camera angle was improved.

This included a revision to the UI, especially our unique UI element, the “Color meter” which shows how much paint you have available to work with. The curved speed and timer meter better suited our aesthetic of subtle curved edges and color neutrality except where related to the core game mechanic.

Of great significance is the shader we use on the level mesh (and also encodes the level paint). This version did away with the triangle-and-submesh-based coloring, in favor of decal masks with pixel-wise application. This allows us to have smoother paint trails and more flexibility in the level design. The level/paint shader is a critical part of our game as it contains the entire core mechanic, in addition to being the most visually significant part of the player’s experience, so we are constantly iterating on this for both technical reasons as well as visual appeal.

First Beta

We wanted to tie things together in a cohesive experience for the first time, with a main menu, music (by the awesome Jered Rutan) high scores, medals and level progression, so we could finally move into ‘beta’. Of course, many visual updates snuck in.

We spruced up the particle effects, implemented full menus with hover effects, load bars, scrollable high scores and medals. This version also tweaked the UI where we removed the speed gauge (a questionable decision), added lap timers and brighter particle effects to the color meter.

We made some major gameplay changes to this version which also impacted the visuals, as can be expected in a game with ‘Color’ in its name :)

In previous versions, you needed to pick up a certain amount of a color before it had an impact on your ball. From this version colors change right away when you pick one up. This created dynamic gameplay which rewarded split-second decision making, reflexes and control in addition to the strategizing and puzzle-solving. However this necessitated starker feedback between “good” and “bad” obstacles and paint as these could switch roles faster than the player could mentally process which colors are good or bad the moment they gained or lost a color. To do this, we implemented a saturation factor to the level/paint shader which heavily desaturates “bad” colors. We also added support for a “splat-map” which adds some randomness to the edge of the trail the ball leaves to show paint splatter.

Obstacles now have properties based on color as well (boost if you match, slow if you don’t) instead of always being bad. We could no longer use a standard orange for them, integrating color in their shader. They became harder to distinguish from the level, so we incorporated a black border along the UV and wherever an obstacle intersects with the level mesh, so they had a cartoon-like contrast (You can see this around 00:47 in the video). They also have a “saturation” effect for good vs bad colors similar to the paint.

You’ll notice the light-baking, depth of field and blur are much subtler in this version. This was mostly for gameplay clarity, although we miss the aesthetic effects of having those cranked up like we did in the previous version.

Greenlight Trailer

It was time to put our game ‘out there’. We felt the visuals were not quite pop-py enough to suit a Greenlight trailer, so we had to do some revisions. Here’s what our trailer ended up looking like.

We added support for cosmetic cameras to get style-shots, which we will also use in a replay feature down the line. The particle effects for striking an obstacle, picking up paint, laying paint, and being sped up or slowed down were heavily upgraded, with effects for each color. We added custom meshes for obstacles that weren’t just stretched cubes.

As always the level/paint shader saw major revisions. Note the organic bumpmap of painted regions overriding the level bump. The paint splatter was toned down, and now also randomly changes width to be less distracting. The “strips” from which the ball picks up paint have a flowing normal map to look like a pool, and also have glowing borders so that they’re easier to notice. We added a variety of bumpmaps, while subtle to add more personality to different levels.

We upgraded to Unity5 for this revision, which resulted in breaking our refraction shader for the obstacles, unfortunately. We were under time pressure and couldn’t fix this before publishing our trailer. It had a subtle impact, but noticeable. Unity5’s lightbaking tools also left much to be desired within our usecase, so that got tabled as well. We relied on additional dynamic lights and cameras to compensate. A lot of the work in this iteration was also setting up the toolchain to efficiently capture lots of repeatable, high quality footage to produce the trailer using the best clips while iterating on the graphics in parallel.

Next: Onboarding Beta

We are in the process of putting together a closed beta focused on onboarding and first-play experience, so the UI, menus and level/paint shader clarity features will take the front seat.

Conclusion

Graphics polish can go on forever. A game can always look better. We try to prioritize our upcoming tasks on the project based on the impact they’ll have to the final experience, and the next milestone. All the way to release we will be working to understand our tools better so we can also inch the product closer to our vision graphically as well.

It’s important to note that in each of these iterations, there was a lot of work that went into technical improvements, gameplay design, level design, tools implementation, performance optimizations, UI concepts, and a host of other things that don’t directly influence the graphics. However this post was intended to focus on the visual evolution, which is certainly not done yet! Stay with us as we publish more updates of our process and results.

Let us know your thoughts on this post

« Designing New Mechanics

Return to the Color Blog

Color Balls has been Greenlit on Steam. Thanks for your support!

Coming soon for PC and Mac