This is part 4 of a multi-part tutorial focused on designing, building, and deploying a basic calculator in Unity. If you missed the previous parts you can check them out here.
In this part we will link the code and game objects we created in the previous tutorials. We will use the designs we developed during tutorial part 1 to guide our process.
- Subjects: VSCode, Unity, and Software Development
- Objective: The purpose of this tutorial is to walk you through how to link the code and game assets used in our calculator built in Unity.
- Time Allotment: 20 min
We have our buttons but right now they only say “Button”. Let us fix that by updating the Button Text component to display the value we want the button to represent. While we are doing that we need to also update the value field of our ButtonController script, that is attached to our Button game object, to the same value as well.
Update the remaining buttons and make sure to include operators, /, *, -, +, =, and C, as well. When you are done your calculator should look something like this.
Next we need to tell the buttons what they need to do when pressed. For this we will need to select each Button and inside each Button component add the appropriate method for the button. Since most of our buttons do the same thing, add their value to the display, we can take care of a lot of the leg work by modifying the prefab.
Open up the prefab folder under assets
Now double click the Button prefab to open it up in the inspector.
To add a method, click the + button under On Click ()
Then for the object select the Button game object.
Now we can select a method from the dropdown. Most buttons will be using the AppendValueToDisplay method. So, select it from the ButtonController list.
Now if we run our application we can see that all of our values are being added to our display but C and = are being added as well. To fix this we will need to go back to our scene and update those buttons individually.
For our = button change the method to EvaluateEquation.
On the C button change the method to Clear.
Now, if you run the application you will see that the clear button will work and no longer inputs a C in the display. The equals button however will throw an error for a null reference. This is due to our DisplayController, so let us fix it.
Clicking on our DisplayPanel we can see the DisplayController does not know what
the Calculator is.
We can fix this by dragging our Calculator game object over to the input field.
Now our application will run as expected. We can complete all of our operations and calculate them to the display.
One minor quirky thing we left in is the 0 that is in the DisplayText when the app is started. This does not affect the math and can be cleared by hitting clear but if you want it to go away delete the 0 from the text component so it does not start with it.
Your Calculator is now complete. You may be wondering what happened to some of our other requirements from part 1. Well, that is where your newfound experience and knowledge of how this application works comes into play. Take the code we have developed here and add on to it to create something unique for yourself. Take the features we discussed and implement them or throw them out and create new ones.
A great way to keep track of your build process and milestone events, such as adding new features, is by using a Kanban board. Never heard of it? Check out our article on Kanban Boards to find out how to use them.
So far we have designed our calculator by laying out the different features and functions, we have created the project in Unity and added the user interface, created our scripts to control the behavior of our game objects, and have now linked them in Unity. Check out our final tutorial in this series, How to Build a Calculator in Unity Part 5, we will go over how to build your game for distribution. Also, we currently have two games on Google Play and at the Amazon Appstore for Android, check them out below.