Pixi.js con ECMAScript 2015 (ES6)

En Junio del 2015 fue aprobada la versión 6 de ECMAScript, que es el estándar en el que se basa Javascript (realmente ECMAScript es el lenguaje y Javascript un dialecto de este). Lo interesante de este nuevo estandar es que supone un cambio enorme en cuanto a la versión 5. Introduce muchísimas mejoras convirtiendo a Javascript en un lenguaje mucho más potente y desde mi punto de vista más ordenado, al permitir de manera sencilla la creación de módulos y la programación orientada a objetos.

Precisamente por esto, lo veo como una opción perfecta para usarlo en los desarrollos con Pixi.js. Normalmente cuando pienso en programar un juego, divido mentalmente todo en objetos, ya sean objetos que se van a renderizar o no, lo ideal para mí es tenerlos bien definidos y separados por ficheros, de manera que me resulte relativamente sencillo mantener el juego, ampliarlo, modificarlo, etcétera.

Hasta el momento organizaba mi código con gestores de tareas como pueden ser Gulp.js o Grunt junto con Browserify, y programaba orientado a objetos de la manera típica:

function Batman(){
    this.name = "Batman";
}

Hero.prototype.constructor = Hero;

Hero.prototype.sayHello = function(){
    console.log("I'm " + this.name + "!");
}

var batman = new Batman();

Pero esto es mucho más sencillo con ES6:

class Batman(){
    constructor(){
        this.name = "Batman";
    }

    sayHello(){
        console.log(`I'm ${this.name}!`);
    }
}

let batman = new Batman();

Por supuesto, esto no es todo, las ventajas de ES6 son muchísimas, quizás más adelante me anime a hacer un post sobre el tema, pero de momento tienes toda la información sobre ES6 aquí, y si buscas en google hay muchísimos sitios ofreciendo pequeñas introducciones y guías sobre el estándar.

El porqué seguimos usando ES5 ahora mismo es simple, porque todo estándar debe ser implementado, actualmente los navegadores y Node.js están poco a poco implementando características de ES6, pero aún estamos lejos de tener soporte completo en todas las plataformas.

Aquí es donde entra en juego Babel. Babel es básicamente un transpilador que usa código Javascript en ES6 como entrada, y devuelve a la salida el mismo código en ES5, de manera que puedes programar usando el nuevo estándar, y conseguir que el código resultante sea ejecutable en todas las plataformas actuales.

Usando Babel y Webpack he montado un boilerplate para poder usar Pixi.js usando ES6 en pocos pasos. El único requisito es tener instalado Webpack en global, para ello (si no lo tienes ya) hacemos:

npm install webpack -g

Ahora clonamos el repositorio del boilerplate:

git clone https://github.com/Nazariglez/es6-pixi-bolierplate.git

Y lo instalamos:

npm install

Y listo, en el directorio src tenemos todo el código en ES6 y en el directorio build tendremos el bundle de nuestra aplicación. Como podrás ver ya hay un pequeño ejemplo creado que puedes usar como punto de partida.

Para generar el bundle minificado tan solo debemos ejecutar npm run build, y si queremos que el bundle se genere automáticamente cada vez que cambiamos algo en algún modulo, o cuando añadimos alguno nuevo, debemos usar npm start o npm run dev.

Como ya te imaginarás puedes usar cualquier modulo que se encuentre en NPM, es la magia de Webpack y Browserify, por ejemplo, queremos añadir lodash a nuestra app:

npm install --save-dev lodash

Y lo importamos desde cualquier modulo de nuestra aplicación:

import _ from 'lodash';

Y eso es todo, espero que os sea útil y os animéis a usar Pixi.js con ES6.

Repositorio: https://github.com/Nazariglez/es6-pixi-bolierplate