Workshop: "From Score to System" · Pass 2 exemplar unit · student-facing prose + instructor track in one document

Library entry: MD_W02_title-screen_v01 (instructor share link on screen throughout) · Workbook: W-02

What this block is for

Fifteen minutes from now, music you can hear will be running through a system you built. That's the entire point of this hour. Not theory, not vocabulary quizzes — a title-screen system, playing, that behaves the way shipped games behave: it starts, it loops for as long as the player sits on the menu, and it gets out gracefully when the player presses Start.

By the end of the block you will have built three connected nodes and you will know, from the inside, what the words state, loop, and transition mean — because you'll have heard what each one does.

Before you touch anything

One rule about sound in the browser: nothing plays until you click something that makes sound. Browsers require a human gesture before audio starts — so if your canvas ever seems silent and broken, the fix is almost always "click an audition button first." Remember this; it will rescue you at least once today.

You should already be signed in from Block 1 (the magic-link email). If not, raise a hand now, not at minute 55 — the sign-in is what lets you save and share.

The build

(The instructor builds it first in five minutes, talking. Then you build yours. The reference share link stays on the projector — you can open it read-only on your own machine and listen to the finished version any time you feel lost.)

1 · Get a canvas and load your sound (10 min)

Open the workshop level. In the left Sidebar, find Level Assets — the block's audio (a menu-music stem, provided) is already there. If you're adding your own audio later in the day: drag the file anywhere onto the canvas and it imports.

2 · Your first Music State (10 min)

In the Sidebar, expand Add Nodes (it's collapsed by default — click the section header). You'll see six cards. Today you need two of them.

Drag a Music State card onto the canvas. This node is a playback state — a situation the game can be in, with music attached. Click it and the detail panel opens. Name it MENU_Loop. Attach the menu-music asset. Set it to LOOP.

Press its audition button. This is the moment. The music is playing from a node you made. Let it loop at least twice and listen to the seam — the point where the end meets the beginning. If the loop was cut well, you shouldn't be able to find the seam with your eyes closed. (The tool plays your file exactly as cut — it can't repair a bad edit. That's why the asset-craft session exists in the longer courses.)

3 · The exit: a second state (10 min)

Drag a second Music State out. Name it MENU_Exit, attach the exit flourish asset, and leave it ONE-SHOT — it plays once and ends. This is the music's answer to the player pressing Start.

Audition it. One press, one graceful goodbye.

4 · The Transition: where design actually lives (20 min)

Drag a Transition node between them and connect: MENU_Loop → Transition → MENU_Exit.

Click the Transition. This panel is where a music designer earns the title. Four decisions, all audible:

• Transition sync — when is the music allowed to change? immediate means "the instant Start is pressed." next-beat and next-bar mean "wait for a musical boundary." Try immediate first, audition the seam, then try next-bar. Hear the difference? One is a light switch; the other is a musician finishing the phrase.
• Fade type — crossfade, cut, sting, or bridge. Start with crossfade.
• Duration — the crossfade length in milliseconds. Try 200 ms, then 1200 ms. Too short sounds like an accident; too long sounds like soup. Somewhere in between, it sounds intended.
• Curve — linear / exponential / equal-power. Equal-power is the safe default for musical material.

Label the connection with its trigger — type Start pressed on the edge. (Honesty note, and this matters: that label is documentation, not behavior. The game engine will act on it later; the canvas records your intent. You are writing the spec while you design. That idea carries the whole rest of this workshop.)

Audition the full journey: loop → press → exit. Adjust until the handoff sounds musical, not mechanical. This is the judgment no tool automates.

5 · Prove it (5 min)

Play your system for the person next to you, eyes closed, and ask them to point at the moment of transition. If they can't — or they point and shrug "it just felt right" — you've built your first invisible system. That invisibility is the craft.

Catch-up card (if you fell behind, this rebuilds the block in ~6 steps)

1. Sidebar → Add Nodes (expand it) → drag Music State onto canvas
2. Name MENU_Loop · attach menu asset · set LOOP · audition
3. Drag second Music State → MENU_Exit · attach flourish · leave ONE-SHOT
4. Drag Transition between them · connect both edges
5. Transition panel: crossfade · ~800 ms · next-bar · equal-power · label edge Start pressed
6. Audition end-to-end

Instructor track

Timing: 0:00 live demo (5) · 0:05 setup + asset (10) · 0:15 first state + THE MOMENT (10) · 0:25 exit state (10) · 0:35 transition lab (20) · 0:55 pair-listen + close (5)

The demo script (verified against cap-map v1, main@0a3f122): narrate the drag from the collapsed Add Nodes section deliberately — students miss that it's collapsed more than they miss anything else in this hour. Audition before explaining; sound first, vocabulary second.

Failure points, in order of likelihood:

1. Silent canvas → they haven't made the first audition click (AudioContext gesture). Click any audition button.
2. "I don't have Add Nodes" → they're on a read-only share link, not their own level. Get them into their own workshop level.
3. "My loop clicks" → the file's cut, not the tool; swap in the provided asset and note the asset-craft pointer.
4. Zoom-out snaps back → known canvas bug (cap-map §11); zoom in slightly and continue, don't fight it.
5. Magic-link email hasn't arrived → work unsaved for now; browser keeps state during the session; re-send at the break.

Do not say live: anything on the gap sheet (manual, Part C) — no "the label triggers the transition," no probability, no live intensity macro.

Close with the bridge to Block 3: "You designed when music changes. Next hour: how music changes how much — layers."

Prep time: ~45 min once (build the reference, test the room's audio path). Repeat delivery: ~15 min.