1. Quick Recap: Wanderer

What we built last time

What We Learned

What's Different Today?

2. Vector2 Deep Dive

Two numbers, infinite power

What is Vector2?

A pair of numbers (x, y) bundled together

var pos = Vector2(400, 300)    # a position
var dir = Vector2(1, 0)        # a direction (right)
var spd = Vector2(200, 150)    # speed in each axis

Same type, different meanings — context matters

Vector2 Operations

Every one of these operations appears in Ricochet

Length and Normalization

Length:     |(3, 4)| = 5
Normalized: (3, 4).normalized() = (0.6, 0.8)

Normalized = same direction, length 1

Then multiply by speed to get movement per second

Random Direction Generation

A 2-step pattern we'll use in Ricochet:

# Step 1: Random x and y between -1 and 1
var random_vec = Vector2(randf_range(-1, 1), randf_range(-1, 1))

# Step 2: Normalize to length 1
var direction = random_vec.normalized()

Speed (SPEED) is a separate constant — applied during movement

3. Speed, Direction & Autonomous Movement

Keep them separate, combine at movement time

Speed + Direction (Separate Variables)

var SPEED = 300                    # pixels per second
var direction = Vector2(0, 0)      # set in _ready()

Autonomous Movement

In Wanderer, direction came from keyboard input

In Ricochet, direction is stored in a variable, set once in _ready()

# Every frame: move by direction * SPEED * delta
position += direction * SPEED * delta

direction * SPEED * delta = frame-rate independent, just like Wanderer

The Bounce

# Hitting right or left wall:
direction.x = -direction.x     # reverse horizontal

# Hitting top or bottom wall:
direction.y = -direction.y     # reverse vertical

4. _ready() vs _process()

When your code runs matters

Two Lifecycle Functions

Why _ready() for Direction?

var SPEED = 300
var direction = Vector2(0, 0)       # overwritten in _ready()

func _ready():
    direction = Vector2(randf_range(-1, 1), randf_range(-1, 1)).normalized()

• Each logo gets a different random direction
• If we set direction at declaration, ALL logos go the same way
• _ready() runs once per instance — each spawned logo gets its own call

5. Building Ricochet

Step-by-step live demo

Step 1: Create the Player Scene

1. New Project: Ricochet (or new scene in existing project)
2. Create Node2D root, rename to Player
3. Add child Sprite2D, drag icon.svg to Texture
4. Save as prefabs/player.tscn

Player (Node2D)     ← script goes here
  └── Sprite2D      ← displays the image

Simpler than Wanderer — the Player IS the moving object, no separate container needed

Step 2: The Player Script

Select Player → Attach Script → Create

extends Node2D

var SPEED = 300                    # pixels per second
var direction = Vector2(0, 0)      # random direction to begin with

func _ready():
    direction = Vector2(randf_range(-1, 1), randf_range(-1, 1)).normalized()

func _process(delta):
    var screen_size = get_viewport_rect().size
    var sprite_width = 128
    var sprite_height = 128

    position += direction * SPEED * delta

    # Bounce off walls
    var bounced = false
    if position.x > screen_size.x - sprite_width/2 or position.x < sprite_width/2:
        direction.x = -direction.x
        bounced = true
    if position.y > screen_size.y - sprite_height/2 or position.y < sprite_height/2:
        bounced = true

    if bounced:
        $Sprite2D.modulate = Color(randf(), randf(), randf())
        direction.y = -direction.y

Code Walkthrough: Variables & _ready()

var SPEED = 300                    # pixels per second
var direction = Vector2(0, 0)      # random direction to begin with

SPEED is a constant (uppercase). direction is a Vector2 — set in _ready()

func _ready():
    direction = Vector2(randf_range(-1, 1), randf_range(-1, 1)).normalized()

Creates a random unit direction — normalized to length 1

Code Walkthrough: Movement & Bounce

position += direction * SPEED * delta

Move by direction * SPEED each frame — autonomous, no input needed

if position.x > screen_size.x - sprite_width/2 or position.x < sprite_width/2:
    direction.x = -direction.x

Past left or right edge? Flip horizontal direction

if position.y > screen_size.y - sprite_height/2 or position.y < sprite_height/2:
    direction.y = -direction.y

Past top or bottom edge? Flip vertical direction

Compare to Wanderer's clamp — clamp stops the object, bounce reverses it

Step 3: Create the Game Scene

1. New scene: Node2D root, rename to Game
2. Drag prefabs/player.tscn into the scene
3. Position the Player at (400, 300)
4. Save as game.tscn

Game (Node2D)                   ← will get spawning script later
  └── Player (player.tscn)     ← instance, position (400, 300)

Step 4: Run It!

1. Press F5, select game.tscn as main scene
2. The logo bounces endlessly!

6. Mouse Input & Spawning

Click to spawn: a new input model

Two Ways to Handle Input

func _process(delta):
    if Input.is_action_pressed("ui_right"):
        # held this frame

func _input(event):
    if event is InputEventMouseButton:
        # just happened

Use polling for held keys, events for one-shot actions

_input() and InputEventMouseButton

func _input(event):
    if event is InputEventMouseButton:
        if event.button_index == MOUSE_BUTTON_LEFT and event.pressed:
            # Mouse was left-clicked!
            print("Clicked at: ", event.position)

• event is InputEventMouseButton — Is this a mouse event?
• event.button_index == MOUSE_BUTTON_LEFT — Left button?
• event.pressed — A press (not release)?
• event.position — Where on screen? (a Vector2)

preload() and instantiate()

var logo_scene = preload("res://prefabs/player.tscn")

preload() loads the scene file once, at script load time

var new_logo = logo_scene.instantiate()

instantiate() creates a new node tree from the scene

new_logo.position = event.position
add_child(new_logo)

add_child() puts it in the scene tree — it starts living!

The Game Script

Attach this script to the Game node:

extends Node2D

var logo_scene = preload("res://prefabs/player.tscn")

func _ready():
    pass

func _process(delta):
    pass

func _input(event):
    if event is InputEventMouseButton:
        if event.button_index == MOUSE_BUTTON_LEFT and event.pressed:
            var new_logo = logo_scene.instantiate()
            print(event.position)
            new_logo.position = event.position
            add_child(new_logo)

Click everywhere. Each logo bounces with its own direction!

7. Bonus: Color on Bounce

A quick visual flourish

Modulate on Bounce

We use a bounced flag to change color on any wall hit:

var bounced = false
if position.x > screen_size.x - sprite_width/2 or position.x < sprite_width/2:
    direction.x = -direction.x
    bounced = true
if position.y > screen_size.y - sprite_height/2 or position.y < sprite_height/2:
    bounced = true

if bounced:
    $Sprite2D.modulate = Color(randf(), randf(), randf())
    direction.y = -direction.y

• $Sprite2D — shorthand for get_node("Sprite2D") — accesses child node
• .modulate — tints the sprite's color
• Color(randf(), randf(), randf()) — random RGB color on each bounce

Summary: What You Learned

Core Concepts (1/2)

Core Concepts (2/2)

11 new concepts — each one builds on the last

Wanderer vs Ricochet

Two different game patterns from the same building blocks

Exercises

Try these on your own!

Beginner Exercises

1. Speed Experiment: Change SPEED to 500, then 100. What feels right for a bouncing logo?
2. Gravity Pull: Add a small constant to direction.y each frame: direction.y += 0.5 * delta. What happens?
3. Spawn Limit: Only allow 10 logos at once. Hint: check get_child_count() before adding a new one.

Intermediate Exercises

4. Speed Increase: Each bounce makes the logo 10% faster. Hint: SPEED *= 1.1 inside the bounce block.
5. Trail Effect: Every 0.1 seconds, spawn a fading copy at the logo's position. Hint: accumulate delta and use modulate.a for transparency.
6. Screen Wrap: Instead of bouncing, make the logo wrap around to the opposite edge. Hint: use modulo or an if-else.

Advanced Exercise

7. Logo Collision: Detect when two logos overlap and make them bounce off each other.
   • This needs Area2D — next lecture's topic!
   • Try planning the approach even if you can't implement it yet
   • What would you need? A collision shape? A signal?