Make games with Superpowers — The extensible, collaborative HTML5 2D+3D game maker

Your first (almost) game

Create a Sprite asset, name it Leonard, open it up by double-clicking and upload a small image.
You can use Leonard, Superpowers's mascott for instance).

Make sure to set the grid size to match your image's size so that your entire image is visible in the preview pane (bottom).

Create a Script asset named Game and open it up.

Scripts are used to tell Superpowers what to do with your assets. When you run your game, Superpowers reads each script in order from top to bottom and executes the instructions in them. Superpowers comes with TypeScript as its scripting language.

Metaphorically, your game is a movie set and you're the director. With your scripts, you will be enlisting actors, giving them costumes to put on and telling them how to behave. If you have no scripts, nobody will show up and the screen will stay black.

In the script editor, clear the default text and type the following (or copy/paste, but you'll learn faster if you type it up yourself): 

// Summon our first actor, he'll play the main character
let mainCharacterActor = new Sup.Actor("Main Character");
// Tell our actor to slip into the "Leonard" costume (sprite)
new Sup.SpriteRenderer(mainCharacterActor, "Leonard");

// Summon a second person on stage, he'll be the camera man
let cameraManActor = new Sup.Actor("Camera Man");
// Give the man a camera!
new Sup.Camera(cameraManActor);

// Place our actors. The main character actor is at the center of the stage
mainCharacterActor.setPosition(0, 0, 0);

// The camera man will be looking at the main actor from a distance
cameraManActor.setPosition(0, 0, 5);

Lines beginning with // are comments. Superpowers doesn't care about them, I only put them here to explain what's happening.

IMPORTANT: Make sure to press Ctrl+S to apply the changes made to your script. You'll notice the little draft indicator in the asset tree will disappear when your script is saved.

Superpowers can detect some scripting errors (syntax, reference and type errors) on the fly so if you see some words in red when you're done, you'll know that you need to check this line and the lines around it again. Detailed error messages are displayed at the bottom of the editor.

When you're done, run the game with the Run game button and you should see our little actor appear!