This Unity package provides two prefabs: Formal Bubble and Casual Bubble. The package requires Yarn Spinner for Unity.

This add-on is not part of the open source Yarn Spinner package, and can be purchased from the Yarn Spinner Itch.io Store or via the Unity Asset Store.

Speech Bubbles for Yarn Spinner provides a Casual Bubble and a Formal Bubble prefab. Both are customisable, powerful, and extremely flexible:

• customise fonts, colours, and styles of bubbles

• optional character nameplate

• flexible anchor point for bubble stem

• lock bubbles to camera, or not, your choice

• works for 2D or 3D games

This guide provides documentation on using the bubbles and both prefabs.

The design of the Speech Bubbles are slightly different to how most custom dialogue presenters, or even the default presenters, work. At first glance it might not be obvious as to what each piece does, that is what this section is for.

The Bubble Dialogue View is the subclass and is what talks to the for the relevant events in the story. The Bubble Dialogue View manages all the various bubbles that will need to be shown on screen, in particular it controls when to create and destroy them and gives them the content they need to show. The Bubble Dialogue View is a essentially a middle-man between the actual game objects shown on screen and Yarn Spinner.

The Bubble and Bubble Content are the two classes that control where and what is shown on the screen. The Bubble manages positioning information, determining where to best place the canvas rectangle. What a Bubble appears like, so it's shape, text, colours, and so on are determined by it's Bubble Content.

The Bubble Content represents a single piece of content. So each line that needs to be shown is a piece of content, the collection of options is another piece of content. The Bubble then shows this piece of content, and when a new piece of content comes in removes the old and shows the new. The Bubble gets given this Bubble Content to show by it's Bubble Dialogue View. The specific information contained within a Bubble Content changes depending on what needs to be shown to the player, the most common information is the line.

The reason for this split is because the way a bubble determines where to place itself is not significantly impacted by it's content. Only the size of the text inside the content changes this, the rest is the same no matter what. This means a great deal of code could be extracted and kept generic from the rest of the presentation. This means making visually unique bubbles is now easier by subclassing the Bubble Content, all the positioning code can be reused for every visually different bubble.

The last class that operates in a different manner from the Yarn Spinner norm is the Bubble Input. When the user wants to hurry up or skip lines in Yarn Spinner this is handled by the , Speech Bubbles however are a bit different in this respect. Because they can only show a single option at a time they need to have a way to also support changing between which option is currently being shown by the bubble, this is what the Bubble Input does.

The Line Advancer is still a part of the equation, as hurrying up lines is still something people will want to do with Speech Bubbles, however it is no longer directly configured by you in the editor. Instead Bubble Input has a reference to the Line Advancer and it will set the appropriate values. This is just to avoid having to change two objects at once, however if you do want to have this behaviour the Bubble Input has a toggle called Independent Advancer Configuration where if set means the Bubble Input won't attempt to change the configuration of the Line Advancer.

A Yarn Spinner for Unity typewriter, for better integration with Text Animator for Unity.

That's a lot of "for Unity"s. Welcome to the official Yarn Spinner integration for Text Animator, the best package out there for animated text in Unity (and other engines, too!)

Text Animator for Yarn Spinner seamlessly integrates Text Animator with your Yarn Spinner dialogue presenters. All you need to do is add a Text Animator component to your text view, and connect it up to your Dialogue Presenter. Once that's done, you can use Text Animator animations alongside your Yarn Spinner markup!

Text Animator for Yarn Spinner supports Text Animator versions 2 and 3. We recommend Text Animator 3 - it's got more features, and the integration is easier!

Getting Text Animator for Yarn Spinner

Text Animator for Yarn Spinner is included in the paid itch.io and Unity Asset Store and versions of Yarn Spinner.

Getting started

To get started with Text Animator for Unity, you'll need to install the following components:

• Yarn Spinner for Unity 3.1 from the Unity Asset Store or

Once these are installed, open the config window (Window -> Yarn Spinner -> Text Animator Config). It will guide you through setting up the integration.

When the setup is complete, you can create a new that's set up to use Text Animator. To do this, open the GameObject menu, and choose Yarn Spinner -> Dialogue System with Text Animator.

This dialogue runner prefab comes with a version of Yarn Spinner's built-in that's set up to use Text Animator's typewriter system. To use Text Animator animations, you just use markup. The only difference is that you'll use Yarn Spinner's [square brackets] instead of Text Animator's <angled brackets>.

For example, try creating a Yarn Spinner script that contains the following line:

The easiest way to use Text Animator for Yarn Spinner is to take our out-of-the-box view from the previous section and modify it to suit your needs. However, if you've already got custom views that you want to add Text Animator support to, read on!

To make Text Animator's typewriter work with your own custom dialogue presenter, you will need to add Yarn Spinner's "Text Animator Yarn Typewriter" component onto the same object that has your Text Animator component.

Once the Text Animator Yarn Typewriter is added, you can make use of it in your custom dialogue presenter. When your dialogue presenter's RunLineAsync method is called, you can send it to the typewriter. Here's an example implementation of RunLineAsync that does this:

Text Animator for Yarn Spinner works by creating a new Yarn Spinner class that conforms to the typewriter interface, which then wraps the various Text Animator components. It can then be hooked up to any presenter the same way as any of the default typewriters (like the 'by word' or 'by letter' typewriter).

The majority of the work happens inside TextAnimatorYarnTypewriter, which is a combination typewriter and replacement markup handler. The replacement markup handling is for handling the interplay of Yarn Spinner markup and Text Animator tags.

Both Text Animator and Yarn Spinner have a slightly different philosophy to how their markup and tags should look and work. For the most part we have attempted to make thinking about this a non-issue but our recommended and default way relies on a few things.

The first is we have created a Yarn Spinner replacement markup wrapper for all Text Animator tags and we recommend these be used.

In a practical sense this means a line like:

Can also be written as:

With this, the replacement markup system will swap out the right pieces to recreate the first line.

We recommend this approach because, if you are combining Text Animator tags with action markup, we are unable to know that which parts of the text are invisible, and which are not.

For example, given the following line:

Yarn Spinner doesn't know by itself that the <rainb> elements are invisible characters so the position of the pause markup will be wrong. To handle this, Text Animator for Yarn Spinner will replace the <angle bracket> tags with [square bracket] tags, and then handle all of the tags in the same way.

In Text Animator, you can share a tag ID across behaviours, actions, and appearances, which isn't possible in Yarn Spinner.

To disambiguate this, you can add a type property on the markup attribute. This is used to ensure the correct Text Animator tag is written to the line.

The allowed values for type are behaviour, action, or appearance.

This means if you have the following:

it will become

Likewise, if you want to add a Text Animator disappearance effect, you set a disappearance property to be true on the markup. This will correctly add the # to the tag as needed.

When you're using Text Animator 2, there are three modes you can choose between that determine how Yarn Spinner's markup and Text Animator's tags work together.

• Default

• Exclusively Yarn Spinner markup

• Exclusively Text Animator tags

Each of these modes has their own quirks. The default mode is what we recommend, as it offers the best blend between features and functionality.

You can use replacement markup, action markup, and text animator tags all together in the default mode.

This works by inserting a new, custom Text Animator action (which defaults to <y>) at each point in the line where any Yarn Spinner action markup is.

For this to work, you need to ensure the name of the action markup is in the actionTags property of the Typewriter. (The default one includes the "pause" markup; if you've created your own, you'll need to add them as well.)

As the Text Animator typewrites along the line, it will hit the inserted action. The action will then forward the event over to the appropriate handler.

The downside to this is your action markup handlers will only get told about line progression at these fixed points.

Most of the time this isn't an issue, but if it is, you can run the system in Yarn Spinner Only mode.

Yarn Spinner Tags Only Mode works in a similar manner to default mode: a Text Animator action tag (which defaults to <y>) is inserted into the line. However, instead of inserting the tags only at the points of action markup, it is inserted into every single position.

This allows the action markup handlers to receive the full progression of the Typewriter at each point.

The downside is, because of how this works, you can no longer use Text Animator tags in the line, and there is just a lot more string manipulation going on making everything just a bit messier than the default. This mode is best if you need the full action markup event processing.

The final mode is Text Animator Tags Only Mode. In this mode, you can still use replacement Yarn Spinner markup like [b] and [plural], but any action markup (or the Yarn Spinner translated forms of Text Animator tags) won't work.

This mode is best if you are already comfortable with Text Animator, and are happy using their tag system exclusively.

This is all summarised via the following table:

Yarn Spinner is always free and open source. To help offset the costs of designing, building, and supporting Yarn Spinner, we provide a number of add-ons as paid extras to make implementing Yarn Spinner in your games easier for you.

At the moment, these include:

• Text Animator for Yarn Spinner

• Dialogue Wheel for Yarn Spinner

Text Animator for Yarn Spinner, Snaaake for Yarn Spinner and Classic RPG for Yarn Spinner. are all included in the Itch.io and Asset Store versions of Yarn Spinner for Unity.

Dialogue Wheel and Speech Bubbles are available as separate purchases on the or via the . They can be used with the free or paid versions of Yarn Spinner.

This section of the Yarn Spinner documentation provides guides for the available add-ons.

This Unity package provides two prefabs: Image Dialogue Wheel and Automatic-Layout Dialogue Wheel. The package requires Yarn Spinner for Unity.

This add-on is not part of the open source Yarn Spinner package, and can be purchased from the Yarn Spinner Itch.io Store or via the Unity Asset Store.

Dialogue Wheel for Yarn Spinner provides an Automatic-Layout Dialogue Wheel and a Image Dialogue Wheel prefab. Both are customisable, powerful, and extremely flexible:

• customise fonts, colours, and styles of wheels

• enable and disable segments (Six-Segment Wheel)

• specify specific segments for specific dialogue (Six-Segment Wheel)

• theoretically unlimited options on the wheel (Automatic-Layout Dialogue Wheel)

• works for 2D or 3D games

This guide provides documentation on using both prefabs.

The Image Wheel provides a dialogue wheel with a light scif-fi appearance, and support for up to six segments, and the ability to specify exactly which of the segment positions is used for an option in your Yarn scripts.

To learn how to use the Image Wheel, .

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. You cannot force an option to appear in a specific place on the wheel.

To learn how to use the Automatic-Layout Dialogue Wheel, .

Dialogue Wheel for Yarn Spinner ships with two example scenes, showcasing the flexibiltiy of the Dialogue Wheel.

Automatic-Layout Dialogue Wheel Example

This example shows off the Automatic-Layout Dialogue Wheel, with an ever-increasing number of options being displayed. Once you've installed the package, find this example in Dialogue Wheel for Yarn Spinner/Examples/Automatic Layout Example.

Image Dialogue Wheel Example

This example shows the Image Wheel in action, with a very simple third-person sci-fi game. Once you've installed the package, find this example in Dialogue Wheel for Yarn Spinner/Examples/Image Wheel Example.

You can purchase Dialogue Wheel for Yarn Spinner from the Yarn Spinner Itch Store or the Unity Asset Store.

Once you've purchased it, download the package from the store. It will be in the form of a .unitypackage file. To install the package, open the Unity project that you want to add it to, and open the the Assets menu -> Import Package -> Custom Package...

You'll then be able to select the .unitypackage file for Dialogue Wheel for Yarn Spinner on your file system, and click Open. This will present the Import Unity Package window:

Click the Import button, and Dialogue Wheel for Yarn Spinner will be imported into your project.

The Dialogue Wheel add-on comes has two packages inside the unitypackage, one for the wheels themselves, and one for the Yarn Spinner Samples. The samples contain necessary resources for the two wheel examples but if you already have the samples installed you do not need to add them again.

Next, check out the guides on , or .

You can purchase Speech Bubbles for Yarn Spinner from the or the .

Once you've purchased it, download the package from the store. It will be in the form of a .unitypackage file. To install the package, open the Unity project that you want to add it to, and open the the Assets menu -> Import Package -> Custom Package...

You'll then be able to select the .unitypackage file for Speech Bubbles for Yarn Spinner on your file system, and click Open. This will present the Import Unity Package window:

Click the Import button, and Speech Bubbles for Yarn Spinner will be imported into your project.

The Speech Bubbles add-on comes has two packages inside the unitypackage, one for the speech bubbles themselves, and one for the Yarn Spinner Samples. The samples contain necessary resources for the two speech bubble examples but if you already have the you do not need to add them again.

Speech Bubbles for Yarn Spinner ships with two example scenes, showcasing the flexibility of the Speech Bubbles.

The 2D Sidescroller Example showcases the flexibility of the Speech Bubble in a variety of contexts, including both the Formal Bubble, and the Casual Bubble. Once you've installed the package, find this example in Speech Bubbles for Yarn Spinner/Examples/2D Sidescroller.

The 3D Top-Down Example showcases the Speech Bubbles in a 3D environment, with a variety of small customisations. Once you've installed the package, find this example in Speech Bubbles for Yarn Spinner/Examples/3D Top-Down.

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 the install the Dialogue Wheel for Yarn Spinner package.

Then, create a new Dialogue System in your Hierarchy:

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:

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

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.

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:

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:

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 2 slot of the Dialogue Views section in the Inspector:

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!

You can specify which position on the wheel your dialogue appears using . Specifically, 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:

Results in this:

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:

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:

Will result in this:

Review the , or check out the guide on .

Snaaake is a dialogue presenter for Yarn Spinner that pays homage to the dialogue in classic action games. It shows two characters in a 'radio' view, with retro effect. As characters speak their voice-over lines, the characters play a talking animation, and a subtitle view shows the corresponding text. An animated 'signal level' graphic appears between them during the conversation.

Getting Snaaake

Snaaake is included in Yarn Spinner+, which is available on itch.io and the Unity Asset Store.

Try it out!

Test out the Snaaake presenter by installing the sample:

1. Open the Package Manager by choosing Window -> Packages -> Package Manager.

2. Select the 'Snaaake for Yarn Spinner' package.

3. Select the 'Samples' tab.

4. Install the 'Snaaake' sample. The sample will be copied into your project's Assets folder.

5. Open the 'Snaaake' scene that was copied over, and hit Play.

To use Snaaake in your game's dialogue, follow these steps.

• In the Project tab, find the 'Snaaake for Yarn Spinner' package, and navigate to 'Runtime/Prefabs'.

• Drag the 'Snaaake Dialogue System' prefab into your scene.

• Add your Yarn Project to the dialogue system, turn on Start Automatically, and choose a node.

• Hit play, and enjoy your dialogue!

The Snaaake dialogue presenter is composed of several components.

A TalkingHeadCharacter is a ScriptableObject that contains a number of sprites. The first sprite will be used as the 'idle' frame, and the rest will be used while talking.

A TalkingHeadCharacterView presents sprites from a TalkingHeadCharacter, and can be signalled whether the speaking animation should be playing or not.

The TalkingHeadDialoguePresenter manages a collection of named TalkingHeadCharacterViews, a collection of available `TalkingHead and keeps track of which character is being presented in which view, and which character is speaking the current line. It also monitors an AudioSource's volume levels; when the level is over a threshold, the view that's showing the currently speaking character is signalled to show a speaking animation.

The SubtitleDialoguePresenter is a simple presenter that shows the text of the current line in a TextMeshPro text view.

The Snaaake dialogue presenter includes a Yarn Spinner VoiceOverDialoguePresenter that plays the audio associated with the line. (This component is built-in to Yarn Spinner, and is made use of by this custom presenter.)

To define a character, create a new TalkingHeadCharacter object by opening Assets menu and choosing Create -> Yarn Spinner -> Snaaake -> Talking Head Character. Name it whatever you like, and add the sprites you want to use.

Note: The sprites you use can be any resolution, but they must be square in order for the pixellation effect to work correctly.

Next, select the Snaaake Dialogue Presenter, find the Talking Heads Dialogue Presenter component, and click the + button next to the Characters list. Set the name of the character to the value you use to refer to them in your Yarn Spinner script, and set the value to the TalkingHeadCharacter asset you just created.

To make a character appear in a slot, use the set_slot command in your scripts. The prefab that comes with Snaaake has two slots: left, and right. You can define your own slots, or add more slots, by modifying the Character Slots list in the Talking Heads Dialogue Presenter.

You can change which character is in which slot at any time. Make sure to assign characters to slots before any of their lines play, or the system won't know where to show them.

• Snaaake expects all lines to have an audio file. When the audio for a line finishes, the next line will play. If a line doesn't have audio, it will be skipped.

• You can adjust the style of the retro effect by creating a custom material that uses the retro shader. Simply create a new Material, set its shader to 'Yarn Spinner/Snaaake Retro', and assign it to the Material of the Image on the Character. You can adjust the tint colour, pixellation, dither amount, posterisation, and more.

• To make post-processing effects like Bloom work, you'll need to assign your camera to the canvas. To do this, open the 'Snaaake Dialogue System' prefab in your scene, and find the 'Snaaake Dialogue Presenter -> Canvas' object. Drag your scene's main camera into the Camera slot. (Make sure that your Camera has post-processing enabled!)

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.

The Automatic-Layout Dialogue Wheel works by diving up a circle into a number of regions. The number of regions is determined on-the-fly by the number of options that need to be displayed, the size of each region is determined by diving up the available space on the circle evenly by the number of options, so if you have three options each region will be 120 degrees wide. Each region then gets given a single option to show and that option is placed within the centre edge of the region, coiling around circle in a counter-clockwise fashion. The wheel can also have a deadzone set which is a section of the circle where options can't appear, this is mostly to ensure wheels near the bottom of the screen don't have their options cut off, but can be used for other effects. The deadzone is determined by a start and end angle, anything within this range is a valid spot for options. Anything outside of it, is not. The range inside the example is a start of -30 and and end of 210 degrees, meaning a wedge at the bottom is not available for options. The deadzone angles, the coiling direction, and angle offset of each region can be controlled and customised.

To use the Automatic-Layout Dialogue Wheel , and the .

Then, create a new Dialogue System in your Hierarchy:

Classic RPG is a dialogue presenter for Yarn Spinner that pays homage to the dialogue systems used in old school RPGs.

It shows a text box at the bottom of the screen that hosts lines of dialogue and choices. Text is shown with a character-by-character 'typewriter' effect, and the typewriter supports changing its speed or pausing. When the player hits the 'skip' input, the typewriter speeds up, and starts automatically skipping lines until it hits a stopping point. The presenter also has two different styles of box background, and lines can also have an icon associated with them. It also works with Cinemachine to re-position the camera when dialogue is running.

Getting Classic RPG

Classic RPG is included in Yarn Spinner+, which is available on itch.io and the Unity Asset Store.

Try it out!

Test out the Classic RPG presenter by installing the sample:

1. Open the Package Manager by choosing Window -> Packages -> Package Manager.

2. Select the 'Classic RPG for Yarn Spinner' package.

3. Select the 'Samples' tab.

4. Install the 'Classic RPG' sample. The sample will be copied into your project's Assets folder.

5. Inside the 'Scenes' folder that was copied over, open the 'ClassicRPG' scene, and hit Play. Use the WASD keys to move the character, and press the spacebar to talk to a character.

To use Classic RPG in your game's dialogue, follow these steps.

• In the Project tab, find the 'Classic RPG for Yarn Spinner' package, and navigate to 'Runtime/Prefabs'.

• Drag the 'Classic RPG Dialogue System' prefab into your scene.

• Add your Yarn Project to the dialogue system, turn on Start Automatically, and choose a node.

• Hit play, and enjoy your dialogue!

The central component to Classic RPG is the RPGDialoguePresenter, which manages the dialogue box, the typewriter, options, and most other parts of the presentation. You can find this component in the Classic RPG Dialogue System prefab, under Canvas -> Dialogue Presenter.

Many of the features of the RPGDialoguePresenter can be enabled and disabled via the use of feature flags, which are shown at the bottom of the component's Inspector.

Classic RPG for Yarn Spinner uses several hashtags that affect the way that dialogue is shown.

#end

The #end hashtag signals that this line is the final line, and makes the 'next' button appear as a square. This tells the player that they've reached the end of the conversation and that something other than more dialogue is about to happen.

noskip

The #noskip hashtag signals that the line should not allow skipping, and should interrupt any skipping that is already taking place. See 'Skipping' below for more information.

#icon:

The #icon: hashtag signals that this line of dialogue should have an icon shown next to it. See 'Icons' below for more information.

#lastline

The #lastline hashtag signals that the next piece of content will be options, and that the dialogue presenter should show the content in the options view.

center

The #center hashtag signals that the text should be shown centered in the dialogue box, rather than the default of left-aligned.

The dialogue presenter plays audio when the dialogue is interacted with. You can associate an audio clip with the following events:

• Next Line: Played when the player advances to the next line.

• End Dialogue: Played when the dialogue box finishes displaying a line of dialogue that is marked with the #end hashtag.

• Leave Dialogue: Played when the player advances past a line of dialogue that is marked with the #end hashtag.

Options are shown in the dialogue box, alongside the preceding line of dialogue. The box has room for 3-4 choices, depending on the length of the preceding line.

If you want to use a different dialogue presenter to handle your options, you can turn off the 'Use Options' feature. When the feature is off the dialogue presenter won't handle options.

You can show an icon in the dialogue box through the use of the #icon: hashtag.

To show an icon, place a sprite in a folder named Resources. The folder can be anywhere in your project. The name of the sprite can also be anything you like, but can't include spaces or any punctuation that isn't a hyphen - or underscore _.

When the sprite is in the folder, you can use it in the dialogue box. For example, the demo scene has a sprite called IconStick, and it's used in the script like this:

The dialogue box appears on screen with a scaling-up animation that slightly overshoots before settling back down to normal size. You can adjust the timing of this animation in the Inspector, or disable the animation entirely.

The Action Button is a user interface element that appears at the top of the screen that indicates what action will be performed when the player performs the Interact input action. The dialogue presenter shows several verbs in the action button, such as 'Next' or 'Decide'. You can adjust the text that's shown by modifying the labels in the Inspector.

The action button can be shared between different systems. In the demo scene, the action button is also used by the character controller to show verbs like "Speak" when the player approaches a character.

When dialogue starts, two black bars slide in from the top and bottom of the screen. These are simple black Image components that are layered below the other UI elements, which create more of a cinematic look. You can adjust the timing of the letterbox by selecting the Letterbox object and adjusting its Time property.

The RPGDialoguePresenter listens for an action from the Unity Input System that notifies that the user wants to start skipping dialogue. In the sample scene, this is bound to the UI/Cancel action that comes with the Yarn Spinner samples, and players generally expect it to be the "B" button on the Xbox and Switch controllers, the Circle button on a PlayStation controller, and the Escape key on a keyboard.

When the action is performed, the presenter tells the typewriter effect to start displaying text faster, and to automatically advance to the next line when it reaches the end. Once skipping has started, it continues until any of the following:

• A line of dialogue with the hashtag #end is reached.

• A line of dialogue with the hashtag #noskip is reached.

• Choices are displayed.

The dialogue box will automatically close when dialogue is complete. You might also want to hide the dialogue box in the middle of your dialogue; for example, if you want to show a custscene. To hide the box, use the <<hide_dialogue>> command:

This will close the box with an animation.

You can customise the image that the dialogue box uses to display its content. Out of the box, the presenter has two styles: normal (a semitransparent black box with rounded corners and hard edges), and blue (a semitransparent blurred blue box with soft edges.)

To define your own custom styles, add them to the Background Styles list.

To change the box's style in your Yarn Spinner script, use the <<set_dialogue_style>> command:

Note: Generally, you'll want to dismiss the dialogue box with <<hide_dialogue>> before changing the dialogue style. If you don't, the box will change its style immediately, which can look jarring.

The camera control seen in the sample scene isn't actually part of the dialogue presenter, but instead are Unity events fired when dialogue starts and ends. These events signal to a DialogueCameraManager script to enable or disable a Cinemachine camera that has higher priority, which causes the camera to transition to the closer 'over-the-shoulder' view.

The dialogue box displays its content with a typewriter effect, which reveals the text gradually. You can adjust the speed of this typewriter in the Inspector by changing the Default Characters Per Second value. If the skipping feature is enabled, you can also adjust the speed that the typewriter runs at while skipping content.

Adjusting Speed

You can also modify the speed of the dialogue in the middle of a line, using the [speed] markup. This allows you to define a range that customises the number of characters that are shown per second.

If you set the speed value to 0, the characters within the markers will appear all at once.

If the dialogue box is skipping content (see 'Skipping' above), then speed markers are ignored.

Pausing

You can add pauses in the middle of the typewriter, using [pause] markup. This marker instructs the typewriter to pause for a given number of milliseconds before continuing.

If the dialogue box is skipping content (see 'Skipping' above), then pause markers are ignored.

The dialogue box uses a Palette Marker Processor to allow adjusting the colour of text using markup. This is a feature that ships with Yarn Spinner; in the prefab that ships with Classic RPG for Yarn Spinner, we define three colours: c0, c1 and c2, which are red, green and blue respectively.

To use your own colours and markers, create a new Palette asset by opening the Assets menu and choosing Yarn Spinner -> Markup Palette. Add the entries you want, and then select the Markup Processors object in the Classic RPG Dialogue System. Drag the Palette you just created into the Palette Marker Processor's 'Palette' field.

We hope you enjoy using Classic RPG for Yarn Spinner, and can't wait to see what you make with it.

If you need help with Classic RPG for Yarn Spinner, or have feedback, join the Yarn Spinner Discord, or email us at hello@yarnspinner.dev.

Thanks! 💚

The Speech Bubbles Add-On provides a flexible speech bubble system with a variety of possible customisations. Here, you'll learn how to implement it in a Unity project by looking at a basic little 3D game. We'll be using prefabs and assets from the Yarn Spinner Samples package to speed this up, but nothing we are using from there is necessary, it's just faster than building all the infrastructure out ourself.

Setting up for Speech Bubbles

To use Speech Bubbles for Yarn Spinner, you'll need to create a new Unity project and install the Yarn Spinner package, and then install the Speech Bubbles for Yarn Spinner package.

For this guide, we'll be making a simple 3D game that will look like this:

Our environment and the characters will all be using the exact same Sample Package assets we used to build out the examples for the Speech Bubbles in addition to all the samples in the Samples package.

Building the Basics

First we want to have the environment to wander around in, so from the Packages/Yarn Spinner Samples/Prefabs folder grab the Basic Arena prefab out and drop it into the scene.

Our script, which we've yet to write, will have two characters, the player and one NPC so we need them next. From the Packages/Yarn Spinner Samples/Prefabs folder grab the Player prefab and place them somewhere in the arena. From the same folder grab the NPC prefab and place it somewhere else in the arena. We also want our NPC to be coloured orange, or else the story won't make any sense.

Select the NPC and rename them to be called "Orange", then in the Inspector find the Character Appearance component and select the Orange button.

Orange will change to now be coloured the same as their namesake. Once that is done we should have our world built out.

The player can move about so we will want the camera to track them, luckily the code for that is also already done in the sample assets. From the Packages/Yarn Spinner Samples/Prefabs folder and drag the Camera Rig prefab into the scene. This includes a camera so we can select the existing Main Camera from the hierarchy and delete it. For the camera rig to follow the player we need to let it know that that is it's target. To do this select the Camera Rig and in the Inspector drag the Player from the Hierarchy into the Target field.

Now our camera is following the player, you can test this by starting the game and walking the player around the scene.

Time to make the dialogue happen, first we will make our project by creating a new Yarn Project asset by going Create -> Yarn Spinner -> Yarn Project and we'll name it Demo.yarnproject. For our script we'll also make that now Create -> Yarn Spinner -> Yarn Script and name that Demo.yarn. Open Demo.yarn and add the following dialogue:

With this magnum opus of a story done let's get it into our demo game.

In the Hierarchy right click and add a new Yarn Spinner -> Dialogue System to the scene. Select the Dialogue System and in it's Inspector set the Yarn Project field to be our Demo.yarnproject we just made.

Last piece of the puzzle is to make it so that Orange can trigger dialogue when interacted with. Select out Orange NPC in the scene and in it's Inspector connect our Dialogue System into it's Dialogue Runner field, our Demo.yarnproject project into it's Dialogue field and from the node dropdown select the Orange node.

Now if you run the scene once again you'll see it all work, but it's just using the default presenters, and not the speech bubbles. Everything we've done up until now is just getting a basic scene up and running so that we can add the bubbles, so let's do that now.

Bubbles are a bit different from most presenters, they need to both be told about the dialogue events, so must participate in the dialogue system but also need to understand the characters they belong two so they can anchor the actual individual bubble with that character. These two pieces need to be done before they'll work.

First up we will need to modify the dialogue system. Expand out the Dialogue System and it's Canvas. Select the Line Presenter and Options Presenter and delete both of them, we won't need them as the Speech Bubbles will handle both roles. Add a new empty game object to the Canvas and name it "Bubble Dialogue View".

In the Inspector for the Bubble Dialogue View add a new Bubble Dialogue View component to the game object. This is our actual Speech Bubbles presenter component but it will need some configuration. In the Bubble Prefab field add the Casual Bubble from the Prefabs folder in the Speech Bubbles install. In the Bubble Canvas field add the Canvas from the Hierarchy into this field.

As discussed in the way Line Advancer works with the bubbles is a bit different than other presenters. We will need to add a Bubble Input system in addition to the Line Advancer otherwise bubbles won't know how to handle their options.

Select the Line Advancer from the Dialogue System. In it's Inspector add a new Bubble Input component to the Line Advancer game object. Now to configure it!

Add the Line Advancer from the Hierarchy into the Bubble Input's Line Advancer field. Add the Bubble Dialogue View from the Hierarchy into the View field. Add the Dialogue System from the Hierarchy into the Runner field. Finally, configure the input however you wish, we just left ours as keycodes.

The last step is to make it so the Dialogue Runner is actually aware of these changes, otherwise we are not gonna have a fun time.

Select the Dialogue System and in it's Inspector delete all the elements inside the Dialogue Presenters field. Set the size of that field to be two. Into the new slots drag the Bubble Dialogue View and the Line Advancer into these slots, respectively.

Now we need to anchor the bubbles to their characters.

Because the bubbles don't know the world position of the character they are associated with we need to give them that information. We do that via a Character Bubble Anchor, which is little more than a transform the Bubble Dialogue View knows about so it can map that anchors world position into a canvas screen position. Let's add them now.

Select the Player and add a new empty game object to the Player, name it Anchor. Add a Character Bubble Anchor component to the anchor game object. In the Inspector set the Character Name field to be Player, this is used later so that the Bubble Dialogue View can use the current line's speaker name to work out which anchor to use. Leave the rest of the values as is.

Do the same with Orange, add a new game object and call it Anchor, add a Character Bubble Anchor to it, and set the Character Name to be Orange.

The transform value set on the anchor, or the transform of the anchor itself if one isn't set, will be the position that is used to anchor the bubble. So make sure on both the Player and Orange to position the anchor somewhere that feels right to you. To help with this a small green ball gizmo will be drawn at the anchor location, so using that we placed the anchor point slightly above the characters heads, but you can put it anywhere you want.

With that, you can play your project and see the Speech Bubbles in action:

Next check our provided which show off using the bubbles in 2D as well as 3D and how you can create custom bubble content for individual characters.