PixiJS, librería de JavaScript para Gráficos 2D

PixiJS es una biblioteca de JavaScript de código abierto de renderizado 2D en tiempo real que utiliza WebGL para ofrecer un alto rendimiento en aplicaciones web y móviles

Desarrollada inicialmente por Goodboy Digital, PixiJS ha ganado popularidad entre desarrolladores de juegos y aplicaciones interactivas gracias a su sencillez, flexibilidad y velocidad.

PixiJS Utiliza WebGL cuando está disponible, y HTML5 Canvas como respaldo, garantizando un rendimiento óptimo en una amplia variedad de dispositivos.

Instalación de PixiJS

Para comenzar a usar PixiJS, primero debemos incluirlo en nuestro proyecto. Podejmos hacerlo mediante incluyendo mediante un CDN, instalándolo con npm o descargando los archivos desde el sitio oficial.

Usando CDN

<script src="https://pixijs.download/release/pixi.min.js"></script>

Usando npm

npm install pixi.js

Luego, importa PixiJS en tu proyecto JavaScript:

import * as PIXI from 'pixi.js';

Cómo usar PixiJS

A continuación, se muestra cómo configurar un escenario básico con PixiJS y cómo agregar gráficos y animaciones.

Creación de una aplicación PixiJS

Primero, creamos una aplicación PixiJS y la añadimos al documento HTML:

await app.init({   
	height: 300, background: '#1099bb'});

  container = document.getElementById("appContainer");
  container.appendChild(app.canvas);

Añadiendo un sprite

Para agregar un sprite (una imagen) a la aplicación, puedes cargar una imagen y luego agregarla al escenario:

// Load the bunny texture.
const texture = await PIXI.Assets.load('ruta_a_tu_imagen.png')

// Create a new Sprite from an image path
const sprite = new PIXI.Sprite(texture);

// Add to stage
app.stage.addChild(sprite);

// Center the sprite's anchor point
sprite.anchor.set(0.5);

// Move the sprite to the center of the screen
sprite.x = app.screen.width / 2;
sprite.y = app.screen.height / 2;

Animación básica

Para animar el sprite, podemos usar el ticker de PixiJS:

app.ticker.add((time) =>
{
	sprite.rotation += 0.05 * time.deltaTime;
});

Este código hará que el sprite gire continuamente.

Interactividad

PixiJS también soporta la interactividad, lo que permite manejar eventos como clics y toques:

sprite.interactive = true;

sprite.on('mouseenter', () => {
	sprite.scale.x *= 3;
	sprite.scale.y *= 3;
});

sprite.on('mouseleave', () => {
	sprite.scale.x *= 0.33;
	sprite.scale.y *= 0.33;
});

Usando gráficos básicos

PixiJS permite dibujar formas básicas como rectángulos, círculos y líneas:

const graphics = new PIXI.Graphics();

// Dibujar un rectángulo
graphics.beginFill(0xde3249);
graphics.drawRect(50, 50, 100, 100);
graphics.endFill();

app.stage.addChild(graphics);

Filtrado y efectos

PixiJS incluye varios filtros y efectos que se pueden aplicar a los gráficos para mejorar la apariencia visual:

const blurFilter = new PIXI.filters.BlurFilter();
sprite.filters = [blurFilter];

Ejemplo completo

Vamos a ver un ejemplo sencillo, pero completo, de como usar Pixi. Juntando lo que hemos visto antes, tenemos el siguiente código

// Create a PixiJS application.
const app = new PIXI.Application();

// Intialize the application.
await app.init({   
	height: 300, background: '#1099bb'});

  container = document.getElementById("appContainer");
  container.appendChild(app.canvas);

// Load the bunny texture.
const texture = await PIXI.Assets.load('ruta_a_tu_imagen.png')

// Create a new Sprite from an image path
const sprite = new PIXI.Sprite(texture);

// Add to stage
app.stage.addChild(sprite);

// Center the sprite's anchor point
sprite.anchor.set(0.5);

// Move the sprite to the center of the screen
sprite.x = app.screen.width / 2;
sprite.y = app.screen.height / 2;

app.ticker.add((time) =>
{
	sprite.rotation += 0.05 * time.deltaTime;
});

sprite.interactive = true;

sprite.on('mouseenter', () => {
	sprite.scale.x *= 3;
	sprite.scale.y *= 3;
});

sprite.on('mouseleave', () => {
	sprite.scale.x *= 0.33;
	sprite.scale.y *= 0.33;
});

Con el código anterior obtendríamos este resultado