Credits

Background Images

  • Unsplash
  • Link to credit
  • Link to credit

Sprite Images

  • Link to credit
  • Link to credit
  • Link to credit

Music

  • [Fairytale-like BGM] Healing New Age Piano / Fantasy BGM / Rinne Music Collection by Rinne

Code

  • Visual Novel Game V2 by @Aurorean

Start Game

Credits

Character Name

I am a generic placeholder to showcase the function of this code. Clicking the pulsing arrow on the bottom right corner of this text box will move to the next line of dialogue. Try it out.

Character Name

This is the next screen of dialogue. The text box will scroll if the dialogue text inside it exceeds the height of the box. Click the next button for more information on the other functions of this code.

Character Name

This code allows you to change the background image as you'd like to show a change in scene. Look for background-image in the code and replace the link with the URL of your desired image. Suddenly switching backgrounds might look a bit jarring though, so maybe you can try adding a fade transition. The next slide goes over how to do that.

Character Name

You can add a "fade" effect to show a new scene. Look for transition-delay in the code and add .15s (or whatever value you want) and remove "transition-duration:0s;" to add a fade effect. Also...

Character Name

I've been explaining things as "a character", but did you know that you can remove the name box so that this dialogue box can be used for narration only? Find out how to do so in the next dialogue screen.

Look! No name box! It's very easy to add/ remove in the code as you'd like. To remove the name box, in the code, look for the line that has "--NAME BOX-->" and remove the > from that specific line of code. If you want to add the name box again, just add the > that you previously removed. And another thing!

Character Name

You can change the orientation of the sprite. By default, the sprite image is centered. But you can change it so that it appears to the left. To do so, in the SPRITE IMAGE(S) section, change justify-content-lg-center to justify-content-lg-start instead. But what if you want the sprite to the right?

Character Name

To move the sprite to the right side, change justify-content-lg-center to justify-content-lg-end instead.

Character Name

You can also add more than one character sprite. To do so, all you need to do is insert another sprite image in the "SPRITE IMAGE(S)" section. All sprites would be centered and side-by-side by default, but...

Character Name

If you have two sprites, you can make them appear on opposite ends by changing justify-content-lg-start to justify-content-lg-between instead.

Character Name

Now then, how about we go over choices next?

Choices?

What do you mean?

Character Name

Yes. Choices, as you had just seen. This part is a tiny bit complicated to explain, but it shouldn't be too difficult to do once you understand the instructions.

Character Name

I mean the interactability option to let users choose between different dialogue choices that will branch into separate/ different dialogue, based on the choice that the user chose.

Character Name

It's a bit of a complicated explanation, but if you can understand it, it shouldn't be too hard to implement it.

Character Name

Now, you'll realize that the code has numbers inside square brackets for each screen (ex. [1], [2], [3], etc.). This is to keep track of the screen/ slide number. This part is absolutely important to keep track of if you decide to have choice options in this visual novel code.

Character Name

In the code that has the choice options (i.e. the part that is "SCREEN (CHOICE OPTIONS) [12]"), you will notice a "link/ button" section inside each "CHOICE OPTION." You will see a line of code that that says data-slide-to="#".

Character Name

You want to replace # with the specific number of the screen that the choice will lead to. In this code's case, choice 1 ("Choices"?) leads to screen 13, so the code will say data-slide-to="13". For choice 2 ("What do you mean?"), it leads to screen 14, so the code will say data-slide-to="14".

Character Name

By the way, the first slide always starts at number 0, so even though this screen is numbered 19 in the code, it would technically be 20. The first slide (i.e. 0) is the title screen though, so you don't have to worry about this. It's just something worth noting. The next part is important to note though.

Character Name

By default, the next button has data-slide="next". This makes it so that clicking the arrow icon will move to the next screen. This is fine if the next screen/ last screen of that particular dialogue choice/ branch leads to the ending screen, but...

Character Name

At some point in the branched dialogue, if you leave the "NEXT BUTTON" as it is, it will automatically go to the next slide, so if the user chooses option 1, clicking the "next" button will show the branched dialogue for option 2 when you don't want it to.

Character Name

Let's say, at some point after the branching dialogue from the choices, you want the dialogue to go back to "being the same" (or "shared").

Character Name

In this case, you will need to change data-slide="next" in the "NEXT BUTTON" section of the code to data-slide-to="#" instead, and replace # with the specific number of the screen in which the dialogue goes back to being "shared."

Character Name

In this code placeholder/ example, the dialogue goes back to being "shared" in screen 16, so the "NEXT BUTTON" section will have the code change from data-slide="next" to data-slide-to="16" instead.

Character Name

I do believe that's more or less everything to understand the gist of how to use this code. The next screen will be the last screen (i.e. "end") which will have a button that will link users back to the title screen. If you have any questions about this code, feel free to message me.

Play Again?