How to Develop a non gaming app with Unity

Till now Unity has been considered as tool for developing Games. Until recently it was more suited for 3D game development. With addition of 2D support, lot of options opened up for the programmers. Now not only can you develop games but also develop non gaming apps as well using Unity. This tutorial will prove that Unity can be a serious contender in the cross platform app development market. It is because of its support for almost all popular platforms for app development.

The Temperature Converter App

The app which you are going to develop is a Temperature Converter.

As you can see in the screenshot of the app here, it will have a Title on top.

Here are the list of components it will contain:

Title- It will contain the title of the App which is Temperature Converter
Input Field- There will be an input field for temperature to be converted.
Buttons- Couple of Buttons are also added.
- Convert to Celsius Button- Button to convert the temperature to Celsius.
- Convert to Fahrenheit Button- Button to convert the temperature to Fahrenheit.
Text- A Text component to show the result after conversion.

Source Code

[activecampaign form=87]

Create a Project

There are few things which you should keep in mind while creating a project for non-gaming apps in unity. Make sure you choose “2D” instead of “3D”.

Choose the options as shown in the image above. If you are using Unity for the first time then you should be getting a screen like below.

For this tutorial you will be using the default layout. So let’s get started with the development.

Add Components to the UI

After creating the project you will see that only the camera object is added to the scene. So now you will need to add some components for the app.

Main Scene

By default a scene is created as untitled. Just name this scene as Main and save it in the folder names “Scenes” under the Assets folder of your project.

To add the folder right click inside the assets folder as shown below.

After clicking on the Folder menu Unity will create a empty folder. Rename it to Scenes. After you are done it should look like this.

Now you have to save the scene. To do that Select the Scenes folder. Now select File Menu and then select Save Scenes menu.

Now you will get a popup as below.

Make Sure you select the Scenes folder and name the Scene as

Main.

Canvas

To add further components you will need to add a canvas. To do that right click inside Hierarchy window in Unity and select UI, and then select Canvas.

After adding the Canvas the editor will look like this.

Main Panel

Now you can go ahead add a panel to the Canvas. Right click on the Canvas object in Hierarchy section. Select UI, and then select Panel.

You will see a panel added in the Scene view as below.

You can zoom out by and drag to centre the panel for a better view. Also make sure you change the name of the panel to Main Panel.

As you will be adding child components to the main panel, it will be a good idea to add a layout component. So go ahead and click on the

Add Component button in the Inspector view. Make sure the Main Panel is selected in the Hierarchy.

Select Layout and then select Vertical Layout Group.

Once you have done that Unity will add the component and it will be visible in the inspector.

Change the properties as shown in the above screenshot.

Title Text Box

Time to add the GUI components. The first is the Title Text Box. You can add it by right clicking on the Main Panel in the Hierarchy and then selecting UI, and then select Text.

A Text Box will be added on the Scene as shown in the screenshot.

Now time to set the properties as shown below:

Name : Title Text
Text : Temperature Converter
Font Style : Bold
Font Size : 32
Horizontal Alignment : Center
Vertical Alignment : Middle

Temperature Input Field

Add an input field to accept the temperature to be converted as input. Right click on Main Panel, select UI, and then select Input Field.

Once you have added the input field make the following changes to the properties.

Name : Temperature InputField
Anchor Presets : Horizontal and Vertical Stretch

Now select the Placeholder and set the properties as below.

Select PlaceHolder
Set the Text as shown
Set Font Size to 32
Set Horizontal Alignment to Center
Set Vertical Alignment to Middle

Similarly for Text under the input field

Select Text object under input field
Set Font Size to 32
Set Horizontal Alignment to Center
Set Vertical Alignment to Middle

Convert Buttons

Adding the next few components will be in slightly different way. As you will have to add 2 buttons for Convert to Celsius and Convert to Fahrenheit, you will add them under a different panel which will have a horizontal layout.

So right click on the Main Panel, select UI and then select panel.

Change the name of the Panel to Convert Buttons Panel. Also Add a Horizontal Layout Group Component to the new button panel.

You will also need to change the alpa so that the panel is transparent. You can do that by by clicking on the color of panel and setting the alpha to 0.

To add the buttons, right click on Convert Buttons Panel, select UI, and then select Button. Do this twice so that 2 buttons are added to the panel.

Now change the name of the button to Celsius Button and Fahrenheit Button.

Also make sure you change the text on the buttons to “Convert to Celsius” and “Convert to Fahrenheit”.

The font size can also be increased to 32 to make the text more prominent.

If everything goes right you will have the buttons placed like above.

Result Text Box

The last component left is a text box to show the result after conversion. You can place it at the bottom of the main panel.

So right click on the Main Panel, select UI, and then select Text. As Textbox will be added at the bottom.

Make the changes to the properties as shown in the image above.

Now you can click on play button. If everything is fine it the app should look something like below.

Add Scripts

So now we have all the components added to the user interface. Time to prepare the scripts.

You will first need to add a folder named Scripts under Asset.

Create a C# Script under the Scripts folder with name ConverterScript.

Open the ConverterScript.cs file in Mono by double clicking it in Unity.

There are 4 basic elements that needs to be added to the script.

Public field for Input Temperature Textfield
Public field for Result Textfield.
Event Handler for “Convert to Celsius” onclick event.
Event Handler for “Convert to Fahrenheit” onclick event.

You can copy the following script replace ConverterScript’s code with this.

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

public class ConverterScript : MonoBehaviour {

    public Text inputTemperature;
    public Text outputTemperature;

    // Use this for initialization
    void Start () {

    }

    // Update is called once per frame
    void Update () {

    }

    public void handleCelsiusButtonClick(){
        Debug.Log ("handleCelsiusButtonClick");

        float fahrenheit = float.Parse(inputTemperature.text);

        float celsius = ((fahrenheit - 32)*5)/9;

        outputTemperature.text = celsius.ToString()+" Celsius";

    }

    public void handleFahrenheitButtonClick(){
        Debug.Log ("handleFahrenheitButtonClick");

        float celsius = float.Parse(inputTemperature.text);

        float fahrenheit = (celsius * 9 / 5) + 32;

        outputTemperature.text = fahrenheit.ToString()+" Fahrenheit";
    }
}

Make sure you save your work. As you can see in the event handlers I have retrieved the value from the temperature field. The use the appropriate temperature conversion formula to get the converted temperature. At last set the text of result with the corresponding converted temperature.

Connect the UI to the Script

Now you will need to integrate the UI with the Script. The first thing you will need to do is add an empty game object which will hold the script. To do that select the “Create Empty” options in the Hierarchy section. It will create an empty game object in the Hierarchy.

Add ConverterScript as Script Component to the Empty Game Object.

Setting the Input and Output Fields of the Script

Follow these 5 steps to associate the Input and Output texts.

Select the GameObject.
Lock the inspector. This is done so that the inspector does not change when you try to drag the other objects.
Drag the Text object of the “Temperature Input Field” to “Input Temperature” field of the Converter Script
Drag the Result Text object to “Output Temperature” field of the Converter Script
Unlock the inspector.

Event handler for Convert to Celsius Button

Select Celsius Button
Click on + button
Drag and Drop Game Object
Select ConverterScript.handleCelsiusButtonClick

Event handler for Convert to Fahrenheit Button

Select Fahrenheit Button
Click on + button
Drag and Drop Game Object
Select ConverterScript.handleFahrenheitButtonClick

Run the Temperature Converter App

Now that you have added all the bits and pieces of the app, it time to run it. Click on the Play Button on top and run the app.

Enter the values and try clicking on the convert buttons. Try out different values to validate the formula.

Conclusion

So as you can see it how easy it to create a non gaming app in Unity. With new version of Unity being released frequently, possibility of non gaming apps is increasing exponentially.

Download the completed source code

How to Develop a non gaming app with Unity

Comments

More from this blog

Master Unity UI Components

Magic Leap 2 SDK, Simulator & Unity Setup

How to convert png to ico using free tool GIMP

How to show native Menu Bar in Flutter Windows App

How to configure CMake to connect to Mysql in C

The Temperature Converter App

Source Code

Create a Project