Instalación y prueba de Pixi.js
Tags: javascript, pixijs, webgl, dataviz
Published: 2020-06-22 18:22:10

[Pixi.js](https://www.pixijs.com/) 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í](https://pixijs.download/release/docs/index.html). 

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](https://cdnjs.com/libraries/pixi.js/), copiando y pegando en el código HTML una línea como esta:

```HTML
<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](https://github.com/pixijs/pixi.js).

#### NPM

En un proyecto gestionado por [npm](https://www.npmjs.com/package/pixi.js), la instalación se hace mediante el siguiente comando:

```SHELL
npm install pixi.js
```

para luego importarlo así:

```JS
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](https://pixijs.download/release/docs/PIXI.Application.html), 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>`:

```HTML
<!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](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas) cuando sea insertado dentro del documento HTML. Usaremos un gris claro para poder distinguir el elemento con respecto al fondo del documento.

```JS
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:

```JS
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í:

```JS
// 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:

![Empty canvas for a simple pixi.js App](https://dev-to-uploads.s3.amazonaws.com/i/01v6fqqt2w86nmohixvv.png)

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:

![Hello from pixi.js library](https://dev-to-uploads.s3.amazonaws.com/i/53vpo8t1ijdmxh829hun.png)

En la siguiente sección mostraremos cómo agregar elementos básicos (primitivas, texto y sprites) al escenario, usando Pixi.js