javascript-pixijs

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

  • 3 min

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.

PixiJS se destaca por las siguientes características:

  • Rendimiento rápido: Gracias a WebGL, PixiJS puede manejar gráficos complejos de manera eficiente.
  • API sencilla y flexible: Facilita la creación de animaciones y gráficos avanzados.
  • Compatibilidad con múltiples dispositivos: Funciona bien en desktops y dispositivos móviles.
  • Extensibilidad: Permite agregar plugins para funcionalidades adicionales.

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