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.

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.

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.

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...

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!

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?

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

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...

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.

Now then, how about we go over choices next?

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.

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.

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

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.

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="#".

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".

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.

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...

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.

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").

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."

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.

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.