Special Topics Track

Yarn Spinner Dialogue System

​

Brought to you by: Cole

Github Repo Link

Github Link

​

Today’s Overview

1. What is Yarn Spinner?
1. Examples
2. How to install it to your Unity project
3. How to set it up and customize it
4. How to write with Yarn Spinner
• Commands and Functions in C#
• VS Code with .yarn files
5. Hands-on learning and exercises

​

Yarn Spinner???

(You didn’t think this was a knitting class, did you?)

From the website:

Yarn Spinner helps you build branching narrative and dialogue in games. It's easy for writers to use, and has powerful features for integrating your content straight into your game.

​

Yarn Spinner is used in games ranging from Lost in Random, to Night in the Woods, A Short Hike, Dredge, Escape Academy, Baladins, Frog Detective 2, Button City, and Unbeatable.

​

YarnSpinner Docs

​

Install??!

Setting Up OpenUPM

• Before you can install Yarn Spinner from OpenUPM, you first need to configure your project so that it knows where to get the package from.
• In Unity, open the Edit menu, and choose Project Settings.
• In the list of sections at the left hand side of the window, select Package Manager.
• This window is where you tell Unity about where to find packages that come from registries besides Unity's built-in one.
• In the Name field, type OpenUPM.
• In the URL field, type https://package.openupm.com.
• In the Scopes field, type dev.yarnspinner.
• Click Save.

Installing Yarn Spinner

• Open the Window menu, and choose Package Manager.
• In the toolbar, click the Packages dropdown, and choose My Registries.
• Yarn Spinner will appear in the list. Select it, and click Install.
• Yarn Spinner will download and install into your project.
• You can verify that everything is imported successfully by looking for Yarn Spinner under Packages, in the Project pane.

Setup?!?!1

Setting Up Your Scene

• Add the Dialogue System prefab to the scene:
• In the Project pane, scroll down to the Yarn Spinner folder. You'll find it in the Packages section.
• Inside the Yarn Spinner folder, open the Prefabs folder, and locate the Dialogue System prefab.
• Drag the Dialogue System into your scene.
• Create a new Yarn script, by opening the Assets menu and choosing Create -> Yarn Spinner -> Yarn Script.
• We’ll get into editing this later

Setting Up Your Scene 2

• Create a new Yarn Project that uses this script, by selecting the .yarn file, and clicking the Create New Yarn Project button in the Inspector. This will create a new Yarn Project called Project.�

​

• Attach the Yarn Project to the Dialogue Runner, by selecting the Dialogue Runner in the Hierarchy, and dragging the Project into the Yarn Project field.

VS Code

• The IDE of the gods
• Lightweight, open-source, and highly customizable
• Download here! (code.visualstudio.com)
• A must have for writing with YarnSpinner!
• YarnSpinner extension (or just Google “vs code yarn spinner”)

You can customize this Dialogue System!

Tutorial!

(Finally…)

So What the Heck is a .yarn?

• .yarn files are the dialogue scripts for your game!
• They are built to be intuitive and usable by writers with limited coding experience!
• They are made up of Nodes
• Nodes can represent scenes or major choices
• Nodes can be jumped to
• Can make a graph showing node connections in VS Code

So How Do You Write?

• And do this for player choices:���
• Indents are important to stay within a choice’s consequences

You also may want to jump to a different node if a choice’s consequences last a while, or if you want to nest more choices

• Like this:����
• Names are optional

Are Variables a Thing?

• Yee!�
• Yarn has numbers, booleans, and strings
• You can use variables within dialogue:�
• You can also make if statements!����
• Conditional options!

Don’t forget the <<endif>>! It was a big problem for UC Love :`)

Commands and Functions?!

• Commands
• Returns nothing, and no parentheses (Ex. <<myCommand x y z>>)
• Can make the dialogue wait (using Coroutines!)
• Built in: <<wait>> and <<stop>> (ends the dialogue)
• Functions
• Returns something! Uses parentheses (Ex. <<myFunction(x, y, z)>>)
• Can use within if statements!
• Lots of built-in functions
• Of course, you can make your own too! �(You kinda have to…)

Wait, so what was the Project file?

• Ugh…
• The Yarn Project File keeps track of all the Yarn stuff
• List of Yarn scripts
• You have to make sure to keep this updated!!!
• List of declared variables
• List of Functions (but not Commands…?)
• It will list out errors in your Yarn scripts
• But the descriptions aren’t that helpful…

Your Turn!

(Again, finally…)

What’s In the Repo?

• A scene, a dialogue script, and Commands & Functions
• Commands
• YarnCommands.cs are generic
• NPC.cs are NPC-specific (ie. <<Shake>>)
• BlackScreen.cs fades the foreground (good for changing scenes or passing time)
• Background.cs changes the background
• All of the Functions (all 1 of them :P) are in YarnFunctions.cs
• Don’t feel like you have to read through all of these now. Learn as you go!
• Use ctrl+click in VS Code to jump to a definition

All you need to do to make something work with Yarn is the thing in square brackets!

All of the challenges are in Intro.yarn!

Feedback Form

ACM Census

psst there’s a raffle involved!!

ACM Census

psst there’s a raffle involved!!

Thanks for coming!