import { Application, Sprite, Texture } from 'pixi.js';

const app = new Application({ width: 800, height: 600 });
document.body.appendChild(app.canvas);

// ✅ 好的做法：多个 Sprite 共享同一纹理
const texture = Texture.from('/image/bullet.png');
for (let i = 0; i < 100; i++) {
    const bullet = new Sprite(texture);
    bullet.x = Math.random() * 800;
    bullet.y = Math.random() * 600;
    app.stage.addChild(bullet);
}

// ❌ 坏的做法：每个 Sprite 使用不同纹理
// 100 个不同纹理 = 100 次 Draw Call

// 在渲染循环中查看
app.ticker.add(() => {
    // renderer.render 之后可以查看
    console.log('Draw Calls:', (app.renderer as any).renderingToScreen
        ? (app.renderer as any).batcher?.size ?? 'N/A'
        : 'N/A');
});

import { Assets, Spritesheet } from 'pixi.js';

// 加载精灵表（配合 TexturePacker 导出的 JSON）
const spritesheetData = await fetch('/image/game.json').then(r => r.json());
const texture = await Assets.load('/image/game.png');
const spritesheet = new Spritesheet(texture, spritesheetData);
await spritesheet.parse();

// 使用纹理
const player = new Sprite(spritesheet.textures['player_idle']);
const enemy = new Sprite(spritesheet.textures['enemy_1']);
app.stage.addChild(player, enemy);

class ObjectPool<T> {
    private pool: T[] = [];
    private factory: () => T;
    private reset: (obj: T) => void;

    constructor(factory: () => T, reset: (obj: T) => void) {
        this.factory = factory;
        this.reset = reset;
    }

    acquire(): T {
        if (this.pool.length > 0) {
            return this.pool.pop()!;
        }
        return this.factory();
    }

    release(obj: T): void {
        this.reset(obj);
        this.pool.push(obj);
    }

    get size(): number {
        return this.pool.length;
    }
}

// 使用示例：子弹对象池
import { Sprite, Texture, Container } from 'pixi.js';

class Bullet extends Sprite {
    public vx = 0;
    public vy = 0;
    public active = false;

    constructor() {
        super(Texture.from('/image/bullet.png'));
        this.anchor.set(0.5);
    }

    fire(x: number, y: number, vx: number, vy: number) {
        this.x = x;
        this.y = y;
        this.vx = vx;
        this.vy = vy;
        this.active = true;
        this.visible = true;
    }

    deactivate() {
        this.active = false;
        this.visible = false;
    }
}

const bulletPool = new ObjectPool(
    () => new Bullet(),
    (b) => { b.deactivate(); }
);

// 发射子弹
function fireBullet(container: Container, x: number, y: number) {
    const bullet = bulletPool.acquire();
    bullet.fire(x, y, 0, -8);
    container.addChild(bullet);
}

// 回收子弹
function recycleBullet(bullet: Bullet, container: Container) {
    container.removeChild(bullet);
    bulletPool.release(bullet);
}

import { Container, Rectangle } from 'pixi.js';

function cullChildren(container: Container, viewRect: Rectangle) {
    for (const child of container.children) {
        const bounds = child.getBounds();
        // 检查是否与视口相交
        const visible = bounds.x + bounds.width > viewRect.x
            && bounds.x < viewRect.x + viewRect.width
            && bounds.y + bounds.height > viewRect.y
            && bounds.y < viewRect.y + viewRect.height;

        child.visible = visible;
    }
}

// 每帧更新
const viewRect = new Rectangle(0, 0, 800, 600);
app.ticker.add(() => {
    viewRect.x = -app.stage.x;
    viewRect.y = -app.stage.y;
    cullChildren(bulletContainer, viewRect);
});

// 简单四叉树概念示意
interface QuadTreeNode {
    bounds: Rectangle;
    objects: GameObject[];
    children: QuadTreeNode[]; // 4 个子节点
}

import { Graphics, RenderTexture, Sprite } from 'pixi.js';

const g = new Graphics();
g.rect(0, 0, 64, 64).fill(0xff0000);
g.circle(32, 32, 20).fill(0x00ff00);

// 缓存为 RenderTexture
const rt = RenderTexture.create({ width: 64, height: 64 });
app.renderer.render({ container: g, target: rt });

// 用 Sprite 代替 Graphics（1 次 Draw Call）
const cached = new Sprite(rt);
cached.x = 100;
cached.y = 100;
app.stage.addChild(cached);

// 原始 Graphics 可以销毁
g.destroy();

// ❌ 每帧重建
app.ticker.add(() => {
    graphics.clear();
    graphics.rect(0, 0, player.hp, 20).fill(0x00ff00);
});

// ✅ 仅在值变化时重建
let lastHp = -1;
app.ticker.add(() => {
    if (player.hp !== lastHp) {
        graphics.clear();
        graphics.rect(0, 0, player.hp, 20).fill(0x00ff00);
        lastHp = player.hp;
    }
});

// 销毁纹理释放 GPU 内存
texture.destroy(true); // true = 同时销毁 BaseTexture

// 批量销毁
function destroyAllTextures(container: Container) {
    container.children.forEach(child => {
        if (child instanceof Sprite && child.texture) {
            child.texture.destroy(true);
        }
        if (child instanceof Container) {
            destroyAllTextures(child);
        }
    });
    container.removeChildren();
}

import { ParticleContainer, Sprite, Texture } from 'pixi.js';

// ParticleContainer 比普通 Container 快很多
const particles = new ParticleContainer(10000, {
    vertices: true,
    position: true,
    rotation: true,
    uvs: true,
    tint: true,
});

const texture = Texture.from('/image/particle.png');
for (let i = 0; i < 5000; i++) {
    const p = new Sprite(texture);
    p.x = Math.random() * 800;
    p.y = Math.random() * 600;
    p.anchor.set(0.5);
    particles.addChild(p);
}

app.stage.addChild(particles);

// 简单 FPS 显示
import { Text } from 'pixi.js';

const fpsText = new Text({ text: 'FPS: 0', style: { fill: 0xffffff } });
app.stage.addChild(fpsText);

app.ticker.add(() => {
    fpsText.text = `FPS: ${Math.round(app.ticker.FPS)}`;
});

// 移动端检测并降低粒子数
const isMobile = /Android|iPhone|iPad/i.test(navigator.userAgent);
const MAX_PARTICLES = isMobile ? 2000 : 5000;