Sprig Workshop

Sprig is a fun and powerful tool for building tile-based games using JavaScript. Developed by Hack Club, it combines coding, art, and music into one editor. Create games and share them in the community gallery—or aim for the coveted Sprig Console!

Quick Resources

Click Here for The Beginner Workshop

Click Here for the Tutorial

My Undertale Example Game

Happy coding! 🎮 The possibilities are endless with Sprig—go make something amazing!

Getting Started

To prevent losing your work, save your files regularly. You can also download them as .js files for local backup.

The Toolkit

Sprig games are built on grids of tiles, and you can define behavior, visuals, and interactivity. Below is a breakdown of the key functions with examples:

Define Sprites and Maps

Sprites are the visual elements in your game, like the player and walls. You define them using a "legend" with unique keys for each sprite.

// Define sprites with unique keys
const player = "p"; // Player sprite
const wall = "w";   // Wall sprite

// Set up the sprite legend
setLegend(
  [player, bitmap
    ..... 
    .000.
    .0.0.
    .000.
    .....],
  [wall, bitmap
    ..... 
    .111.
    .111.
    .111.
    .....]
);

// Set the game background
setBackground(wall); // Uses the wall sprite as the background

// Create a map for the game
const level = map
  wwwww
  w...w
  w.p.w
  w...w
  wwwww
;

// Apply the map
setMap(level);

// Make sprites solid to prevent overlap
setSolids([player, wall]);

Handle User Input

Sprig uses keyboard inputs to control sprites. Common controls include w, a, s, d for directional movement and i, j, k, l for alternative directions.

// Move the player
onInput("w", () => {
  const sprite = getFirst(player); // Find the player sprite
  sprite.y -= 1; // Move up
});
onInput("s", () => {
  const sprite = getFirst(player);
  sprite.y += 1; // Move down
});
onInput("a", () => {
  const sprite = getFirst(player);
  sprite.x -= 1; // Move left
});
onInput("d", () => {
  const sprite = getFirst(player);
  sprite.x += 1; // Move right
});

// Check game state after input
afterInput(() => {
  const tiles = tilesWith(wall, player); // Check if player is on a wall
  if (tiles.length > 0) {
    console.log("Game Over!");
  }
});

Add Music and Sound Effects

Sprig includes a built-in sound engine to add background music or sound effects to your game. Use the tune function to create melodies.

// Create a short melody
const melody = tune
  500: c4~500,
  500: d4~500,
  500: e4~500;

// Play the tune once
playTune(melody);

// Play in a loop
const playback = playTune(melody, Infinity);

// Stop the music
playback.end();

Advanced: Dynamic Level Switching

Switch between multiple levels using user input. This allows you to create a game with several stages or levels that can be accessed during gameplay.

// Define multiple levels
const levels = [
  map
    wwwww
    w...w
    w.p.w
    w...w
    wwwww
  ,
  map
    wwwww
    w.p.w
    www.w
    w...w
    wwwww
];

// Start with the first level
let currentLevel = 0;
setMap(levels[currentLevel]);

// Switch levels on player input
onInput("i", () => {
  currentLevel = (currentLevel + 1) % levels.length; // Cycle levels
  setMap(levels[currentLevel]); // Load the next level
});