Video Game Design and Coding · PLECK lesson

PLECK lesson 93 · suggested week 19, day 3

Make an original scalable icon

Objective. Create a simple SVG and import it as an image asset.

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.

Shape language, SVG, visual hierarchy and restrained animation

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

SVG is text describing vector shapes. In a plain-text editor create a file named seed_icon.svg containing <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><circle cx="16" cy="16" r="12" fill="#ffe080"/><path d="M10 16 L22 16" stroke="#202030" stroke-width="3"/></svg>. Save it inside the project and wait for Godot to import it. Assign it to a Sprite2D visual child. This image does not create a collider; keep the existing physics shape.

Worked example

An original safe-object icon could be a rounded triangle with a line marker. A dangerous-object icon could be a square with a cross, remaining distinct without hue. Scaffold C-PICKUP — An exactly-once pickup signal Setup: Create Area2D root Coin, CollisionShape2D Circle radius 10. Layer 3 (bit value 4), mask layer 1 only. Monitoring on. Attach script and save Coin.tscn. In the Node > Groups editor add Player root to group player. Put a Coin instance and Player instance in World. Manager connects each Coin.collected to its score handler (see C-MANAGER). Signal wiring here is code-only: do not also connect body_entered in editor. ```gdscript extends Area2D signal collected(points: int) @export var points: int = 1 var taken: bool = false func _ready() -> void: body_entered.connect(_on_body_entered) func _draw() -> void: draw_circle(Vector2.ZERO, 10.0, Color.GOLD) draw_line(Vector2(-5, 0), Vector2(5, 0), Color.BLACK, 2.0) func _on_body_entered(body: Node2D) -> void: if taken or not body.is_in_group("player"): return taken = true collected.emit(points) queue_free() ```

An exactly-once pickup signal

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

Scene and node setup

Create Area2D root Coin, CollisionShape2D Circle radius 10. Layer 3 (bit value 4), mask layer 1 only. Monitoring on. Attach script and save Coin.tscn. In the Node > Groups editor add Player root to group player. Put a Coin instance and Player instance in World. Manager connects each Coin.collected to its score handler (see C-MANAGER). Signal wiring here is code-only: do not also connect body_entered in editor.

extends Area2D
signal collected(points: int)
@export var points: int = 1
var taken: bool = false
func _ready() -> void:
    body_entered.connect(_on_body_entered)
func _draw() -> void:
    draw_circle(Vector2.ZERO, 10.0, Color.GOLD)
    draw_line(Vector2(-5, 0), Vector2(5, 0), Color.BLACK, 2.0)
func _on_body_entered(body: Node2D) -> void:
    if taken or not body.is_in_group("player"):
        return
    taken = true
    collected.emit(points)
    queue_free()

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 an original scalable icon — evidence task

  1. 1. Create the SVG icon and replace one pickup’s visual child with Sprite2D.
  2. 2. Make an original variation by changing a shape, not only its filename.

Deliverable. Original SVG, project checkpoint and changed-shape note.

Acceptance checks

Understanding question. What does importing SVG change about collision?

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 only circles, rectangles and text. Keep physics colliders unchanged while replacing a visual child. Start with the first assigned task and re-run its acceptance test before adding the remaining feature.

Optional extra. Make a second visual theme without changing any gameplay script. Document one changed parameter, your prediction, and the observed effect; optional, not required for completion.

Name ____________________ Date ____________________