Quick Start with the Template

VNKit for Yarn Spinner comes with the VNKit Template, a Unity project that already has VNKit set up. It has a short sample story on a beach, with three characters, a choice, music, sound effects and voice lines. The quickest way to start a visual novel is to open the template and change its story.

Opening the template

In Unity Hub, choose Add, then Add project from disk, and pick the template’s folder.
Open the project. The template is set up for Unity 6000.3.23f1.
Open Assets/Scenes/SampleScene.unity, and press Play.

The main menu appears. Choose Play Game to start the story. Press Space to move to the next line, and the Up and Down arrow keys and Space to pick a choice. See Standalone Mode for all the controls.

PLACEHOLDER — Screenshot needed

The template’s Project window, with the Dialogue, Resources, Scenes and Settings folders open.

What’s in the template

Folder or file	What it is
`Assets/Dialogue/Main.yarn`	The sample story.
`Assets/Dialogue/Visual Novel.yarnproject`	The Yarn Project. Its English localisation points at the `Voice/en` folder.
`Assets/Dialogue/VNKit.ysls.json`	Describes VNKit’s Commands to the Yarn Spinner editor, so you get autocomplete and warnings as you write.
`Assets/Dialogue/Voice/en`	The voice lines, one audio file for each character’s line, named after the line’s ID.
`Assets/Resources`	The character images, backgrounds, music, ambience and sound effects.
`Assets/Settings/VN Configuration.asset`	The Configuration asset that sets up how the visual novel looks and behaves.
`Assets/Scenes/SampleScene.unity`	The scene you play.

The parts of the VNKit Template you’ll change most.

The template’s art and audio are placeholders. Replace them with your own.

How the sample story works

The story starts at the Main node, which is set as the starting node in the Configuration asset. Main detours into Setup to set up the characters, then jumps to the first scene:

title: Main
---
<<detour Setup>>
<<jump Beach>>
===

The Main node in Main.yarn.

Setting up the characters

Setup gives each character a short name to use in the script, a size, and a nameplate. After <<character c Capsley>>, a line that starts with c: is spoken by Capsley, and his nameplate says “Capsley”:

<<character c Capsley>>
<<scale c 0.9>>
<<nameplate c 4f63c2>>
<<name_colour c ffffff>>
<<nameplate_position c left>>

Setting up Capsley, from the Setup node.

The first scene

<<ambience waves 2 nowait>>
<<scene backgrounds/beach 2>>
A quiet morning on the beach. A few tentacles are sticking up out of the water. #line:a8be0d79

<<music beach 3 nowait>>
<<move capsley left>>
<<show capsley neutral 0.6>>
c: Lovely day for selling yarn. #line:bab4f433
c: Nobody here to buy any, though. Just me and the sea. #sad #line:b82bef89
<<jump Witch>>

The start of the Beach node.

<<ambience waves 2 nowait>> starts the sound of waves, fading in over 2 seconds. nowait lets the story carry on while it fades in.
<<scene backgrounds/beach 2>> clears the stage and fades in the beach background over 2 seconds.
<<move capsley left>> then <<show capsley neutral 0.6>> fades Capsley in, in the left slot, over 0.6 seconds.
#sad on Capsley’s line changes his image to Capsley/sad.
The #line: hashtags are line IDs. Each character’s line has a voice line, the audio file with the same name in Assets/Dialogue/Voice/en. The narration lines don’t have one, so they’re shown without a voice.

Moving characters around

<<move witch far_right>>
<<show witch neutral 0.6 nowait>>
w: You're not the only one here, salesman. #line:34ab3be5
c: Oh! Hello! Can I interest you in some yarn? #happy #line:bb94f11c
<<move witch centre 1>>
w: I did not come here for yarn. I came for the dragon of the dunes. #line:17467498
<<sound thud>>
<<shake centre 0.5>>

The Witch arrives and walks to the centre.

The Witch fades in at far_right while her first line is shown, then walks to centre. <<shake centre 0.5>> shakes whoever is in the centre slot.

The Dragon walks on from just off the right edge of the stage:

<<move dragon off_right>>
<<show dragon neutral>>
<<sound splash>>
<<move dragon right 1>>
<<pop dragon 0.6>>

The Dragon walks on from off_right.

Choices

The Dragon node ends with a choice, and each option jumps to its own node:

-> Offer the dragon a scarf #line:10e56f2c
    <<jump Scarf>>
-> Back away slowly #line:cf861d9d
    <<jump BackAway>>

The choice at the end of the Dragon node.

In BackAway, Capsley walks off the left edge while the Dragon speaks, and the story waits for him to finish leaving before the Witch moves:

<<move capsley off_left 1 nowait>>
d: He left his yarn behind. #line:5c8a24f0
<<wait_for capsley>>
<<move witch left 0.8>>

Part of the BackAway node.

The end

<<hide_textbox 0.5>>
<<stop_music 3 nowait>>
<<stop_ambience 3 nowait>>
<<hide capsley 1 nowait>>
<<hide witch 1 nowait>>
<<hide dragon 1>>
<<bg_colour black 2>>
The End. #line:81ca299a

The last lines of the story.

The music and the waves fade out while the characters fade away, then the background fades to black.

Making it your own

Put your character images in Assets/Resources, in a folder for each character with a file for each pose, like Resources/Capsley/happy.png. See Characters.
Put backgrounds in Assets/Resources/backgrounds, music in Assets/Resources/music, ambience in Assets/Resources/ambience, and sound effects in Assets/Resources/sounds.
Change the look of the text box, the nameplates and the main menu on Assets/Settings/VN Configuration.asset. See The Text Box.
Write your story in Main.yarn, or add more .yarn files to the Dialogue folder.

Next step Writing Commands How VNKit's Commands are written, how long they take, and running them at the same time.

Mark this page as complete Completed!

Next Adding VNKit to Your Project