Video Game Design and Coding

PLECK lesson 57 · suggested week 12, day 2

Test text at different sizes

Objective. Use wrapping and layout constraints for readable interfaces.

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.

Original writing, clarity, UI scaling and a finished puzzle

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-L056.

Text is content with variable length. Increase the default font size in the theme or individual controls, then inspect the longest passage. Containers and anchors should allow text to grow without covering buttons. Test both a 640 by 360 window and a larger window. Do not solve overflow only by shrinking text until it is unreadable. If needed split a passage into two pages with a clear Continue action and an explicit new passage ID.

Worked example

A long passage can become two short passages connected by Continue. This preserves readable text instead of shrinking the font until the interface technically fits. 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

  • Both start choices work.
  • Return works from each branch; hidden B cannot trigger a nonexistent choice.

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.

Test text at different sizes — evidence task

  1. 1. Test the longest passage at normal and enlarged text sizes.
  2. 2. Repair one overflow using layout, shorter original prose or an extra page.

Deliverable. Four-condition layout checklist and updated UI project.

Acceptance checks

  • VGC-L057-T1. No required action is clipped.
  • VGC-L057-T2. Reading order stays clear at both window sizes.

Understanding question. Why is tiny text a poor universal fix for overflow?

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. Keep one complete path working while editing text. Limit the story to six to ten passages until every link is tested. Start with the first assigned task and re-run its acceptance test before adding the remaining feature.

Optional extra. Add a nonessential lore branch that does not block either ending. Document one changed parameter, your prediction, and the observed effect; optional, not required for completion.

Turn in typed notes and a JPEG, PNG, or WebP screenshot. One https address is stored as text and is not opened, extracted, or run. An MP3, WAV, M4A, MP4, or WebM file up to 4 MB can show a demo. The demo does not replace editable source. Zip and code files are refused. If there is no private link, keep the project on the family computer and review the code in person.

This is a preview. A parent assigns the lesson and chooses the due date after the student is enrolled. The answer key is not on this page.

Print this lesson