Running a Sprig Workshop

Spice up your club meetings or hackathon with Sprig.

leomcelroy@leomcelroy
Edit this page!
Screen Shot 2022-09-23 at 4 41 25 PM

Sprig is a tool developed by Hack Club to help people quickly get started making interesting tile-games. It's a tiny game engine embedded in a web-based editor with integrated art and music tools. If you build a game in Sprig and share it in the community gallery you can get a Sprig Console!

This workshop is designed to help club leaders use Sprig in their clubs. If you are a solo hacker you can jump straight into the Sprig editor. You may be able to pick up some helpful tips reading through this though.

Screen Shot 2023-03-03 at 5 48 32 PM

We designed Sprig to accomodate workshops with minimal instruction and maximal making and exploring. This is how I would run Sprig as a workshop.

Demo (2 minutes)

Give a quick demonstration of a fairly complete game with accessible code. You can go to the gallery and sort by the beginner tag.

Screen Shot 2023-03-03 at 6 14 44 PM

Here are a few games that meet the criteria:

Account (2 minutes)

For that you and your club don't lose your files, we use an account system, here is the step by step:

  1. Click on the "Log in" button at the top right of the page
Screen Shot 2023-03-03 at 6 35 57 PM
  1. Fill in the field with an email and then click on the "Send code" button
Screen Shot 2023-03-03 at 6 40 41 PM
  1. You will receive an email like this, then just put this code in the field "Code:"
Screen Shot 2023-03-03 at 6 46 27 PM

That's it! Your account is ready!

Toolkit (3 minutes)

Open up the toolkit and quickly describe the different things you can do. The point here is not to explain every function. It's just to give people a sense of what is possible and where to look for help. Only spend a few minutes doing this! Check out the snippet below to survey essentially every function in Sprig.

Recent files are available in the "Your Games" page. They will always be saved in your account. The most reliable way to save is to downlad the js file.

To save, hit the automatically generated name:

Screen Shot 2023-03-03 at 6 56 26 PM

and add a name like so: my_sprig_game

Then hit menu > Download Don't forget to take note of where it was saved! For those of you on school computers be aware that they often get wiped frequently, so you'll want to save the link somewhere safe and off the computer, like to your email or on a cloud-based doc.

Tell People to Get Hackin'! (rest of available workshop time)

Tell people to start by working through the tutorial.

After people complete the tutorial encourge them to start thinking of their own game. Often a good way to make and original game is to start with an existing one and adding a new mechanic to it. Check out the games tagged hackable to find remixable bases.

Share (10 minutes)

Gather everyone's attention and have them share their games with you. Ask if anyone would like to demo their game to the group. Celebrate the work and use it as a chance for each person to get feedback, inspiration, and affirmation.

If the games are complete then make a PR to submit them to the gallery and earn a Sprig console.

If the games are not complete encourage people to keep working on them and plan to continue working in your next club meeting. You can also encourage people to share the games they have so far by posting links to those games in the Sprig channel on Slack. You can generate a link by navigating to the share -> as link option in the file menu, as seen below:

Screen Shot 2023-03-03 at 6 18 29 PM

People could easily spend 3 or 4 club meetings working on games.

Reference

The toolkit is essentially every function we added to Sprig, otherwise it's just JavaScript. For more information on these functions check the Show Help menu in the Sprig editor.

const player = "p";
const wall = "w";

setLegend(
    [ player, bitmap`.` ],
    [ wall, bitmap`.` ],
);

setBackground(wall);

const level = map`.`
setMap(level);

setSolids([ player, wall ]);
setPushables({
  [player]: [wall]
})

getFirst(spriteType);
getAll(spriteType);
getTile(x, y);
tilesWith(spriteType0, spriteType1, ...);
addSprite(x, y, spriteType);
clearTile(x, y);

addText("string", { x, y, color: [r, g, b] });

clearText();

onInput("w", () => {});
afterInput(() => {});

const melody = tune`...`
playTune(melody)
playTune(melody, 5)
const playback = playTune(melody, Infinity)
playback.end()

width();
height();
This workshop is also available in Latin American Spanish & Brazilian Portuguese.

We'd love to see what you've made!

Share a link to your project (through Replit, GitHub etc.)