How to make(which nodes to use) tutorial effect in game session?

Help
,
1

Godot Version

4.4.1

Question

You know where they darken non focused parts of the screen and put a hand image that points to the focused object? They seem harder than making my actual game lol. My game is %80 completed so i need to create tutorial for first level. Instead of putting lots of “if” checks in first level, maybe i do create a new scene that is exact replica of first level and do my process there? The problem is my levels are mostly gdscripted, not editor designed. My parent classes handle lots of “auto” business logic so it is hard to use them for tutorial too. Is it bad idea to put video as tutorial? That interactive tutorials seem a lot of work to me. How do i darken non focused objects? I am lost for this tutorial part of my project

2

You can add a scene to another scene in code. You could make (say) a scene that’s a ColorRect set to black with 25% alpha, with two children, a Sprite2D containing a pointy finger image and a RichTextLabel for text. Assume for this example that the text node is named “Hint”.

You can then save it as tutorial_popup.tscn. After that:

func show_tutorial_popup(parent: Node, pos: Vector2i, hint_text: String):
    var popup = preload("res://tutorial_popup.tscn").instantiate()
    popup.position = pos
    popup.get_node("Hint").text = hint_text
    parent.add_child(popup)

You’ll probably either want a script attached to it (so it can queue_free() itself) or to return popup so that something else can call .queue_free() on it when it should go away.

3

1 - I imagine that you are using Controls and not mixing them with node2Ds. and also you are using a theme.
I would create a theme_type_variation for the button that needs to be highlighted. if the theme is simple this would mean a single theme_type_variation for button.
then you can assign this to the theme_type_variation of the node you want to highlight using code:

city_button.theme_type_variation = "highlighted"

then when clicking on it, it can be removed:

city_button.theme_type_variation = ""

this is a very rudimentary method, the highlighted Control would have to be brighter than the rest of the theme or a different color.

2 - if the theme is more complex, if you need animations, or you are mixing node2D and Controls (which you shouldn’t but it’s too late now), you can change the modulate and self_modulate properties of a Control to change the tint.
I would do this using a Tween so it has an animation, and that can call the attention of the user.

signal clear_highlight

func highlight_button(button : Control):
	var tween : Tween = button.create_tween()
	tween.set_loops().tween_property(button, "modulate", Color.RED, 0.1)
	tween.tween_property(button, "modulate", Color.WHITE, 0.1)
	clear_highlight.connect(tween.kill, CONNECT_ONE_SHOT)
	clear_highlight.connect(button.set_modulate.bind(Color.WHITE), CONNECT_ONE_SHOT)#restores modulate

call clear_highlight to return to normal

clear_highlight.emit()

3 - create some overlay to darken the scene, except over the button that needs to be clicked. this is annoying in mobile apps but it ensures that the player clicks the button you want. It’s the method explained by @hexgrid and can be used at the same time as the others.

4 - manually set buttons to disabled except for the one you need.
you need a list of all the buttons. or, you can automate this when the buttons are called or connected through code.
I do not connect nodes in editor when using UI, because connecting them through code allows for more things to be done, like passing binded properties.


signal disable_all
signal enable_all

disable_all.connect($etc/button.set_disabled.bind(true))
enable_all.connect($etc/button.set_disabled.bind(false))

func enable_button(button : Button):
	button.disabled = false

5 - just add an arrow or hand over the node, you can use a parallel CanvasLayer and copy the global transform of the node to move the arrow.

UI
	|->button
CanvasLayer
	|->arrow

arrow.global_position = button.global_position