This is post #3 in the series “Designing New Mechanics”

Intro // Communication I // Communication II // Communication III

In the last post we introduced the concept of Communication of a new mechanic in mechanics-oriented design, presenting it in the context of an Overwatch ability with dedicated UI to answer the “Why?” for choosing to design dedicated UX, namely:

  • Having maximum relevant information about the mechanic at any given time is critical to player performance/enjoyment
  • Relevant mechanic information is critical during a significant majority of playtime and changes constantly
  • Relevant mechanic information presents several challenges for players to keep track of with ‘traditional’ UX

In this post we’ll talk about the challenges we’ve taken into consideration for Color Balls’ core mechanic justifying a dedicated UI.

Color Balls: The Color System

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.

As a mechanics-oriented indie title, our elevator pitch pretty much revolves around our core unique mechanic, the Color System. However it still leaves a lot of unanswered questions about the details, which we must answer with our in-game UX.

The Color System Spec Sheet

The core color mechanic doesn’t change across our various game modes, so we will consider the standard set up for a session of Color Balls: the Time Trial. Within a set number of laps (eg: 3), you must try to complete the track in as little time as possible, with 3 possible medal levels to evaluate your performance. To understand the thought process behind the design of the UX and UI, let’s start with the comprehensive final design specifications of the Color System.

  • The game involves 8 possible colors:
    Tier 0: White/None; Tier 1: Cyan, Magenta, Yellow; Tier 2: Red, Blue, Green; Tier 3: Black
  • The player’s ball will always be one of these 8 colors (the ‘ball color’)
  • The ball gains color at a fixed rate over distance ridden over “color strips” scattered throughout the levels
  • The ball will lose each of the contained colors at a fixed rate over distance ridden over non-strips.
  • The ball color is determined by the composition of T1 colors stored in it. 2 T1 colors result in a T2 ball color, all 3 result in a T3 ball color
  • The ball color can “store” the same maximum amount of each of the 3 T1 colors (Cyan, Magenta, Yellow)
  • The ball will gain all component T1 colors when ridden over a T2 or T3 color strip
  • The ball color changes by either gaining a T1 color that was previously empty, or completely depleting a stored T1 color
  • The ball color will determine the color being painted behind it as a ‘trail’. None leaves no trail
  • The ball color will determine which trail colors boost it and which slow it down when ridden over. Trails of the same color, or any lower tier components will boost, others will slow down. None has no effect
  • Trails persist, until ridden over with a new trail
  • When boosted or slowed, it is proportional to the tier of trail color
  • The trail color already on the level is what affects the ball, not the trail currently being painted

That’s not intended to make a lot of sense right away, but we’ll refer back to it as we go through the design decisions for our UI.

How/Why those Specs?

We will get into the process and stages through which we arrived at these specifications for the design of the Color System when we talk about the Creation aspect of new mechanics. For now let’s just say that over our playtests and within our technical constraints, this was what we arrived at that worked best for the game within our original vision for the gameplay.

Challenges

Ideally, a mechanic is communicated to the player using traditional UX paradigms found in other games of the same genre. This keeps the visuals uncluttered and elegant. But as we described in the last post, players understanding the relevant information of the mechanic quickly may present various challenges under traditional/invisible UX.

As you can guess, we’re heading towards a dedicated UI for the Color System. Why?

The details of the design for dedicated UX comes down to the challenges faced in helping players quickly see all necessary information about the mechanic.

Racing Powerups

Most abstract/scifi racing games involve powerups and boosts as features “gained” by the racer, and the Color System encompasses the role of many powerups - It is how you get strategic boosts, and you choose your route optimizing “powerups”. The advantage to categorizing mechanics as powerups is that it is a popular and thus intuitive paradigm in racing games - ride into this object to gain an effect, either instantly or over a short period of time. The UX necessary to communicate powerups is well-understood, and it usually doesn’t require dedicated and uniquely designed UI. The most UI necessary would be a meter to show how much of the powerup effect is remaining, if it is the kind to last over a period of time.

From the mechanics of the Color System, it may sound like it’s a few powerups of slightly different flavors, and we could avail of the standard powerup paradigms and use conventional UX and UI to keep the experience streamlined and familiar. This would be ideal.

Dual Role Powerup: Boosting + Affective

Racing Powerups usually serve one role, either boosting or affective. A boosting powerup is one that boosts your vehicle’s existing capabilities, usually speed, durability, a points multiplier, etc. An affective powerup is one that allows you to affect the environment or other players, such as destroy barriers, lay traps, shoot cannonballs, etc.

The Color System is both, simultaneously and independently. If you’re riding over unpainted level, it’s purely affective, if you’re riding trail the same color as the ball it’s purely boosting, and anything else it’s a combination of both, being boosted (where “boosting” can also be negative!) and also affecting the level behind you.

Wipeout is known for its array of “affective” powerups, mostly in the form of weapons.

Powerups that Interact

In games with multiple powerups, they are usually independent and stack with each other. In some cases they simply override previous powerups. This is very straightforward to grok – Powerup A gives you boost X, powerup B gives you boost Y, if you pick both up in quick succession, you have boosts X + Y, or if overriding, just Y.

However in the Color System, picking up cyan followed by yellow doesn’t just result in 2 x T1 boost (C + Y), it results in either T1 boost (C or Y) based on if you’re riding a matching trail, OR a T2 boost (green). This is not a simple linear combination of “two different powerups”, but involves a conceptual interaction between the ideas of the powerups.

Mixing: Natural but Unintuitive

The way the colors interact is ‘natural’ in that it is based on how paints/pigments interact in nature, based on the pure physics of light in the electromagnetic spectrum. However, this is a fascinatingly rare aspect of nature that is widely experienced but isn’t very intuitive. John and I have worked on Color Balls for a few years now, so the language of primary color interactions is second nature to us – complements, pigments, light vs paint, subtractive and additive mixing. To explain the physics of colors and the various unintuitive complexities would require a dedicated post (look forward to it!).

This color wheel diagram summarizes the physics of pigment interaction (subtractive mixing):

The physics-based color wheel showing how subtractive mixing works, used as is in Color Balls.

In fast-paced games, however, one needs to know the answer to mechanical queries in a split second. For example in Overwatch, as mentioned in our last post, “will I have a charge of Blink back up by the time I reach this cliff?” needs an instant answer to make an appropriate decision before jumping off the cliff. This is why the center-screen UI plays the role that it does. In Color Balls, trying to answer “If Black loses Yellow what am I left with?” instantly from memory, even with complete conceptual understanding of the theory of paint-mixing, is far from trivial, and can take a few seconds.

A player can be trained up in these things with experience just like keeping track of your skill cooldowns in your head in a game like Overwatch. However, pivotal mechanics such as these should require less burden of knowledge and expertise on the player. The goal is to have as broad an appeal as possible, without ruining the experience for skilled players.


These challenges make the Color System extremely distinct from typical racing game powerup modifiers. In addition, the Color System is not just a bonus or temporary effect, the player’s gameplay is centered around it pretty much the entire time. This means it permanently occupies player mindspace, and we need to reflect this in how it is treated in the UX to make it as smooth as possible.

In the next post we’ll discuss various iterations of the Color System’s dedicated UI (which we call the Color Meter) and the UX around it, and how we came to learn all of the above as we observed how players responded to our various iterations.

This is post #3 in the series “Designing New Mechanics”

Intro // Communication I // Communication II // Communication III

Let us know your thoughts on this post

« Communciating New Mechanics: Iterations

Return to the Color Blog

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

Coming soon for PC and Mac