Notifications
Article
Color Runner Design Teardown
Updated a year ago
95
0
An explanation of the game
Summary: The object of this infinite runner is to toggle between two colors at the press of a button (or touchscreen) to counter oncoming hazards and survive as long as possible.
1. The player character. Toggling colors changes the color of this character (in this case it would toggle between red and blue). The colored stripe on the track also changes to match the player color for maximum visibility.
2. Player Health. The game ends if this hits zero. When a player levels up there is a probability of dropping a health pack (pictured below) that has an inverse relationship to the player health. For example, if a player reaches the next level with 80% health there will be a 20% chance of dropping a health pack. 1% health is a 99% chance to drop health, etc. Health heals 10 points out of the 100 health. Players must match the color of the health item to pick it up.
3. Level progress bar. This bar fills up with white (as seen on the left of figure 3) to show progress and is driven by the score (figure 4). Its position on the screen keeps it out of the way but the white makes it very visible to the player even when they are concentrating on the action.
The following occurs when a player reaches a new level:
  • The level progress bar resets.
  • The two main colors change to give the game visual variety. The two colors are always complementary move their way around the color wheel to keep the change gradual. This is done through code to eliminate the need to save every color combination manually.
  • Any hazards remaining on the screen disappear to make way for the newly colored hazards and to give the player a breather.
  • A single health item is dropped if the random chance is in the player’s favor.
  • The game speeds up. The speed maxes out at a certain point to make sure the game is always playable even at high levels.
  • New hazard or game mechanic is introduced (if applicable).
4. Score. Increases as the player goes through the game and drives the level progress.
5. Barrier. The most common hazard. Simply matching the color lets the player pass through safely. Not matching the color damages the player. This is what the player faces in the first couple levels.
6. Flying Enemy: Hovers at a set point on the screen and fires projectiles at the player. Matching the color of the projectile flings it back at the enemy, not matching the color damages the player. After a few hits the enemy dies. This enemy is introduced after the first few levels. I have set up colliders and written a script to make sure that the projectile will never hit the player at the same time as another hazard to keep player success possible, even if difficult, in every scenario. The image to the right shows a frame of the animation this enemy does when damaged. The body turns red, the wings flare up and the pupil grows wide.
7. Spinning blade. Constantly rotates as it approaches the player and the player must anticipate what the color will be when the player runs into it. Matching the color passes the player through safely, not matching the color deals damage to the player. This is introduced in later levels.
Other notes:
● The player being damaged causes a pulse of red to appear on the edges of the screen in the player’s peripheral vision (pictured below) and is accompanied by a sound effect. This is very visible to the player but doesn’t get in the way of the action.
● An alternate barrier exists (pictured right) where the player can choose either color to pass through with. One of the colors will do nothing and let the player pass through, the other color will give the player a temporary speed boost. The speed boost makes the game more difficult but also gives the player a x2 score multiplier. The running animation also changes to where the player’s arms lift backwards and stop swinging to show an increase in running speed (pictured below). This speed boost lasts for a few seconds.
● The structures in the background move to the left gradually with a parallax effect for different layers.

Tags:
Nicholas Tillman
Unity Certified Developer - Designer
5
Comments