Welcome to Yarn Spinner! In this tutorial, you’ll learn how to use Yarn Spinner in a Unity project to create interactive dialogue.
We’ll start by downloading and installing Yarn Spinner. We’ll then take a look at the core concepts that power Yarn Spinner, and write some dialogue. After that, we’ll explore some of the more advanced features of Yarn Spinner.
Introducing Yarn Spinner
Yarn Spinner is a tool for writing interactive dialogue in games - that is, conversations that the player can have with characters in the game. Yarn Spinner does this by letting you write your dialogue in a programming language called Yarn.
Yarn is designed to be as minimal as possible. For example, the following is valid Yarn code:
Gregg: I think I might be sick. Mae: True friendship: Letting your friend make you sick. Gregg: True bros. Mae: True bros.
Yarn Spinner will take each line, one at a time, and deliver them to the game. It’s entirely up to the game to decide what to do with the lines; for example, the game that these lines are from, Night in the Woods, displays them in speech bubbles, one character at a time, and waits for the user to press a button before showing the next one.
We’ll start by creating an empty Unity project, installing Yarn Spinner, and then playing the example game. We’ll then make some changes to the example game.
- Unity 2018.4 users: We recommend that you download the
.unitypackagewhen reading this tutorial instead of using the Unity Package Manager, because you won’t otherwise get the sample project. If you’re using a later version of Unity, you can install it via the Package Manager or via a
Playing the example game
We’ll begin by playing the example game that comes with Yarn Spinner. It’s very short - about 2 minutes long.
- Create a new empty Unity project. Choose the 2D template.
- Download and install Yarn Spinner. Go to the installation instructions, and follow the directions there.
- Open the example scene.
- If you installed Yarn Spinner via a
.unitypackage, you’ll find it in the
- If you installed Yarn Spinner the Package Manager, import the Space sample, and then find the scene in the
- If you installed Yarn Spinner via a
- Play the game. Use the left and right arrow keys to move, and the space bar to talk to characters.
We’re now ready to start looking under the hood, to see how Yarn Spinner powers this game.
The Yarn Editor
Yarn Spinner stores its dialogue in
.yarn files. These are plain text files, which means you can edit them in any plain text editor (Visual Studio Code is a good option, and we offer a syntax highlighting extension to make it nice to use!)
You can also use the Yarn Editor, which is a web-based tool for working with Yarn code. The Yarn Editor is useful, because it lets you view the structure of your dialogue in a very visual way.
In this section of the tutorial, we’re going to open the file
Sally.yarn, and look at what it’s doing.
Sally.yarnin your editor of choice.
Yarn Spinner groups all of its dialogue into nodes. Nodes contain everything: your lines of dialogue, the choices you show to the player, and the commands that you send to the game. The
Sally.yarn file contains four of them:
Sally.Sorry. The example game is set up so that when you walk up to Sally and press the spacebar, the game will start running the
- Go to the
Let’s take a look at what that node contains. Here’s the entire text of it:
<<if visited("Sally") is false>> Player: Hey, Sally. #line:794945 Sally: Oh! Hi. #line:2dc39b Sally: You snuck up on me. #line:34de2f Sally: Don't do that. #line:dcc2bc <<else>> Player: Hey. #line:a8e70c Sally: Hi. #line:305cde <<endif>> <<if not visited("Sally.Watch")>> [[Anything exciting happen on your watch?|Sally.Watch]] #line:5d7a7c <<endif>> <<if $sally_warning and not visited("Sally.Sorry")>> [[Sorry about the console.|Sally.Sorry]] #line:0a7e39 <<endif>> [[See you later.|Sally.Exit]] #line:0facf7
Take a second now to look at this code, and get a feel for its structure.
Lines and Logic
We’ll now take a closer look at each part of this code, and explain what’s going on.
<<if visited("Sally") is false>> Player: Hey, Sally. #line:794945 Sally: Oh! Hi. #line:2dc39b Sally: You snuck up on me. #line:34de2f Sally: Don't do that. #line:dcc2bc <<else>> Player: Hey. #line:a8e70c Sally: Hi. #line:305cde <<endif>>
The first line of code in this node checks to see if Yarn Spinner has already run this node.
visited is a function that this example game has defined - it isn’t built into Yarn Spinner. It returns
true if the node you specify has been run before. You’ll notice that this line is wrapped in
>> symbols. This tells Yarn Spinner that it’s control code, and not meant to be shown to the player.
If they haven’t run the
Sally node yet, it means that this is the first time that we’ve spoken to Sally in this game. As a result, we run lines in which Sally and the player character meet. Otherwise, we instead run some shorter lines.
Each line in Yarn Spinner is just a run of text, which is sent directly to the game. It’s up to the game to decide how it wants to display it; in the example game, it’s shown at the top of the screen.
At the end of each line, you’ll see a
#line: tag. This tag lets Yarn Spinner identify lines across multiple translations, and is optional if you aren’t translating your game into other languages. Yarn Spinner can automatically generate them for you.
Here’s the next part of the code.
<<if not visited("Sally.Watch")>> [[Anything exciting happen on your watch?|Sally.Watch]] #line:5d7a7c <<endif>> <<if $sally_warning and not visited("Sally.Sorry")>> [[Sorry about the console.|Sally.Sorry]] #line:0a7e39 <<endif>>
In the next part of the code, we do a check, and if it passes, we add an option. Options are things that the player can select; in this game, they’re things the player can say, but like lines, it’s up to the game to decide what to do with them. Options are shown to the player when the end of a node is reached.
The first couple of lines here test to see whether the player has run the node
Sally.Watch. If they haven’t, then the code adds a new option. Options are wrapped with
]]. The text before the
| is shown to the player, and the text after is the name of the node that will be run if the player chooses the option. Like lines, options can have line tags for localisation.
If the player has run the
Sally.Watch node before, this code won’t be run, which means that the option to run it again won’t appear.
The rest of this part does a similar thing as the first: it does a check, and adds another option if the check passes. In this case, it checks to see if the variable
$sally_warning is true, and if the player has not yet run the
$sally_warning is set in a different node - it’s in the node
Ship, which is stored in the file
[[See you later.|Sally.Exit]] #line:0facf7
The very last line of the node adds an option, which takes the player to the
Sally.Exit line. Because this option isn’t inside an
if statement, it’s always added.
When Yarn Spinner hits the end of the node, all of the options that have been accumulated so far will be shown to the player. Yarn Spinner will then wait for the player to make a selection, and then start running the node that they selected.
And that’s how the node works!
Writing Some Dialogue
Let’s write some dialogue! We’ll add a couple of lines to the Ship.
- Open the file
Ship.yarn. It contains a single node, called
Ship- go to it.
This code uses couple of features that we didn’t see in
Sally: commands, and variables.
Commands are messages that Yarn Spinner sends to your game, but aren’t intended to be shown to the player. Commands let you control things in your scene, like moving the camera around, or instructing a character to move to another point.
Because every game is different, Yarn Spinner leaves the task of defining most commands to you. Yarn Spinner defines two built-in commands:
wait, which pauses the dialogue for a certain number of seconds, and
stop, which ends the dialogue immediately.
The example game defines its own command,
setsprite, which is used to change the sprite that the Ship character’s face is displaying. You can see this in action in the file
Player: How's space? Ship: Oh, man. <<setsprite ShipFace happy>> Ship: It's HUGE! <<setsprite ShipFace neutral>>
Variables are how you store information about what the player has done in the game. We saw variables in use in the
Sally node, where the variable
$sally_warning was used to control whether some content was shown or not. This variable is set in here, in the
Ship node - it represents whether or not the player has heard Sally’s warning about the console from the Ship.
Variables in Yarn Spinner start with a
$, and can store text, numbers, booleans (true or false values), or
null. If you try and access a variable that hasn’t been set, you’ll get the value
null, which represents “no value”.
Adding Some Content
- Add some new dialogue. Add the following text to the end of the node:
Ship: Anything else I can help with? -> No, thanks. Ship: Aw, ok! -> I'm good. Ship: Let me know! Ship: Bye!
-> items that we just added are called shortcut options. Shortcut options let you put choices in your node without having to create new nodes, which you link to through the
[[Option]] syntax. They exist in-line with the rest of your node.
To use a shortcut option, you write a
->, followed by the text that you want to display. Then, on the next lines, indent the code a few spaces (it doesn’t matter how many, as long as you’re consistent.) The indented lines will run if the option they’re attached to is selected. Shortcut options can be nested, which means you can put a group of shortcut options inside another. You can put any kind of code inside a shortcut option’s lines.
Because shortcut options don’t require you to create new nodes, they’re really good for situations where you want to offer the player some kind of choice that doesn’t significantly change the flow of the story.
- Save the file, and go back to the game. Play the game again, and talk to the Ship. At the end of the conversation, you’ll see new dialogue.
The example game is set up so that when you talk to Sally, the node
Sally is run, and when you talk to the Ship, the node
Ship is run. With this in mind, change the story so that after you get told off by Sally, she asks you to go and fix a problem with the Ship.
You can also read the Syntax Reference for Yarn Spinner.