Video Game Design and Coding · PLECK lesson

PLECK lesson 47 · suggested week 10, day 2

Build a readable dialogue interface

Objective. Use Control containers instead of arbitrary overlapping positions.

Godot Engine Standard desktop editor 4.7.2-stable, GDScript (Godot 4), Compatibility renderer. Headless Godot 4.7.2.stable.official.ed1daf0bf passed 106 assertions on the supplied scaffolds, including malformed JSON saves. Audio used the Dummy driver and a synthetic WAV, not a speaker. The visual editor, browser export, and signed-in submission were not tested. The desk still does not run a student's own upload.

About 55 minutes. The due date is chosen by a parent.

Branch diagrams, dialogue data, containers and keyboard focus

Suggested pace: Recall and predict 5 min; Read instruction and scaffold 12 min; Build or design the assigned artifact 25 min; Run acceptance tests 8 min; Explain and checkpoint 5 min.

Materials: Godot Standard 4.7.2 desktop editor (GDScript, Compatibility renderer), Local course folder and prior checkpoint, No paid assets or public account required.

Comes after VGC-L046.

Godot Control nodes are for interfaces. C-DIALOGUE uses a VBoxContainer to stack a Label and two Buttons. A container manages its children’s placement, so manually dragging a child may be overridden. Set the root to a full-rect layout, allow the label to wrap and keep buttons large enough to read. Test one long passage before filling the story. Good layout provides space for different text lengths rather than assuming every line will be equally short.

Worked example

A passage with key entrance can display any original sentence. Its choice ["Read the note", "note"] links to a stable note key even if the sentence is later edited. Scaffold C-DIALOGUE — Data-driven branching dialogue without personal data Setup: Create Control root Dialogue with VBoxContainer Box containing Label Line and Buttons A and B. Set Box anchors to full rect; Line autowrap if needed. Attach script to Dialogue. Data keys are fictional scene IDs. All three screens can fit in 640x360. This is a self-contained example; replace story text in the assignment. ```gdscript extends Control var page: String = "start" var story: Dictionary = { "start": {"text": "Two paths enter the archive.", "choices": [["Ask the keeper", "keeper"], ["Read a sign", "sign"]]}, "keeper": {"text": "The keeper offers a map.", "choices": [["Return", "start"]]}, "sign": {"text": "Quiet room to the east.", "choices": [["Return", "start"]]} } func _ready() -> void: $Box/A.pressed.connect(_choose.bind(0)) $Box/B.pressed.connect(_choose.bind(1)) _show() func _show() -> void: var entry: Dictionary = story[page] $Box/Line.text = entry["text"] var buttons: Array[Button] = [$Box/A, $Box/B] for i in range(buttons.size()): buttons[i].visible = i < entry["choices"].size() if buttons[i].visible: buttons[i].text = entry["choices"][i][0] $Box/A.grab_focus() func _choose(index: int) -> void: var choices: Array = story[page]["choices"] if index < 0 or index >= choices.size(): return page = str(choices[index][1]) _show() ```

Data-driven branching dialogue without personal data

GDScript (Godot 4, not Scratch, Python, JavaScript or C#). Scaffold C-DIALOGUE. Copy starts from this text. The desk does not run it.

Scene and node setup

Create Control root Dialogue with VBoxContainer Box containing Label Line and Buttons A and B. Set Box anchors to full rect; Line autowrap if needed. Attach script to Dialogue. Data keys are fictional scene IDs. All three screens can fit in 640x360. This is a self-contained example; replace story text in the assignment.

extends Control
var page: String = "start"
var story: Dictionary = {
    "start": {"text": "Two paths enter the archive.", "choices": [["Ask the keeper", "keeper"], ["Read a sign", "sign"]]},
    "keeper": {"text": "The keeper offers a map.", "choices": [["Return", "start"]]},
    "sign": {"text": "Quiet room to the east.", "choices": [["Return", "start"]]}
}
func _ready() -> void:
    $Box/A.pressed.connect(_choose.bind(0))
    $Box/B.pressed.connect(_choose.bind(1))
    _show()
func _show() -> void:
    var entry: Dictionary = story[page]
    $Box/Line.text = entry["text"]
    var buttons: Array[Button] = [$Box/A, $Box/B]
    for i in range(buttons.size()):
        buttons[i].visible = i < entry["choices"].size()
        if buttons[i].visible:
            buttons[i].text = entry["choices"][i][0]
    $Box/A.grab_focus()
func _choose(index: int) -> void:
    var choices: Array = story[page]["choices"]
    if index < 0 or index >= choices.size():
        return
    page = str(choices[index][1])
    _show()

Checks to run in the editor

Native Godot 4.7.2.stable.official.ed1daf0bf headless compile and representative node-tree/runtime tests passed; see native-qa-results.json. Visual UI, audible output, exports and website submission still need separate checks.

Build a readable dialogue interface — evidence task

  1. 1. Build the Dialogue scene with Box, Line, A and B.
  2. 2. Test one short and one 40-word passage at the course viewport size.

Deliverable. Dialogue UI scene and two layout screenshots.

Acceptance checks

Understanding question. Why can a VBoxContainer undo a child’s manual position?

Include a downloadable project ZIP with project.godot, .tscn, .gd and original asset files when code changes. A private, teacher-accessible download link to that ZIP is equivalent. Screenshots or a playthrough do not replace editable source.

If this is still shaky. Use three screens and two buttons with C-DIALOGUE. Draw every link before writing dialogue. Start with the first assigned task and re-run its acceptance test before adding the remaining feature.

Optional extra. Create a branch that rejoins the main path while preserving a meaningful choice. Document one changed parameter, your prediction, and the observed effect; optional, not required for completion.

Name ____________________ Date ____________________