Exercise

Your First Scene: Draw a Card

Module 1 · Exercise 1 · ~45 min · feeds into the capstone

You're going to build a tiny working thing: a scene with a single Card, clicked to flip, with a signal emitted. When you finish, you'll have written your first CardData resource, your first custom scene, your first script, and you'll have wired up a signal. Everything after this is more of the same.

What "done" looks like Hit Play, see a card on screen. Click it. It reads "flipped!" in the output log. That's it — but every concept in Module 1 is exercised.

Prerequisites

Godot 4.3+ installed
A project called lexicon-duel (from Lesson 1)
You read lessons 1–3 and understand, vaguely, why Resources exist

Step-by-step

1Create a CardData resource class.

In the FileSystem dock, right-click → New → Folder → scripts. Inside it, right-click → New → Script. Name it card_data.gd. Paste:

class_name CardData
extends Resource

@export var letter: String = "A"
@export var value: int = 1

func describe() -> String:
    return "%s (%d)" % [letter, value]

Save. Godot will re-parse and the CardData type will be globally available.

2Create a card resource instance.

Right-click the FileSystem root → New → Folder → cards. In that folder, right-click → New → Resource. Type CardData in the dialog. Save as a_tile.tres. It opens in the Inspector. Set letter: A, value: 1. Save.

3Create the Card scene.

Scene menu → New Scene. "Other Node" → Node2D. Rename the root to Card. Save as scenes/card.tscn (create the folder if needed).

Add children — right-click the root → Add Child Node:

ColorRect, name it Background. In the Inspector set Size to (120, 160) and Color to a dark gray.
Label, name it LetterLabel. Position it at (20, 20), set Text to "A" in the Inspector. Set Font Size (Theme Overrides → Font Sizes) to 64.
Area2D, name it TouchArea. Add a child CollisionShape2D. In the Inspector, create a new RectangleShape2D for its Shape and size it to roughly (120, 160), positioned at the center of the card.

4Attach a script to Card.

Click the Card root, then the scroll-with-plus icon ("Attach Script"). Accept the defaults. Paste:

extends Node2D
class_name Card

signal card_flipped(card: Card)

@export var data: CardData
@onready var label: Label = $LetterLabel
@onready var touch: Area2D = $TouchArea

var is_flipped := false

func _ready() -> void:
    if data:
        label.text = data.letter
    touch.input_event.connect(_on_touch_input)

func _on_touch_input(_viewport: Node, event: InputEvent, _shape_idx: int) -> void:
    if event is InputEventMouseButton and event.pressed:
        flip()

func flip() -> void:
    is_flipped = !is_flipped
    label.text = "✦" if is_flipped else data.letter
    card_flipped.emit(self)
    print("card %s flipped -> %s" % [data.letter, is_flipped])

5Assign the data resource.

With the Card node selected in the scene, look at the Inspector. There's a Data slot (because @export var data: CardData). Drag cards/a_tile.tres from the FileSystem dock into that slot.

6Create a main scene that hosts the Card.

Scene → New Scene → Node2D. Rename to Main. Save as scenes/main.tscn. Drag scenes/card.tscn from the FileSystem dock into the Scene dock, dropping it onto Main. Position the card somewhere visible (e.g. (200, 200)).

Project → Project Settings → Application → Run → set Main Scene to main.tscn.

7Run it.

Press F5. A window opens. You see an "A" on a gray rectangle. Click it. The letter changes to ✦. The output log prints card A flipped -> true. Click again. Flips back.

That's the complete loop: scene composition, script behavior, signal emission, data-driven resource.

What you actually just did

Defined a Resource type (CardData). Made instances of it in the editor. That's your data layer.
Built a Scene (Card.tscn) that composes built-in nodes (Node2D, ColorRect, Label, Area2D). That's your visual layer.
Wrote a script that reads the Resource and reacts to Area2D input. That's your behavior layer.
Instanced the scene inside a main scene. That's your composition.
Emitted a custom signal. Next exercise something will listen to it.

Stretch goals

If you finish with time to spare:

Create three more CardData resources (B, C, D). Swap the data slot and re-run to see the label change.
Add a Tween to the flip: on flip, rotate the card 180° over 0.2s. Hint: create_tween().tween_property(self, "rotation", PI, 0.2).
Listen to card_flipped from Main's script and print a "card flipped at position X" message.

If it doesn't work

Script errors on load: the class_name CardData line has to be at module scope, before imports. Also save the file — Godot parses on save.
Clicking does nothing: check the Area2D has a CollisionShape2D and the shape is actually sized to cover the card. A debug trick: enable Debug → Visible Collision Shapes in the running window's menu bar.
Null reference on data.letter: you forgot to drag a_tile.tres into the Inspector slot.
Label shows raw "A" forever: you set Text in the Inspector but the script also sets it; Godot's working correctly — check _ready ran (add a print("ready") at the top).

When it runs, return to the dashboard and check off this exercise.