# @kernelplay/pixi-renderer

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

> **Version:** `0.1.1-alpha` | **Requires:** `kernelplay-js@^0.3.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 { PixiRenderer } from "@kernelplay/pixi-renderer";
import { MyScene } from "./scenes/MyScene.js";

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

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

---

### PixiBoxRenderComponent

Simple colored rectangles (for prototyping).

```javascript
import { PixiBoxRenderComponent } from "@kernelplay/pixi-renderer";

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

### PixiShapeRenderer

Simple colored rectangles (for prototyping).

```javascript
import { PixiShapeRenderer } from "@kernelplay/pixi-renderer";

entity.addComponent("renderer", new PixiShapeRenderer({
  shape: "rect",
  width: 64,
  height: 32,
  color: 0x4488ff,
}));
```

### Pixi Render Components

```javascript
import { ShapeRenderer } from "./components/ShapeRenderer.js";

// Rectangle
entity.addComponent("renderer", new ShapeRenderer({
  shape:  "rect",
  width:  64,
  height: 32,
  color:  0x4488ff,
}));

// Circle
entity.addComponent("renderer", new ShapeRenderer({
  shape:  "circle",
  radius: 24,
  color:  0xff4444,
}));

// Ellipse
entity.addComponent("renderer", new ShapeRenderer({
  shape:   "ellipse",
  radiusX: 40,
  radiusY: 20,
  color:   0x44ff88,
}));

// Rounded rect
entity.addComponent("renderer", new ShapeRenderer({
  shape:  "roundedrect",
  width:  80,
  height: 40,
  radius: 10,       // corner radius
  color:  0xffaa00,
}));

// Triangle
entity.addComponent("renderer", new ShapeRenderer({
  shape:  "triangle",
  width:  40,
  height: 40,
  color:  0xaa44ff,
}));

// Polygon (custom points)
entity.addComponent("renderer", new ShapeRenderer({
  shape:  "polygon",
  points: [
    { x:  0,  y: -30 },
    { x:  20, y:  0  },
    { x:  10, y:  30 },
    { x: -10, y:  30 },
    { x: -20, y:  0  },
  ],
  color: 0xff8800,
}));

// Line
entity.addComponent("renderer", new ShapeRenderer({
  shape:  "line",
  points: [
    { x: -50, y: 0 },
    { x:  50, y: 0 },
  ],
  strokeWidth: 3,
  color: 0xffffff,
}));

// Outline only (no fill)
entity.addComponent("renderer", new ShapeRenderer({
  shape:       "rect",
  width:       64,
  height:      64,
  filled:      false,
  strokeColor: 0x00ff00,
  strokeWidth: 2,
}));

// Fill + stroke
entity.addComponent("renderer", new ShapeRenderer({
  shape:       "circle",
  radius:      32,
  color:       0x2244aa,
  filled:      true,
  strokeColor: 0xffffff,
  strokeWidth: 2,
}));

// Change at runtime
const shape = entity.getComponent("renderer");
shape.setColor(0xff0000);
shape.setSize(128, 64);
shape.setAlpha(0.5);
shape.setStroke(0xffffff, 3);
shape.setShape("circle");  // completely rebuild as circle
```

---

## 🎮 Complete Example

### Player Prefab
```javascript
import { Entity, TransformComponent, ColliderComponent, Rigidbody2DComponent } from "kernelplay-js";
import { PixiBoxRenderComponent } 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 PixiBoxRenderComponent({
      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 { 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 { PixiRenderer } from "@kernelplay/pixi-renderer";
import { GameScene } from "./scenes/GameScene.js";

const renderer = new PixiRenderer();

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 🚀