This repo is depracated and exists for archive purposes. The updated version of Game Lab is Sprig
The best way to learn is by making things you care about and sharing them with others.
That's what Game Lab is all about.
Have you ever wanted to...
- Make Pong in 30 lines of code?
- Create the Chrome dino game in 50?
- Or... even better... make a delightful game that doesn't exist yet?
Then get started making games with Game Lab!
You should be able to get started in Game Lab with very little experience programming. Even if you're an expert, you should still be able to have fun with it. We hope you enjoy it, and we can't wait to see what you make!
(and scroll down for a brief tutorial to get started) !
Learning from functional examples is the best way to get started building games with Game Lab.
Below we have created a series of short examples that grow from creating a character on the screen to creating a more complicated game.
Initialize the game engine (this may already be written for you when you open the editor):
const engine = createEngine(gameCanvas, 300, 300);Make a character:
const engine = createEngine(gameCanvas, 300, 300);
engine.add({
x: 188,
y: 69,
sprite: player, // you'll need to create a sprite named "player" in the editor
// (you can name it anything, just change the name here too)
scale: 4, // this makes the sprite larger than its default 32 x 32 pixel size
// try changing this number to see what happens
})
engine.start();Add a floor with gravity:
const engine = createEngine(gameCanvas, 300, 300);
engine.add({
solid: true, // the solid property makes this object collideable
x: 135,
y: 114,
sprite: player,
scale: 4,
update: (me) => { // update runs every frame
me.vy += 50; // adding velocity every frame is acceleration
}
})
engine.add({
solid: true, // the solid property makes this object collideable
x: -6,
y: 283,
sprite: floor, // you will need to create a new sprite called "floor"
scale: 11,
})
engine.start();Add movement:
const engine = createEngine(gameCanvas, 300, 300);
engine.add({
solid: true,
x: 135,
y: 114,
sprite: player,
scale: 4,
update: (me) => {
me.vy += 50;
// we can add key inputs by checking the keys in the update loop
if (engine.heldKey("ArrowLeft")) me.x -= 3;
if (engine.heldKey("ArrowRight")) me.x += 3;
}
})
engine.add({
solid: true,
x: -6,
y: 283,
sprite: floor,
scale: 11,
})
engine.start();Add jump:
const engine = createEngine(gameCanvas, 300, 300);
engine.add({
tags: ["player"], // we can add tags so we can reference objects
solid: true,
x: 135,
y: 114,
sprite: player,
scale: 4,
collides: (me, them) => { // this runs when we collide with another object
if (engine.pressedKey(" ")) {
// here we are checking if we are standing on the floor
if (them.hasTag("floor")) me.vy -= 80;
}
},
update: (me) => {
me.vy += 50;
if (engine.heldKey("ArrowLeft")) me.x -= 3;
if (engine.heldKey("ArrowRight")) me.x += 3;
}
})
engine.add({
tags: ["floor"], // we can add tags so we can reference objects
solid: true,
x: -6,
y: 283,
sprite: floor,
scale: 11,
})
engine.start();Add platforms:
const engine = createEngine(gameCanvas, 300, 300);
engine.add({
tags: ["player"],
sprite: player,
scale: 3,
solid: true,
x: 50,
y: 16,
collides: (me, them) => {
if (them.hasTag("platform")) me.vx = them.vx;
if (engine.pressedKey(" ")) {
if (them.hasTag("platform")) me.vy -= 50;
}
},
update: (me) => {
me.vy += 0.4;
if (engine.heldKey("ArrowLeft")) me.x -= 3;
if (engine.heldKey("ArrowRight")) me.x += 3;
},
})
// we can use a function to make multiple instances of an object
const addPlatform = (x, y) => engine.add({
tags: ["platform"],
sprite: floor,
scale: 3,
solid: true,
x: x,
y: y,
vx: -40,
bounce: -1, // bounce determines how much velocity changes when we collide with something
update: (me) => {
if (me.x < 0) me.vx = 40;
if (me.x + me.width > engine.width) me.vx = -40
},
})
addPlatform(50, 200);
addPlatform(20, 100);
engine.start();Removing objects:
const engine = createEngine(gameCanvas, 300, 300);
engine.add({
tags: ["player"],
sprite: test_sprite,
scale: 2,
x: 150,
y: 50,
update: (me) => {
if (engine.heldKey("ArrowUp")) me.y -= 3;
if (engine.heldKey("ArrowDown")) me.y += 3;
},
})
engine.add({
tags: ["target"],
sprite: floor,
scale: 3,
x: 112,
y: 232,
collides: (me, them) => {
if (them.hasTag("player")) {
engine.remove("target"); // we can remove objects by their tag name
}
}
})
engine.start();Add a background:
const e = createEngine(gameCanvas, 300, 300);
engine.add({
update: () => { // we can also draw on the game canvas
engine.ctx.fillStyle = "pink";
engine.ctx.fillRect(0, 0, e.width, e.height);
}
})
engine.start();Adding Tunes
To add tunes, background music, beeps and boops to your game first make a tune asset in the asset editor. You can then play the asset as such:
// To play a tune once
playTune(tune_asset_name);
// or play multiple toons
playTune(tune_0, tune_1, tune_2);
// To play a tune on repeat:
loopTune(tune_asset_name);
// or loop multiple toons
loopTune(tune_0, tune_1, tune_2);To stop a tune on repeat:
const tuneToStop = loopTune(tune_asset_name);
tuneToStop.end();All Object Properties
Refer to the following example for all the available object properties:
engine.add({
tags: ["tag-name"], // assign tags to later reference object
solid: true, // add solid property to make object bump into other solids
x: 178, // x position
y: 126, // y position
vx: 40, // x velocity
vy: 100, // y velocity
sprite: ball,
scale: 2,
rotate: 90, // rotate by some degrees
bounce: 1, // how much velocity is lost on collisions
origin: [0, 0], // this moves the origin of the object
collides: (me, them) => { // function run on collision
if (them.hasTag("tag-name")) {} // check tag names to figure out what you've collided with
},
update: (me) => {
if (engine.heldKey("ArrowDown")) me.y += 3; // add key inputs
if (engine.pressedKey("ArrowUp")) me.y -= 3; // add key inputs
if (me.x < 0) {
engine.end(); // end the game
engine.addText("Game Over", engine.width/2, engine.height/2, { color: "blue", size: 32 }) // add text
}
},
})
This could be because you made your game in an old version of Game Lab.
Game Lab is in active development. We want to make sure you can play the games you make even if they aren't compatible with the newest version of the editor. If you made a game and need to run it on an old version of Game Lab you can use this site:
https://gamelab-versions.hackclub.dev/[SEMANTIC_VERSION]/index.html
For example the first release of Game Lab is available here:
https://gamelab-versions.hackclub.dev/0.1.0/index.html
As we have said previously, people learn best when they make things that they care about, which they can then share with others. This type of learning philosophy is called constructionism, and Game Lab is a type of microworld. A microworld is an environment where you can discover programming by using it to express yourself.
Game Lab could also be considered a minimalist fantasy console sort of like Pico-8.
Join #gamelab-dev on the Hack Club Slack to join the development discussion
The Hack Club Game Lab requires a local HTTP server to run in development. Here's how to get it running on your own machine.
Clone repo:
$ git clone https://github.com/hackclub/gamelab
Start a local HTTP server inside the repo:
$ cd gamelab/
$ python3 -m http.server 3000
And then go to http://localhost:3000 in your web browser...
$ open http://localhost:3000/
...and it should work!
The Hack Club Game Lab is open source and licensed under the MIT License. Fork, remix, and make it your own! Pull requests and other contributions greatly appreciated.