Backgrounds and Stages

Everything VNKit shows happens on a stage: a background, with characters in front of it. Most visual novels only need one stage. VNKit makes one for you, called main, when the dialogue starts.

Backgrounds

CommandWhat it shows
<<bg image seconds>>An image.
<<scene image seconds>>An image, after removing every character from the stage. Use it when the story moves somewhere new.
<<bg_colour colour seconds>>A solid colour.
<<bg_live seconds>>Nothing, so the game behind the visual novel shows through.
<<bg_render texture seconds>>A Render Texture.
The background Commands.

Images

bg and scene find their image the same way characters do, from a Resources folder:

<<bg backgrounds/beach 1>>
<<bg "bg uni lecture hall">>
Two background images, found by name.

The first finds Resources/backgrounds/beach, and fades it in over a second. The second finds bg uni lecture hall. See Naming your images for the names VNKit tries.

Colours

bg_colour takes a colour name, like red or black, or a hex colour without the #, like FFA500:

<<bg_colour FFA500>>
An orange background, from a hex colour.

If VNKit doesn’t recognise the colour, it shows black.

Live backgrounds

bg_live removes the background, so you can see your game’s own scene behind the characters and the text box.

Render Textures

bg_render shows a Render Texture from a Resources folder, found by name the same way as an image. Use it for backgrounds that change while they’re on screen.

The size of the stage

A stage takes its size from its background. When you show a background image, the stage becomes the same shape as the image. If that’s a different shape from the screen, VNKit adds bars at the top and bottom, or at the sides, so the whole stage fits on the screen.

A colour or a live background doesn’t have a size, so the stage keeps the size it already has. If there’s no background yet, the stage uses the Default Stage Size from your Configuration asset, which starts at 1920 by 1080.

Characters are scaled to fit the stage, so they stay the same size compared to the background.

Using more than one stage

You can make extra stages, each with its own background and characters. Use them to set up a whole scene before you switch to it, or with a mask, to show two stages at once.

Two stages are important at any time:

  • The active stage is the one your Commands change.
  • The top stage is the one that’s shown.

The main stage starts as both.

CommandWhat it does
<<new_stage name>>Makes a new stage.
<<remove_stage name>>Removes a stage. You can’t remove the main stage, the top stage, or the only stage.
<<use_stage name seconds>>Makes a stage the active stage. It doesn’t make it the top stage.
<<raise_stage name seconds>>Makes a stage the top stage, with a transition. The stage that was on top goes underneath it.
<<switch_stage name seconds>>Makes a stage both the active stage and the top stage.
<<fade_out_stage name seconds>>Fades a stage out. This works on the only stage too, to show the game behind it.
<<fade_in_stage name seconds>>Fades a stage back in.
The stage Commands.
<<new_stage flashback>>
<<use_stage flashback>>
<<bg backgrounds/school>>
<<move capsley left>>
<<show capsley young>>
<<raise_stage flashback 1>>
Setting up a flashback stage, then raising it.

This sets up a stage called flashback while the main stage is still showing, then brings it to the top over a second.

Which stage a character is on

When a Command names a character, VNKit finds the stage they’re on, so you don’t need to change the active stage to update them. It looks in this order:

  1. The active stage.
  2. The top stage.
  3. Every other stage, in the order they were made.

If no stage has the character, they’re added to the active stage. This means a character can only be on one stage at a time.

Masks

A mask shows part of the top stage, and the stage underneath it everywhere else. Moving the mask reveals more of one stage and less of the other.

CommandWhat it does
<<start_mask stage seconds>>Makes the stage the top stage, and puts a mask over it. The mask starts out covering the whole screen, so the whole stage shows.
<<mask_left amount seconds>>Moves the mask left. amount is a fraction of the screen’s width, from 0 to 1.
<<mask_right amount seconds>>Moves the mask right.
<<mask_up amount seconds>>Moves the mask up. amount is a fraction of the screen’s height.
<<mask_down amount seconds>>Moves the mask down.
<<end_mask seconds>>Moves the mask back over the top stage, and removes it.
The mask Commands.
<<start_mask phone_call>>
<<mask_left 0.5 1>>
Showing the phone_call stage on the left half of the screen.

This moves the mask half the screen to the left over a second. The left half of the screen shows the phone_call stage, and the right half shows the stage underneath.

There’s one mask at a time.

Custom masks

The Stage Manager, on the Visual Novel Kit prefab, has a Custom Mask field. If you set it to a prefab with a Sprite Mask on it, start_mask uses that instead of a mask that covers the whole screen. The mask Commands move it the same way.

Next step The Text Box Names, nameplates, the box's look, and how lines are typed out.