DEV Community: Gustavo Ojeda-P

Basic elements with Pixi.js: Primitives, Text and Sprites

Gustavo Ojeda-P — Mon, 22 Jun 2020 18:23:17 +0000

Creating primitives

Primitives are basic geometric shapes that we can draw directly using instructions. In Pixi.js the instructions used to create these graphics are very similar (but not the same) to the ones used to draw an HTML Canvas element using pure Javascript.

Setting up the stage

The first thing will be to create a PIXI application as in the previous section, but with some minor changes:

// the size of the stage, as variables
let stageWidth = 480;
let stageHeight = 240;

// create app
let app = new PIXI.Application({
  width: stageWidth,
  height: stageHeight,
  antialias: true,
  backgroundColor: 0xEEEEEE
});

// add canvas to HTML document
document.body.appendChild(app.view);

The only changes are the addition of one more parameter in the Aplication function, called antialias, which improves the display of the edges for elements on the screen.

Also now the width and height of the stage are declared as variables, so that these values can be reused in different parts of our code.

A first circle

To create a graphic called myCircle we use the Graphics constructor, which allows you to draw lines, circles, rectangles, polygons, among other shapes. Thus we obtain an object in which we can draw in addition to manipulating freely, changing its properties.

// draw a circle
let myCircle = new PIXI.Graphics();

To make our circle we use a sequence of 5 instructions:

myCircle.lineStyle(2, 0x993333);
myCircle.beginFill(0xCC3333);

// params: pos x, pos y, radius
myCircle.drawCircle(100, 100, 25);

myCircle.endFill();

And each of those lines have a task:

lineStyle set the style of the line: thickness 2 pixels and border color 0x993333
beginFill fills the geometric shape, with the color0xCC3333
drawCircle draws the circle itself, entering the x and y coordinates where the center of the circle will be located, followed by the desired radius, in pixels.
endFill ends the filling process

Those are all the steps required to draw our circle. However, the drawing process has been holded out inside myCircle, which is a variable. That is to say, all the time we have been drawing in the memory of the computer. It takes one more step to see our circle on the screen.

Adding items to the stage

The final step is to call the addChild function of the application stage, which will make the myCircle element visible on screen:

app.stage.addChild(myRect);

Thus, the complete code needed to draw a circle and display it on the screen is as follows:

let myCircle = new PIXI.Graphics();
myCircle.lineStyle(2, 0x993333);
myCircle.beginFill(0xCC3333);
myCircle.drawCircle(240, 120, 40);
myCircle.endFill();
app.stage.addChild(myCircle);

The result is a circle with a radius of 40 pixels and located in the center of the stage:

Note that the coordinates of the object myCircle will be (0, 0) and the circle drawn inside that object has an offset to the coordinates (240, 120). This could be confusing in some cases and for that reason we will explore this topic further in a future post.

How about a rectangle?

Following a similar procedure, we can create and insert a yellow rectangle, but this time at the stage origin (0, 0), that is, the upper left corner:

let myRect = new PIXI.Graphics();
myRect.lineStyle(4, 0xEEBB00);
myRect.drawRect(0, 0, 48, 48); // x, y, width, height
app.stage.addChild(myRect);

Changing visual properties

The thickness of the border can affect the exact size and position of an item. It can be seen that, despite having been created at the point (0, 0), part of the border is outside the visible space. This is due to the way the instructions draw the edges of the figures. This behavior, of course, is configurable and we can modify it later.

After adding the graphic on the stage, we will manipulate the properties of the rectangle, taking it to the center of the stage and changing its original dimensions so that it now measures twice, that is 96 pixels on each side:

myRect.width = 96;
myRect.height = 96;
myRect.x = (stageWidth - myRect.width) / 2;
myRect.y = (stageHeight - myRect.height) / 2;

So we obtain the following result:

Creating text

The fastest way to create text is similar:

let myText = new PIXI.Text('Morning Coffee!')
app.stage.addChild(tagline);

However, this text will have a default style (font, color, weight, etc.). To improve the appearance of our text, it is necessary to create a text style object, that allows us to control each characteristic:

let textStyle = new PIXI.TextStyle({
  fill: '#DD3366',
  fontFamily: 'Open Sans',
  fontWeight: 300,
  fontSize: 14
});

Assigning the style to our text element, we will display a much more personalized message on the screen. We will place it in the center of the stage and will assign the anchor property, which allows us to control the element's anchor point:

let myText = new PIXI.Text('Morning Coffee!', textStyle) // <-
myText.anchor.set(0.5);
myText.x = 240;
myText.y = 120;
app.stage.addChild(myText);

From what we get:

Here is a live version where all the basic elements are put together:

Adding Sprites

Sprites are 2D visual elements that can be inserted into the stage of any graphic environment of interactive applications or video games. They are the simplest graphic resources that we can put on screen and control from the code of our application, by manipulating properties such as its size, rotation or position, among others.

Sprites are generally created from bitmaps. The easiest way, although not necessarily the best in all cases, is to create it directly from an image file:

let coffee = new PIXI.Sprite.from('images/coffee-cup.png');
app.stage.addChild(coffee);

After which we would see the following:

Although this method is simple, it is inconvenient if the image file is too large, since loading will take longer than expected and the following instructions related to the sprite could produce unexpected behaviors.

Creating Sprites by pre-loading textures

The best way to load one or more external resources is by using the Loader class offered by Pixi.js. For our convenience, the PIXI object offers a pre-built loader instance that can be used without further configuration.

const loader = PIXI.Loader.shared;

After the instantiation of this utility, we can load the same file but with the new method:

let myCoffee; // it will store the sprite

loader
    .add('coffee', 'images/coffee-cup.png')
    .load((loader, resources) => {
        // this callback function is optional
        // it is called once all resources have loaded.
        // similar to onComplete, but triggered after
        console.log('All elements loaded!');
    })
    .use((resource, next) => {
        // middleware to process each resource
        console.log('resource' + resource.name + ' loaded');
        myCoffee = new PIXI.Sprite(resource.texture);
        app.stage.addChild(myCoffee);
        next(); // <- mandatory
    })

In the previous code we use the add function to add elements to the loading queue, with a name that we want to assign to it (in this case coffee), in addition to the path to the image file.

We can chain the load and use functions to do tasks with the loaded elements. The first is executed when the loading of all the elements has been completed. The second works as a middleware after each item has been loaded.

The power of the Loader class shines when we want to load multiple files at the same time. For convenience, we will use the object sprites to store the loaded elements, instead of having a variable for each one of them.

let sprites = {};
let xpos = 16;

loader
    .add('coffee', 'images/coffee-cup.png')
    .add('muffin', 'images/muffin.png')
    .add('icecream', 'images/ice-cream.png')
    .add('croissant', 'images/lollipop.png')
    .use((resource, next) => {
        // create new sprite from loaded resource
        sprites[resource.name] = new PIXI.Sprite(resource.texture);

        // set in a different position
        sprites[resource.name].y = 16;
        sprites[resource.name].x = xpos;

        // add the sprite to the stage
        app.stage.addChild(sprites[resource.name]);

        // increment the position for the next sprite
        xpos += 72;
        next(); // <- mandatory
    })

Remember that use runs multiple times, once for each item added to the load queue (and subsequently loaded). This will result in the following:

In addition, the loader instance sends various signals during the loading process, which we can take advantage of to obtain additional information about the loading process. The following code would display messages on the console:

loader.onProgress.add((loader, resource) => {
    // called once for each file
    console.log('progress: ' + loader.progress + '%');
});
loader.onError.add((message, loader, resource) => {
    // called once for each file, if error
    console.log('Error: ' + resource.name + ' ' + message);
});
loader.onLoad.add((loader, resource) => {
    // called once per loaded file
    console.log(resource.name + ' loaded');
});
loader.onComplete.add((loader, resources) => {
    // called once all queued resources has been loaded
    // triggered before load method callback
    console.log('loading complete!');
});

Check out a live version here:

Elementos básicos con Pixi.js: Primitivas y Sprites

Gustavo Ojeda-P — Mon, 22 Jun 2020 18:23:08 +0000

Elementos básicos con Pixi.js: Primitivas y Sprites

Creación de primitivas

Las primitivas son formas geométricas básicas que podemos dibujar directamente mediante instrucciones. En Pixi.js las instrucciones utilizadas para crear estos gráficos son muy similares (pero no iguales) a las que se utilizan para dibjuar en un elemento HTML Canvas mediante Javascript puro.

Preparación del escenario

Lo primero será crear una aplicación PIXI tal como en la sección anterior, pero con algunos cambios menores:

// the size of the stage, as variables
let stageWidth = 480;
let stageHeight = 240;

// create app
let app = new PIXI.Application({
  width: stageWidth,
  height: stageHeight,
  antialias: true,
  backgroundColor: 0xEEEEEE
});

// add canvas to HTML document
document.body.appendChild(app.view);

Los únicos cambios son la adición de un parametro más en la función Aplication, llamado antialias, el cual mejora la visualización de los bordes de los elementos en pantalla.

Además ahora el ancho y el alto del escenario son declarados como variables, para que esos valores puedan ser reutilizados en distintas partes de nuestro código.

Un primer círculo

Para crear un gráfico llamado myCircle usamos el constructor Graphics, que permite dibujar líneas, círculos, rectángulos, polígonos, entre otras formas. Así obtenemos un objeto en el que podremos dibujar además de manipular libremente, cambiando sus propiedades.

// draw a circle
let myCircle = new PIXI.Graphics();

Para hacer nuestro círculo utilizamos una secuencia de 5 instrucciones:

myCircle.lineStyle(2, 0x993333);
myCircle.beginFill(0xCC3333);

// params: pos x, pos y, radius
myCircle.drawCircle(100, 100, 25);

myCircle.endFill();

Y cada una de esas líneas tienen esta misión:

con lineStyle asignamos el estilo de la línea, de grosor 2 pixeles y color de borde 0x993333
con beginFill comenzamos a rellenar la forma geométrica, con el color 0xCC3333
con drawCircle dibujamos el círculo propiamente dicho, ingresando las coordenadas x y y donde se ubicará el centro del círculo, seguidas del radio deseado, en pixeles.
con endFill terminamos el proceso de rellenado

Esos son todos los pasos requeridos para dibujar nuestro círculo. Sin embargo, el proceso de dibujo se ha llevado a cabo dentro del gráfico myCircle, que es una variable. Es decir todo el tiempo hemos estado dibujando en la memoria del computador. Hace falta un paso más para poder ver nuestro círulo en pantalla.

Poner elementos en el escenario

El paso final consiste en llamar la función addChild del escenario de nuestra aplicación, lo cual hará que nuestro gráfico myCircle quede visualmente incorporado también en pantalla y no solamente en la memoria:

app.stage.addChild(myRect);

Así las cosas, el código completo necesario para dibujar un círculo y mostrarlo en pantalla es el siguiente:

let myCircle = new PIXI.Graphics();
myCircle.lineStyle(2, 0x993333);
myCircle.beginFill(0xCC3333);
myCircle.drawCircle(240, 120, 40);
myCircle.endFill();
app.stage.addChild(myCircle);

y el resultado es un círculo con radio de 40 pixeles y ubicado en el centro del escenario:

Debe tenerse en cuenta que las coordenadas del objeto myCircle en el escenario siguen siendo (0, 0) y que el círculo dibujado dentro de ese objeto es el que está desplazado hasta las coordenadas (240, 120). Esto podría ser problemático en algunos casos y por esa razón exploraremos más este tema en la sección dedicada a contenedores.

Qué tal un rectángulo?

Siguiendo un procedimiento similar, podemos crear e insertar un rectángulo amarillo, pero esta vez en el origen de escenario (0, 0), es decir la esquina superior izquierda:

let myRect = new PIXI.Graphics();
myRect.lineStyle(4, 0xEEBB00);
myRect.drawRect(0, 0, 48, 48); // x, y, width, height
app.stage.addChild(myRect);

Cambiando las propiedades del gráfico

El grosor del borde puede afectar la posición y el tamaño exacto de un elemento. Puede observarse que, a pesar de haberse creado en el punto (0, 0), parte del borde está fuera del espacio visible. Esto se debe a la forma en que las instrucciones dibujan los bordes de las figuras. Este comportamiento, por supuesto, es configurable y podremos modificarlo más adelante.

Después de haber agregado el gráfico en el escenario, haremos una manipulación de las propiedades del rectángulo, llevándolo al centro del escenario y cambiando sus dimensiones originales para que ahora mida el doble, es decir 96 pixeles de cada lado:

myRect.width = 96;
myRect.height = 96;
myRect.x = (stageWidth - myRect.width) / 2;
myRect.y = (stageHeight - myRect.height) / 2;

Con lo cual obtenemos el siguiente resultado:

Crear texto

La forma más rápida de crear texto es similar:

let myText = new PIXI.Text('Morning Coffee!')
app.stage.addChild(tagline);

Sin embargo, el texto creado tendrá un estilo (fuente, color, peso, etc.) por defecto. Para mejorar la apariencia de nuestro texto, es necesario crear un objeto de estilo de texto, que nos permita controlar cada característica:

let textStyle = new PIXI.TextStyle({
  fill: '#DD3366',
  fontFamily: 'Open Sans',
  fontWeight: 300,
  fontSize: 14
});

Entonces asignando el estilo a nuestro elemento de texto, mostraremos en pantalla un mensaje mucho más personalizado. Lo ubicaremos en el centro de la pantalla, usando también la propiedad anchor, que nos permite controlar el punto de anclaje del elemento, para que sirva como referencia a la hora de ubicarlo:

let myText = new PIXI.Text('Morning Coffee!', textStyle) // <-
myText.anchor.set(0.5);
myText.x = 240;
myText.y = 120;
app.stage.addChild(myText);

De lo que obtenemos:

A continuación una versión en vivo donde se combinan todos los elementos básicos:

Agregando Sprites

Los Sprites son elementos visuales en 2D que pueden insertarse dentro del escenario de cualquier ambiente gráfico de aplicaciones interactivas o videojuegos. Son los recursos gráficos más simples quepodemos poner en pantalla y controlar desde el código de nuestra aplicación, mediante la manipulación de propiedades como sus dimensiones, rotación o poscición, entre otras.

En general los sprites se crean a partir de imágenes o mapas de bits. La forma más fácil, aunque no necesariamente la mejor en todos los casos, es crearla directamente de un archivo:

let coffee = new PIXI.Sprite.from('images/coffee-cup.png');
app.stage.addChild(coffee);

Tras lo cual veríamos lo siguiente:

Aunque este método es simple, es inconveniente si el archivo de imagen es grande, pues la carga demorará más de lo esperado y las instrucciones siguientes relacionadas con el sprite podrían tener resultados inesperados.

Sprites mediante la carga de texturas

La mejor forma de cargar uno o varios recursos externos es mediante el uso de la clase Loader ofrecida por Pixi.js. Para nuestra conveniencia, el objeto PIXI ofrece una instancia del cargador pre-fabricada que se puede usar sin mayor configuración.

const loader = PIXI.Loader.shared;

Después de la instanciación de esta utilidad, podemos cargar el mismo archivo pero con el nuevo método:

let myCoffee; // it will store the sprite

loader
    .add('coffee', 'images/coffee-cup.png')
    .load((loader, resources) => {
        // this callback function is optional
        // it is called once all resources have loaded.
        // similar to onComplete, but triggered after
        console.log('All elements loaded!');
    })
    .use((resource, next) => {
        // middleware to process each resource
        console.log('resource' + resource.name + ' loaded');
        myCoffee = new PIXI.Sprite(resource.texture);
        app.stage.addChild(myCoffee);
        next(); // <- mandatory
    })

En el código anterior utilizamos la función add para agregar a la cola los elementos que deseamos cargar, con un nombre que le queremos asignar (en este caso coffee), además de la ruta al archivo de imagen.

Podemos encadenar las funciones load y use para hacer tareas con los elementos cargados. La primera se ejecuta cuando la carga de todos los elementos se ha completado. La segunda funciona como un middleware después de que cada elemento ha sido cargado.

Sin embargo, el verdadero poder de la clase Loader se hace evidente cuando queremos cargar múltiples archivos al mismo tiempo. Para esto necesitaremos un objeto, que llamaremos sprites, que pueda alojar a todos los elementos que serán cargados, en lugar de tener una variable para cada uno de ellos.

let sprites = {};
let xpos = 16;

loader
    .add('coffee', 'images/coffee-cup.png')
    .add('muffin', 'images/muffin.png')
    .add('icecream', 'images/ice-cream.png')
    .add('croissant', 'images/lollipop.png')
    .use((resource, next) => {
        // create new sprite from loaded resource
        sprites[resource.name] = new PIXI.Sprite(resource.texture);

        // set in a different position
        sprites[resource.name].y = 16;
        sprites[resource.name].x = xpos;

        // add the sprite to the stage
        app.stage.addChild(sprites[resource.name]);

        // increment the position for the next sprite
        xpos += 72;
        next(); // <- mandatory
    })

Recordemos que use se ejecuta varias veces, una por cada elemento agregado a la cola de carga. Esto dará como resultado lo siguiente:

Pero además, la instancia loader envía diversas señales durante del proceso de carga, que podemos aprovechar para obtener información adicional sobre cómo avanza la carga. El código siguiente mostraría mensajes en la consola:

loader.onProgress.add((loader, resource) => {
    // called once for each file
    console.log('progress: ' + loader.progress + '%');
});
loader.onError.add((message, loader, resource) => {
    // called once for each file, if error
    console.log('Error: ' + resource.name + ' ' + message);
});
loader.onLoad.add((loader, resource) => {
    // called once per loaded file
    console.log(resource.name + ' loaded');
});
loader.onComplete.add((loader, resources) => {
    // called once all queued resources has been loaded
    // triggered before load method callback
    console.log('loading complete!');
});

Míralo en vivo aquí:

Installing and testing Pixi.js

Gustavo Ojeda-P — Mon, 22 Jun 2020 18:22:52 +0000

Pixi.js is a library / engine for creating and manipulating graphics in the browser. Its reputation lies in its ultra-fast WebGL renderer, which gives it superior performance. Pixi.js is an excellent alternative to create interactions, games and advanced visualizations. It is possible to consult the official documentation here.

In this series of articles we will explore the basic concepts to start using Pixi.js in our projects.

Installation

There are three main options:

CDN

The easiest way is to start with a version ready to use in the browser, inserting it directly from a CDN, copying and pasting in the HTML code a line like this:

<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.1.3/pixi.min.js"></script>

For development on a local machine it is recommended not to use a minimized version, but the full version, because it is easier to debug any possible errors in our own code.

Download source code

It can also be used by downloading the files from its GitHub repository.

NPM

In a project managed by npm, installation is done using the following command:

npm install pixi.js

and then import it like this:

import * as PIXI from 'pixi.js'

The simplest application

There are several ways to create an application based on Pixi.js and in all of them the same result can be achieved, more or less. The simplest way is to use the facilities offered by the [PIXI.Application] class (https://pixijs.download/release/docs/PIXI.Application.html), which allows you to create the essential elements of a standard Pixi.js application in a few steps. These elements are:

El renderer
El ticker
El contenedor raíz

Later we will develop an application with a more granular control of these elements but for now we will do it in the simplest way. We are going to prepare an empty HTML file, simple-app.html, which only includes the Pixi.js library and a JavaScript file with our own code, which should preferably be inserted inside the body of the document, just before the closing tag </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>

For now, that's all the necessary HTML code.

In the file my_simple_app.js, we will put the necessary code to test Pixi.js.

An instance of the application must be created, with the indispensable parameters: width, height and background color that the canvas element will have when inserted into the HTML document. We will use a light gray to be able to distinguish the element, in contrast to the background of the HTML document.

let app = new PIXI.Application({
  width: 480,
  height: 240,
  backgroundColor: 0xCCCCCC
});

Now that the application is created, it must be added to the body of the document using the view member of the created instance:

document.body.appendChild(app.view);

Note that on the line above, the expression document.body refers to the body element within the HTML document and that the appendChild function is plain JavaScript, not a Pixi.js function (which also exists). Now the file with the complete application script should look like this:

// 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);

That's it. As a result, opening the HTML file simple-app.html in the browser window should show an empty, slightly gray box:

Also, if all goes well, when opening the console within the browser development tools (usually with the F12 key), you should read a greeting from the library similar to this:

In the next post we will show how to add basic elements (primitives, text and sprites) to the stage, using Pixi.js

Instalación y prueba de Pixi.js

Gustavo Ojeda-P — Mon, 22 Jun 2020 18:22:10 +0000

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