CODEWITHSUNDEEP
gdscript
Shaurya Chhabra
Shaurya Chhabra

Reputation: 72

Why doesn't this gdscript dialog box code work?

Why doesn't this code work? I don't know how to describe what happens but here's the code. 

extends Node2D


onready var dialog_box = get_node("DialogBox")

func _ready():
    ShowDialog("Example")

func ShowDialog(text, font = "DTM-Mono.ttf", time = 0.25):
    var textbox = dialog_box.get_node("Text")
    var dynamic_font = DynamicFont.new()
    dynamic_font.font_data = load("res://Supply (do not delete)/Fonts/" + str(font))
    textbox.add_font_override("font", dynamic_font)
    for character in text:
        textbox.text = textbox.text + character
        yield(get_tree().create_timer(time), "timeout")

Upvotes: 0

Views: 193

Answers (2)

Shaurya Chhabra
Shaurya Chhabra

Reputation: 72

Well, Theraot has made an answer so please see his answer instead, but if you want to see how I explain it, here you go.

First, Theraot asked me

Is this something specific of the font? What is DialogBox (is it a WindowDialog? I don't see you call popup)? Given that you don't know how to describe the problem, can you provide a video?

I responded

@Theroat It's a Node that contains the dialog box text and a rectangle on which the text stands just for it looking good. and by dialog_box I don't mean a popup just a undertale-like dialog box.

and I sent a video like he asked : https://drive.google.com/file/d/18QrOOw_FZ3MgboVrv59b4sDrFG-AxlmR/view?usp=sharing

He responded

About the video, I was hoping to see it running. However, I notice something on the video you provided. The Label is before the Panel in the scene tree. So the Panel could cover the text. To avoid that, move the Label below the Panel in the scene tree. I don't have the same font file you are using, but I replicated the setup in the video with a different font, and besides the position of the Label, it works fine for me.

And well that's the whole thing, See the comments for what happened in more info.

Upvotes: 0

Theraot
Theraot

Reputation: 40325

When working Controls what is lower in the scene tree is on top. You can pretend it is the draw order. Except there is 2D batching. But it is as if it were the draw order.

In this we have a Label and a Panel siblings on the scene tree, in that order. Like this:

DialogBox
├ Text:Label
└ Container:Panel

And thus, the Panel will appear on top of the Label. Meaning the Label would behind the Panel (assuming they were positioned in the same area. And they were, because this an attempt to make an RPG-style dialog/text box.).

A simple solution to make the Label visible is to reorganize the scene tree, like this:

DialogBox
├ Container:Panel
└ Text:Label

However, I'm going to suggest a different solution. Reorganize the scene tree like this:

DialogBox
└ Container:Panel
  └ Text:Label

The reason is that children nodes are positioned relative to their parent. Thus, when you move the Panel it also moves the Label. For example, if sometimes the box should appear on the top of the screen and sometimes on the bottom, you only need to move the Panel.

I also want to mention that if you set rect_clip_content on a Control, it will mask children to its rectangle. That is, any part of the children that goes outside the parent rectangle will not be visible. Which is something you may or may not want.

And while we are on the topic of moving nodes around. You can export NodePath variables and set them in the inspector panel to reference other nodes (example).

By the way, when working with Node2D there is a z_index property. Also, you can use a YSort node to deal with fake depth (example).

Upvotes: 0

Related Questions