Customising VNKit

Each part of VNKit that you’re likely to want to change is its own component or prefab, so you can replace it with your own.

Finding images and audio

VNKit finds images, Render Textures and audio files with an Asset Provider. The Visual Novel Kit prefab comes with an Aliased Resources Asset Provider, which looks in Resources folders using the names described in Naming your images, and adds the alias_sprite Command.

VNKit also comes with a Resources Asset Provider, which works the same way without alias_sprite.

To find assets your own way, for example from Addressables or from a folder layout of your own, subclass AssetProvider and override ResourceFromPath. It’s given the words from the Command, like ["capsley", "happy"] for <<show capsley happy>>, and returns the asset, or null if there isn’t one. This one only looks for capsley/happy:

using UnityEngine;
using Yarn.Unity.Addons.VNKit;

public class FolderAssetProvider : AssetProvider
{
    public override T ResourceFromPath<T>(string[] pathElements)
    {
        return Resources.Load<T>(string.Join("/", pathElements));
    }
}
FolderAssetProvider.cs, an Asset Provider that joins the Command’s words into one path.

To use a different Asset Provider:

  1. Add it to the Visual Novel Kit prefab, and remove the Aliased Resources Asset Provider.
  2. Set the Asset Provider on the Visual Novel Interface, the Provider on the Stage Manager, and the Asset Provider on the Audio Presenter to your new component.

Animating characters

How characters appear, change, move and leave is up to the Basic Animator, on VNKit’s Stage prefab. Its settings are described in How characters animate.

For animations it can’t do, subclass IImageAnimator, and set the Animator on the Stage prefab’s Image Presenter to your component. IImageAnimator is an abstract MonoBehaviour with a method for each kind of change:

MethodCalled when
PresentImageInEmptySlotA character appears in an empty slot.
PresentImageInOccupiedSlotA character appears in a slot someone else is in.
SwapImageForCharacterA character on stage changes image.
MoveImageIntoEmptySlotA character moves to an empty slot.
MoveImageIntoOccupiedSlotA character moves to a slot someone else is in.
RemoveImageA character is hidden.
RemoveAllImagesEvery character is removed at once.
Pop, Shake, Flip, FadeThe matching Commands.
Emphasis, DeemphasisA character is emphasised or dimmed.
The methods an IImageAnimator implements.

It also has a BackgroundSize property, which VNKit sets whenever the stage changes size.

Each method that animates gets a duration and a CancellationToken. When the token is cancelled, finish the animation straight away, with everything in its final position. VNKit cancels the token to make a change instant, and to finish animations started with nowait early.

Your own text box

To draw the text box yourself, make a prefab with a component that subclasses LineBox:

MemberWhat it does
MainLineTextThe TMP_Text the line is typed into.
SetContent(CharacterData character, string bodyText, int maxVisibleCharacters)Shows a line, using the speaker’s Character Data for the nameplate and the box’s look.
HideContent()Hides the box’s content.
The members a LineBox implements.

Then either:

  • set Default Line Box to Custom on your Configuration asset, and set Line Box Prefab to your prefab, to use it for every character, or
  • set Box Type to Custom on a character’s Character Data, and set its Line Box Prefab, to use it for that character.

Your own typewriter

To type lines out your own way, set Typewriter to Custom on your Configuration asset, and set Custom Typewriter to a component that implements Yarn Spinner’s IAsyncTypewriter interface.

Your own options

To change how options look beyond the settings on your Configuration asset, make a prefab with an AsyncOptionView component. Turn on Use Custom Option Prefab, and set Custom Option Prefab to your prefab.