Making a tutorial (2D strategy)

[baylorw]

Godot Version

4.3

Question

i know how to make a visual novel full of text and how to make a strategy game but not sure how to merge them to make a tutorial - Hey, click here, good you did that, see this highlighted thing X, now drag it to position Y, i know you did that so now press button X, etc. etc.

i know there’s no magic bullet (probably) and every game is different but do people have general advice on how to make in-game tutorials?

i’m making a tower defense game so my tutorial would look something like:

1. Welcome blah blah blah
2. See those 10 towers. One of them is highlighted/every other button in the UI is grayed out. Click only on the highlighted one. No, not that one. Good thing all the others are disabled.
3. I see you clicked it. See the highlighted spot on the map? Everything else is grayed out. Click there. If you click anywhere else i will reject it.
4. i see you clicked the right spot. Now the Start Game button is highlighted and every other button is turned off. Click it.
5. You have won the round. Here is what you do next.5.

Options:

1. Duplicate a map, remove logic/lock down everything except what i want them to click on, have hard coded logic on each step on what to do next, lots of code that pops up “modal popup” boxes (i don’t think modal is modal in Godot), cry.
2. Somehow add signals to everything with an option to reject, make a filter that rejects everything except what i want (X must go on Y, everything else rejected), use that to control the player.
3. Something something state machine? (not sure if Godot has these or behavior trees).
4. Some kind of magic scene wizard or animator i’ve never heard of.
5. Observer or Decorator pattern somehow.
6. Outsource to another country (i get a lot of spam emails about this).

Obviously some options are easier than others. i can hard code everything and feel ashamed of myself but i’m hoping there are some techniques people use that reduce some of the complexity.

Open problems:

1. Easy way to disable everything in the UI except the one i care about.
2. Dimming everything on the screen except the button/space i care about.
3. Detecting “task accomplished” events (do i modify every button event and _unhandled_Input() of my generic scene manager to have code just for the one-time tutorial?)
4. Tracking which step i’m on (not hard to do manually i guess).
5. i’m honestly not sure how to show text messages to players. Godot’s dialogs elude me. i guess i could use Dialogic but i’m not sure how that would integrate with the tutorial steps (maybe run a new dialog on each state change?)

[Locher]

I would:

• Create inherited scene from a working level
• Include an animation player, create an animation for each tutorial step
  • the animation player can display red arrows, or darken the entire screen to highlight specific spots, or even make the dialogue textbox appear and disappear.
• create a dialogue box and a button to proceed or close
  • i would tie it to the dialogue. show one button to show next dialogue if there is still dialogue to be shown, or a button to close the dialogue button which will then proceed the tutorial forward
• create a new dictionary for the dialogue options, also add 2x counters.
  • one counter for the tutorial steps themselves, the other for showing dialogue (in case you cannot explain it one dialogue screen)

var tutorial_step: int = 0
var dialogue_step: int = 0
const var DIALOGUES: Dictionary = {
    "0" = {
        "0" = "Welcome to first step.",
        "1" = "In this step, let's do this thing.",
     },
    "1" = {
        "0" = "Congratulations on fulfilling the last thing.",
        "1" = "Now let's do the next thing",
     },
     [...]
}

Traverse like this:

func _ready() -> void:
    anim_player.play("tutorial_" + str(tutorial_step))
    show_dialogue()

func show_dialogue() -> void:
    textbox.text = DIALOGUES[tutorial_step][dialogue_step]

func _on_next_dialogue_pressed() -> void:
    dialogue_step += 1
    show_dialogue()

func _on_progress_tutorial_pressed() -> void:
    tutorial_step += 1
    dialogue_step = 0
    anim_player.play("tutorial_" + str(tutorial_step))
    show_dialogue()

For your level, you need to extend the script to disallow actions. Maybe you have a turn count. Disable everything on first turn, then enable some objects and functionality on second turn, etc.
If you want to disallow something, then you need to extend the base methods and add a tutorial evaluation. In a card game, you would disallow playing certain cards to enforce a structured playthrough.
In a RTS, you would forcefully heal units and reposition them if the player failed a step.

Of course, it’s all pseudocode but you may be inspired to create a tutorial system of your own. With only a text description, I have no idea how the game systems work or how you manage your code and objects.

[baylorw]

Interesting. Inheriting lets me keep my original level clean. i’ll give that a try.

i also don’t use AnimationPlayer a lot and didn’t think about it being able to coordinate a lot of making things visible and invisible (maybe there are better ways to do tutorial stuff but in my head the dim, highlight and arrows are objects whose visibility i toggle). Maybe i should look at a few videos on what kinds of stuff an AnimationPlayer can do.

[Locher]

You can of course make do with tweens in order to make things appear or disappear.
I usually think of AnimationPlayers as a way to dynamically mimic player actions visually.
For example showing a pulsing Mouse Cursor that moves to one spot, drags an object somewhere else and then places it with a title popup “This is how it’s done / Demonstration” with the loop-flag enabled so it loops over and over again while the player reads the text.
The Animation Player can also hide all UI while it’s doing that and pops them back in at the end.

It all depends on what you want to show and teach and also how you do it. i am sure you’ll find something decent