How to make a visual novel in Godot 4 - full beginner-friendly how-to - NO DIALOGIC

   

test says "Visual Novel In", with an arrow point to the Godot logo.



 I've been working on a visual novel in Godot for a bit now. I wasn't a super big fan of the few tutorial videos I saw out there, so I thought id just make a post on how I'm doing it.

    I was also having a very hard time with the current version of Dialogic as of posting this, so I'll explain how to go without. I'm not trying to diss Dialogic, I really want to use it when v2 is fully out. It looks like a great program, it just wasn't working for me.

    Time It Takes: it depends on how big you want your game to be. if you're aiming for a somewhat simple dating sim, it could take just a week if it's the only project you're working on. 

    Starting:

    Make your art first! You need characters and at least most of your backgrounds done before you start, or you'll lose your momentum having to stop and draw/look up assets in the middle of your work.

    After you have your art, obviously start a new project in Godot with a basic node. This is where I put my start screen with a little animation. 

    Next two scenes, use a control node. First scene, add a TextureRect for your textbox texture. Second scene, add a button for your indicator. I just used a button with > as the only text for my indicator, and the textbox itself is just a blue box. Remember to position everything where you want it.



    Make sure you save these scenes before you continue.

This is for the introduction of your game! I'll use a dating sim as an example for this whole thing. lets say you meet the first girl in this first game scene. New scene, node2D for your main node. Add a TextureRect, rename it to "background," and add your first background texture. Add a Sprite2D, rename it to the character's name, and add the sprite. Add your textbox scene. Now, add another Node2D. I used them as folders in my scenes to keep everything organized. For this example, I'd rename my second node to "meetingNeko." Add these childnodes to meetingNeko: RichTextLabel and your indicator scene. Rename the label to "introduction", and add whatever she says into the label itself. Make the indicator a child of the label. Let's say you want to add options for the next thing Neko says. New Node2D, rename to "nekoQuestionOne." Add these child nodes: HBoxContainer, Button(s depending on how many options you want), RichTextLabel. Make sure the label is on top, with the container a child of it, and all the buttons children of the container.

ex (yours shouldnt have signals yet though):



I rename my labels for questions to "text-options". Add your options, I'll say mine are "talk," "walk away," and "smile." rename them to what they are, but avoid using actual spaces in the names. Do what I say, not what I do. (lol)

Now, code for the first scene. Here it is if you want to just copy and paste everything:

-

extends Node2D



func _ready():

$nekoQuestionOne.hide()


func on_indicator_pressed():

$introduction.hide()

$nekoQuestionOne.show()

func on_talk_pressed():

$nekoQuestionOne.hide()

func on_walk_away_pressed():

$nekoQuestionOne.hide()

func on_smile_pressed():

$nekoQuestionOne.hide()

-

What this does is make everything besides the first texbox visible from the start. Then you press the first indicator, now the first texbox is invisible and only the second textbox is visible. When you press an option, the second textbox becomes invisible. we didn't add anything after that, so that's all it does.

From here, its a game of copy-and-pasting with minor changes.

So, for the textbox after "talk", I'll add another label and indicator, named properly with indicators numbered, and add this to the code:

-

# talk path

func on_talk_pressed():

$nekoQuestionOne.hide()

$talk.show()

 func on_indicator2_pressd():

$talk.hide()

-
tips:

  •  remember to add notes to your code!! just add a # and then type out your text. you WILL get disorganized and lost if you dont! theres a lot going on in this code, and its just generally good practice to put notes in your code.
  • label EVERYTHING! once again, there's a ton of nodes and you will get lost and disorganized if you get lazy with this.
  • if your text isnt show up on your textbox, rearrange your nodes. the texbox might just be ontop of the label.
  • if you're copy-and-pasting buttons and indicators, you may want to make sure their signal is disconnected before trying to connect it in your code. (check "node" next to the "inspector" section when you click on the button. if it's connected, it will say "on___pressed" under "pressed.")
  • I'd recommend only making new scenes for bigger things. Like, in my game I have an option to walk around a point-and-click house I have in it's own scene. I also have bigger animations in separate scenes. If you want to, it might be easier to keep track of stuff like... for this dating sim game, you have a few girls to chose from. Whenever you want them to chose their girl, and if that would be their path for the rest of the game, make a new scene. Then, you can add the scene change into the code like this:
-
func on_walk_away_pressed():
get_tree().change_scene_to_file("res://micaRoute.tscn")
-


Boom. that's the basics. I might update this if i want to add more info on doing less beginner-type stuff. Post a comment if you have any questions and I'll answer them as soon as I see them.

            - Mio Nozomi <3

Comments