Creating UIs with the Fungus open-source dialog system
Rather than constructing your own UI and interactions from scratch each time, there are plenty of UI and dialogue systems available for Unity. One powerful, free, and open source dialog system is called Fungus, which uses a visual flowcharting approach to dialog design.
In this recipe, we'll create a very simple, two-sentence dialogue, to illustrate the basics of Fungus. The following screenshot shows the Fungus-generated dialog for the first sentence ('Hello, how are you') and the interactive button (a triangle inside a circle) the user clicks to progress to the next piece of dialog (in the bottom-right part of the rectangle).
How to do it...
To create a two-sentence dialog using Fungus, follow these steps:
- Download the latest version of the Fungus unitypackage from the FungusGames website http://www.fungusgames.com/.
- Create a new Unity 2D project.
- Import the Fungus unitypackage by navigating to Assets | Import Package | Custom Package..., and then navigating to your downloaded file location.
- Create a new Fungus Flowchart GameObject by choosing menu: Tools | Fungus | Create | Flowchart.
- Display and dock the Fungus Flowchart window panel by choosing menu: Tools | Fungus | Flowchart Window.
- There will be a block in the Flowchart Window. Click on this block to select it (a green border appears around the block to indicate that it is selected), and then in the Inspector panel, change the name of this block to Start, as shown in the following screenshot:
- Each Block in a Flowchart follows a sequence of commands. So, we are now going to create a sequence of commands to display two sentences to the user when the game runs.
Note
The sequence of Commands in a Block
Each Block in a Flowchart follows a sequence of Commands, so to display two sentences to the user when the game runs, we need to create a sequence of two Say commands in the Inspector panel properties for our Block.
- Ensure that the Start block is still selected in the Flowchart panel. Now, click on the plus +' button at the bottom section of the Inspector panel to display the menu of Commands, and select the Narrative | Say command, as shown here:
- Since we only have one command for this block, that command will automatically be selected (highlighted green) in the top-half part of the Inspector view. The bottom half of the Inspector view presents the properties for the currently selected Command, as shown in the following screenshot. In the bottom-half part of the Inspector view, for the Story Text property, enter the text of the question that you wish to be presented to the user:
How are you today?
- Now, create another Say Command, and type the following for its Story Text property:
Very well thank you. - When you run the game, the user will first be presented with the How are you today? text (hearing a clicking noise as each letter is typed on screen). After the user clicks on the 'continue' triangle button (at the bottom-right part of the dialog window), they will then be presented with the second sentence: Very well thank you.
How it works...
You have created a new Unity project, and imported the Fungus asset package, containing the Fungus Unity menus, windows and commands, and also the example projects.
You have added a Fungus Flowchart to your scene with a single Block that you have named Start. Your block starts to execute when the game begins (since the default for the first block is to be executed upon receiving the Game Started event).
In the Start block, you added a sequence of two Say Commands. Each command presents a sentence to the user, and then waits for the continue button to be clicked before proceeding to the next Command.
As can be seen, the Fungus system handles the work of creating a nicely presented panel to the user, displaying the desired text and continue button. Fungus offers many more features, including menus, animations, control of sounds and music, and so on, details of which can be found by exploring their provided example projects, and their websites:
