Introduccion al Creation Engine Pixi.js
Pixi.js se define com un Ceation Engine o motor para creaciones, en el que se puede crear contenido visual, entre ello podemos crear videojuegos y contenido interactivo.
PixiJS cuenta con diferentes funcionalidades para usar Scenes, Sprites, Animaciones, Eventos y mucho mas.
Para empezar a usar PixiJs vamos a crear y explicar un pequeño ejemplo.
Instalar PixiJS
Para instalar PixiJS vamos a usar el comando NPM Node Package Manager, que sirve para descargar los paquetes modulos javascript.
npm install pixi.jsEste comando nos va a crear una carpeta llamada node_modules y dentro se va a crear una carpeta pixi.js con los archivos del plugin o libreria que vamos a usar.
El archivo que vamos a usar es el archivo pixi.min.js que uedaria en la ruta “node_modules/pixi.js/dist/pixi.js.min”
Codigo
Ahora el codigo, primero vamos a crear un documento html basico con su head y body normalmente.
Tambien vamos a agregar la libreria pixi.js en un script en la head del documento.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Prueba Pixi</title> <script type="text/javascript" src="node_modules/pixi.js/dist/pixi.min.js"></script> </head> <body> <script type="text/javascript" > // Seccion: Codigo Javascript </script> </body> </html>
En el codigo de arriba dejo el documento html, en el body dejamos otra etiqueta script donde vamos a escribir el codigo para crear una pequeña animacion en PixiJS.
El codigo javascript que va en la Seccion: Codigo Javascript seria el siguiente.
// Creamos la instancia de PIXI
const app = new PIXI.Application({ background: '#208955', resizeTo: window });
// Agregamos la instancia de PIXI al body/cuerpo del documento
document.body.appendChild(app.view);
const mysprite = PIXI.Sprite.from('images/brown-hen.png');
// Poner el Sprite en el centro
mysprite.x = app.renderer.width / 2;
mysprite.y = app.renderer.height / 2;
mysprite.anchor.x = 0.5;
mysprite.anchor.y = 0.5;
// Vamos a agregar el Sprite a la escena
app.stage.addChild(mysprite);
// En el siguiente Ticker vamos a agregar los cambios en las animaciones.
app.ticker.add(() => {
// Cada frame vamos a sumar 0.01 al angulo de rotacion del SPRITE
mysprite.rotation += 0.01;
});
En el codigo les agregue comentarios para entender un poquito de lo que estamos haciendo en cada parte.
Resultado
El resultado es el siguiente.
