Experimental Houdini Gameboy PaintWorklet

by Tim Broddin

WIP. Buggy as hell. Unplayable. Controllable with your keyboard: left, right, up, down, a, b, space (start), enter (select)

What's a PaintWorklet (Houdini)?

The CSS Painting API — part of the CSS Houdini umbrella of APIs — allows developers to write JavaScript functions that can draw directly into an element's background, border, or content. - MDN

Paint worklets are registered using Javascript, and can be used in CSS with a paint() call.

<script>
    CSS.paintWorklet.addModule("gameboy.js");
</script>

<style>
    .css-houdini-gameboy {
        background: paint(gameboy);
    }
</style>
      

The Painting API provides a (limited) canvas-like API to draw. When the element using the paint() function is redrawn, the worklets' paint method is called.

How does this work?

The PaintWorklet loads Serverboy, a Gameboy emulator tailored for headless use and starts a ROM (inlined in the bundled code).

Redraws are triggered by animating a custom CSS variable called --frame. You could do this in CSS, but it's easier to control the frame rate in JS.

Controls are also implemented as CSS variables, for example this would make Mario jump all the time:

<div class="css-houdini-gameboy" style="--button-a: 1"></div>
          

By triggering the right CSS variables at the right time, you can control Mario.

Caveats

• There's serious stutter. Sometimes old frames get redrawn.
• Slow as hell
• Since there's no putImageData function in the limited Paint API, all pixel data is looped & 96K rectangles are drawn.

Code

I wont be working on this dumb experiment actively, but if for some reason you need a Gameboy emulator inside a Paint Worklet, feel free to grab my code.