Renderers

KernelPlay.js supports multiple rendering backends for different use cases.

🎨

Canvas 2D

Default renderer. Best for simple 2D games. Zero setup required.

⚡

Pixi.js 2D

Full GPU-accelerated 2D. Handles thousands of sprites smoothly with Pixi.js integration.

🌐

Three.js 3D

Full 3D rendering with Three.js integration.

Canvas 2D (Default)

No renderer config needed — it's used automatically if you don't pass a renderer option.

// Default Canvas 2D — just run the game
new MyGame({ width: 800, height: 600, fps: 60 }).start();

Pixi.js 2D Renderer

bash

npm install @kernelplay/pixi-renderer pixi.js kernelplay-js

html

<script type="importmap">
{
  "imports": {
    "pixi.js": "https://cdn.jsdelivr.net/npm/pixi.js@8.0.0/dist/pixi.min.mjs",
    "kernelplay-js": "https://cdn.jsdelivr.net/npm/kernelplay-js/dist/kernelplay.es.js",
    "@kernelplay/pixi-renderer": "https://cdn.jsdelivr.net/npm/@kernelplay/pixi-renderer/dist/pixi-renderer.es.js"
  }
}
</script>

import { WebGL2DRenderer } from "@kernelplay/pixi-renderer";

new MyGame({
  renderer: new WebGL2DRenderer(),
  width: 800,
  height: 600,
  fps: 60,
  backgroundColor: "#eeeeee"
}).start();

Three.js 3D Renderer

bash

npm install @kernelplay/three-renderer three kernelplay-js

html

<script type="importmap">
{
  "imports": {
    "three": "https://cdn.jsdelivr.net/npm/three@0.158.0/build/three.module.js",
    "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.158.0/examples/jsm/",
    "kernelplay-js": "https://cdn.jsdelivr.net/npm/kernelplay-js/dist/kernelplay.es.js",
    "@kernelplay/three-renderer": "https://cdn.jsdelivr.net/npm/@kernelplay/three-renderer/dist/three-renderer.es.js"
  }
}
</script>

import { ThreeRenderer } from "@kernelplay/three-renderer";
import * as THREE from "three";

new MyGame({
  renderer: new ThreeRenderer(),
  width: 800,
  height: 600,
  fps: 60
}).start();

// Use 3D components with Three renderer
entity.addComponent("transform", new TransformComponent({
  position: { x: 0, y: 0, z: -5 }
}));

⚠️ Three.js & Pixi.js peer dependency

When using ThreeRenderer, install three separately: npm install three npm install pixi.js

← PreviousComponents Next →Physics