@kernelplay/pixi-renderer

High-performance WebGL 2D renderer for KernelPlayJS using PixiJS.

Version: 0.1.0-alpha | Requires: kernelplay-js@^0.2.0, pixi.js@^8.0.0

⚡ Why PixiJS Renderer?

• WebGL Acceleration - Hardware-accelerated rendering via GPU
• Batch Rendering - Automatic sprite batching for performance
• Advanced Effects - Filters, blend modes, masks
• Texture Management - Efficient atlas and caching
• 10,000+ sprites at 60 FPS (compared to Canvas2D's ~5,000)

Performance Boost: 2-3x faster rendering than Canvas2D for sprite-heavy games.

📦 Installation

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

Or use CDN:

<script type="importmap">
{
  "imports": {
    "pixi.js": "https://cdn.jsdelivr.net/npm/[email protected]/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>

🚀 Quick Start

import { Game } from "kernelplay-js";
import { WebGL2DRenderer } from "@kernelplay/pixi-renderer";
import { MyScene } from "./scenes/MyScene.js";

const game = new Game({
  renderer: new WebGL2DRenderer(),
  width: 800,
  height: 600,
  backgroundColor: "#1a1a1a"
});

game.sceneManager.addScene(new MyScene("Main"));
game.sceneManager.startScene("Main");
game.start();

WebGLBoxRender2D

Simple colored rectangles (for prototyping).

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

entity.addComponent("renderer", new WebGLBoxRender2D({
  color: "red",
  zIndex: 5
}));

🎮 Complete Example

Player Prefab

import { Entity, TransformComponent, ColliderComponent, 
         Rigidbody2DComponent } from "kernelplay-js";
import { PixiSpriteComponent } from "@kernelplay/pixi-renderer";
import { PlayerController } from "../scripts/PlayerController.js";

export class Player extends Entity {
  constructor(x, y) {
    super("Player");
    this.tag = "player";
    this.zIndex = 10;

    this.addComponent("transform", new TransformComponent({
      position: { x, y }
    }));

    this.addComponent("renderer", new WebGLBoxRender2D({
      color: "red",
      zIndex: 5
    }));

    this.addComponent("rigidbody2d", new Rigidbody2DComponent({
      mass: 1,
      gravityScale: 1
    }));

    this.addComponent("collider", new ColliderComponent({
      width: 32,
      height: 32
    }));

    this.addComponent("controller", new PlayerController());
  }
}

Game Scene

import { Scene } from "kernelplay-js";
import { PixiRenderer } from "@kernelplay/pixi-renderer";
import { Player } from "../prefabs/Player.js";

export class GameScene extends Scene {
  async init() {
    // Create entities
    this.addEntity(new Player(400, 300));
  }

  update(dt) {
    super.update(dt);
    
    // Custom game logic here
  }
}

Main Entry

import { Game } from "kernelplay-js";
import { WebGL2DRenderer } from "@kernelplay/pixi-renderer";
import { GameScene } from "./scenes/GameScene.js";

const renderer = new WebGL2DRenderer();

const game = new Game({
  renderer,
  width: 800,
  height: 600,
  backgroundColor: "#1a1a1a"
});

game.sceneManager.addScene(new GameScene("Game"));
game.sceneManager.startScene("Game");
game.start();

Low Performance

• Use texture atlases to reduce draw calls
• Enable WebGL in browser settings
• Reduce filter usage on many sprites
• Use sprite batching (same texture)

Sprites Not Visible

• Check zIndex ordering
• Verify alpha is not 0
• Ensure entity is added to scene
• Check camera position

📚 Resources

• PixiJS Documentation: https://pixijs.com/guides
• KernelPlayJS Docs: https://soubhik-rjs.github.io/kernelplay-js-demo/docs/

🤝 Contributing

See main CONTRIBUTING.md

📄 License

MIT License - Same as KernelPlayJS

🔗 Links

• GitHub: https://github.com/Soubhik1000/kernelplay
• NPM: https://www.npmjs.com/package/@kernelplay/pixi-renderer
• Main Package: https://www.npmjs.com/package/kernelplay-js

@kernelplay/pixi-renderer - High-performance WebGL rendering for KernelPlayJS 🚀