Quick Start

This guide shows how to quickly set up a minimal scene using TilemapRenderer, a 2D web rendering library.
The library provides both UMD and ES module builds, so you can choose the one that fits your project.

---

Using the UMD Build

You can include TilemapRenderer via a CDN script. Specify a version to ensure stability, for example @1.5.0, or use @latest to always get the newest release.

<!-- UMD build from CDN -->
<script src="https://cdn.jsdelivr.net/gh/dondejvo/tilemap-renderer@latest/build/tilemap-renderer.min.js"></script>
<script>
    const { initWasm, createRenderer, Camera, Scene, Color } = TilemapRenderer;

    const main = async () => {
        const width = 300;
        const height = 400;

        // Init wasm modules
        await initWasm();

        // Create renderer
        const renderer = createRenderer("webgpu");
        renderer.setSize(width, height);
        renderer.clearColor = new Color(0, 0, 1, 1); // blue background
        document.body.appendChild(renderer.getCanvas());

        // Create camera and scene
        const camera = new Camera(width, height);
        const scene = new Scene();

        // Initialize renderer
        await renderer.init();

        // Render the scene
        renderer.render(scene, camera);
    }

    main();
</script>

Using the ES Module Build

For modern projects with bundlers like Vite, you can import TilemapRenderer as an ES module:

<script type="module">
    import { createRenderer, Camera, Scene, Color } from "https://cdn.jsdelivr.net/gh/dondejvo/tilemap-renderer@latest/build/tilemap-renderer.module.min.js";
    // The rest of the code is the same as the UMD example above.
</script>

Live Demo

The demo bellow renders an empty scene with a blue background:

click here to open in separate window