Playground

Change the code and watch the running game pick it up. Compilation happens in your browser; there is nothing to install and your source is not sent to a build server.

game.tideCtrl / ⌘ Enter to compile

// Change the color or speed below. The ball keeps its position on reload.
const float SPEED = 1;
const float RADIUS = 18;
const Color INK = Color(0.98, 0.75, 0.14);

component Ball
{
    [Position] float2 position;
    float2 velocity = float2(130, 95);
    int bounces;
}

scene Main { }

event(Spawned) Setup(with Main)
{
    Spawn(Ball);
}

system Move(mut Ball ball, Time time)
{
    ball.position += ball.velocity * time.dt * SPEED;
    if (Math.Abs(ball.position.x) > 145)
    {
        ball.position.x = Math.Sign(ball.position.x) * 145;
        ball.velocity.x = -ball.velocity.x;
        ball.bounces += 1;
    }
    if (Math.Abs(ball.position.y) > 105)
    {
        ball.position.y = Math.Sign(ball.position.y) * 105;
        ball.velocity.y = -ball.velocity.y;
        ball.bounces += 1;
    }
}

view Backdrop()
{
    Draw.Clear(Color(0.086, 0.086, 0.094));
    Draw.SetCamera(float2(0), Math.Max(185, 185 * Screen.height / Screen.width));
    Draw.Rect(float2(0), float2(330, 250), Color(0.15, 0.15, 0.17));
}

view Show(Ball ball)
{
    Draw.Circle(ball.position, RADIUS, INK);
    Draw.Text($"{ball.bounces} bounces", float2(-145, -155), 15, Color(0.64, 0.64, 0.68));
}

Live previewStarting…

The bounce counter survives a hot reload.

●Edit the code, then compile to see your changes.

Try a live change

Change INK to Color(0.18, 0.83, 0.75) to turn the ball teal.
Change SPEED to 2 to make it move faster, or 0 to hold it still.
Change RADIUS to 30 to make it bigger.

The bounce count and position carry over. Restart starts the last successful build from the beginning. Reset code restores the original example and starts it again.

Auto reload compiles after you stop typing. With it off, press Compile & reload or Ctrl+Enter (Cmd+Enter on macOS). If the code has an error, diagnostics appear below the editor and the last successful game keeps running. Try removing a semicolon, then putting it back.

What runs here

This is the real Tide compiler and engine: Tide is transpiled to C, compiled to WebAssembly and loaded into the running preview. The first compilation downloads about 25 MiB of compiler tools, which your browser can cache. Later edits reuse them. The first build also initializes the tools and can take longer than later edits; progress appears below the editor. The compiler runs in a worker so you can keep editing while it builds.

This demo edits one .tide file with no external assets or packages. The engine's normal component, system and view features work here, including procedural drawing and shaders. Files named by an asset declaration must exist in the compiler's virtual filesystem; this page has no file upload or package manager. Native-only integrations are unavailable.

Hot reload carries fields over by name. New fields use their defaults; changing a default does not overwrite an existing field. Renaming or removing state can reset it. Web reload currently closes connections to other players, so this playground demonstrates a solo match.

For a complete project, install Tide and follow Your first game. Use tide run --web for the same browser preview with local project files and watched rebuilds.