npm package: @kernelplay/pixi-renderer
Description: A lightweight JavaScript 2D game engine inspired by Unity’s component system.
Author: Soubhik Mukherjee
Latest version: 0.1.0

# @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

```bash
npm install @kernelplay/pixi-renderer pixi.js kernelplay-js
```

Or use CDN:
```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>
```

---

## 🚀 Quick Start

```javascript
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).

```javascript
import { WebGLBoxRender2D } from "@kernelplay/pixi-renderer";

entity.addComponent("renderer", new WebGLBoxRender2D({
  color: "red",
  zIndex: 5
}));
```

---

## 🎮 Complete Example

### Player Prefab
```javascript
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
```javascript
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
```javascript
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](https://github.com/Soubhik1000/kernelplay/blob/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 🚀