Skip to main content

Getting Started

What is Dreamlab?​

Dreamlab is a browser-based, 2D game engine for building singleplayer and online games. It features:

  • Built-in Multiplayer: Every game you create in Dreamlab is multiplayer-ready by default. No server setup or additional plug-ins
  • Collaboration: Edit code and levels with your teammates in real-time
  • Optional AI Tools: Built-in AI assistant helps you write code

Quick Start Tutorial​

The easiest way to get started is to use our online editor. No setup required!

Video Tutorial​

If videos are more your style, here's this tutorial in video format:

We recommend watching it!

Step 1: Creating Your First Project​

Click on the "Create Game" button to start a new project.

Step 2: Navigating the Editor​

The Dreamlab Editor consists of 5 main panels:

On The Left:

  • Scene Graph: Manage the entities in your game.
  • Project Panel: View/Drag your projects behaviors and images.

On The Right:

  • Properties Panel: Edit the selected entities transform and values.
  • Behaviors Panel: Edit the selected entities behaviors.

On The Bottom:

  • Assistant Panel: Chat with your AI assistant to help build your dream game.
  • Prefabs Panel: Quickly add reusable entities to your world by dragging them.
  • Logs Panel: View server logs from your game.

Step 3

Navigate around your project with your mouse or touchpad.

  • Scroll to zoom in or out
  • Ctrl Scroll to pane up or down
  • Left Click to select and entity
  • Middle Click to pane around

Step 3: Testing Your Game​

Click the Play button at the top to test your game in real time.
Step 4

You can pause, resume, or exit the play session using the toolbar.

Step 4.1

Step 4: Modifying The Level​

  1. Select the Prefabs tab from the bottom panel.
  2. Drag new Platform Prefabs into the scene to complete the level.

Step 5

  1. Use the transform gizmo to position the entities in your scene.

  2. Once you position all the new entities, test your game!

    Step 5.1

Step 5: Changing the Player Speed​

  1. Select the Player entity in the Scene Graph.. It will be located in the Prefabs section.
  2. Once selected, in the Behaviors Panel, edit the speed & jumpForce value under the PlatformMovement behavior to adjust player movement. (e.g., Increase speed from 10 to 12 for faster movement.)

Step 6

Step 6: Creating an Obstacle​

  1. In the Prefabs section, right-click and select New Entity → Collider..
  2. Customize the collider’s properties (e.g., change its shape, size, and color) in the Properties Panel..

Step 7

  1. Name the Collider Obstacle.
  2. Right click on the newly created entity and create another entity of the type: ColoredPolygon.
  3. Try customizing your new entity.
  • Select the Obsticle Collider and change the shape to a circle.
  • Select the ColoredPolygon and change the sides and color.

Step 7.1

Step 7: Saving Your Work​

Always save your project to avoid losing progress.
Click the Save button at the top-right corner of the editor.

Step 8

Step 8: Writing Your First Script​

  1. In the top left, select the script editor button.

Step 9

  1. Right click on the /src folder and create a new behavior.
  2. Name this behavior obstacle-behavior.ts

Step 9.1

  1. Our goal for this behavior is to make it teleport the player to the start of the level when they collide with it.

So first lets listen for entity collision.

onInitializeClient(): void {
  this.registerCollisions(this.onCollide);
}

We can teleport the player to -6, -18 which would be near the player spawnpoint or we could get the PlayerSpawnpoint position and move the player there.

onCollide(e: EntityCollision) {
  if (e.started && e.other.hasBehavior(PlayerController)) {
    const player = e.other.cast(CharacterController);
    this.game.time.waitForNextTick().then(() => {
      player.pos = this.game.world._.PlayerSpawnpoint.pos;
      player.teleport = true;
    });
  }
}

The reason we have to use waitForNextTick is because the PlayerController's onTick function (updating the character position) may run after the collision has been fired, undoing the effects of our collision. This technique allows us to set the position correctly at the beginning of the next tick.

The completed Behavior looks like this:

import {
  Behavior,
  CharacterController,
  EntityCollision,
} from "@dreamlab/engine";
import PlayerController from "./player-controller.ts";

export default class Obstacle extends Behavior {
  onInitializeClient(): void {
    this.registerCollisions(this.onCollide);
  }

  onCollide(e: EntityCollision) {
    if (e.started && e.other.hasBehavior(PlayerController)) {
      const player = e.other.cast(CharacterController);
      this.game.time.waitForNextTick().then(() => {
        player.pos = this.game.world._.PlayerSpawnpoint.pos;
        player.teleport = true;
      });
    }
  }
}

Once you have this, the behavior should be completed!

Step 9.2

  1. Return back to the Editor to use this behavior.

Step 9: Attaching a Behavior Script​

  1. Once returned to the editor, select the Obstacle entity from your Prefabs section.
  2. Once selected, drag the created behavior script onto your prefab in the Behavior Panel from the Project Panel.

Step 10

Step 10: Adding Multiple Obstacles​

  1. Select the Obstacle prefab from the bottom Prefabs Panel.
  2. Drag and position it multiple times in your scene to populate the level. Step 11

Step 11: Testing!​

  1. Test your game again by clicking the Play button.
  2. Check if the behaviors work as expected.
  3. Make any adjustments that are needed.

Final Step

Next Steps​

If you finished the tutorial above, congratulations!

Now you can:

  1. Join our Discord to get help, share your games, and view things other people have created!
    • A community member or Dreamlab developer will often respond to your questions within minutes!
  2. Continue to the "Examples" section to learn more about Dreamlab engine features.