🧰 Pixi.js · Estudio ← Índice Qué es Características Casos de uso Script Casos reales Referencia

Estudio de Pixi.js

Gráficos 2D ⭐ 40k stars
Gráficos 2D interactivos con API simple y rápida para WebGL y canvas de HTML5.

🤖 Skill de implementación: frontend-desarrollo (regla: solo catálogo de las 66 · versiones por ERR/MEJ)

1 · Características

2 · Casos de uso

3 · Script minimalista

Instalación: npm i pixi.js

import { Application } from 'pixi.js';
const app = new Application({ width: 400, height: 300 });
document.body.appendChild(app.view);

4 · Casos de uso (implementación real)

Dos casos de uso comunes implementados con esta librería.

1. Sprite que se mueve

Crea un sprite y lo anima con el ticker.

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

const app = new Application({ width: 400, height: 300 });
document.body.appendChild(app.view);

const sp = Sprite.from('img.png'); sp.x = 20; sp.y = 20;
app.stage.addChild(sp);

app.ticker.add(() => { sp.x += 2; if (sp.x > 350) sp.x = 20; });
🔁 Cómo funciona: El `ticker` actualiza la posición del sprite cada frame; PIXI lo dibuja en WebGL/canvas.

2. Texto + gráficos

Muestra un texto y un rectángulo dibujado.

import { Application, Text, Graphics } from 'pixi.js';

const app = new Application({ width: 400, height: 300 });
document.body.appendChild(app.view);

const g = new Graphics(); g.beginFill(0xff6600); g.drawRect(30, 30, 100, 60); g.endFill();
const t = new Text('Puntaje: 0', { fill: 0xffffff });
app.stage.addChild(g, t);
🔁 Cómo funciona: `Graphics` dibuja primitivas vectoriales y `Text` pinta texto; ambos son objetos del stage.

5 · Referencia

CategoríaGráficos 2D
Stars (GitHub)⭐ 40k
Sitio oficialhttps://www.pixijs.com/
GitHubhttps://github.com/pixijs/pixi.js
Instalaciónnpm i pixi.js
RelacionadasThree.js · Phaser.js · Babylon.js
📦 Regla de librerías (local primero): revisar C:\Users\TUF\Documents\librerías\local\ antes de descargar. Volver al índice de los 66 estudios.