domingo, 26 de agosto de 2018

Phaser 3: Un potente framework para videojuegos en Javascript.

Phaser 3 vs. CraftyJS

En el pasado podíais leer en este blog unos pequeños tutoriales para CraftyJS. No os engañéis, Crafty me encanta, me parece sencillo y bien documentado pero no tiene tecnología WebGL.

La tecnología WebGL permite al navegador usar las capacidades de la tarjeta gráfica para mover el juego y hace que sea mucho más rápido, sobretodo si mueves cientos de objetos a la vez.

Es por eso que me he decido a cambiar a Phaser.

Phaser 2 está muy consolidado y tiene sobrada documentación. Phaser 3 es totalmente diferente a Phaser 2 y en momento de escribir estas líneas la documentación es muy escasa. Aquí entra este blog. Para facilitaros la vida y que no tengáis que pegaros para cualquier tontería.

Instalación de Phaser 3

Por temas de seguridad, los navegadores modernos ya no ejecutan JavaScript en local, con lo que necesitaremos instalar un servidor web. No os asustéis. Yo uso XAMPP. Se baja, se le da a instalar y ya. No necesitáis hacer nada. AQUÍ tenéis un pequeño tutorial para su instalación.

Ahora la cosa es bajarse el PHASER 3 que lo podéis hacer desde AQUÍ.

En este punto os preguntaréis... ¿y qué me bajo?


Pues tenéis el ZIP con el framework y ejemplos y demás. Luego tenéis la opción de sólo bajaros sólo el framework. Tenéis la opción de js y la min.js.  ¿Diferencia?  Ninguna. La cosa es si lo editáis en uno está el fuente estructurado y en el otro todo el código arrebujiñao con el objeto de que ocupe lo mínimo posible. Si no pensáis meterle mano al fuente con el min.js os vale.

Si habéis instalado el XAMPP y habéis seguido el magnífico tutorial al que os referencié en el principio de este artículo, bastará con copiarlo en la carpeta htdocs de XAMPP. Si además, cosa que me consta, sois personas pulcras, lo meteréis en una carpeta.

Luego sólo será necesario llamarlo tal que asín en un archivo HTML:

<script src="phaser3/phaser.min.js"></script>

Como el ávido lector habrá inferido he creado dentro de mi carpeta htdocs otra llamada phaser3.

Perdone Ud. Sr. Furniman... es que yo soy muy xul@ y paso de bajármelo...

Hay otra opción, y es llamarlo directamente de jsDelivr. La instrucción la encontraréis en la página de descargas dentro del apartado CDN.

En el momento de escribir estas líneas es:

<script src="//cdn.jsdelivr.net/npm/phaser@3.11.0/dist/phaser.min.js"></script>

Bajarnos el framework permite actualizar la versión de Phaser 3 cambiando el fichero. Llamar al framework de jsDelivr obligará a cambiar el código si queremos actualizar la versión de Phaser. En todo caso sólo sería una línea en un único fichero.

1,2,3... Probando...

Phaser 3 no es un IDE es decir, no tiene herramientas de edición y depuración de código. Debéis utiliza uno de los miles de editores de texto, algunos muy potentes y muy orientados a código o el Bloc de notas. A medio camino entre los dos se encuentra el que uso yo el Notepad++ que te asistirá poniendo colorines a las palabras reservadas y demás.

Así que tomaremos para probar el mismo código que trae Phaser en su página. Con un editor de texto plano crearemos una página llamada index.html y pegaremos el siguiente código:


<!DOCTYPE html>
<html>
<head>
    <script src="//cdn.jsdelivr.net/npm/phaser@3.0.0/dist/phaser.min.js"></script>
</head>
<body>

    <script>
    var config = {
        type: Phaser.AUTO,
        width: 800,
        height: 600,
        physics: {
            default: 'arcade',
            arcade: {
                gravity: { y: 200 }
            }
        },
        scene: {
            preload: preload,
            create: create
        }
    };

    var game = new Phaser.Game(config);

    function preload ()
    {
        this.load.setBaseURL('http://labs.phaser.io');

        this.load.image('sky', 'assets/skies/space3.png');
        this.load.image('logo', 'assets/sprites/phaser3-logo.png');
        this.load.image('red', 'assets/particles/red.png');
    }

    function create ()
    {
        this.add.image(400, 300, 'sky');

        var particles = this.add.particles('red');

        var emitter = particles.createEmitter({
            speed: 100,
            scale: { start: 1, end: 0 },
            blendMode: 'ADD'
        });

        var logo = this.physics.add.image(400, 100, 'logo');

        logo.setVelocity(100, 200);
        logo.setBounce(1, 1);
        logo.setCollideWorldBounds(true);

        emitter.startFollow(logo);
    }
    </script>

</body>
</html>

Lo guardaremos en la carpeta htdocs de XAMPP y ya...

Para llamarlo sólo tenemos que poner en nuestro navegador con XAMPP arrancado (os remito de nuevo a su tutorial) lo siguiente:

http://localhost

Y ya... podréis ver algo parecido a ESTO.

Si os fijáis en la cuarta línea del código, se está llamando a la versión 3.11 de Phaser desde jsDelivr. Si hemos optado por tener el framework en local, sólo tenemos que cambiarlo por la ruta en la que está algo así como:

<script src="phaser3/phaser.min.js"></script>

Y con esto y un bizcocho ya hemos terminado...

Os dejo con un enlace a una página de bailes tradicionales... ¿Que no os interesa el tema?  Bueno... hay que promocionarlo... ¿no?

furnitube.es/danzasdelmundo

jueves, 23 de agosto de 2018

XAMPP guía de instalación.

¿Qué es XAMPP?

La ciberdelincuencia es un rollo. Antes podías hacerte un pogramita en JavaScript y ejecutarlo en tu navegador y ver lo que molaba. Ahora no, la seguridad en navegadores impide dicha praxis y obliga a que estos estén alojados en un servidor web. Asín que consigue un espacio, gratuito o no y sube cualquier modificación que hagas para probarlo... pfff! qué palo!

Ante esta diatriba lo mejor es que instales en tu máquina un servidor web, hagas tus pruebas y subas el producto que te satisfaga. Pero eso es pá pros. ¿O no?

XAMPP una posible solución.

Las hay más sencillas, de hecho hay un pluggin pal Google que funciona a las mil maravillas, busca por ahí, pero la gracia de XAMPP es que tendrás un servidor completo con su base de datos MySQL y todo y que no te consumirá recursos ya que lo arrancarás cuando lo necesites. Además, puede ejecutar PHP y Perl.

Mmmm... me gusta, ande lo pillo.

Pues mira... pincha AQUÍ.

Vale lo tengo, ¿y ahora qué hago?

Eh! Es un ejecutable! Dale!

Cuando empieces a instalar te dirá que si tienes antivirus, que si la UAC está activa, que si Júpiter no está aún en línea con Saturno... hazle caso o no. Yo paso y me instala bien, pero si no te funciona por no seguir los consejos no vengas a poner comentarios en el blog...

Después de los avisos te pedirá qué módulos quieres instalar. ¿Tienes claro lo qué vas a hacer? Quita lo que no necesites. ¿Estás empezando y tu límite es abarcar lo abarcable? Dale a todo.


En la siguiente pantalla se te pide la carpeta en la que instalar XAMPP y verás que te pide instalar en raíz C:. Hazle caso sabe lo que dice. Piensa que los archivos que crees los tendrás que copiar en esa carpeta y si los metes en c:\pruebas\misprimerospinitos\xampp\prueba1 lo vas a sufrir constantemente.


La siguiente pantalla es autobombo. Que cómo molo. Que si puedo instalar tal y cual... tú mism@. Si quieres, véndete al diablo (que dicen que tiene un buen rab...)  OPS! Perdón! Me puede el imaginario popular.


Y ya le das y se pone a instalar.


Y se acabó!

Mola. Está instalado porque me lo dices. ¿Y ahora?

Ahora trata de arrancarlo por Dios!. Si me has hecho caso lo tendrás en C:\xampp.

En esa carpeta tienes un fichero que se llama xampp_start que arranca algo y un xampp_stop que para algo. También tiene un xampp-control que te permite decidir qué arrancas y qué paras. ¿Lo pillas? Que le des al xampp-control...

Si sólo quieres utilizar JavaScript o HTML, como es el caso que hemos planteado al principio... le das al Start únicamente al Apache.


Y yastá. Ya funciona. Pon en la barra de direcciones (que no en el Google que nos conocemos) lo siguiente:  http://localhost o bien http://127.0.0.1 y verás la pantalla principal de XAMPP.

Guay! Pero yo quiero ver mi página!

Vale. Vuelve a la carpeta C:\xampp (¿es porqué es importante copiarlo en raíz?) y copia tu holamundo.html en la carpeta htdocs. (Puedes borrar todo lo que hay si te apetece).

Ahora, en la barra de direcciones de tu navegador (que no en el Google, pesao!) pon http://localhost/holamundo.html o bien http://127.0.0.1/holamundo.html

Vamos. Que tu página web se aloja en esa carpeta. Con el servicio Apache levantado, ya podrás ejecuta HTML, PHP, JavaScript o lo que quieras como si en un servidor de esos que se pagan se tratara. Eso sí. Es pa ti y pa mi. Si quieres que lo vea el resto de la humanidad tendrás que buscarte un servidor de pago... o no... que lo aloje.

Y yastá! 

Y para acabar ya que ha salido un apache por ahí... no os voy a privar de escuchar este magnífico tema de los Shadows...