How to Create a Website Hosted Visual Novel with Unity.

Last year, while working on a larger Ren’Py Visual Novel, I had some serious writer’s block and I was feeling disheartened. The narrative wasn’t moving anywhere, yet I kept having all these unrelated ideas that didn’t really lend themselves to full length Visual Novels. I wanted to see if I could make a short, browser hosted Unity Visual Novel to help break my writer’s block and to finally finish something for once.

This is surprisingly more difficult than you would imagine, and not well documented. However, after many hours of cursing and a few dead ends, I was able to put something together. Now I want to share that with you. Because sharing is caring.

Why not use Flash you ask? Well Unity is great because it’s FREE. Also I really dislike Flash. A lot.

Please Keep in mind: You’re not going to be able to make anything epic or complex with this method as you are limited by your hosting plan. Additionally, your visual novel is never going to be as smooth or as customized as a packaged Ren’Py game. That being said, I think this method is still suitable for demos and short kinetic visual novels.

So what do you need?

1. Unity 5.6+
2. A website (wordpress or otherwise) where you can FTP to your public_html folder.
3. The Visual Novel / 2D Cutscene Engine Unity Asset Package
4. Sprites, backgrounds, art assets, etc.

Will this cost me anything?

Not too much, about $60 altogether.

1. Hosting and Domain. — $50 / year
2. Visual Novel / 2D cutscene engine — $10

What is Visual Novel / 2D Cutscene Engine?This is, in my opinion, the best visual novel asset package for Unity. Its price is reasonable, it’s simple to use, and the creator is responsive to questions and issues. I am not the creator of this software, nor am I receiving any kind of kickback for recommending it. All credit goes to http://foolish-mortals.net/.

If you’re proficient with Unity and want to build your own framework for a Unity Visual Novel I encourage you to do so. In my case it was my first time seriously using Unity and I spent several hours trying to build a text parser, sprite commands, text boxes, etc. The Visual Novel / 2D Cutscene Engine ended up saving me a lot of time, even if it didn’t look exactly the way I wanted it to. For the sake of this exercise we will use this asset package.

Alright, so enough talk, how the hell does this work?

Prologue: Set up the Prerequisites

1. Set up your website, make sure you have FileZilla and you can FTP to your site.

2. Download and install Unity 5.6+

3.  Download and install the Visual Novel / 2D Cutscene Engine Unity Asset Package

Alright, if you made it this far you’ve done most of the hard work (truly!) . Now we can start building the Visual Novel.

I’m not going to go into detail on how to use the Visual Novel / 2D Cutscene Engine. The creator has some very helpful documentation on their site as well as a video on the basics if you want to follow that. For our purposes we’re going to make a simple example. If you’re a badass with Unity and have your own system skip on down to Chapter 2. For those brand new to Unity, start at Chapter 1.

Chapter 1: Building your sample Unity Visual Novel

Open Unity and select “Create New Project”. Select the folder you would like to store this in and select a name, in this case we’ll call ours vn_demo. Make sure to mark your project as 2D.

Select the “Add Asset Package” button and check “Visual Novel Engine2D Cutscene Engine”. Select done and then create your project.

Alright, it will take a minute for Unity to build the games initial framework. Once completed Unity will load up the editor and your screen should look like below. There’s a lot going on here, much more than we’ll cover in this post. I’ve color labeled some of the key areas we’ll be working with.

Project Folder: This houses all the art, files, and scripts that comprise your game.

Hierarchy: Simply put, this is where you will program chronological actions for the game to execute using built in modules and commands

Inspector: This is the area where we will be defining the specifics of what we want the actions in the hierarchy will do

Play Button: This allows you to test your game in the editor

First things first, we need to move our art assets. Move your sprites and backgrounds to the ‘Characters’ and ‘Backgrounds’ folders in your project.

Next we need to set the canvas that we will build our scene on top of. Right click in the hierarchy pane, select “VN Engine”, then select “Create DialogueCanvas”. After you create a DialogueCanvas right click again and create a “New Conversation”

We have our Art Assets and our Canvas, now we need to create our characters. In the project section, under the “Actors” folder there should be preset character objects. Press ctrl + D to duplicate these objects if you need more characters. Select the character script (the blue box) and in the inspector pane change the Name of the character to what you desire, in our case Asimov. In the source image pane in the inspector select the ‘neutral’ expression for your character sprite (the dialogue box that appears will show all the art assets that we added into our art folder earlier!)

NOTE: Be extra careful to spell the name of your character correctly. Additionally, the actor script name must be exactly the same as the name you enter in the inspector pane. Notice our blue box is called “Asimov”. Capitalization does matter!

The stage is now set.

Next up, we build the scene. Right click in the Hierarchy pane, select VN engine and add the following items:

Set Background: In the inspector pane, designate your background in the “sprite” pane.

Enter Actor: In the inspector pane, under Actor_name enter the character’s name who is entering. Be sure the name is spelled correctly!

Add Dialogue: Enter the actor name and speaker name in the inspector. In our case Asimov says “Hello I’m Asimov!” because Asimov is a profound poet.

Add Dialogue: Asimov says “I have no idea what I’m doing here!”. Sounds about right for Asimov.

Exit Actor: Indicate the actor name in the inspector. Always check for spelling!

Fade out to Black

Alright, we’re almost done creating our novel. Now we must tell the program where to begin. Navigate to the hierarchy, under “DialogueCanvas” select “SceneManager”. With SceneManager selected the inspector pane should show a section entitled “VN Scene Manager (Script)” Within this section you must indicate the Starting_conversation as the conversation we have just created, in our case simply ‘Conversation’. Select this and save your scene and your project.

Excellent. Now hit that big play button. Your character should appear on your background, say their witty lines as you press next, exit, and then the screen should fade to black. If all these things happened with no RED errors being thrown in the console you are good to go! If you have some nasty red errors, you have some troubleshooting to do. If you get completely stumped give me a shout @stonepugstudios.

Chapter 2: Building and uploading your Unity Visual Novel

For those Unity stars that skipped to this point, I’m assuming that you have used Unity to build PC or mobile games. In our case we will be packaging this as a WebGL game.

From the Edit tab select “Project Settings” then scroll down and select “Player”.

From here you will be able to select the parameters you want for your game as it will appear in the browser. You can indicate the screen width and length as well as the template.

Once you have set your desired settings head to the File tab and select “Build Settings”. A new window should appear, from here select WebGL and click “Build”. Unity will prompt you to indicate which folder you want to build in. I highly suggest creating a new folder to house your WebGL build within your main project folder for your VN. This allows for easy version control for later. In our case we’ll name the folder “vn_demo_web_gl”. It can take a while for the build to complete so be patient as it is loading.

When the build is complete the folder you indicated within the build settings will have everything you need to run the game. Within this folder there should be an index.html file. Open this file with a browser and your game should run locally, this is a good way to test what your game will actually look like once it’s uploaded to your site!

The moment of truth, uploading your Unity Visual Novel to your website.

Here’s where it all comes together. Connect to your site using an FTP client. Once connected upload the entire folder that contains the WebGL build of your visual novel to your public_html folder , in our case we named this “vn_demo_web_gl”.

Once the transfer is complete you should be able to access your newly created visual novel at http://yourdomain.com/your_folder_name/index.html

In our case you can find the demo at http://stonepug.com/vn_demo_web_gl/index.html

Congratulations if you made it this far! You now have a working browser hosted VN. However, the format of this VN is a little bit unwieldy. If you would like to embed your game on a page you can use an iFrame.

Copy and paste the following code into the html of a page you would like to host your VN on. Be sure to update the highlighted segments to reflect where your game is stored and the frame parameters that you indicated within the Unity build.

<iframe style="border: 0px #000000 none;" src="http://yourdomain.com/your_folder_name/index.html" name="Game name" width="960px" height="600px" frameborder="1" marginwidth="10px" marginheight="px" scrolling="no"></iframe>

Epilogue

This is a crash course on how to make a hosted browser playable Kinetic Novel with Unity using a simple example. There are lots of extra features you can add to enhance your games load, look, and feel, but this should be more than enough to get you started. I hope this guide is helpful to all those who would like to try their hand at building a simple visual novel! If you have any issues or questions just leave a comment below or you can find me on twitter @stonepugstudios.

Leave a Reply

Your email address will not be published. Required fields are marked *