• J. J. Allen

Building a GUI foundation with DoozyUI.

User interfaces in video games have not traditionally been implemented using HTML. For better or worse, I've had to find an alternative way to develop the UI for my games.


So far the end-all-be-all solution I've found is Doozy UI! It's intuitive, scales extremely well, and comes bundled with not only tools for UI development, but Scene Management too.


Pre-Requisites

  • A new or existing Unity 3D project.

  • "Landing" scene - Will contain our Main Menu.

  • "Gameplay" scene - Will eventually contain our Game.

  • DoozyUI purchased from the asset store.

  • DOTween or DOTween Pro purchased from the asset store.


If you do not have DOTween or Doozy UI, you can obtain both from the asset store using the links below.




Setup


DoozyUI depends on DOTween or DOTween Pro. You first want to download and import DOTween into your Unity project before downloading and importing DoozyUI.


After importing DOTween, import DoozyUI. Once import is complete, you should be presented with an install window. Click the "Install" button and grab a coffee while Doozy UI is imported to your project.


Doozy UI comes bundled with several tools. For this tutorial, we will only be concerned with the Doozy UI Control Panel and Nody.


Doozy UI Control Panel


The control panel looks like the image below. My image may look a bit different; I have Orientation Detector and TextMeshPro enabled.

Every DoozyUI component you will use in your Ui will be first declared within the control panel.


Nody


The graph editor looks like the image below. My image may look different; I have a graph already open. We'll create two graphs later.




Setting up the Doozy UI Content Database


Before we start adding components to a canvas, we should first use the control panel to create the components we need.


Click the Canvas button located on the left side of the control panel and add two new canvases.

  • Main Menu

  • Gameplay


Click on the Views button located right below the canvases button. First, two new categories by clicking the New Category button located at the top of the Views page.

  • General

  • Landing

Next, add new views to the categories we just created.


General

  • Landing

  • Pause

Landing

  • Main Menu

Click on the Buttons button located below the Views button. Expand the General category and create a new category.

  • Main Menu

Add four new buttons to the existing General category and the new category Main Menu.


General

  • Confirm

  • Exit Gameplay

Main Menu

  • Start Game

  • Quit Game


Creating the Main Menu (Landing Scene)


We are now ready to start using our DoozyUI components to build our Ui. We will start with the Main Menu, so make sure you have the Landing Scene open.


First, start by adding a new UIView to your scene. Using the Game Object menu in the Hierarchy Window or right-clicking in your Hierarchy window, add a UIView.


Configure your new UIView within the Inspector to match the configuration in the image below. You may set the Show View and Hide View animations to whichever preset you desire.


The most important values you need to set here are View Category and View Name. These should be Landing and Main Menu respectively.

Next, we'll add our buttons to the Main Menu UIView.


Add two UIButtons. One will be for our StartGame button, and the other will be for out Quit Game button.


I've added my buttons to a Vertical Layout Group. Feel free to style and position these buttons however you like.


Configure your buttons in your inspector to match the image below. The image below only shows the Start Game button, but make sure you configure your Quit Game button in the same manner.


Much like the UIView, the most important properties you need to set are the Button Category and the Button Name.


You should now have a UIView in your Hierarchy, Landing|Main Menu with two buttons, Main Menu|Start Game and Main Menu|Quit Game.


The image below shows you what my Main Menu UIView looks like.


Creating the Loading Screen (Landing Scene)


Now that the Main Menu UIView has been created, we can create our Loading UIView. the Loading view will be displayed when we are transitioning between scenes.


Just like before, add a new UIView to your project. Set the Category and View Name to General and Loading respectively.


The image below shows you what my loading view looks like. I've moved my title and sub-title text to the center of the view just for variation.


Creating the Pause Menu (Landing Scene)


Now that we have a Main Menu and Loading UIView, we can create our Pause Menu. We'll start in the Landing Scene.


The easiest way to make this UIView would be to duplicate your Main Menu UIView;

  1. Select your Main Menu UIView and press CTRL + D to duplicate.

  2. Change the View Category and View Name to General and Pause respectively.

  3. Drag the Pause UIView into a prefabs directory in your Project Window.

  4. Delete the Pause UIView from your Landing Scene.


Next, open your Gameplay Scene. You'll first need to create a UICanvas. You'll want to use the Gameplay Canvas we created in the DoozyUI Control Panel.


With the new canvas in your Gameplay Scene, drag the Pause UIView prefab from your Project Window onto the UICanvas. You now have all UIViews created and ready to be used by the Nody Graph Controller!


Building the Main Menu Graph (Landing Scene)


Now that we have our required content created, we can begin adding our functionality to interact with, hide/show, and load/unload that content.


In your Landing Scene, add a Nody Graph Controller.


Next, click the Open Graph button in in the Unity Inspector Window. This will open the Nody Graph Controller Editor.


Click the Graph button located on the left-hand side of the Graph Editor to create a new graph. I'll name this graph Main Menu and save it within a Nody Graphs folder under my Assets directory.


Drag the new graph from your Project Window into the graph reference of the Nody Graph Controller in your Scene and click Open Graph.


Let's build out our graph!

  1. Right Click and add a new UINode. Name it Main Menu.

  2. Right Click and add another new UINode. Name it Loading.

  3. Rick Click and add the Application Quit under System.

  4. Right Click and add a Load Scene Node under Scene Management.

  5. Configure your UINodes to match the screenshot(s) below.

I will let you mess around with the Graph Editor to duplicate the screenshot(s) below. The Graph Controller is straight forward in its configuration and use.


The Graph Controller state is transitioned between these nodes. Each node indicates which UIViews should be hidden or shown upon entering that UINodes state. This causes the UIViews in your scene(s) to be hidden/shown as buttons are clicked and/or events are fired.


Note: Any Scene that is loaded or unloaded using the Scene Management nodes NEED to be added to the scenes collection in your Build settings. You can add your scenes by pressing CTRL + SHFT + B and dragging your scenes into the scenes collection.


UINode Main Menu


This state is the default state when the Landing Scene is loaded. Entering this state will cause the Main Menu UIView to be shown. Leaving this state will hide the Main Menu UIView.


This state has two buttons that matches the UIButtons we added to our Main Menu UIView earlier. Clicking these buttons in Play Mode will trigger their Output Connections.


UINode Loading


This state is used prior to calling the Load Scene Node to display the Loading UIView. Entering this state will display the Loading UIView, pause for 3 seconds, and then transition to the Load Scene Node.


UINode Load Gameplay


This node will load the Gameplay Scene and unload the current scene (Landing Scene).


Building the Gameplay Graph (Gameplay Scene)


I'll leave this task up to you once again. You'll need a new Graph, arguably called Gameplay which will be very similar to the Main Menu graph we just created and configured. The only difference here is that the Gameplay start state listens for the PAUSE_GAME game event to show the Pause UIView.



UINode Gameplay


This node is the default state and listens for the PAUSE_GAME event.



UINode Pause


This node manages the Pause UIView. Upon entering the Pause UIView will be shown. Exiting this state will hide the Pause UIView.


This node contains two buttons, one which will dismiss the Pause UIView and the other which will display the Loading UIView before going back to the Landing Scene.



UINode Loading


Duplicate of the Loading UINode in the Main Menu Graph.



UINode Load Landing


Duplicate of the Load Scene Node in the Main Menu Graph only we've configured this node to load the Landing Scene instead of the Gameplay Scene.



In order for the PAUSE_GAME event listener to be triggered I've added the KeyToGameEvent script to my Graph Controller in the Gameplay Scene. I've then configured the script to listen for the ESC key to be pressed to fire the PAUSE_GAME event.



Running the project (Landing Scene)


You should now have a working Main Menu, scene transitions, and Pause Menu for your game! Here is a quick look at my Hierarchy for both my Landing Scene and Gameplay Scene.


Gameplay Scene Hierarchy



Landing Scene Hierarchy



The gif below demonstraits the menu system I've built. You'll see I've used some Organic UIView animations and an loading icon for style.


Now that you have a working Ui system, you can export this content as a custom unitypackage and import into any new or existing Unity project to speed up development.


Happy coding!



57 views

2018-2020 © Over One Studio LLC.