Quickstart

This guide assumes some familiarity with web development and bundling.

We recommend running Vite with Bun, but you can use any js runtime and bundler you like, e.g. node with webpack for React or NextJS.

Create a vite project

bun create vite

Add toodle

bun add @bloopjs/toodle

Draw a kitten at 0,0

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Toodle</title>

    <style>
      body {
        margin: 0;
        padding: 0;
      }

      canvas {
        display: block;
      }
    </style>
  </head>

  <body>
    <div id="app"></div>
    <canvas style="width: 100vw; height: 100vh"></canvas>
    <script type="module" src="./src/main.ts"></script>
  </body>
</html>

src/main.ts

import { Toodle } from "@bloopjs/toodle";

const canvas = document.querySelector("canvas")!;
const toodle = await Toodle.attach(canvas, {
  limits: { textureArrayLayers: 5 },
});

await toodle.assets.loadTexture(
  "kitten",
  new URL(
    "https://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/Juvenile_Ragdoll.jpg/440px-Juvenile_Ragdoll.jpg",
  ),
);

const quad = toodle.Quad("kitten", {
  size: {
    width: 100,
    height: 100,
  },
});

toodle.startFrame();
toodle.draw(quad);
toodle.endFrame();