Using Image Wheel

The Image Dialogue Wheel provides a dialogue wheel with a light sci-fi appearance, and can display up to six responses for your dialogue. You can specify exactly which segment of the wheel each response is located.

Using the Image Dialogue Wheel

To use the Image Dialogue Wheel make sure your Unity project has the Yarn Spinner package installed, and install the Dialogue Wheel for Yarn Spinner package.

Then, create a new Dialogue System in your Hierarchy:

Unity's GameObject menu, with Yarn Spinner > Dialogue System highlighted. — Adding a new Dialogue System to your scene.

If prompted, click the Install TMP Essentials button to install TextMesh Pro (TMP).

Make a folder to store your Narrative in the Project pane (ours is named Narrative), and then inside that folder, create a new Yarn Project asset:

The Project pane's Create menu, with Yarn Spinner > Yarn Project highlighted. — Creating a new Yarn Project asset in the Project pane.

Similarly, also in the Narrative folder, create a new Yarn Script to use:

The Project pane's Create menu, with Yarn Spinner > Yarn Script highlighted. — Creating a new Yarn Script asset in the Project pane.

Name both the Yarn Project and the Yarn Script something appropriate. 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.

Initial sample story for Image Dialogue Wheel

title: Start
---
Narrator: What brings you to the pool?
-> Cleaning
    I have come to clean the pool.
    Narrator: Ah, just as I thought.
        -> I'm a pool cleaner
            Narrator: I know.
            <<jump End>>
        -> I was actually lying.
            Narrator: Oh, I see.
            <<jump End>>
-> Treasure 
    I am looking for the lost treasure of... the pool.
    Narrator: There is no treasure in the pool.
        -> WHAT!?
            WHAT?! WHY NOT? I WAS TOLD THERE WAS TREASURE HERE!
            Narrator: Nope. 
            <<jump End>>
        -> Oh, okay.
            Oh, well, I guess I'll go.
            Narrator: OK, bye!
            <<jump End>>
        -> I know.
            I know, I just wanted a swim.
            Narrator: In you get, then!
            <<jump End>>
-> No reason
    I have a fetish for pool cleaning equipment.
    Narrator: Whatever floats your boat...
        -> Thanks.
            Narrator: Uh uh.
            <<jump End>>
-> Commerce
    I'd like to buy a pool.
    Narrator: Well, it's not for sale.
    Narrator: Go away.
    <<jump End>>
-> Swimming
    I'm here to go for a swim. 
    Narrator: Well, you can't.
    <<jump End>>
===
title: End
---
Narrator: Anyway...
Narrator: Have a nice day!
<<stop>>
===

WheelDemoScript.yarn.

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:

The Dialogue Runner Inspector, with the Yarn Project field, set to Demo Project, outlined in green. — Assigning your Yarn Project to the Dialogue System.

Next, locate the Image 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 Hierarchy, with Image Dialogue Wheel added under the Dialogue System's Canvas, below Line Presenter and Options Presenter. — The Image Dialogue Wheel, added below the Canvas of the Dialogue System.

Right-click on the Options Presenter 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 Image Dialogue Wheel, select it (the Dialogue System) in the Hierarchy, and drag the Image Dialogue Wheel from the Hierarchy into the Element 1 slot of the Dialogue Presenters section in the Inspector:

The Dialogue Runner Inspector, with the Dialogue Presenters list outlined in green: Line Presenter, Image Dialogue Wheel and Line Advancer. — Adding the Image Dialogue Wheel to the Dialogue System.

Finally we want to set our story to start automatically, click on the Start Automatically toggle on the Dialogue Runner Inspector and from the Start Node drop down pick Start. If you save your scene and run it, your Image Dialogue Wheel should now be working.

The Image Dialogue Wheel in a plain scene, with three options: Who are you? at the top right, Hi. at the middle right, highlighted in red, and What's up? at the top left. — The Image Dialogue Wheel showing three options.

Customising the Image Dialogue Wheel

You can specify which position on the wheel your dialogue appears using tags in your Yarn scripts. You can add tags to each set of options to specify where in the wheel the option should be placed.

For example, the following Yarn script:

title: Start
---
Narrator: Show me the positions on the Six-Segment Wheel?
    -> Left Top #lt
    -> Left Middle #lm
    -> Left Bottom #lb
    -> Right Top #rt
    -> Right Middle #rm
    -> Right Bottom #rb
===

An option for each of the six positions, each with its tag.

Results in this:

The Image Dialogue Wheel with six options in six positions, each labelled with its tag: Left Top #lt, Left Middle #lm, Left Bottom #lb, Right Top #rt, Right Middle #rm and Right Bottom #rb. — The six options, each in the position its tag names.

If you select the Image Dialogue Wheel Prefab in the Hierarchy (under Dialogue System), you can look to the Inspector to customise these tags, among other options:

The Inspector for the Image Dialogue Wheel, with the Six Segment Layout's Wheel Options list and its six tag fields outlined in green: rt, rm, rb, lt, lm and lb. — The position tags in the Image Dialogue Wheel’s Inspector.

You can also use the Yarn Command <<set-opt>> before each group of options in your Yarn scripts to specify how many options (limited to a maximum of three on either side) should appear in each column (left or right).

For example, the following Yarn Script:

title: Start
---
Narrator: Show some options?
<<set-opt 1 3>>
-> I'm an option! 
-> I'm another option!
-> I'm yet another option!
-> Me too!
===

Line 4 Using set-opt to specify 1 option should be on the left, and 3 on the right.

A set-opt Command that puts one option on the left and three on the right.

Will result in this:

The Image Dialogue Wheel with one option on the left, Me too!, and three on the right: I'm an option!, I'm another option! and I'm yet another option! — The four options, split one on the left and three on the right.

If you use set-opt to specify more options than the six-segment wheel can handle, which is 3 on each side, things may not work as expected.

Review the provided Image Dialogue Wheel Example for more information, or check out the guide on Using Auto-Layout Dialogue Wheel.

Mark this page as complete Completed!

Previous Installing Dialogue Wheel Next Using Auto-Layout Wheel