You are Here:Home>>3D & Motion Graphics>>Unity Tutorial – How-to Create a Simple Configurator

Unity Tutorial – How-to Create a Simple Configurator

By | 2017-06-23T14:19:04+00:00 Apr 17, 2017|3D & Motion Graphics|

This tutorial is aimed at beginners who wish to learn how to create simple interactive 3D applications using Unity. A configurator is a program that allows the user to customize an object. For example, a simple car configurator will allow the end user to change the colors of the car in real-time. In this tutorial, we will create a simple wheel configurator that allows the user to change colors and swap wheels. I will be referring to the wheels as rims although they are technically not the same.

Pre-requisites:

Download

Source Files

Basic knowledge of object-oriented programming will be needed as we will be dealing with classes, objects, properties, and methods.

Source files are in a zip file called “Source”. Extract the file to get a folder by the same name. The folder contains two folders, “Resources” and “Final Project”. The “Resources” folder is what you will need to follow along with this tutorial.

Chapter 1 – Setting up the scene

Step 1 – Create a new 3D project

Start Unity and create a new 3D project. You can do this by clicking on “New” and a new screen should appear. Then give an appropriate name and location for the project, like in the bellow image and click on “Create project”. The main screen should appear after some seconds.

Unity3D create project screen

Step 2 – Add assets to the project

You can drag and drop the supplied “Models” folder (present in the folder named “Resources”) into the assets panel in the Project window. Wait for some time as the assets are being imported.

Importing Assets

 Step 3 – Create a parent GameObject for the wheels

Create an empty GameObject by right-clicking on an empty area in the Hierarchy window and clicking on “Create Empty”. Name it something meaningful. In this case, I have named it “Rims” as it is the subject of our configurator. You can rename an object by clicking on it and then clicking on it again after a short pause.


Step 4 – Set the position of the GameObject

Go to the Transform component in the Inspector window and set the position to 0 for X, 1 for Y and 0 for Z.

Step 4 - Set the position of the GameObjectStep 5 – Add the models as children of the “Rims” GameObject

Drag the imported models over the GameObject so that they become children of the parent GameObject. You can Shift + click to select multiple assets.

The models should appear in the Scene window.

Ensure that you are looking at the model from the same direction as the camera. You can click on the pointer next to the cube to shift views. Shift to the “Back” view by clicking on the pointer opposite to Z.

Step 6 – Rotate the models to face the camera

Select both the models in the Hierarchy window, then go to the Transform component in the Inspector window. Set the rotation of the Y component to 180. This is to make sure the correct side of the models faces the camera.
Step 6 - Rotate the models to face the camera

This step varies depending on the model. Some models don’t need this step. Other models might be rotated by 90 degrees automatically. It depends on how the model was prepared in the 3D modeling tool.

Step 7 – Disable one of the rims

Click on “Rim6” and disable it by going to the Inspector window and clicking on the small checkbox next to its name.

Step 7 - Disable one of the rimsStep 8 – Create a dropdown

Right-click on an empty area in the Hierarchy window and select UI > Dropdown and click on the Dropdown GameObject. Rename it to “ColorDropdown”.

Step 8 - Create a dropdownStep 9 – Reposition the dropdown

Ensure that the “ColorDropdown” GameObject is selected and go to the “Rect Transform” component in the Inspector panel. Set the Pos X to 200 and Pos Y to -130. This is to reposition it on the screen.

Step 9 - Reposition the dropdown

 

You can click on the “Game” tab in the top of the screen to see how the UI looks.

 

Step 10 – Assign options to the dropdown

Step 10 - Assign options to the dropdown

Go to the “Options” section of the Dropdown component. Rename the options to colors of your choice. For this tutorial, I have renamed them to Red, Blue and Green.

This is how your Game window should look like.

Step 10 - Assign options to the dropdown
Step 11 – Add a script to the “Rims” GameObject

We need to create a script that makes changes to the scene based on the user’s interaction. Create a new folder in the “Assets” panel under the project window. Do that by right-clicking on an empty area in the assets area and clicking on Create > Folder. Rename it to “Scripts”. Go into the folder. Create a new C# script. Name it “Interaction”. We need to attach the script to the “Rims” GameObject. You can do that by dragging and dropping it either over the “Rims” GameObject or in an empty area in the component section of the “Rims” GameObject (you need to have the GameObject selected for this).

Step 12 – Open the script

You can do this by double-clicking on the created script in the assets panel. By default, MonoDevelop is the associated program to open this file from within Unity. This is how the script should currently look like.

Step 14 - Open the script

You can copy and paste the code from the supplied “Interaction.cs” file or start typing it yourself by following along the coding parts of the tutorial.

Chapter 2 – Changing colors

Let me quickly give you a hint of what we are going to do. In Start(), put this line of code:

Save the file. Go back to Unity. Now, click the Play button. Notice how the color turned red.

Exit play mode by clicking on the Play button again. Now, go back to your code editor and remove the line of code we added. Remove Update() as well.

Step 1 – Create a list of the colors we will use

This is implemented using a simple List of type Color. Note that, for using a list you will need to have System.Collections.Generic imported if it is not imported already.

We need to fill this list with the colors that we will be using. We can do that by using Add(). Let’s create a function called FillColorList() which fills the list. Put a call to this function in Start().

Whatever we put in Start() will be executed once when this interactive starts (assuming the script and GameObject are enabled).

So far your code should look like the following:

 

Step 2 – Store a reference to our color dropdown

Create an object of the GameObject class to store a reference to our color dropdown

Use GameObject.Find() to scan our hierarchy and find an object with the specified name and store it in ColorDropdown.

 

Step 3 – Create variables to store current properties

Create two integer variables, “currentColor” and “currentRim”. Initialize currentRim to 0. This is so that the color change will be applied only to the currently selected rim.

Step 4 – Add an include for accessing UI components

We want to access the values of the dropdown. For this, we will include a package, “UnityEngine.UI”.  To the list of the includes, add this line:

Step 5 – Create a function for changing colors

Create a public function, “ChangeColor()”. Get the current value of the Dropdown component of the ColorDropdown GameObject and store it in the currentColor variable.

Get a reference to the color of the grandchild of the Rims GameObject and assign it the color associated with the current ColorDropdown value

What is happening here is: We are using the Transform component of the current GameObject to get references to its children. This component stores the object’s relationships with the world. The object’s position, rotation, and scale, as well as children, are stored here. Our current GameObject is “Rims”. We need to refer to the current rim. The value of the variable, currentRim is set to zero. GetChild(value) returns the child of the current GameObject at index denoted by value. In other words, GetChild(0) will return the first child, GetChild(1) will return the second child and so on. We need to get a reference to the child of the transform returned by GetChild(currentRim). If you go back to Unity and look at the hierarchy, you will see that there is a single GameObject, “default” under the Rim5 and Rim6 GameObjects. This means that they both have just a single child. Once we get a reference to Rim5 or Rim6, all we need to do to access their child is GetChild(0).

To get access to the color used on the rim, we need to access the Renderer component which is done by GetComponent<Renderer>(). The renderer contains the material property which in turn contains the color property. This color property accepts a value of the type, Color. Recall that our list, “colors”, was of type Color. All we need to do is to access the current color from this list using an index. This index is currentColor.

At this point your code should look like this:

 

Step 6 – Assign a function to call when the option is changed

Go back to Unity and click on the ColorDropdown GameObject. Click on the plus symbol under “On Value Changed”. An entry will appear. Drag the “Rims” GameObject to the field reserved for a reference to an Object. Click on the “No function” dropdown. Select Interaction > ChangeColor().

Congratulations! You now know how to change the colors of a GameObject’s material.

Step 7 – Test your work

Click on the “Play” button. Click on the dropdown button in the “Game” window. Select another option. Watch as the color changes.

Exit play mode.

You can set a starting color by calling ChangeColor() in Start().

Step 8 – Save the scene

Click on File > Save Scene as…Give it a name, select the location and click on Save.

Save the Scene

Chapter 3 – Changing rims

Step 1 – Create a dropdown for the rims

For switching between the rims, let’s create another dropdown. Ensure that you are in the Unity editor. Select the ColorDropdown GameObject. Right-click on it and click on “Duplicate”. A new GameObject should appear. Now, rename this new GameObject to RimDropdown.

Duplicate Rims

We need to change the position of the dropdown. Go to the Rect Transform component and change the Pos X from 200 to -200.

Changing the Position of the Dropdown boxStep 2 – Change the options for RimDropdown

Go to the options section of the Dropdown component. Notice that there are currently three options. Select one option and click on the minus icon to remove it. Now, change the options to Rim1 and Rim2.

Rims Dropdown options

Step 3 – Creating a list of rims

Go back to the Interaction script. Create a list named “rims”, of type, GameObject. We need to populate this list. Create a function called FillRimList(). In our hierarchy, we have two direct children of the Rims GameObject. We just need to add these two children to the list. But let’s do it programmatically so that we can easily add more rims later. We will use a for each loop to iterate through all the direct children of our “Rims” transform.

Notice that I accessed the gameObject of the child’s transform. Put a call to this function in Start().

Step 4 – Selecting the rim to display based on the rim dropdown’s current value

Create an object of type, GameObject, called RimDropdown. Get a reference to our RimDropdown GameObject and store it in this newly created object.

Create a public function called ChangeRim() and add the following lines to it.

What these lines do is:

We hide the current rim. Recall that our currentRim variable is set to zero initially. This means we have set the index to point to the first rim of our rims list. We then use SetActive(false) which is a method of the GameObject class to hide or unhide an object. Note that this hide and unhide simply does not make it appear hidden; it also disables its functionalities. A disabled GameObject is not considered a part of the world so scripts attached to it will not work. You will also not be able to use GameObject.Find() to find a disabled GameObject.

The next line sets the value of currentRim to whatever value the RimDropdown’s Dropdown is set to. Now that we have a new index, we can just enable the rim located at this index in the list. This is what the third line does.

Add a call to ChangeColor() after the lines we added. This is to set this new rim to the color that we have currently selected.
Your code should look like this now:

 

Step 5 – Assigning a function to call when the option is changed

Save the script and go back to the Unity editor. Click on the RimDropdown GameObject in case it is not already selected. Go to the On Value Changed section and change the function to ChangeRim.

Step 5 - Assigning a function to call when the option is changedStep 6 – Test your work 

Click on the Play button. Now, click on any of the dropdowns. Observe the rims and colors change according to your will.Exit Play Mode.

Change Rims And Colors

Chapter 4 – Changing the background

Let’s change the background. This can be done using a “Skybox” in Unity.

Step 1 – Create a Skybox

Let’s add assets for the Skybox. Import the supplied “Textures” folder (present in the folder named Resources). You can do that by dragging and dropping it to the Assets panel. Now, let’s create a material for the skybox. Go back to the assets folder and create a new folder called Materials. Go into this newly created folder. Right-click on an empty area and click on Create > Material. Name it GradientSkybox.

Go to the Inspector tab and click on the Shader drop-down and then click on Skybox > 6 sided.

Adding Skybox

Step 2 – Assign textures to the slots provided

Click on the textures folder. We need to drag and drop textures to the slots provided. The “sides” image will be applied to “front”, “back”, “left” and “right”. The “bottom” image will be applied to “down”. The “top” image will be applied to “up”. If you don’t see these slots, you might have clicked something else in between. If so, go back to the Materials folder and select GradientSkybox again.

Adding Textures To Skybox
Step 3 – Apply the background to the scene

Go back to the Materials folder and click on our GradientSkybox material. Drag it to an empty area in the scene. The background should change. This is how your scene should look like now.

Applying Scene Background

Chapter 5 – Final changes and building

Step 1 – Scaling along with screen size

We need to ensure that our dropdown scales along with the screen size as we want the layout to look consistent across devices. To do this, first, click on the Canvas GameObject and set the UI Scale Mode under Canvas Scaler to “Scale With Screen Size”.

 Scaling Canvas

You will also need to set the Match property to 0.5 to match both width and height.

Canvas Scaler Script

Note that the UI dropdowns will shift after changing these settings. You will have to go back to the dropdowns and change the Pos Y of the Rect Transform to a greater value like -180.

Step 2 – Build a standalone app

Let’s go ahead and create a build which we can share with other people. There are various options to choose from. If an option is unavailable, you might not have installed it while installing Unity. Unity provides a button to download the appropriate module. If this option is not available, you can re-run the installer. For this tutorial, I’m going to create a Windows Build. Go to “File > Build and Run”. Click on “Add Open Scenes” (optional if you only have one scene).

Building Standalone App

 

Click on the “Build and Run” button. Create a folder to save our build to. Let’s call this folder, “Builds”.

Creating Standalone App

Now, go into the folder, give an appropriate name for the app and save your file there. Wait for some time as the build is being prepared. Click on “Play!” once done. Enjoy.

Unity3D App

Final result:

Unity3D Configurator Tutorial

Congratulations! You now know how to create a basic configurator. The capability to create and showcase things is amazing. There are more things to learn like changing textures of the wheel itself and rotating the model around using your mouse. Another thing you can do is to make this a smartphone app in which the user can touch to rotate the object.

The UI can get a makeover as well. Some models have unintentionally invisible areas on them as their correct faces are not facing the camera. Try to find a solution to it; you can use a shader. There is only so much I can teach anyone in a short tutorial.

Go out there and explore what more you can create and feel free to share it in the comments.

 

About the Author:

James Jacob Kurian is an engineer, artist and designer living and working in Mumbai. He is currently programming virtual reality experiences using Unity. He started learning Blender and Photoshop in 2010 alongside his studies as a hobby. Eventually, he started getting good at digital art/design and found himself working for clients across the globe. He has a passion for creating things which led him to diversify his portfolio across multiple fields. He also volunteered for a cancer awareness cause as well.

One Comment

  1. KeDar Ambatkar April 19, 2017 at 12:51 pm - Reply

    Nice James! Thanks for sharing.

Leave a Reply