World 2 / Quest 06

Studio Server

Your first picture won't load. That's the lesson.

Power-up: The PivotBadge: Keep the Workshop Tidy

You’ll learn

• Power-Up 6: The Pivot
• Why browsers block pictures from plain files (and the fix)
• How to start and stop your Studio Server
• How to keep your workshop tidy: folders, assets, checkpoints

Briefing

Start prompt

Steps

1. 1

   Get a picture — any picture

   Ask ChatGPT for a quick sprite: "Make a small pixel-art star, plain white background, square." Download it. It lands in Downloads. (Any small PNG works — even a photo. This quest is about the plumbing, not the art.)

   Where does this go?

   Your file lands in Downloads.

   Drag it onto the Hermes chat, or tell Coach it’s in Downloads.

   Coach moves it into your ArcadeLab folder.

2. 2

   Put it in the game (and watch it fail)

   Tell Coach to make an assets folder inside your game, move the picture in, and show it in the game. Then double-click index.html like always. Look for the picture. It's probably not there — or the game is blank. Good. Now Say What You See.

   Say this to Coach

   I downloaded a picture called star.png. Make a folder called assets inside my game, move the picture there, and show it in the game as the player. Then tell me to open index.html.

   Copy
3. 3

   Try to fix it — three times max

   Report it: "I expected to see my star, but the game is blank." Coach will try something. Test. Report again. Coach tries again. After the third try that doesn't work, you're not allowed to say "try again." You're going to pivot.

   Say this to Coach

   I expected to see my picture in the game, but the screen is blank. I opened index.html by double-clicking it. What's going on?

   Copy
4. 4

   The Pivot

   Look at these two:

   First try: it still doesn't work try again

   Better: We've tried fixing the picture three times and it still fails. Let's stop and try a totally different way. What are 2 other ways to get my picture into the game?

   Say the better one. One of Coach's answers should be a local server. That's the one.

   Say this to Coach

   We've tried fixing the picture three times and it still fails. Let's stop and try a totally different way. What are 2 other ways to get my picture into the game?

   Copy
5. 5

   Start your Studio Server

   Tell Coach to start the Studio Server for your game. Coach runs one command and gives you a link that starts with http://localhost:. Click it (or paste it in your browser). Your picture appears. From now on, in World 2 and beyond, you open games through this link — not by double-clicking.

   Say this to Coach

   Start the Studio Server for my game and give me the link. Then explain in kid words why the picture works through the server but not by double-clicking the file.

   Copy
6. 6

   Tidy the workshop + save a checkpoint

   Ask Coach to show you the folder layout: your game folder, index.html inside it, and assets for pictures and sounds. Then ask for a checkpoint — a saved copy of the whole game folder. Any time you're about to try something scary, save a checkpoint first. If it breaks, you go back.

   Say this to Coach

   Show me my game's folder layout as a little tree. Then save a checkpoint of the whole game called 'picture-works' so I can go back to it later. Tell me how to go back to a checkpoint.

   Copy

Side quests +10 XP each

Stuck?

• The link says the page can't be reached? The server stopped. Ask Coach to start it again.
• 'Port already in use'? Two servers are fighting. Ask Coach to use a different port number.
• Picture is huge or tiny? Give the full picture: "The star is 500 pixels wide. Make it 64 pixels wide in the game."

More ways to get unstuck