# Yarn Spinner for Godot

{% hint style="danger" %}
This version of the Yarn Spinner for Godot Beginner's guide was written for plugin version 0.1.5. If you are using a newer version of the plugin, please reference a newer version of the documentation. Yarn Spinner for Godot is a Yarn Labs project. It is not fully, or officially supported, and may break, or change at any time.
{% endhint %}

This step of the beginner's guide helps you move from writing Yarn scripts outside of a game engine, to initial integration steps to turn them into a game with Godot

First, launch Godot 4.1 (C# version) and create a new project.

## Installing Yarn Spinner for Godot

Download a[ copy of the latest version of Yarn Spinner for Godot](https://github.com/YarnSpinnerTool/YarnSpinner-Godot/archive/refs/heads/develop.zip) from the [GitHub repository](https://github.com/YarnSpinnerTool/YarnSpinner-Godot/), or clone the repository somewhere.

Locate the `addons/` directory in your new local copy of Yarn Spinner for Godot:

<figure><img src="https://3844916845-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FW7FKDVQjKCuUze7DY3br%2Fuploads%2Fgit-blob-beccb18aca2adeb8a7080e38712338a8873e9db8%2FScreenshot%202023-10-17%20at%203.01.50%E2%80%AFpm.png?alt=media" alt="" width="563"><figcaption><p>The <code>addons</code> directory in a local copy of Yarn Spinner for Godot.</p></figcaption></figure>

Put a copy of this directory into your new Godot project, either by dragging the folder in your file manager (e.g. Finder or Explorer) into the folder of the Godot project, or by dragging from your file manager into the FileSystem dock of your Godot project:

<figure><img src="https://3844916845-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FW7FKDVQjKCuUze7DY3br%2Fuploads%2Fgit-blob-f94eb1f76c2d086762592d1fb1ea2b0692ecd6fd%2FScreenshot%202023-10-17%20at%203.04.04%E2%80%AFpm.png?alt=media" alt="" width="408"><figcaption><p>The FileSystem dock in Godot, after dragging the <code>addons</code> directory in.</p></figcaption></figure>

Next, choose the Project menu -> Tools -> C# -> Create C# solution. This will create a C# project for you. We have to do this to trigger the creation of the `.csproj` file, which is necessary to let Godot know about the Yarn Spinner plugin.

Next, open the project folder in Visual Studio Code. In the sidebar of VS Code, the `.csproj` file and add the following line to it, inside the `<Project>` `</Project>` tags, but not inside an `<ItemGroup>` or `<PropertyGroup>:`

```
  <Import Project="addons\YarnSpinner-Godot\YarnSpinner-Godot.props" />
```

Your brand new project should look something like this in VSCode:

<figure><img src="https://3844916845-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FW7FKDVQjKCuUze7DY3br%2Fuploads%2Fgit-blob-245cbad62df45a97406afbb66fca18b35ae2e3a5%2FScreenshot%202023-10-17%20at%203.14.29%E2%80%AFpm.png?alt=media" alt=""><figcaption><p>The <code>.csproj</code> for your project.</p></figcaption></figure>

Save the tweaked `.csproj` file and return to Godot, everything is almost ready to go. Click the Build button in the very top right-hand corner of the Godot window. This will trigger a build of the C# solution for the project, which is required to make Godot aware of Yarn Spinner for Godot.

Once the build is complete, open the Project menu -> Project Settings, change to the Plugins tab, and tick the enabled box next to the Yarn Spinner for Godot plugin:

<figure><img src="https://3844916845-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FW7FKDVQjKCuUze7DY3br%2Fuploads%2Fgit-blob-93a5dfa737f3f7142e2fb30922a16e1ce9b29f47%2FScreenshot%202023-10-18%20at%2010.40.42%E2%80%AFam.png?alt=media" alt="" width="563"><figcaption><p>The Project Settings, showing the Plugins tab.</p></figcaption></figure>

With that, you're ready to go!

## Using Yarn Spinner for Godot

In your Godot project, click the Instantiate Child Scene button:

<figure><img src="https://3844916845-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FW7FKDVQjKCuUze7DY3br%2Fuploads%2Fgit-blob-08833ccb39a60cebc2b6c9d15926e0f685d2c58a%2FScreenshot%202023-10-17%20at%203.33.38%E2%80%AFpm.png?alt=media" alt="" width="563"><figcaption><p>The chain-link button, for instantiating a child scene.</p></figcaption></figure>

And navigate into the `addons/YarnSpinner-Godot/Scenes` folder of your project, and choose the `DefaultDialogueSystem.tscn` file as the scene to instantiate:

<figure><img src="https://3844916845-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FW7FKDVQjKCuUze7DY3br%2Fuploads%2Fgit-blob-8844a157500928fd4da1bd00541f5db5ce73ec81%2FScreenshot%202023-10-17%20at%203.34.26%E2%80%AFpm.png?alt=media" alt="" width="563"><figcaption><p>Choosing the provided <code>DefaultDialogueSystem.tscn</code>.</p></figcaption></figure>

Your Scene dock will look like this showing a node hierarchy that's entirely based on the `DefaultDialogueSystem.tscn` scene that you instantiated:

<figure><img src="https://3844916845-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FW7FKDVQjKCuUze7DY3br%2Fuploads%2Fgit-blob-66a31806ba9d2e0655b2522dd6370bee18fa69c8%2FScreenshot%202023-10-18%20at%2010.30.49%E2%80%AFam.png?alt=media" alt="" width="405"><figcaption><p>The <code>DefaultDialogueSystem</code> instantiated into your scene.</p></figcaption></figure>

{% hint style="info" %}
You could also instantiate the `DefaultDialogueSystem.tscn` into your scene at a lower part of the hierarchy, instead of the root node, to display dialogue using the provided default UI, instead.
{% endhint %}

Next, create a new Yarn Project by right-clicking in the FileSystem dock, and choosing Resource...:

<figure><img src="https://3844916845-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FW7FKDVQjKCuUze7DY3br%2Fuploads%2Fgit-blob-373d9727e80c8378fcf04de7f32808d708864180%2FScreenshot%202023-10-17%20at%203.23.05%E2%80%AFpm.png?alt=media" alt="" width="563"><figcaption><p>Creating a new Resource in the FileSystem dock.</p></figcaption></figure>

Then filter to the `YarnProject` resource type, and click the Create button:

<figure><img src="https://3844916845-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FW7FKDVQjKCuUze7DY3br%2Fuploads%2Fgit-blob-873e864205b8e52ae7aa7de4636ade73aede05d9%2FScreenshot%202023-10-17%20at%203.23.14%E2%80%AFpm.png?alt=media" alt="" width="563"><figcaption><p>Creating a new YarnProject resource.</p></figcaption></figure>

Name the new Yarn Project `FirstProject.tres`.

Next, create a new Yarn script (a file with a `.yarn` extension) by right-clicking in the FileSystem dock, and choosing New TextFile:

<figure><img src="https://3844916845-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FW7FKDVQjKCuUze7DY3br%2Fuploads%2Fgit-blob-69b4c281131cebfa8a20410a2534368a90ff8c0d%2FScreenshot%202023-10-18%20at%2010.12.52%E2%80%AFam.png?alt=media" alt="" width="413"><figcaption><p>Creating a new TextFile, in order to add a Yarn script.</p></figcaption></figure>

In the resulting New Text File... window, select All Files (\*) from the dropdown in the corner, set the File name to `MyStory.yarn`, and click the Save button:

<figure><img src="https://3844916845-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FW7FKDVQjKCuUze7DY3br%2Fuploads%2Fgit-blob-8dbd8c2cec24ccd661524f3ba127935a26769bb6%2FScreenshot%202023-10-18%20at%2010.19.15%E2%80%AFam.png?alt=media" alt="" width="563"><figcaption><p>Naming the file for a new Yarn script.</p></figcaption></figure>

It may take a moment, but Godot will import your new `.yarn` file, and it will appear in the FileSystem dock. When it's appeared, double-click on the Yarn Project, `FirstProject.tres` in the FileSystem dock and look to the Inspector, making sure that `res://MyStory.yarn` is in the list of Source Scripts, which are the Yarn scripts that compromise the new project:

<figure><img src="https://3844916845-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FW7FKDVQjKCuUze7DY3br%2Fuploads%2Fgit-blob-01b3e9fee64b070122e4c7faf78c3e2eb1d4590c%2FScreenshot%202023-10-18%20at%2010.25.13%E2%80%AFam.png?alt=media" alt="" width="563"><figcaption><p>The Yarn Project, with the Yarn script identified as a Source Script.</p></figcaption></figure>

Next, open the `MyStory.yarn` file in VS Code, and add the following Yarn script to it, before saving it and returning to Godot:

<details>

<summary>MyStory.yarn</summary>

```
title: Start
tags:
---
Narrator: Oh, hello!
    -> Hi, where am I?
        Narrator: You're in Godot!
            -> Oh.
                <<jump Oh>>
            -> How did I get here?
                <<jump Godot>>
===

title: Oh
---
Narrator: Yeah, fun, right?
===

title: Godot
---
Narrator: Someone read the Beginner's Guide!
===
```

</details>

Select the the `DialogueRunner` node in the Scene dock, and look to the Inspector. Assign the Yarn Project you created to the `DialogueRunner` by dragging the `FirstProject.tres` Yarn Project from the FileSystem dock into the Yarn Project slot of the Inspector:

<figure><img src="https://3844916845-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FW7FKDVQjKCuUze7DY3br%2Fuploads%2Fgit-blob-562769bf2a0bd433513325477e5513ec9493f8c5%2FScreenshot%202023-10-18%20at%2010.34.38%E2%80%AFam.png?alt=media" alt="" width="563"><figcaption><p>The new Yarn Project resource assigned as the Yarn Project for the <code>DialogueRunner</code>.</p></figcaption></figure>

Finally, enter `Start` as the Start Node, and tick the box next to Starts Automatically:

<figure><img src="https://3844916845-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FW7FKDVQjKCuUze7DY3br%2Fuploads%2Fgit-blob-5f8e3fa3df493d5055e00304f0cacf12d57d506e%2FScreenshot%202023-10-18%20at%2010.35.23%E2%80%AFam.png?alt=media" alt="" width="563"><figcaption><p>Setting the Start Node, and that we want this <code>DialogueRunner</code> to start automatically.</p></figcaption></figure>

Save your scene as `Demo.tscn`, and run the game. At this point, you can play your project, and step through the dialogue in the default Yarn Spinner for Godot Line View and Options List View:

<figure><img src="https://3844916845-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FW7FKDVQjKCuUze7DY3br%2Fuploads%2Fgit-blob-4078c2b43c9cc37081b0256425adde28985281a7%2Fbeginnersgodot.gif?alt=media" alt="" width="563"><figcaption></figcaption></figure>

### Next steps with Yarn Spinner for Godot <a href="#next-steps-with-yarn-spinner-for-unity" id="next-steps-with-yarn-spinner-for-unity"></a>

With that, we've reached the end of our beginner's guide. You're ready go forth and build games with Yarn Spinner! You're also equipped to work with the rest of the documentations here! Don't forget to [join the Discord](https://discord.com/invite/yarnspinner) to chat with other Yarn Spinner users, the Yarn Spinner team, seek help, and share your work.\
\\
