Making your work

Animate on the Stage

A visual novel can be more than static sprites and text. Inside the VN editor is a full Stage, a no-code, Flash-style animator, where you pose characters, move the camera, and choreograph a moment with a timeline. If you've ever wanted your scenes to actually move, this is how.

Read time about 8 min

1Add a Stage scene

In the VN editor's Scenes tab, the + Add menu offers a few scene kinds: Basic, Advanced (timeline), Stage (animated), and Explorable (walk). Pick Stage (animated) and you drop into the animator: a three-pane layout with a Library on the left, the Stage canvas in the middle, and a Timeline along the bottom. It's the classic animation workspace, and it's all no-code.

The Scenes tab's + Add menu: Basic scene, Advanced (timeline), Stage (animated) and Explorable (walk).See the full screen

Stage scenes sit right alongside plain dialogue scenes in the same VN. Use them for the moments that deserve movement, an entrance, a reveal, a gut-punch, and keep the quieter beats simple.

Pro note

Not every scene needs the Stage. Animate the moments that matter and keep the rest simple. That contrast is what makes the big ones land.

2Symbols: reusable pieces

Everything on the Stage is a symbol, a reusable piece kept in the Library. A symbol can be a simple graphic (a character, a prop), a movie clip (its own little animation you can drop in anywhere), or a button the reader can click. You can also open a symbol and edit inside it, the breadcrumb shows Scene, then the symbol name, so a character's blinking eyes are their own tiny timeline nested within the character.

The Stage's Library panel, with New symbol and the Wolfrana graphic symbol listed.See the full screen

Pro note

Build a symbol once, reuse it everywhere. Change the master and every copy updates. That is how you animate fast.

3The timeline: keyframes and tweens

Movement lives on the Timeline. You work in layers (one per character or element), and you set keyframes, snapshots of where something is at a given moment. Put a character on the left at one keyframe and on the right at another, add a tween between them, and the Stage smoothly fills in every frame in between. That's motion with no math: pose the start, pose the end, let the tween do the walk.

The Stage timeline: Ship and Space layers, with the Ship keyframes joined by a tween line.See the full screen

A selected keyframe's Easing setting, set to ease-in-out.See the full screen

You can also drop frame labels to name a moment and frame actions to make things happen at a point in time, so the animation and the story stay in step.

Pro note

Two keyframes and a tween is 90 percent of animation. Master that one move and everything fancier is just more of the same.

4How readers see it

When you publish, the VN plays in the browser: your Stage scenes animate, your choices branch, and readers move through the story at their pace. Because a visual novel is online only, it plays inline on your public page or in a full-screen view, with nothing to install. A free, published, linear VN can even auto-play as your studio's banner, a moving showcase right at the top of your page.

Pro note

Preview constantly. Animation reads completely differently in motion than it looks frozen, so watch it play after every change.

Animate your first scene

Pose, tween, play. Links into the app. Saved on this device.

Add a Stage (animated) scene to a VN→

Make a symbol and place it on the Stage→

Set two keyframes and tween between them→

Preview it, then publish→

Quick questions

Yes. The Stage is a visual animator: you place symbols, set keyframes, and add tweens. No scripting to move things, though frame actions let you trigger events at a moment in time if you want them.

A symbol is any reusable piece in the Library. A graphic symbol is a still piece; a movie clip is a symbol with its own timeline (a self-contained animation you can reuse); a button symbol is clickable. You can edit inside any of them.

Set a keyframe for the start pose and another for the end, then tween between them. The Stage smoothly interpolates every frame in between, so you animate by posing, not by drawing each frame.

No. Stage scenes live alongside Basic and Advanced scenes. Animate the moments that deserve it and keep the rest simple, that mix is usually the strongest.

Inline on your public page or in a full-screen view, since visual novels are online-only. A free, published, linear VN can also auto-play as your studio banner.

Now it moves

Symbols, a timeline, and tweens that do the in-between work. Your scenes move now. Go make something that moves people.

Visual novels →