Pixi.js es una librería/motor para la creación y manipulación de gráficos en el navegador. Su reputación radica en su renderizador WebGL ultra-rápido, lo que le da un desempeño superior. Pixi.js es una excelente alternativa para crear interacciones, juegos y visualizaciones avanzadas. Es posible consultar la documentación oficial aquí.
En esta serie de artículos vamos a explorar los conceptos básicos para el uso de Pixi.js en nuestros proyectos.
Instalación
Existen tres opciones principales:
CDN
Lo más fácil es empezar con una versión lista para usar en el navegador, insertándola directamente desde una CDN, copiando y pegando en el código HTML una línea como esta:
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.1.3/pixi.min.js"></script>
Para desarrollo en una máquina local es recomendable no usar una versión minimizada, sino la versión completa, porque resulta más fácil depurar los posibles errores en nuestro propio código.
Descarga del código fuente
También se puede usar descargando los archivos desde su repositorio en GitHub.
NPM
En un proyecto gestionado por npm, la instalación se hace mediante el siguiente comando:
npm install pixi.js
para luego importarlo así:
import * as PIXI from 'pixi.js'
La aplicación más simple
Existen varias formas de crear una aplicación basada en Pixi.js y en todas ellas se puede lograr, más o menos, el mismo resultado. La forma más simple consiste en utilizar las facilidades que ofrece la clase PIXI.Application, que permite en pocos pasos gestionar los elementos que componen una aplicación estándar de Pixi.js, es decir:
- El renderer
- El ticker
- El contenedor raíz
Más adelante desarrollaremos una aplicación con un control más granular de estos elementos pero por ahora lo haremos de la forma más simple. Vamos a preparar un archivo HTML vacío, simple-app.html, que únicamente incluya la librería Pixi.js y nuestro propio archivo JavaScript, que deben ir insertados preferiblemente dentro del cuerpo del documento, justo antes de la etiqueta de cierre </body>:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>01. Introduction - loading and verifying pixi.js</title>
</head>
<body>
<script src="js/pixi.js"></script>
<script src="js/my_simple_app.js"></script>
</body>
</html>
Por ahora, ese es todo el código HTML necesario.
En el archivo my_simple_app.js, pondremos el código necesario para probar Pixi.js.
Se debe crear una instancia de la aplicación, con los siguientes parametros: el ancho, el alto y el color de fondo que adoptará el elemento canvas cuando sea insertado dentro del documento HTML. Usaremos un gris claro para poder distinguir el elemento con respecto al fondo del documento.
let app = new PIXI.Application({
width: 480,
height: 240,
backgroundColor: 0xCCCCCC
});
Ahora que la aplicación está creada, se debe adicionar al cuerpo del documento usando el miembro view de la instancia creada:
document.body.appendChild(app.view);
Cabe anotar que en la línea anterior, la expresión document.body hace referencia al elemento body dentro del documento HTML y que la función appendChild es JavaScript básico, no una instrucción de Pixi.js. Ahora el archivo con el script completo de la aplicación debería verse así:
// create the PIXI application
let app = new PIXI.Application({
width: 480,
height: 240,
backgroundColor: 0xCCCCCC
});
// append the canvas into the document
document.body.appendChild(app.view);
Eso es todo. Como resultado, al abrir el archivo HTML simple-app.html en la ventana del navegador debería verse un recuadro vacío, ligeramente gris:
Además, si todo va bien, al abrir la consola dentro de las herramientas de desarrollo del navegador (normalmente con la tecla F12), debería leerse un saludo de la librería similar a este:
En la siguiente sección mostraremos cómo agregar elementos básicos (primitivas, texto y sprites) al escenario, usando Pixi.js
Top comments (0)