How To Make a Color Switch Game in Unity 2020 [C# Tutorial Series]

Hello! Welcome to WeeklyHow. This will be our very first tutorial for the year 2020 and we’re super excited to start this year by giving you a set of lessons that you can use to produce awesome games in the future.

For this tutorial series, we’ll be creating a replica of the game that you have probably played already, and that is the color switch game.

Have you heard of that game before?

If not, then let’s introduce this game before we proceed to the lesson.

What is Color Switch Game?

The color switch game is an obstacle-course game that is very easy to understand but very challenging to play. This game is a little bit similar to the game Flappy Bird, you tap your mobile screen and the ball will jump.

For this game, you will have to match the color of your ball to the color of the specific section of the rotating shape.

Sounds confusing?

Well, the rotating shape is divided into four sections. Each section has a different color.

For example, the first section is red, the second is yellow, the third is green, and the fourth section is blue. In this case, the color of your ball could be green.

You can only pass through this shape if you jump through the section where the color is green.

For this tutorial, we’ll be starting off the setting up our project so go ahead to your Unity game engine and create a new project.

Creating Color Switch Project with Unity 2020

Make sure you have set your project to a 2D template and project name to whatever you want to call your project. In our case, we’ll call it Color Switch Replica.

Hit create.

Setting The Camera

Since our game will have multiple colors, our camera background should be set to a color like black because you don’t want to make your game so bright with colors that’ll make the player go crazy.

So go ahead and select your camera game object.

Proceed to your inspector and set the background to something like #353535.

Setting up color switch replica camera background

Save your scene.

The Player

The next thing that we need to do is to set up our player. We’ll be using a 2D sprite for our player so it will be much easier for us to change its color to whatever color is possible.

So go ahead to your hierarchy, right-click, and select 2D Object and then select sprite.

Let’s rename our New Sprite to Player.

Next, navigate to your inspector and change the sprite to knob.

Making the player for the color switch game in Unity 2020

Player Script

Create a new C# script and open that with your code editor and copy the following code.

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class Player : MonoBehaviour
    public float jumpHeight = 6f;

    public Rigidbody2D rigidbody;

    void Start()
        rigidbody = GetComponent<Rigidbody2D>();

    void Update()
        if( Input.GetButtonDown("Jump") || Input.GetMouseButton(0) )
            rigidbody.velocity = Vector2.up * jumpHeight;
Code language: HTML, XML (xml)

In the code above, we have declared two variables, one float, and one Rigidbody 2D.

Inside the update function, we simply added a condition that will make the player go upwards once the button jump is pressed or if the left mouse button is clicked.

We have mentioned that we added a Rigidbody to our script which means we’re going to require to add a Rigidbody component to our player.

So save your script and go back to Unity.

Select your player game object and in the inspector, click add component and look for Rigidbody 2D under the Physics 2D.

Change the value of the gravitational scale to 3. Then go to Constraints and check the Freeze Position for X and Freeze Rotation for Z.

Adding Rigidbody 2D to 2D sprites in Unity

Next, since we’ve added physics to our player, obviously, we’re gonna need to add a collider. So select add component once again and look for Circle Collider 2D under the Physics 2D.

Change the value of Is Trigger to checked and the value of radius to 0.08.

Adding Circle Collider 2D to 2D sprite using Unity 2020

Make sure your Player script is assigned to your Player game object.

Adding the Player script to the 2D sprite in Unity

Save your scene.

By running the game, you should be able to make the player jump by pressing the spacebar key or the left mouse button.

The Rotating Color Wheel

Now that we have our player ready, let’s work on the obstacles for our player.

There are many shapes that you can use for the obstacles. You can make a square, a triangle, or any polygon shape that you can think of but for this tutorial, we’ll make it very simple, we’re going to create a rotating color wheel or circle where our player can stay inside the circle while waiting for his color.

To create your own shapes, you’re going to need a photo editor like Photoshop.

Any editor is fine but we highly recommend you use Photoshop since Unity editor can read PSD files.

You can skip this step by downloading the PSD file below but if you’re interested to know how to create a shape from scratch then you may proceed to read.

Creating the shape

To start, open your photoshop and set its size by 512 pixels in width and 512 pixels in height.

Making color switch wheel with Photoshop

Next, press U to use the shape tool, then right-click to its icon and change from Rectangle shape tool to the ellipse tool.

Creating a color switch wheel with Photoshop ellipse tool

Next, click on the canvas to open the create ellipse window.

Set the width to 450px and height to 450px.

Photoshop create ellipse window

That should create a new ellipse in your canvas.

creating new ellipse shape with photoshop ellipse creator

Next, press C to select the crop tool, right-click to its icon and change it to slice tool.

Using slice tool with photoshop

Set its style to fixed aspect ratio and its width to 1 and height to 1.

using slice tool to set fixed aspect ratio

Next, right-click onto your canvas and select Divide Slice.

dividing slice in photoshop

Check the divide horizontally into and divide vertically into.

Then, set its slices down to 2 and slice across to 2 as well.

Slicing and dividing slices in photoshop

Press OK.

You should have your canvas divided into four squares.

Next, navigate to your layers and click the eye icon beside your background layer to disable it.

disabling layers in photoshop

Next, select your ellipse layer and press CTRL + T to transform the layer.

Then, drag the shape to the center.

Make sure that the pivot point in the center of your shape is placed in the center of your canvas.

Using slice tool to divide shapes with photoshop

Next, with your ellipse layer selected, press CTRL + J three times to duplicate the layer.

By doing so, we should have 4 layers of ellipses.

Name the ellipse layers by the following:

  • Red
  • Blue
  • Yellow
  • Green
Duplicating layers in photoshop

Next, with your Red layer selected, press the M key to select the rectangular marquee tool.

Then, select the first square on the canvas. Make sure that your marquee selection covers the first square without exceeding.

And then, navigate to your Layers and press the box with a circle icon to create a mask or you may navigate to Layer > Layer Mask > Reveal Selection.

Masking layers in photoshop

Do the same process to the rest of the ellipses but use the other corner of the slices. For example, for the blue layer, you use the top-right of the slice. For the yellow, use the bottom-left, and Green is for the bottom-right.

You should have the following.

Masking duplicate layers in photoshop

Next, change the color of the shapes based on its layer name.

Make sure you take note of the hex value of each color. You will need them in Unity later on.

To change the color of the shape, just double-click on the layer thumbnail.

Changing the colors of shape in photoshop

Once again, save the hex value of the color. In our case, the layer red gave us a hex value of fc5050.

Do the same process to the rest of the shape.

As a result, we have the following hex values:

  • Red – #fc5050
  • Blue – #6372ff
  • Yellow – #ffed29
  • Green – #77f974
Getting the hex value of shapes color in photoshop

Next, we’ll reshape our ellipses to make it a ring instead of a full circle.

With your Red layer selected, press U to select the ellipses tool once again.

Then, navigate to the toolbar and change the Fill to transparent.

removing the fill of the shape in photoshop

Next, change the stroke it from transparent to color wheel and paste the hex value that we had for the color red.

making a dough nut shape in photoshop

Press OK.

Next, change the value of the stroke’s width to 35 pt.

changing the width of the ellipse shape

Do the same process to the rest of the layers.

You should have the following results:

make a ring in photoshop with different colors

Now that’s finished, let’s save the layer one by one because we’re going to use these colors as a sprite in Unity.

In your layers section, click on the eye icon to make them all invisible except for the layer Red.

masking a ring shape in photoshop

Next, save the image by pressing CTRL + Shift + S and name the file red.psd

Next, enable the Blue layer and disable the Red layer, then save the file as blue.psd.

Same with the Yellow and Green.

What we’re doing here is we’re separating all the shapes into different PSD files because we’re going to use each file as a sprite.

exporting PSD files

Next, we’re going to import these PSD files so go back to Unity editor and create a new folder in your assets.

Name the folder Sprites.

Inside the Sprites folder, right-click and select Import New Asset…

Then navigate to the PSD files, in our case, we saved them in our Pictures libraries.

Importing PSD files in Unity

Select all and press Import.

You should see them in your sprites folder.

Importing sprites in unity with photoshop

Creating the color wheel game object

That that we have the sprites, let’s drag all of them into our hierarchy one by one.

creating color wheel game object in unity

Next, create a new empty game object and name it color wheel.

Then drag all the colors game object into the color wheel game object.

Making an empty game object as a parent of game objects

With your Color Wheel game object selected, you should be able to rotate it in the Z-axis just like below:

Next up!

We’ll end up this tutorial here for now. In the next tutorial, we’ll begin setting up the obstacles and make it rotate seamlessly.

We’ll also write a script that will trigger a function once the player hits the wrong color.

For now, let us know in the comments below if you encountered any errors and we’ll try to help you.

1 Comment.

Leave a Reply