Visual Novel Maker: First Steps

Now that we’ve had a whistle-stop tour of Visual Novel Maker’s main features, it’s time to delve into how it all works.

Today we’ll be taking a look at how you can get started with the application using its built-in resources. In subsequent articles we’ll look at importing custom resources and creating new characters, but for today we’ll primarily be focusing on the core functions of the program, getting a playable game up and running as soon as possible.

Let’s dive right in, then!

Once the program starts, click the New Project… button down in the bottom right and fill out the basic information. Give your project and game a title — they don’t have to match — and make sure the template is set to “Sample 720p (Script-based UI)” to ensure the example assets are imported automatically. You may also want to set up a folder to save your projects in to keep things organised. Hit OK when you’re done and Visual Novel Maker will chunder around for a minute or two as it sets up the new project.

Once it’s all loaded up, the Scene Editor will appear with a whole bunch of information. Before you do anything else, take a look up at the toolbar towards the top of the window and click the Play button, which will allow you to test your game at any point — and in this case, see what we’re already set up to work with.

You’ll see the sample template has already set us up with some basic user interface fundamentals such as a title screen and a message box, and it’s put an extremely short example scene in place ready for us to play with. We’ll look in more detail at how we can customise these elements in a subsequent article, but for now close the test play window and take a look back at the Scene Editor, particularly the bottom panel.

(Click to see larger screenshots if you need to.) This part of the screen is called the Scene Content pane, and it’s where we tell Visual Novel Maker’s game engine what to do and in what order. If you’ve ever used the RPG Maker series, it’s somewhat like the Event Editor there in that you write a set of instructions using “pseudo-code” — plain English commands that tell the engine, step by step, what should happen when.

Let’s analyse what is going on in this example scene.

  • First is the instruction to play the music “Tutorial – Good Mood” at volume 100% and speed 100% with no fade-in.
  • Next is the instruction to display the background “Bench Morning” on Layer 0 (currently the only layer) with no fade-in time and the further instruction not to proceed with any further commands until this one is completed. (In other words, if there was a fade-in time, nothing would happen until that fade-in had completed.)
  • Next we tell the character “Jane” to join the scene with her default expression in a predefined position on the screen, in this case centred so we can see the top of her sprite — i.e. her head. She should appear immediately, and the game should wait until she has appeared to proceed.
  • Next we tell the engine that we want to display the message box in “ADV style” (which means in the lower third of the screen, Grisaia-style, contrasted with the screen-filling “NVL style” as seen in Fate/stay night), make it visible and fade in over a period of 500 milliseconds.
  • Finally, we display a message spoken by the character “Jane”, with no voice file playing and no change to her expression over the course of 250 milliseconds.

Let’s start with a simple task: getting Jane to say something else. There are two ways to do this, so let’s look at them both.

The first way involves using the Commands panel in the lower-left of the editor window. Click the button with the speech bubble icon to display commands relating to messages, then click on the “Show Message” option.

Alternatively, click anywhere in the Scene Content panel and start typing “Show” to search the commands, then pick “Show Message” from the popup that appears. Once you’re familiar with the commands you need to perform various functions, this is a considerably speedier way to assemble a scene.

This will add a new line into the Scene Content pane, much like the one that is already there. Each new “Show Message” command equates to a new “page” of text.

Click the text next to the “Character” option to change it from “Narrator” to “Jane”, and change her expression if you wish; to do this, you will have to browse through the appropriate folders to find her “date” outfit and pick a new expression.

Finally, click the text at the bottom of the command to add your own dialogue. Test your game to see how it works.

This is actually all you need to know to put together a functional kinetic novel, albeit a very simple one involving only a single character and setting. So let’s build on this a bit, firstly by introducing a new character.

Using either of the methods we used to find the “Show Message” command, locate the “Join Scene” command (if you use the Commands panel, it’s in the Character page, which looks like a face) and introduce the character “Lucy” in the predefined position “Top-Left”.

Test your game again.

And there’s Lucy. You may have noticed that she simply faded in, whereas when Jane appeared at the start of the scene, she slid in from the left, as if she was walking in from “off-camera”. This is an easy effect to accomplish. Close your test play and return to the Scene Editor, then click the right-pointing arrow on the “Join Scene” command we just added. It will become a downward-pointing arrow, a bit like expanding a folder in a tree view in most modern operating systems.

Most commands in Visual Novel Maker have a button like this, and it expands the command to show additional, advanced settings. Many of these you won’t need to tinker with too much, but in the case of Join Scene commands, they allow us to control the animation used when characters enter. You’ll notice that Lucy is entering with a “Blending” animation, while if you expand Jane’s Join Scene command in the same way you’ll see she uses a “Movement” animation, coming from the “Left”. Adjust Lucy’s settings so she also enters from the left.

We can actually test Lucy’s movement without having to run a full test play of our game using Visual Novel Maker’s handy Live Preview function. To do this, make sure Lucy’s Join Scene command is selected in the Scene Content pane (it will be slightly darker in colour when selected) and then press Ctrl-R, or go to the View menu at the top of the screen, then Live Preview, then Replay. The scene will play from that point right there in the editor.

Live Preview is an extremely useful function for testing animations, checking text formatting and suchlike. Make liberal use of it while developing your visual novel as it will save you having to repeatedly play your game from the beginning. Make sure you occasionally do this too, of course, just to make sure everything flows correctly, but for minor adjustments like the one we just made, Live Preview is ideal.

Add a bit of dialogue for Lucy so she’s not just standing there mutely, then we’ll look at how we can add a choice into our game. Compose a bit of dialogue that ends up offering the player a choice as to whether they go with Lucy or Jane, then use the Add Choice command twice to set up the two options, then the Show Choice command to display these choices on screen. You should end up with three commands something like this:

Set up both Add Choice commands so that “On Select” is set to “Jump To” and “Label” is set to something appropriate for each choice — the appropriate girl’s name would make the most sense in this situation, since we’re branching based on who the player wants to go with.

These commands take a little explaining. “Add Choice” simply sets up the option but does not display it on the screen. It’s not until you put in a “Show Choice” command that the options you’ve set up appear on the screen. In this way, you can set up complex sets of choices rather than just binary options if you so desire.

The “On Select” parameter for the Add Choice command determines what the game does when the player clicks on that option. “Jump To” is used to jump to a particular part of a scene, marked with a label which we’ll set up in a moment. There are some other options you can use for this too, with one of the most useful being “Call Scene”, which simply allows you to immediately switch directly to a new scene when the option is chosen.

If you test or Live Preview your game now, you’ll find that nothing happens when you choose either of the choices. That’s because we haven’t set up the labels that the game will jump to when the option is chosen. Let’s do that now.

Add a Label command twice using either of the methods we’ve previously used to add new commands. If you’re using the Commands panel, Label is in the Basic tab, which is the first button, depicted with a diamond icon. Set one Label’s name to Lucy, the other to Jane.

What is eventually going to happen here is that everything following the “Lucy” label will occur when the player chooses the option that favours Lucy; conversely, everything following the “Jane” label will occur when the player chooses the other option.

Let’s add a bit of dialogue to respond to each option. Select Lucy’s label so it darkens in colour, then add a Show Message command just as we have done previously via either method. You’ll notice the new command is automatically added after the command you have selected, allowing you to “insert” new commands rather than adding them to the end and then having to move them. Handy!

Do the same for Jane’s label, then add a bit of dialogue for each.

Test your game and you’ll note that while Jane’s option works correctly, if you choose Lucy then Jane’s dialogue will still display immediately afterwards. That’s because if you don’t tell Visual Novel Maker to stop or go somewhere else, it will simply continue to execute commands in the Scene Content pane until it reaches the end.

To prevent this, we’ll have Lucy’s option branch off into a completely new scene. In order to do that, we need to set up the scene first, then tell the game to switch to that scene instead of continuing with our existing one.

In the Scenes panel on the left side of the screen, right click the “Chapter 1” heading and choose New Scene, then give it an appropriate name like “Lucy’s date” in the dialogue box that appears. Then switch back to the scene we’ve been working on — “Sample Scene” in this case.

After Lucy’s response to you choosing her, add a “Change Scene” command — if using the Commands panel, it’s under the Scene tab, which looks like a movie clapperboard. Set the “Scene” parameter to the new scene we just created.

Test your game and you should find that if you choose Lucy, the screen will fade to black as it jumps to the new scene; it will also automatically cause all characters to exit, so you don’t have to worry about removing them manually one at a time. Conversely, if you pick Jane’s option, the original scene will continue as normal.

Try extending both scenes a little — remember to add music, a background and to show the message box at the start of Lucy’s scene, because these will all have been erased at the scene change — and you’ve got the beginning of a branching narrative. And that’s all you need to know to get a basic visual novel — with or without choices — up and running!

Over the next few articles, we’ll look at setting up custom characters and other resources, along with more advanced techniques such as using variables and flags to track things “behind the scenes”. For now, though, I believe Lucy and/or Jane are waiting for you, so go get ’em, tiger!


More about Visual Novel Maker

A review copy of Visual Novel Maker was kindly provided by Degica for the purposes of these articles.

If you enjoyed this article and want to see more like it, please consider showing your social support with likes, shares and comments, or become a Patron. You can also buy me a coffee if you want to show some one-time support. Thank you!

Buy Me a Coffee at ko-fi.com

Advertisements

One thought on “Visual Novel Maker: First Steps”

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s