Let’s Make a 4X Space Game with Unity – Part 31 Resource UI

Hi guys and welcome to part 31. In the last part we sorted out how to get resources from our planets. In this part we will set up a basic UI for our resources so we no longer need to use the console to keep track of them.

First I have made 3 very simple sprites to represent our resources. If you would like to use them feel free. You can download the file here:

Resource Icons(Google Drive)

We will start by importing our sprites to the assets folder (Assets > Sprites) and set up our sprite settings.

Part031Pic001.JPG
Sprites Imported to Unity
Part031Pic003.JPG
Sprite Settings

Create a new Panel as a child of our Canvas and call it Resource Panel. Shrink it down to a small rectangle. Add 3 image objects as children of the panel and name them “Food Sprite”,  “Mineral Sprite” and “Credit Sprite”. Assign the Image object their corresponding image files.

Part031Pic002.JPG
3 Images
Part031Pic005.JPG
Image Assigned a Sprite
Part031Pic004.JPG
Suggested Layout for Editing

Next add 3 Text objects as children of the Resource Panel. These will be used to show the player how many of each resource they have. Default the text to display 0 and name the text objects after each resource. I suggest making the text bold and centering it both horizontally and vertically but it is completely up to you.

Part031Pic006.JPG
3 Texts
Part031Pic008.JPG
Suggested Text Settings
Part031Pic007.JPG
Suggested Layout

Now we have all our UI elements, so let’s place them somewhere good on the screen. I will be putting them in the top left hand corner of the screen.

Part031Pic009.JPG
My Layout

Feel free to experiment an place your UI in any way you would like.

We need some sort of controller to update the UI and let the player know how many resources they have. Create a new script called UIResourceManager and attach it to the Resource Panel. We will not need the update method so you can remove it. Add an awake method and a public static UIResourceManager called instance. You know the deal by now, we set instance equal to this in the Awake method.

Part031Pic010.JPG
UIResourceManager

At the top of the script add “using UnityEngine.UI” as we will need access to the unity UI library.

Part031Pic011.JPG
UnityEngine.UI

Next add 3 public text objects (or more if you have more resources), called creditText, mineralText and foodText.

Part031Pic012.JPG
Public Texts

Create a new public void method called UpdateText and pass it a Text object and and int (call them text and amount). In this method we will set the text of the passed text object to the amount that was passed along side it (don’t forget to use the ToString method on amount).

Part031Pic013.JPG
UpdateText

Great so we just need to call this method in the correct place. That place is in our TurnManager script so we need to open that up next.

Add a new method called UpdateResourceText. Call the UIResourceManager UpdateText method 3 times to update each of our resource texts with our player resources.

Part031Pic015.JPG
Calling UpdateText

So where do we call our UpdateResourceText method? Well we could call it at the end of apply resources but we might want to have some more methods manipulate resources while the turn ticks over due to some modifiers or something, so lets just call it in the end turn method instead.

Part031Pic016.JPG
Calling UpdateResourceText

We just need to do a few more things before we finish this tutorial. The first is updating the UI at the start of the game. We can do this in our Playermanager script in the start method after we create our resources. Why do it here instead of the TurnManager? Well because it is slightly safer to put it here. If we call the UpdateText method in the TurnManager script and the PlayerManager script has not initialised then we may get an error. So doing this just after the resources are created will make sure they exist before we call them. We can call the UpdateResourcesText function in the TurnManager script to save re-writing the same code again (make the UpdateResourcesText method public)

Part031Pic017.JPG
Starting with the Correct Resources

Next we need to update the resources when we build a ship so we can also call the UpdateResourcesText as the last function on our Build Ship Button OnClick method.

Part031Pic018.JPG
Update Text After Building a Ship

Finally we need to assign the correct object to the text objects on out Resource Panel inspector

Part031Pic014.JPG
Assign the Correct Text Objects

Hit pay and test out the new resource UI 🙂.

This concludes this tutorial. While making it, I noticed we don’t refund the resources for a cancelled ship in our ship cue. So in the next part we will fix that and start looking at how we will select our ships.

Scripts (PasteBin)

Part 32 Resource Refunds – Coming Soon

Advertisements

1 Comment »

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.