World 2 / Quest 07

Art Director

Make the art in ChatGPT. Put it in your game. Make it all match.

Power-up: Tool Combo

You’ll learn

• Power-Up 7: Tool Combo
• The sprite recipe: a prompt that gets game-ready pictures
• Transparent backgrounds and why they matter
• Style consistency: making five pictures look like one game

Briefing

Start prompt

Steps

1. 1

   Write your style sentence

   One sentence that describes the look of your whole game. Examples: "Chunky pixel art, bright candy colors, thick black outlines." or "Soft cartoon style, pastel colors, no outlines, a little goofy." Tell Coach, and Coach will save it in a file called STYLE.md so you never forget it. Swap the sentence in the box below for yours.

   Say this to Coach

   My game's style sentence is: "Chunky pixel art, bright candy colors, thick black outlines." Save it in a file called STYLE.md in my game folder. Then list the 4 pictures my game needs most (player, pickup, enemy or obstacle, background).

   Copy
2. 2

   Make the player with the sprite recipe

   Open ChatGPT. Use the recipe and your style sentence together:

   "A [your player] for a video game. [Your style sentence]. Plain white background. Facing right. Square image. No text."

   If you don't love it, ask ChatGPT for 3 versions and pick one. (Ask for Options works on every AI, not just Coach.) Download the winner.

   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.

3. 3

   Make the background disappear

   Your sprite has a white box around it. Games need a transparent background so only the character shows. Two ways: ask ChatGPT "Give me this with a transparent background as a PNG" — or hand it to Coach and ask Coach to remove the white with a small script. Try ChatGPT first. If the white is still there, pivot to Coach.

   Say this to Coach

   My player picture is in Downloads, called hero.png. Move it into assets. If it still has a white background, remove the white so it's transparent. Then put it in the game as the player, 64 pixels tall, and make it face the direction it's moving.

   Copy
4. 4

   Pickups and obstacles — same style

   Now the other pictures. Paste your style sentence into every prompt. Make the pickup (32×32-ish, small), the obstacle or enemy (same size as the player), and download both. Get them into assets and into the game, one at a time.

   Say this to Coach

   Two new pictures in Downloads: gem.png (the pickup) and rock.png (the obstacle). Move them to assets, make the backgrounds transparent, and put them in the game. Pickup 32 pixels tall, obstacle 64 pixels tall. One at a time — do the pickup first and I'll test.

   Copy
5. 5

   The background

   Backgrounds are different: they should be wide (ask for "a wide landscape image, 16:9"), simple, and darker or blurrier than your characters so the player pops. Use the style sentence again. This one doesn't need a transparent background.

   Say this to Coach

   My background picture is in Downloads, called sky.png. Put it behind everything in the game, stretched to fill the screen. If my characters are hard to see on it, darken the background a little.

   Copy
6. 6

   Art director's check

   Look at your game. Does it look like one game, or like four games glued together? If one picture doesn't match, that's normal — remake just that one with the style sentence. Then save a checkpoint called 'art-done'.

   Say this to Coach

   Take a look at my game's pictures together (here's a screenshot). Does anything not match the style? Then save a checkpoint called 'art-done'.

   Copy

Side quests +10 XP each

Stuck?

• White box still around the sprite? Say what you see with a screenshot: "I expected a transparent background, but there's a white square."
• Sprite is blurry when it's small? Ask Coach to turn off smoothing for pixel art (there's a setting for that).
• Picture shows but faces the wrong way? "Flip the player picture when moving left."

More ways to get unstuck