Welcome

Welcome is an introduction to the samples. Capsley, a blue capsule character, stands in front of a projector screen and gives a short talk about Yarn Spinner and the samples. Most of Capsley’s lines show in the usual dialogue box at the bottom of the screen. The slides on the projector are written as lines of dialogue too, and a custom Presenter turns them into a heading, bullet points or a picture.

After the opening slides, Capsley asks which samples you’d like to hear about. Each choice shows a few slides about one group of samples, with a screenshot of each sample while Capsley describes it. Afterwards the same question comes back. Choose Nah to finish the talk.

Running it

Open samples/welcome/welcome.tscn and click Run Current Scene. The dialogue starts by itself.

• Press Enter or Space, or click, to show the whole line or go to the next one.
• Click an option, or move between options with the arrow keys and press Enter or Space to pick one.
• Click a link in a line to open it. Two open web pages in your browser, and one opens Intro.yarn.

Many of the samples share their dialogue UI and characters, which are in samples/shared. Welcome uses the shared dialogue scene and Capsley’s character scene from there. See What the samples share.

How it works

The scene builds on samples/shared/scenes/dialogue.tscn, which has a Dialogue Runner with Auto Start on, a Line Presenter and an Options Presenter. Editable Children is on for that instance, so Welcome can change the nodes inside it. The Dialogue Runner’s Yarn Project is set to Intro.yarnproject, a third Presenter, Slideshow, is added to its Presenters, and a LinkOpener node is added under the Line Presenter.

The slide itself is ordinary 2D UI inside a SubViewport. A MeshInstance3D in front of the projector screen uses a ViewportTexture of that SubViewport as its material, so whatever the SubViewport shows appears on the screen in the 3D scene.

CharacterBody3D is Capsley, from samples/shared/scenes/explanation_character.tscn. In this sample, Capsley only stands there.

Links in lines

Three of Capsley’s lines have [link] markup, like this one:

Capsley: The Yarn file for this sample is [link="Intro.yarn"]here[/link].

The Line Presenter shows a link as clickable text. LinkOpener (samples/shared/scripts/link_opener.gd) handles the click. A link that names a file, like Intro.yarn, opens that file from the samples folder. Any other link opens in your web browser. See Links.

Slides in the Yarn Script

Each slide is a group of lines between two Commands. Lines from the characters SlideHeader, SlideBullet and SlideImage are the slide’s content.

<<start_slide>>
SlideHeader: Agenda
SlideBullet: Yarn Spinner
SlideBullet: Why it's so great
SlideBullet: The list of samples
<<end_slide>>

Capsley: Let's get cracking!

<<clear_slide>>
<<start_slide>>
SlideImage: code-1
<<end_slide>>

The lines between <<start_slide>> and <<end_slide>> go by without the player pressing anything, so the whole slide appears at once.

The rest of the script is ordinary Yarn. The SampleSelection node shows the options, and each option uses <<detour>> to run a node about one group of samples, then returns to the options. Nah uses <<jump>> to go to the End node. See Scripting Fundamentals for how options, jumps and detours work.

The Slideshow Presenter

slideshow.gd is a custom Presenter. It extends YarnDialoguePresenter, and its start_slide(), end_slide() and clear_slide() functions are the three Commands.

The Commands are connected in the Inspector, with no code. The YarnBindingLoader node’s Dialogue Runner is set to Dialogue/YarnDialogueRunner, and its Bindings list has three binding resources, saved in samples/welcome/bindings. Each one has a Yarn Name, like start_slide, a Target Node, which is Slideshow, and a Method Name, like start_slide. When the scene starts, the Binding Loader adds each one to the Dialogue Runner as a Command. The Commands and Functions sample uses a Binding Loader too.

The Dialogue Runner gives every line to all of its Presenters. Slideshow only uses a line while a slide is being built, and only if the line’s character is one of the three slide characters:

func run_line(line: YarnLine, _token: YarnCancellationToken = null) -> void:
	if line.character_name.is_empty() or not _running_slideshow:
		return

	var text := line.text_without_character_name

	match line.character_name:
		"SlideHeader":
			_set_header(text)
		"SlideBullet":
			_add_bullet(text)
		"SlideImage":
			_set_image(text)

run_line() returns immediately, so Slideshow never holds a line on screen. For SlideImage, the line’s text is a file name. The Presenter looks in its Image Folder, res://samples/welcome/images, for that name ending in .png, .jpg, .jpeg or .webp. If there’s no such file, it prints a warning and leaves the picture empty.

Left alone, the Line Presenter would show the slide lines in the dialogue box as well. To stop that, the Commands change which Presenters the Dialogue Runner uses:

• <<start_slide>> removes each Presenter in the Override Presenters list from the Dialogue Runner with remove_presenter(), and hides it. In this scene, the list has the Line Presenter. It also hides the slide, plays Advance Sound, and starts slide mode.
• <<end_slide>> waits for Delay Before Showing New Slide, which is 0.5 seconds, then adds the same Presenters back with add_presenter(), shows the slide, and ends slide mode. The dialogue waits for this Command to finish before it goes on.
• <<clear_slide>> empties the heading, body and picture.

While the Line Presenter is removed, the only Presenters left are the Options Presenter and Slideshow. Neither of them waits on a line, so the slide lines run one after another without any input. See How it works with Presenters.

Things to try

• Add a slide of your own to Intro.yarn, with a <<clear_slide>>, a <<start_slide>>, a SlideHeader line, some SlideBullet lines and an <<end_slide>>.
• Select Slideshow and change Delay Before Showing New Slide. With a larger number, the dialogue box takes longer to come back after each slide.
• Select YarnBindingLoader and remove clear_slide.tres from Bindings. When the dialogue reaches <<clear_slide>>, the Dialogue Runner logs an error and carries on, so slides aren’t emptied first. The picture of Yarn code keeps the Agenda heading, for example.
• Select Slideshow and remove the Line Presenter from Override Presenters. The slide lines then show in the dialogue box as well, with names like SlideBullet, and you have to click through each one.