Using Auto-Layout Wheel
Learn how to use the Automatic-Layout Dialogue Wheel, from the Dialogue Wheel for Yarn Spinner Add-On Package.
The Automatic-Layout Dialogue Wheel provides a dialogue wheel with a simple graphical appearance, and can—theoretically—support as many options as you'd like, automatically adjusting to display them.
Then, create a new Dialogue Runner in your Hierarchy:
Adding a new Dialogue Runner to your scene.
Then, in the Project pane, create a new Yarn Project asset:
Creating a new Yarn Project asset in the Project pane.
And create a new Yarn Script to use:
Creating a new Yarn Script asset in the Project pane.
Name both the Yarn Project, and the Yarn Script, something appropriate:
A Yarn Project, and a Yarn Script, alongside a scene
Open the Yarn script to write your story. Then save the Yarn script and return to Unity.
We've provided an initial sample story here, if you want to test things out.
Narrator: What brings to the pool?
I have come to clean the pool.
Narrator: Ah, just as I thought.
-> I'm a pool cleaner
Narrator: I know.
-> I was actually lying.
Narrator: Oh, I see.
I am looking for the lost treasure of... the pool.
Narrator: There is no treasure in the pool.
WHAT?! WHY NOT? I WAS TOLD THERE WAS TREASURE HERE!
-> Oh, okay.
Oh, well, I guess I'll go.
Narrator: OK, bye!
-> I know.
I know, I just wanted a swim.
Narrator: In you get, then!
-> No reason
I have a fetish for pool cleaning equipment.
Narrator: Whatever floats your boat...
Narrator: Uh uh.
I'd like to buy a pool.
Narrator: Well, it's not for sale.
Narrator: Go away.
I'm here to go for a swim.
Narrator: Well, you can't.
Narrator: Have a nice day!
Back in Unity, choose the Dialogue Runner that you added to the Hierarchy, right-click it and choose Prefab -> Unpack. This will allow you to modify the contents of the (former) prefab, in order to add the Automatic-Layout Dialogue Wheel as a Dialogue View.
Unpacking the Dialogue System prefab.
With the Dialogue Runner selected in the Hierarchy, drag the Yarn Project that you created from the Project pane into the Yarn Project slot in the Dialogue System's Inspector:
Assigning your Yarn Project to the Dialogue System.
Next, locate the Automatic-Layout Dialogue Wheel prefab, supplied with this add-on, and drag it from the Project pane, so it's below the Canvas in the Hierarchy:
The Automatic-Layout Dialogue View, added below the Canvas of the unpacked Dialogue System.
Right-click on the Options List View in the Hierarchy, and choose Delete. You won't need that view, as you'll be displaying a wheel, instead of a list. To make the Dialogue System aware of the Automatic-Layout Dialogue Wheel, select it (the Dialogue System) in the Hierarchy, and drag the Automatic-Layout Dialogue View from the Hierarchy into the Element 1 slot of the Dialogue Views section in the Inspector:
Adding the Automatic-Layout Dialogue Wheel to the Dialogue System.
If you save your scene and run it, your Automatic-Layout Dialogue Wheel should now be working!
The Automatic-Layout Dialogue Wheel in action.
To customise the supplied wheel, select the Wheel Graphic in the Hierarchy:
The Wheel Graphic selected, inside the Automatic-Layout Dialogue View.
And look to the Inspector:
The Inspector for the Wheel Graphic.
Here, on the Wheel Graphic component, you can customise a variety of things, such as the material, color, inner radius, and density of the wheel. For example, if you set the Density field to 6, as we did above, your wheel will become a hexagon:
The wheel, customised to display as a hexagon, via a modification to the Density field of the Wheel Graphic.
To customise the way each option is displayed around the wheel, select the Automatict Wheel Option View under Automatic-Layout Dialogue Wheel prefab:
The Automatic Wheel Option View selected.
And look to the Inspector:
The Inspector for the Automatic Wheel Option View.
You can tweak some of the fields here to customise the options that are displayed around the wheel. Specifically, you might want to customise the following.
On the Automatic Wheel Option View:
- Normal Color — the color of each option that's not currently highlighted or disabled
- Disabled Color — the color of each option that's displayed, but cannot be chosen
- Highlighted Color — the color of the option that's currently selected (but not yet chosen)
- Text/Graphic Highlight Mode — whether each option is immediately highlighted when it's selected, or whether they crossfade between
- Crossfade Duration — the duration of the crossfade, if crossfading
On the Wheel Option Graphic:
- Material — the Material used for circle graphic displayed near each option
- Width — the size of the circle graphic displayed near each option
For example, if you wanted to highlight selected options in green, and crossfade between them, you could set the following:
Tweaks to the Automatic Wheel Option View, to customise the way options are displayed around the wheel.
Which would result in something like this:
The customised options in action.