Introduccion al Creation Engine Pixi.js

 in Javascript by

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.js

Este 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.

Leave a comment