Space Invaders 2D

the arcade classic rebuilt on nodes, signals and synthesized sound.

▶ Run in browser

Tags: game collision waves shooting

Five rows of aliens march across the screen, drop closer every time the formation touches an edge, and shoot back from the bottom of each column. Four barriers erode block by block as fire lands on them, and a mystery ship crosses the top now and then, worth the arcade’s points for however many shots you have fired. Clear the fleet and the next wave marches faster and fires more often; the run ends when your three lives do, or when the aliens reach the ground.

Every pixel and every sound is made in code: the demo ships no asset files. Each actor is a plain Node2D moved by setting position, and collision is a circle test, first_hit(node, group), against the nodes in a scene-tree group, so there is no physics world. The demo shows:

• Immediate-mode drawing in on_draw: 8x8 bit-pattern sprites drawn as filled rects, two frames per alien. Alien.frame is a Property, so changing it redraws the sprite; a barrier calls queue_redraw() when a hit erodes it; the starfield, the effects and the blinking cannon change every frame and set dynamic = True

• Aliens as children of one Formation node: moving the formation moves the fleet, and the formation’s own signals, cleared and landed, tell the game when a wave is won or lost

• AudioSynth baking every sound at import, including a custom AudioSource for the falling shot chirp and the mystery ship’s siren, played by one-shot AudioPlayer nodes that free themselves when the clip ends (queue_free_on_end); the siren loops on a child of the ship, so it stops when the ship goes

• Timer children for the fire rate, the alien volley, respawn invulnerability, the mystery ship and the wave banner

• tree.change_scene between the title, the game and the game-over card, each declaring the same input_context; move is one Axis1D action that keys and a stick both drive, and @on_input handles the presses

• An anchored Label HUD on a CanvasLayer, pinned to the screen while Camera2D.shake rattles the world on a death

• A modal mixer on the title: show_overlay("blocking", inert=True) dims and pauses the scene behind a Panel whose Slider sets the SFX bus volume live

• A TouchController in the game, so a phone plays it with two thumbs

Controls: A/D or Left/Right move, Space fires, Enter starts, O opens the mixer. On a controller the stick moves, A fires and Y opens the mixer on the title; in the game an on-screen stick and A button do the same on a phone. Hold the mouse, or a finger away from the on-screen pad, to slide the cannon toward the pointer and fire. A click or tap starts the game. The mixer opens with BACK focused, so Enter or A closes it as a click or tap on BACK does; its volume slider takes the mouse or a finger.

Source

# /// simvx
# tags = ["game", "collision", "waves", "shooting"]
# ///
"""Space Invaders 2D: the arcade classic rebuilt on nodes, signals and synthesized sound.

Five rows of aliens march across the screen, drop closer every time the
formation touches an edge, and shoot back from the bottom of each column. Four
barriers erode block by block as fire lands on them, and a mystery ship crosses
the top now and then, worth the arcade's points for however many shots you have
fired. Clear the fleet and the next wave marches faster and fires more often;
the run ends when your three lives do, or when the aliens reach the ground.

Every pixel and every sound is made in code: the demo ships no asset files.
Each actor is a plain ``Node2D`` moved by setting ``position``, and collision
is a circle test, ``first_hit(node, group)``, against the nodes in a
scene-tree group, so there is no physics world. The demo shows:

- Immediate-mode drawing in ``on_draw``: 8x8 bit-pattern sprites drawn as
  filled rects, two frames per alien. ``Alien.frame`` is a ``Property``, so
  changing it redraws the sprite; a barrier calls ``queue_redraw()`` when a
  hit erodes it; the starfield, the effects and the blinking cannon change
  every frame and set ``dynamic = True``
- Aliens as children of one ``Formation`` node: moving the formation moves
  the fleet, and the formation's own signals, ``cleared`` and ``landed``, tell
  the game when a wave is won or lost
- ``AudioSynth`` baking every sound at import, including a custom
  ``AudioSource`` for the falling shot chirp and the mystery ship's siren,
  played by one-shot ``AudioPlayer`` nodes that free themselves when the clip
  ends (``queue_free_on_end``); the siren loops on a child of the ship, so it
  stops when the ship goes
- ``Timer`` children for the fire rate, the alien volley, respawn
  invulnerability, the mystery ship and the wave banner
- ``tree.change_scene`` between the title, the game and the game-over card,
  each declaring the same ``input_context``; ``move`` is one ``Axis1D`` action
  that keys and a stick both drive, and ``@on_input`` handles the presses
- An anchored ``Label`` HUD on a ``CanvasLayer``, pinned to the screen while
  ``Camera2D.shake`` rattles the world on a death
- A modal mixer on the title: ``show_overlay("blocking", inert=True)`` dims and
  pauses the scene behind a ``Panel`` whose ``Slider`` sets the ``SFX`` bus
  volume live
- A ``TouchController`` in the game, so a phone plays it with two thumbs

Controls: A/D or Left/Right move, Space fires, Enter starts, O opens the mixer.
On a controller the stick moves, A fires and Y opens the mixer on the title; in
the game an on-screen stick and A button do the same on a phone. Hold the mouse,
or a finger away from the on-screen pad, to slide the cannon toward the pointer
and fire. A click or tap starts the game. The mixer opens with BACK focused, so
Enter or A closes it as a click or tap on BACK does; its volume slider takes the
mouse or a finger.
"""

import random
from typing import NamedTuple

import numpy as np

from simvx.core import (
    ADSR,
    AudioBusLayout,
    AudioClip,
    AudioPlayer,
    AudioSynth,
    Axis1D,
    Camera2D,
    CanvasLayer,
    Controller,
    Input,
    Key,
    Linear,
    Node,
    Node2D,
    Oscillator,
    Pointer,
    Property,
    Signal,
    Timer,
    Vec2,
    on_input,
)
from simvx.core.audio_synth import AudioSource
from simvx.core.ui import Anchor, Button, Label, Panel, Slider, TouchController
from simvx.graphics import App

INPUT_ACTIONS = {
    "move": [Axis1D(low=Key.A, high=Key.D), Axis1D(low=Key.LEFT, high=Key.RIGHT), Controller.LEFT_X],
    "fire": [Key.SPACE, Controller.A],
    "steer": [Pointer.PRIMARY],
    "start": [Key.ENTER, Pointer.PRIMARY, Controller.A, Controller.START],
    "mixer": [Key.O, Controller.Y],
}

WHITE = (1.0, 1.0, 1.0, 1.0)
GREY = (0.7, 0.7, 0.7, 1.0)
PIXEL = 3  # screen pixels per sprite pixel


class AlienKind(NamedTuple):
    frames: tuple[list[int], list[int]]  # 8 rows of 8 bits each, bit 7 the leftmost pixel
    colour: tuple[float, float, float, float]
    points: int


SQUID = AlienKind(
    ([0x18, 0x3C, 0x7E, 0xDB, 0xFF, 0x24, 0x5A, 0xA5], [0x18, 0x3C, 0x7E, 0xDB, 0xFF, 0x24, 0xA5, 0x5A]),
    (1.0, 0.2, 0.2, 1.0),
    30,
)
CRAB = AlienKind(
    ([0x24, 0x18, 0x3C, 0x5A, 0x7E, 0x24, 0x24, 0x42], [0x24, 0xA5, 0x3C, 0x5A, 0x7E, 0x24, 0x42, 0x24]),
    (0.2, 1.0, 0.2, 1.0),
    20,
)
OCTOPUS = AlienKind(
    ([0x18, 0x3C, 0x7E, 0xDB, 0xFF, 0x5A, 0x81, 0x42], [0x18, 0x3C, 0x7E, 0xDB, 0xFF, 0x5A, 0x42, 0x81]),
    (0.2, 0.59, 1.0, 1.0),
    10,
)
UFO_SPRITE = [0x3C, 0x7E, 0xFF, 0xDB, 0xFF, 0x7E, 0x24, 0x00]
UFO_COLOUR = (1.0, 0.2, 1.0, 1.0)

FLEET_ROWS = [SQUID, CRAB, CRAB, OCTOPUS, OCTOPUS]  # top row first
FLEET_COLS = 11
FLEET_SIZE = len(FLEET_ROWS) * FLEET_COLS
COLUMN_PITCH, ROW_PITCH = 40.0, 36.0

# The arcade's mystery ship points, indexed by the player's shot count.
MYSTERY_POINTS = [100, 50, 50, 100, 150, 100, 100, 50, 300, 100, 100, 100, 50, 150, 100]

BARRIER_PATTERN = [
    "  #######  ",
    " ######### ",
    "###########",
    "###########",
    "###########",
    "###########",
    "###  #  ###",
    "##   #   ##",
]


class Sweep(AudioSource):
    """A tone whose pitch follows ``pitch(t)`` in Hz, for the sounds a fixed ``Oscillator`` cannot make."""

    def __init__(self, pitch, wave=np.sin):
        self.pitch = pitch
        self.wave = wave

    def render(self, cursor_samples: int, n_samples: int, sample_rate: int) -> np.ndarray:
        t = (np.arange(n_samples) + cursor_samples) / sample_rate
        phase = 2 * np.pi * np.cumsum(self.pitch(t)) / sample_rate
        return self.wave(phase).astype(np.float32)


def bake(duration: float, *voices) -> AudioClip:
    """Mix ``(source, envelope, gain)`` voices into one clip ``duration`` seconds long."""
    synth = AudioSynth()
    for source, envelope, gain in voices:
        synth.add(source, envelope=envelope, gain=gain)
    return synth.bake(duration)


def square(phase):
    return np.sign(np.sin(phase))


FADE = Linear(start=1.0, end=0.0)
SHOOT = bake(0.1, (Sweep(lambda t: 880 - 6600 * t, square), ADSR(attack=0.002, release=0.05), 0.35))
EXPLOSION = bake(0.35, (Oscillator.noise.white(), FADE, 0.45))
MARCH_STEPS = [
    bake(0.08, (Oscillator.square(f), ADSR(attack=0.002, release=0.02), 0.4)) for f in (110, 92.5, 82.4, 73.4)
]
SIREN = bake(0.4, (Sweep(lambda t: 850 + 250 * np.sin(2 * np.pi * 6 * t)), None, 0.25))
UFO_HIT = bake(
    0.45,
    *[(Oscillator.sine(f), FADE, 0.13) for f in (660, 440, 220)],
    (Oscillator.noise.white(), FADE, 0.08),
)


def play(parent: Node, clip, volume_db: float = 0.0):
    """Play ``clip`` once on a player that removes itself when it ends, so sounds can overlap."""
    parent.add_child(AudioPlayer(stream=clip, bus="SFX", volume_db=volume_db, autoplay=True, queue_free_on_end=True))


def draw_sprite(renderer, rows: list[int], colour, scale: float = PIXEL, origin=(-4 * PIXEL, -4 * PIXEL)):
    for y, bits in enumerate(rows):
        for x in range(8):
            if bits & (0x80 >> x):
                renderer.rect((origin[0] + x * scale, origin[1] + y * scale), (scale, scale), fill=colour)


def first_hit(node, group: str):
    """The first node in ``group`` whose circle overlaps ``node``'s, or None."""
    for other in node.tree.group(group):
        if (other.world_position - node.world_position).length() < other.radius + node.radius:
            return other
    return None


class Starfield(Node2D):
    """Stars drifting down at their own speeds, held as fractions of the view so a resize keeps them spread."""

    dynamic = True

    def on_ready(self):
        self.stars = [[random.random(), random.random(), random.uniform(0.25, 1.0)] for _ in range(70)]

    def on_update(self, dt):
        height = self.viewport_size.y
        for star in self.stars:
            star[1] += star[2] * 18.0 * dt / height
            if star[1] > 1.0:
                star[:2] = random.random(), 0.0

    def on_draw(self, renderer):
        width, height = self.viewport_size
        for x, y, brightness in self.stars:
            renderer.rect((x * width, y * height), (1.5, 1.5), fill=(brightness, brightness, brightness, 1.0))


class Alien(Node2D):
    radius = 4 * PIXEL
    sound = EXPLOSION
    frame = Property(0, range=(0, 1))

    def __init__(self, kind: AlienKind, column: int, **kwargs):
        super().__init__(**kwargs)
        self.kind = kind
        self.column = column
        self.points = kind.points
        self.colour = kind.colour

    def on_ready(self):
        self.add_to_group("aliens")

    def on_draw(self, renderer):
        draw_sprite(renderer, self.kind.frames[self.frame], self.colour)


class Formation(Node2D):
    """The fleet: marches as one, turns and drops at the edges, and speeds up as it thins."""

    cleared = Signal()
    landed = Signal()

    speed = Property(28.0, range=(1, 200))

    def __init__(self, wave: int, **kwargs):
        super().__init__(**kwargs)
        self.wave = wave
        self.march = 1  # +1 marching right, -1 left
        self.travel = 0.0  # pixels since the last animation step
        self.steps = 0
        self.last_step_sound = 0.0

    def on_ready(self):
        # Eleven columns at the arcade pitch are wider than an upright phone: close them up to fit.
        pitch = min(COLUMN_PITCH, (self.viewport_size.x - 80) / FLEET_COLS)
        for row, kind in enumerate(FLEET_ROWS):
            for col in range(FLEET_COLS):
                position = ((col - FLEET_COLS // 2) * pitch, (row - len(FLEET_ROWS) // 2) * ROW_PITCH)
                self.add_child(Alien(kind, col, position=position))

    def on_update(self, dt):
        aliens = self.tree.group("aliens")
        if not aliens:
            self.cleared.emit()
            self.destroy()
            return

        speed = (self.speed + (FLEET_SIZE - len(aliens)) * 4.0) * (1.0 + (self.wave - 1) * 0.1)
        dx = self.march * speed * dt
        xs = [alien.world_position.x for alien in aliens]
        width, height = self.viewport_size
        if (self.march > 0 and max(xs) + dx > width - 30) or (self.march < 0 and min(xs) + dx < 30):
            self.march = -self.march
            self.position.y += 22
            if max(alien.world_position.y for alien in aliens) > height - 80:
                self.landed.emit()
            return
        self.position.x += dx

        # The sprites swap frames every 14 pixels marched; the march sound is capped at about 8 steps
        # a second, or a nearly cleared fleet would buzz.
        self.travel += abs(dx)
        if self.travel >= 14.0:
            self.travel -= 14.0
            for alien in aliens:
                alien.frame ^= 1
            if self.tree.now - self.last_step_sound >= 0.12:
                self.last_step_sound = self.tree.now
                play(self, MARCH_STEPS[self.steps % len(MARCH_STEPS)])
                self.steps += 1


class Player(Node2D):
    fired = Signal()

    dynamic = True  # blinks while invulnerable
    radius = 12
    speed = Property(300.0, range=(50, 1000))

    def on_ready(self):
        self.add_to_group("player")
        self.gun = self.add_child(Timer(duration=0.4))
        self.respawn = self.add_child(Timer(duration=1.5))

    @property
    def invulnerable(self) -> bool:
        return not self.respawn.stopped

    def on_fixed_update(self, dt):
        step = self.speed * dt
        x = self.position.x + Input.value("move") * step
        steering = Input.pressed("steer")
        if steering:
            x += max(-step, min(step, Input.mouse_position.x - x))
        self.position.x = max(20, min(self.viewport_size.x - 20, x))

        if (Input.pressed("fire") or steering) and self.gun.stopped:
            self.gun.start()
            self.fired.emit()

    def on_draw(self, renderer):
        if self.invulnerable and int(self.tree.now * 8) % 2 == 0:
            return
        green = (0.0, 1.0, 0.0, 1.0)
        renderer.rect((-13, -4), (26, 8), fill=green)
        renderer.rect((-3, -12), (6, 8), fill=green)
        renderer.rect((-1, -15), (2, 3), fill=green)


class Bullet(Node2D):
    radius = 3
    direction = Property(-1, hint="-1 flies up (the player's), +1 down (an alien's)")
    speed = Property(400.0)

    def on_ready(self):
        self.add_to_group("player_bullets" if self.direction < 0 else "alien_bullets")

    def on_fixed_update(self, dt):
        self.position.y += self.direction * self.speed * dt
        if not 0 <= self.position.y <= self.viewport_size.y:
            self.destroy()

    def on_draw(self, renderer):
        colour = WHITE if self.direction < 0 else (1.0, 1.0, 0.2, 1.0)
        renderer.rect((-1, -4), (2, 8), fill=colour)


class Barrier(Node2D):
    """A bunker of pixels: a bullet that lands on one knocks out it and its neighbours."""

    def on_ready(self):
        self.pixels = [[cell == "#" for cell in line] for line in BARRIER_PATTERN]

    def hit(self, point) -> bool:
        col, row = ((point - self.position) // PIXEL).astype(int)
        rows, cols = len(self.pixels), len(self.pixels[0])
        if not (0 <= row < rows and 0 <= col < cols and self.pixels[row][col]):
            return False
        for r in range(max(0, row - 1), min(rows, row + 2)):
            for c in range(max(0, col - 1), min(cols, col + 2)):
                self.pixels[r][c] = False
        self.queue_redraw()
        return True

    def on_draw(self, renderer):
        for row, line in enumerate(self.pixels):
            for col, alive in enumerate(line):
                if alive:
                    renderer.rect((col * PIXEL, row * PIXEL), (PIXEL, PIXEL), fill=(0.0, 1.0, 0.39, 1.0))


class MysteryShip(Node2D):
    radius = 4 * PIXEL
    colour = UFO_COLOUR
    sound = UFO_HIT

    def __init__(self, points: int, **kwargs):
        super().__init__(**kwargs)
        self.points = points
        self.heading = random.choice((-1, 1))

    def on_ready(self):
        self.add_to_group("mystery")
        self.position = (-30 if self.heading > 0 else self.viewport_size.x + 30, 40)
        self.add_child(AudioPlayer(stream=SIREN, bus="SFX", loop=True, autoplay=True, volume_db=-6.0))

    def on_update(self, dt):
        self.position.x += self.heading * 120 * dt
        if not -40 <= self.position.x <= self.viewport_size.x + 40:
            self.destroy()

    def on_draw(self, renderer):
        draw_sprite(renderer, UFO_SPRITE, self.colour)


class Effect(Node2D):
    """A short-lived flourish that fades out over ``lifetime`` seconds and then removes itself."""

    dynamic = True
    lifetime = 0.5

    def __init__(self, colour, **kwargs):
        super().__init__(**kwargs)
        self.colour = colour
        self.age = 0.0

    def on_update(self, dt):
        self.age += dt
        if self.age >= self.lifetime:
            self.destroy()

    @property
    def faded(self):
        return (*self.colour[:3], 1.0 - self.age / self.lifetime)


class Explosion(Effect):
    lifetime = 0.4

    def on_ready(self):
        self.sparks = [(random.uniform(-1, 1), random.uniform(-1, 1), random.uniform(40, 100)) for _ in range(8)]

    def on_draw(self, renderer):
        for dx, dy, speed in self.sparks:
            reach = speed * self.age
            renderer.rect((dx * reach - 1.5, dy * reach - 1.5), (3, 3), fill=self.faded)


class ScorePopup(Effect):
    lifetime = 0.8

    def __init__(self, points: int, colour, **kwargs):
        super().__init__(colour, **kwargs)
        self.text = f"+{points}"

    def on_update(self, dt):
        super().on_update(dt)
        self.position.y -= 40 * dt

    def on_draw(self, renderer):
        renderer.text(self.text, (0, 0), fill=self.faded, scale=2)


class Game(Node):
    input_context = INPUT_ACTIONS

    lives = Property(3, range=(1, 10))

    def on_ready(self):
        self.score = 0
        self.lives_left = self.lives
        self.wave = 0
        self.shots = 0
        width, height = self.viewport_size

        self.add_child(Starfield())
        self.camera = self.add_child(Camera2D(position=self.viewport_size / 2))
        self.player = self.add_child(Player(position=(width / 2, height - 50)))
        self.player.fired.connect(self.player_fire)
        barrier_width = len(BARRIER_PATTERN[0]) * PIXEL
        gap = (width - 4 * barrier_width) / 5
        for i in range(4):
            self.add_child(Barrier(position=(gap + i * (barrier_width + gap), height - 130)))

        self.volley = self.add_child(Timer(one_shot=False))
        self.volley.timeout.connect(self.alien_fire)
        self.mystery = self.add_child(Timer(duration=random.uniform(15, 30), autostart=True))
        self.mystery.timeout.connect(self.spawn_mystery)

        self.hud = self.add_child(CanvasLayer())
        self.score_label = self.hud.add_child(Label(anchor=Anchor.TOP_LEFT, inset=10, font_size=22))
        self.wave_label = self.hud.add_child(Label(anchor=Anchor.CENTER_TOP, inset=10, font_size=22))
        self.wave_label.text_colour = GREY
        self.lives_label = self.hud.add_child(Label(anchor=Anchor.TOP_RIGHT, inset=10, font_size=22))
        self.add_child(TouchController(buttons=(Controller.A,)))
        self.next_wave()

    def show_hud(self):
        self.score_label.text = f"SCORE {self.score:05d}"
        self.wave_label.text = f"WAVE {self.wave}"
        self.lives_label.text = f"LIVES {self.lives_left}"

    def next_wave(self):
        self.wave += 1
        top = 80 + len(FLEET_ROWS) // 2 * ROW_PITCH
        formation = self.add_child(Formation(self.wave, position=(self.viewport_size.x / 2, top)))
        formation.cleared.connect(self.wave_cleared)
        formation.landed.connect(self.game_over)
        self.volley.start(max(0.45, 1.1 - (self.wave - 1) * 0.1))
        self.show_hud()

    def wave_cleared(self):
        self.volley.stop()
        banner = self.hud.add_child(Label(f"WAVE {self.wave + 1}", anchor=Anchor.CENTER, font_size=56))
        pause = banner.add_child(Timer(duration=1.5, autostart=True))
        pause.timeout.connect(banner.destroy)
        pause.timeout.connect(self.next_wave)

    def player_fire(self):
        self.shots += 1
        self.add_child(Bullet(direction=-1, position=self.player.position - Vec2(0, 15)))
        play(self, SHOOT)

    def alien_fire(self):
        # Only the lowest alien in each column shoots, so none fires through its own ranks.
        lowest = {}
        for alien in self.tree.group("aliens"):
            if alien.column not in lowest or alien.position.y > lowest[alien.column].position.y:
                lowest[alien.column] = alien
        if lowest:
            shooter = random.choice(list(lowest.values()))
            self.add_child(Bullet(direction=1, position=shooter.world_position + Vec2(0, 10)))

    def spawn_mystery(self):
        self.add_child(MysteryShip(MYSTERY_POINTS[self.shots % len(MYSTERY_POINTS)]))
        self.mystery.start(random.uniform(15, 30))

    def on_fixed_update(self, dt):
        barriers = self.find_all(Barrier, direct=True)
        for bullet in self.tree.group("player_bullets"):
            if target := first_hit(bullet, "aliens") or first_hit(bullet, "mystery"):
                self.shoot_down(target)
                bullet.destroy()
            elif other := first_hit(bullet, "alien_bullets"):
                self.add_child(Explosion(WHITE, position=bullet.position))  # shots meet in mid-air
                other.destroy()
                bullet.destroy()
            elif any(barrier.hit(bullet.position) for barrier in barriers):
                bullet.destroy()

        for bullet in self.tree.group("alien_bullets"):
            if not self.player.invulnerable and first_hit(bullet, "player"):
                bullet.destroy()
                self.lose_life()
                return
            if any(barrier.hit(bullet.position) for barrier in barriers):
                bullet.destroy()

    def shoot_down(self, target):
        self.score += target.points
        self.show_hud()
        position = target.world_position
        self.add_child(ScorePopup(target.points, target.colour, position=position))
        self.add_child(Explosion(target.colour, position=position))
        play(self, target.sound, volume_db=-3.0)
        target.destroy()

    def lose_life(self):
        self.camera.shake(intensity=4.0, duration=0.3)
        self.add_child(Explosion((0.0, 1.0, 0.4, 1.0), position=self.player.position))
        play(self, EXPLOSION, volume_db=-3.0)
        self.lives_left -= 1
        self.show_hud()
        if self.lives_left == 0:
            self.game_over()
            return
        width, height = self.viewport_size
        self.player.position = (width / 2, height - 50)
        self.player.respawn.start()

    def game_over(self):
        self.tree.change_scene(GameOverCard(self.score))


class Card(Node):
    """A full-screen text card over the starfield: a press moves on to ``next_scene()``."""

    dynamic = True  # the prompt blinks
    input_context = INPUT_ACTIONS
    prompt = "PRESS ENTER OR TAP"

    def on_ready(self):
        self.add_child(Starfield())

    def next_scene(self) -> Node:
        """The scene a press moves on to; each card names its own."""
        raise NotImplementedError

    @on_input("start")
    def start(self, event):
        self.tree.change_scene(self.next_scene())

    def lines(self):
        """``(text, height fraction, scale, colour)`` for each line of the card."""
        return []

    def on_draw(self, renderer):
        width, height = self.viewport_size
        lines = self.lines()
        if int(self.tree.now * 2) % 2 == 0:
            lines.append((self.prompt, 0.66, 3, GREY))
        for text, y, scale, colour in lines:
            fitted = renderer.fit_scale(text, width * 0.9, base_scale=scale)
            renderer.text(text, (width / 2, height * y), fill=colour, scale=fitted, align="centre")


class TitleScreen(Card):
    prompt = "PRESS ENTER OR TAP TO START"

    def on_ready(self):
        super().on_ready()
        self.add_child(
            Button("MIXER (O)", on_press=self.open_mixer, anchor=Anchor.CENTER_BOTTOM, inset=30, size=(200, 42))
        )

    def next_scene(self):
        return Game()

    @on_input("mixer")
    def open_mixer(self, event=None):
        mixer = self.add_child(Mixer())
        mixer.show_overlay("blocking", dismiss=False, inert=True, initial_focus=mixer.back)

    def lines(self):
        return [("SPACE INVADERS", 0.13, 5, WHITE), *CONTROLS_HELP]

    def on_draw(self, renderer):
        super().on_draw(renderer)
        width, height = self.viewport_size
        x, y = width / 2 - 80, height * 0.3
        legend = [(kind.frames[0], kind.colour, kind.points) for kind in (SQUID, CRAB, OCTOPUS)]
        for sprite, colour, points in [*legend, (UFO_SPRITE, UFO_COLOUR, "???")]:
            draw_sprite(renderer, sprite, colour, origin=(x, y))
            renderer.text(f"= {points} PTS", (x + 35, y + 4), fill=WHITE, scale=2)
            y += min(46.0, height * 0.077)


class GameOverCard(Card):
    prompt = "PRESS ENTER OR TAP TO CONTINUE"

    def __init__(self, score: int, **kwargs):
        super().__init__(**kwargs)
        self.score = score

    def next_scene(self):
        return TitleScreen()

    def lines(self):
        return [("GAME OVER", 0.3, 5, (1.0, 0.2, 0.2, 1.0)), (f"SCORE  {self.score:05d}", 0.5, 3, WHITE)]


class Mixer(Panel):
    """A modal panel whose slider sets the ``SFX`` bus volume in decibels as it moves."""

    def __init__(self, **kwargs):
        super().__init__(anchor=Anchor.CENTER, size=(340, 170), **kwargs)
        self.bg_colour = (0.08, 0.08, 0.12, 0.95)
        self.bus = AudioBusLayout.get_default().get_bus("SFX")
        self.add_child(
            Label("SFX VOLUME", anchor=Anchor.TOP_WIDE, inset=(0, 12), size=(0, 36), font_size=24, alignment="centre")
        )
        slider = self.add_child(
            Slider(-40, 0, value=self.bus.volume_db, anchor=Anchor.TOP_WIDE, inset=(30, 70), size=(0, 20))
        )
        slider.value_changed.connect(self.set_volume)
        self.back = self.add_child(
            Button("BACK", on_press=self.close, anchor=Anchor.CENTER_BOTTOM, inset=16, size=(120, 36))
        )

    def set_volume(self, db: float):
        self.bus.volume_db = db

    def close(self):
        self.close_overlay()
        self.destroy()


# Example help overlay: not part of the technique shown.
CONTROLS_HELP = [
    ("A/D OR ARROWS MOVE    SPACE FIRES", 0.76, 2, GREY),
    ("OR HOLD THE POINTER TO MOVE AND FIRE", 0.81, 2, GREY),
]


if __name__ == "__main__":
    App(title="Space Invaders", width=800, height=600, target_fps=30).run(TitleScreen())