Learn To Code In Unity – Color Switch Clone (Easy How To Guide) | Part 1

0
62

This post covers the Home Screen development of the Color Switch Game

What is Color Switch?

Color Switch obstacle game where the player has to tap a ball through various obstacles with coloured patterns, making sure that the ball matches the colour it goes through. Each time ball is passed through the obstacle the colour of the ball will change.

Color Switch Clone Development

In this post, we will learn to code the game in unity.

This game has three game scenes

  1. HomeScene – This scene will be loaded first when the game starts
  2. PlayScene – This scene will be loaded after HomeScene  where player can play the game
  3. GameOverScene – This scene will be loaded after the game ends.

This tutorial is divided into three parts, each part covering each scene. Part 1 will also be covering the initial game setup.

Color Switch Clone Game initial Setup

Tools required for development is Unity3d. Unity is a cross-platform game engine developed by Unity Technologies, which is primarily used to develop video games and simulations for computers, consoles and mobile devices.

Download Unity3d engine from here.

Install the unity3d engine and open it.

Click New to create a new unity project

Enter the details and click Create Project.

Now inside the Projects tab create the below folders.

  1. Prefabs – A Prefab is a type of asset — a reusable GameObject stored in Project View. Prefabs can be inserted into any number of scenes, multiple times per scene. When you add a Prefab to a scene, you create an instance of it. All Prefab instances are linked to the original Prefab and are essentially clones of it.
  2. Scenes – Scenes contain the environments and menus of your game.
  3. Scripts – This folder will have all the gaming scripts.
  4. Sprites – This folder will have all the images needed in the game.

 

How to Slice the Images Using Sprites Editor

  1. Download the homescene.png from here and keep it in the sprites folder.
  2. This image has all the graphics we need in the HomeScene.
  3. So we have to slice the image to individual graphics so that we can use them separately in our game.
  4. For this first select the sprite from the project tab. Now go to the Inspector tab select Sprite Mode as Multiple, Mesh Type as Full Rect and then click on Sprite Editor.
  5. A new window will pop up as sprite editor. Open the Slice Menu, Type should be Automatic and click Slice. The Sprite editor will automatically determine the boundaries of all the sprites based on the transparency.
  6. We need a single sprite for color switch logo instead of each character. For this, we will delete the boundaries of each sprite except one and will drag the boundary of that sprite to the whole logo and finally click apply to save the changes.

Development of HomeScene of Color Switch Clone

  1. Create 3 Scenes as mentioned earlier i.e. HomeScene, PlayScene and GameOverScene. Save them in Scripts folder one by one.
  2. Open the HomeScene by double-clicking it from the project tab.
  3. Drag the background image to the main scene.
  4. Now drag the logo on the scene and place it at the top of the main camera. You can change its position, scale from Transform Section in Inspector tab.
  5. For the simplicity rename all the textures.
  6. Now drag the play button and all the circles and place them on the play button. Also, rename them on for the simplicity.
  7. Change their position, scale from Transform Section in Inspector tab.
  8. Create 2 C# scripts in Scripts folder as Rotation1 and Rotation2. Add the below code to these scripts and SAVE THESE SCRIPTS

Rotation1.cs

Rotation2.cs

10. Select the smallCircle, under Inspector tab click on “the add component” button -> Scripts -> click Rotation1 script.

11. Select the mediumCircle, under Inspector tab click on “the add component” button -> Scripts -> click Rotation2 script.

12. Select the largeCircle, under Inspector tab click on “the add component” button -> Scripts -> click Rotation2 script.

13. Copy the smallerCircle and paste it twice. Drag each of them between the logo and change their scale so that they can fit between the logo perfectly. Rename them accordingly.

14. Select one of the smallLogoCircle and inside the inspector tab, uncheck the Rotation1 component(if present and checked). Add the Rotation2 script from add component -> Scripts option.

15. Save and Run the project. Voila..!!! your HomeScreen is ready.

EDIT:

We will be releasing the part 2 of this series very soon which will cover the playScene of the game.

If you liked our post please comment and share with your family and friends.

Peace..!!