Video Game Design and Coding · PLECK lesson

PLECK lesson 102 · suggested week 21, day 2

Make keyboard focus visible and complete

Objective. Test every menu action without a pointing device.

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.

Text, focus, motion, privacy and evidence-based claims

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

List all menu buttons and settings, then navigate with Tab, Shift-Tab and the accept key. Focus should be visible, order should match reading flow, and a hidden control should not trap navigation. On a newly shown screen, set initial focus to the first meaningful action. Keep gameplay movement actions separate from UI navigation so changing a movement key does not silently remove menu control. If a scene has no menus, add a minimal start/restart panel to test this skill.

Worked example

A barrier audit might test whether Tab can reach Restart. The result is a specific supported capability, not a claim that every assistive technology is supported. 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() ``` Scaffold C-PAUSE — Pause with an always-processing resume control Setup: Node2D World root has CanvasLayer HUD with Button Pause, plus normal gameplay children. Set Pause button Process > Mode to Always in Inspector; leave World and gameplay as Inherit/Pausable. Attach script to World; merge into its existing _ready if present. Signal callbacks still work from the always-processing button. Label text starts Pause. ```gdscript extends Node2D func _ready() -> void: $HUD/Pause.pressed.connect(_toggle_pause) func _toggle_pause() -> void: get_tree().paused = not get_tree().paused $HUD/Pause.text = "Resume" if get_tree().paused else "Pause" ```

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.

Pause with an always-processing resume control

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

Scene and node setup

Node2D World root has CanvasLayer HUD with Button Pause, plus normal gameplay children. Set Pause button Process > Mode to Always in Inspector; leave World and gameplay as Inherit/Pausable. Attach script to World; merge into its existing _ready if present. Signal callbacks still work from the always-processing button. Label text starts Pause.

extends Node2D
func _ready() -> void:
    $HUD/Pause.pressed.connect(_toggle_pause)
func _toggle_pause() -> void:
    get_tree().paused = not get_tree().paused
    $HUD/Pause.text = "Resume" if get_tree().paused else "Pause"

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.

Make keyboard focus visible and complete — evidence task

  1. 1. Audit and repair focus for every menu control.
  2. 2. Complete start, pause, resume, settings and restart with keyboard only where those controls exist.

Deliverable. Keyboard-only navigation log and repaired UI.

Acceptance checks

Understanding question. Why is a visible focus indicator important?

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. Test one barrier at a time: keyboard only, muted audio, reduced motion and enlarged text. Keep a checklist of actual results. Start with the first assigned task and re-run its acceptance test before adding the remaining feature.

Optional extra. Let a willing tester choose a comfort setting before the test without asking why they need it. Document one changed parameter, your prediction, and the observed effect; optional, not required for completion.

Name ____________________ Date ____________________