¿Qué hace pixijs-performance?
Utiliza esta skill al perfilar u optimizar una aplicación PixiJS v8 en términos de FPS, llamadas de dibujo o memoria de GPU. Cubre patrones de destrucción (cacheAsTexture(false), releaseGlobalResources), GCSystem y TextureGCSystem, PrepareSystem, pooling de objetos, reglas de batching, BitmapText para texto dinámico, culling (Culler, CullerPlugin, cullable, cullArea) y compromisos de resolución/antialiasing. Se activa con: FPS, tirones, llamadas de dibujo, batching, pool de objetos, GCSystem, PrepareSystem, Culler, cacheAsTexture, fugas de memoria, patrones de destrucción.
Optimización de rendimiento en PixiJS v8
1. Patrones de destrucción
Para liberar memoria correctamente, usa los siguientes patrones:
// cacheAsTexture(false) con destroy
sprite.cacheAsTexture(false);
sprite.destroy();
// Liberar recursos globales
app.renderer.releaseGlobalResources();
2. Gestión de la recolección de basura (GCSystem y TextureGCSystem)
GCSystem y TextureGCSystem gestionan automáticamente la memoria de texturas no utilizadas. Puedes forzar la limpieza:
app.renderer.gcSystem.run();
app.renderer.textureGCSystem.run();
3. PrepareSystem
PrepareSystem precarga texturas y shaders para reducir pausas durante el renderizado. Úsalo para preparar objetos antes de mostrarlos:
import { PrepareSystem } from 'pixi.js';
await app.renderer.prepare.upload(scene);
4. Pooling de objetos
Reutiliza objetos en lugar de crearlos y destruirlos constantemente:
class BulletPool {
private pool: Sprite[] = [];
get(): Sprite {
return this.pool.pop() ?? new Sprite(Texture.WHITE);
}
release(bullet: Sprite): void {
bullet.removeFromParent();
this.pool.push(bullet);
}
}
5. Reglas de batching
PixiJS agrupa llamadas de dibujo automáticamente. Para maximizar el batching:
- Usa la misma textura para varios sprites.
- Evita mezclar sprites con diferentes modos de blending.
- Limita el uso de filtros y máscaras.
6. BitmapText para texto dinámico
Para texto que cambia frecuentemente, usa BitmapText en lugar de Text:
import { BitmapText } from 'pixi.js';
const scoreText = new BitmapText({
text: '0',
style: { fontFamily: 'Arial', fontSize: 24 }
});
scoreText.text = '100'; // Cambio eficiente
7. Culling (Culler, CullerPlugin)
Evita renderizar objetos fuera de la pantalla:
import { Culler, CullerPlugin } from 'pixi.js';
app.stage.cullable = true;
app.stage.cullArea = app.screen;
// Si usas CullerPlugin
app.stage.addPlugin(CullerPlugin);
app.stage.cull();
8. Compromisos resolución/antialiasing
Reduce la resolución o desactiva el antialiasing para mejorar FPS:
const app = new Application({
resolution: window.devicePixelRatio || 1,
antialias: false,
});
Para gráficos de baja calidad, puedes reducir aún más la resolución.
Activación de la skill
Esta skill se activa automáticamente cuando detectas problemas como:
- Bajo FPS
- Tirones (jank)
- Alto número de draw calls
- Batching ineficiente
- Fugas de memoria (memory leaks)
- Uso intensivo de GCSystem, PrepareSystem o Culler
- Patrones de destrucción incorrectos