lunes, 31 de julio de 2017

Conoce Anrokku, un divertido juego en Phaser

Por si a alguien le quedaba alguna duda, en Phaser Hispano también hacemos juegos, aunque no dispongamos de mucho tiempo. Nuestra última criatura se llama Anrokku y está disponible en Google Play de forma gratuita para móviles a partir de Android 5, así como en las webs de juegos que quieran disponer de él.
El juego se trata de un simple puzzle en el cuál debemos sacar a la ambulancia del parking. Para ello podemos mover los coches en horizontal o en vertical, según sea su posición de inicio. El juego responde tanto a eventos de ratón como a eventos táctiles. El juego cuenta con 20 niveles aunque no descartamos añadir más en un futuro.

El juego se ha programado usando TypeScript y Phaser 2.8 (y Apache Cordova para las versiones de Android y Windows 10).

¿Quiéres tener un juego similar a este? ¿Tienes una página y quieres alojar este juego? En Phaser Hispano te vendemos el código fuente completo y original de Anrokku. Por un único pago recibirás un fichero ZIP con todo lo necesario para generar tu propio APK. Podrás incorporar tus propios anuncios, modificar los gráficos, etc

martes, 4 de julio de 2017

Libros que todo desarrollador de juegos debe leer

He aquí una colección de libros muy interesantes enfocados al desarrollo de juegos. Algunos son más teóricos, otros son más prácticos. Algunos son más genéricos y otros se centran en partes específicas del desarrollo de juegos.

Game Programming Patterns

Personalmente, uno de mis preferidos, es el que elijo para encabezar la lista. Este libro nos cuenta las diferentes formas (patrones) de estructurar un videojuego complejo. El autor, Robert Nystrom, trabaja para Electronic Arts y es uno de los libros más completos al respecto. El libro no se centra en ningún lenguaje en concreto, y aunque pone los ejemplos en C++, lo cierto es que lo que cuenta el libro puede aplicarse a cualquier lenguaje de programación.
http://amzn.to/2tmSwvv

Clean Code

Un clásico de los libros de programación. Un libro que cualquier programador, no solo de juegos debería leer. En él, Uncle Bob nos enseña qué pautas debemos seguir para mantener un buen estilo de programación, mantenible, legible y poco propenso a errores.

Game Engine Architecture

Este libro se centra en los motores de los videojuegos, más que en los juegos en sí, pero es un auténtico libro de referencia en la materia. Cuenta con información de primera mano del desarrollo de The Last of Us.

The Art of Game Design: A book of lenses 

El mejor libro que existe sobre el diseño de juegos. Este libro ayuda a los lectores a encontrar una jugabilidad divertida y que desafíe al jugador. Una auténtica referencia que se centra en el núcleo de lo que debe ser un buen juego.
 

A Theory of Fun for Game Design

Complementando a The Art of Game Design, este libro también nos enseña las cualidades de un gameplay que haga que la gente quiera jugar a tu juego.

Programming Game AI by Example

Si tienes interés en la inteligencia articial aplicada a los videojuegos, este libro, ya con unos añitos, es de lo mejor que uno puede encontrarse. El único fallo es que usa demasiado en profunidad C++, por lo que puede resultar costoso adaptarlo a otros lenguajes.

The Pragmatic Programmer: From Journeyman to Master

Por último, acabamos con otro libro no solo recomendado para desarrolladores de juegos sino para programadores en general.

Los que faltan

Hemos decidido elegir solo unos pocos libros, los más importantes. Hemos eliminado aquellos que tienen que ver con una tecnología en concreto (Phaser, libgdx, SDL, SFML, OpenGL,..) pues un buen programador de juegos no se pierde en las diferencias entre una librería y otra, al contrario, sabe lo esencial que necesita el juego y después lo implementa en una librería en concreto. 

También hemos eliminado algunos de gran calidad sobre renderizado 3D, pues el tiempo ha demostrado que en pleno siglo XXI un buen juego no necesita ser 3D para serlo. ¿Conoces algún libro más que merezca la pena incluir? ¿Has leído alguno, cuáles son tus opiniones? Podéis escribir en los comentarios.

 

Twisted City, un fantástico juego de puzzles en Phaser

Twisted City es un fantástico juego de puzzles hecho en Phaser. Creo que es uno de los juegos de más alta calidad hechos en Phaser hasta la fecha y aparte de ser divertido e interesante (que lo es), creo que podemos y debemos ponernos como objetivo alcanzar ese nivel de calidad en nuestros juegos. Obviamente el camino será difícil, pero no es inalcanzable. Si intentas hacer cada juego mejor que el anterior, si cada día dominas mejor el arte de programar juegos, algún día llegarás al nivel del título de Orange Games.


La jugabilidad es muy interesante, la música y los efectos se integran bien, la interfaz es muy clara y las animaciones cumplen muy bien.

Sin más dilación, os dejo el enlace al juego:

miércoles, 28 de junio de 2017

Fiverr, encuentra recursos para tu juego

Los buenos juegos son piezas que requieren de habilidades multidisciplinares. Podemos ser muy buenos programando pero si nuestros gráficos no acompañan, nuestro juego no dejará de ser mediocre. En Fiverr podemos encontrar gente que nos ayude, por muy poco dinero con alguna de las tareas más importantes del mundo de los juegos:
  • Diseñar logos
  • Diseñar algún recurso gráfico (2D, 3D, ilustraciones, ...)
  • Componer música
  • Obtener efectos de sonido
  • Marketing
  • Traducciones
  • Y mucho más...

La verdad es que Fiverr ofrece una gran variedad de ofertas y con sus sistema de reputación sabremos rápidamente quien puede hacer un buen trabajo. En Fiverr todo funciona a través de gigs, pero en realidad conviene leer la descripción de cada oferta para saber cuanto nos costará algo.

Integrar anuncios de AdMob en tu juego

Una de las maneras de ganar dinero con nuestros juegos es integrar anuncios entre niveles. AdMob es una de las plataformas líderes en este sector. Propiedad de Google, se integra perfectamente en Android, iOS y Windows. En este post veremos como añadir los anuncios en un juego hecho en Phaser para Android. Para la conversión usé Apache Cordova.

El primer paso es tener una cuenta en AdMob. En mi caso el proceso fue muy sencillo ya que disponía cuenta de Google AdSense aprobada. Actualmente no sé exactamente cuál es el proceso a realizar. Una vez estemos dentro vamos a monetizar una aplicación nueva. Introducimos los datos de forma manual. Posteriormente generamos un nuevo anuncio de tipo Intersticial (anuncios de pantalla completa).

Se nos generará un código de bloque de anuncios.

Mostrando los anuncios en el juego

Ahora vamos a mostrar los anuncios. Como hemos usado Cordova, podemos usar los plugins que hay. En mi caso, suelo confiar en el plugin cordova-admob-pro. Es un plugin gratuito hasta que ganemos 1.000$, en ese momento deberemos pagar 20$. Unas condiciones totalmente razonables para uno de los mejores y más completos plugins de AdMob.

En la carpeta con el fichero config.xml presente ejecuta esto:
cordova plugin add cordova-plugin-admobpro 

Se instalará el plugin de Cordova. Ahora añadimos una referencia a Cordova en el fichero index.html
Ahora, cuando el nivel se esté cargando podemos pedir que se cargue el anuncio:

if(AdMob) AdMob.prepareInterstitial( {adId: "ca-XXXXXXXXXXXXXX", autoShow:false} );

Y justo cuando queramos mostrarlo (al salir de un nivel por ejemplo), lo mostramos:

if(AdMob) AdMob.showInterstitial();

¡Y listo! Ya deberían verse los anuncios. AdMob tarda unas horas en mostrar anuncios, así que si ha pasado poco tiempo desde que creaste la aplicación posiblemente no se vea todavía, no te preocupes, es normal. Si quieres, existen IDs de prueba, para los anuncios intersticiales el ID de prueba es: ca-app-pub-3940256099942544/1033173712

Convertir juego en Phaser en APK de Android con Apache Cordova

Hoy vamos a ver como convertir un juego que tenemos hecho en Phaser a un APK para Android, listo para subir a Google Play y Amazon AppStore. Para ello vamos usar Apache Cordova. Para seguir este tutorial necesitarás tener npm instalado.

Instalando Apache Cordova

El primer paso será instalar Apache Cordova con npm. Abre la terminal de tu sistema operativo y ejecuta lo siguiente:

npm install -g cordova
En sistemas Linux quizá debas poner sudo delante. Con esto ya tendremos Apache Cordova instalado.

Instalando el Android SDK

De forma paralela podemos ir instalando el Android SDK, necesario para generar los APK. Hay varias formas de obtenerlo, la más rápida y sencilla es instalar Android Studio en tu ordenador.

El archivo config.xml

La configuración principal de Cordova se almacena en un archivo config.xml. En este archivo se define el nombre de la aplicación, una descripción, las plataformas donde funciona (Cordova soporta iOS y Windows también), así como los plugins que usaremos.

Este es un fichero config.xml de ejemplo.

Crea uno tú de forma similar, cambiandolo eso sí los detalles de tu aplicación. Una vez lo tengamos, vamos a descargar el soporte a plataformas y plugins que hemos definido en config.xml. En icon debes especificar la ruta a los iconos que se usarán en Android.

Copia el juego a una carpeta llamada www. Ahí residirá toda nuestra aplicación y no deberemos de tocar nada más.
Dentro de la carpeta www, el archivo principal del juego debe llamarse index.html.


Escribimos
cordova prepare
Y se empezará a descargar el soporte a Android de Cordova así como los plugins.

Generar el APK para Android

Ahora vamos a generar el APK. Primero vamos a generar uno de prueba. Escribe:
cordova build android
Este comando ejecutará muchas cosas, compilará Java y realizará tareas específicas de Android. Puede dar muchos fallos, no obstante para cualquier duda se puede preguntar en el foro de Gamedev Hispano. Si todo ha ido bien tendremos un APK listo en la carpeta platforms/android/build/outputs que se habrá generado. Este APK sin embargo es de tipo Debug y aunque puede instalarse en los móviles, no se puede subir a Google Play.

Generar un APK para Google Play

Los APK válidos deben estar firmados, para ello hace falta primero generar un archivo de llaves. Es muy importante que guardes el fichero de llaves en un lugar seguro pues sin él no podrás subir actualizaciones a Google Play.

Usa este comando para generarun fichero KEYSTORE.

keytool -genkey -v -keystore JUEGO.keystore -alias JUEGO -keyalg RSA -keysize 2048 -validity 10000

Te hará varias preguntas y deberás poner una contraseña.

Ahora para que Cordova genere el APK y lo firme:

cordova build android --release -- --keystore=JUEGO.keystore --storePassword=password --alias=JUEGO --password=password

Con esto ya deberías tener un APK en modo Release y firmado. Listo para ser publicado en Google Play.

viernes, 2 de junio de 2017

Publicado Tiled 1.0.0

Tiled, el famoso editor de mapas en 2D, ha lanzado la versión 1.0. Después de años de trabajo, Thorbjørn Lindeijer, el creador del proyecto, cree que Tiled ya es lo suficientemente maduro como para lanzar la 1.0. Si quieres saber como usar Tiled con Phaser, tenemos un tutorial aquí.

Por supuesto, el mundo del desarrollo del videojuego ha celebrado la noticia. Para muchos, incluido yo, Tiled ya era un producto maduro y estable. Gran cantidad de juegos para todas las plataformas ya venían usando Tiled de forma habitual, incluso dentro del mundo de Unity, muchos desarrolladores prefieren usar Tiled y el plugin Tiled2Unity a desarollar los mapas en Unity.

Novedades

Las mejoras principales de esta versión son:
  • Soporte para external tilesets (TSX). Ahora se podrán usar tilesets con metadatos que podrán editarse de forma independiente. Los embedded tilesets siguen pudiéndose utilizar.
 
  • Jerarquía de capas. Ahora es posible agrupar las capas en carpetas de forma jerárquica que heredan las propiedades personalizadas de la carpeta superior.
  • Typed Tiles. Ahora se podrá asignar a ciertos tiles un tipo, al igual que en un lenguaje de programación cualquiera. Esto se ha diseñado para permitir añadir entidades complejas de forma más sencilla.
  • Objetos de Texto. Ahora se pueden añadir objetos de texto a los mapas
  • Fix de los mapas hexagonales. Se han corregido numerosos fallos presentes en la creación de mapas hexagonales.
El creador del proyecto también confirma que se está trabajando en Tiled 1.1, con la ayuda de Google a través del programa Google Summer of Code.

Tiled 1.0.0 ya se puede descargar en MapEditor.org

viernes, 26 de mayo de 2017

Usando mapas de Tiled en Phaser

Retomamos el tutorial de Tiled. Deberíamos tener ya un mapa de Tiled con dos capas (Paredes y Suelo), una con el atributo pasable en desactivado y en otro no.

Vamos a Tiled y exportamos el archivo en formato JSON (CSV también nos valdría pero no lo he probado).

Cargando el tilemap y el tileset

En la función preload cargamos el JSON con la descripción del mapa (tilemap) y las imágenes que usa el mapa (tileset). Es muy parecido a como vimos en Iniciar Phaser.js.

function preload(){
    game.load.tilemap("Mapa","Mapa.json",null,Phaser.Tilemap.TILED_JSON);
    game.load.image("Tileset-1","Wall.png");
Ahora creamos los objetos en pantalla dentro de la función create.

var map, paredes, suelo;

function create(){
    map = game.add.tilemap("Mapa");
    map.addTilesetImage("Wall","Tileset-1"); // El nombre Wall hace referencia a como se llama el tileset en Tiled
    suelo = map.createLayer("Suelo"); // El nombre hace referencia a como se llama la capa en Tiled
    paredes = map.createLayer("Paredes");
}
Es importante usar los nombres que hemos usado en Tiled previamente. Además, el orden en que llamemos a createLayer importa, ya que no tiene en cuenta el orden de las capas que hubiese en Tiled.

Colisiones

Vamos ahora a hacer que las paredes sean objetos no atravesables, mientras que el suelo sí lo sea. Para gestionar las físicas vamos a usar Arcade Physics aunque con P2 es parecido.

var map, suelo, paredes, player;

function create(){
    game.physics.startSystem(Phaser.Physics.ARCADE);

    map = game.add.tilemap("Mapa");
    map.addTilesetImage("Wall","Mapa-TileImage");
    suelo = map.createLayer("Suelo");
    paredes = map.createLayer("Paredes");

    console.log("Paredes es pasable?: "+paredes.layer.properties.pasable);
    
    map.setCollisionBetween(1,10000,true,paredes);

    suelo.resizeWorld();
    paredes.resizeWorld();
  
    ... crear player y activar arcade physics en él...
    player = game.add.sprite(100,100,"player");
    game.physics.arcade.enable(player);
}

function update(){
    game.physics.arcade.collide(paredes,player);
}


En la función create he usado la propiedad que definimos en Tiled como pasable. En realidad lo pongo como ejemplo para que se vea como es posible definir atributos arbitrarios en Tiled y acceder a ellos desde Phaser.

La función setCollisionBetween se encarga de que todos cuadrados de la capa paredes se vuelvan infranqueables. Posteriormente en update hacemos la comprobación de física con cada cuerpos ajeno al tilemap que lo necesite, habitualmente el jugador.



Desplegar un juego con Phaser en Netlify

Una vez tengamos acabado el juego necesitamos publicarlo y hacerlo accesible a los demás. Existen varias opciones, desde convertir el juego en app para Android hasta publicarlo en Steam usando Electron. ¿Y si quiero dejar mi juego en una web? Es una opción perfectamente válida que explicaremos ahora.

La búsqueda del hosting

Si has hecho una página web con anterioridad quizá sepas como va. Hay muchos tipos de hosting y un amplio rango de precios. El más simple es el hosting compartido, normalmente con PHP, aunque no lo necesitaremos usar si nuestro juego Phaser no tiene funcionalidades multijugador. También existen máquinas virtuales en cloud, existen los VPS, hay distintos PaaS,... Es un tema bastante complicado. ¿Pero qué necesitamos realmente?

En realidad un juego en Phaser suele ser una página web estática, es decir, un fichero HTML, con JavaScript y los recursos multimedia como imágenes en carpetas próximas al HTML. Salvo que hayas añadido multijugador, tu juego también será así.

Para alojar un sitio web estático existe un hosting muy potente y gratuito llamado Netlify. Netlify solo admite webs estáticos pero es muy rápido (dispone de CDNs repartidos por varios continentes) y seguro (puede generarnos certificados SSL de forma gratuita). No dispone de publicidad ni ninguna otra trampa.



Veamos como funciona Netlify.

Instalando Netlify

El primer paso es registrarse en Netlify, para lo cual no hace falta tarjeta de crédito. Si ves la sección de precios, verás una gran variedad de ellos.
Nosotros vamos a usar Netlify Pages, que son totalmente gratuitas e igual de rápidas. Sinceramente, para alojar juegos de Phaser no vamos a necesitar el resto de cosas que ofrecen los planes de pago.

A continuación vamos a instalar la herramienta de línea de comandos de Netlify, muy útil y que servirá para subir el juego a Netlify. Para ello necesitas tener Node.js instalado y npm (se instala con Node.js). Una vez lo tengas, instalamos netlify-cli con npm.

npm install netlify-cli -g


Veremos algo como esto si todo ha ido bien. Escribe lo siguiente para comprobar que la instalación ha ido bien:

netlify -h

Desplegando en Netlify

Ya tenemos todo listo. Nos desplazamos a la carpeta que contiene el fichero HTML de nuestro juego Phaser (nos desplazamos entre carpetas usando el comando cd). Una vez estes allí ejecuta:

netlify deploy

Se nos abrirá el navegador para que iniciemos sesión y el programa nos hará varias preguntas. Cuando esté todo listo subirá el juego a Netlify.

Si ahora entramos en la web de Netlify podremos ver que efectivamente se ha subido.

Podemos ver la URL donde está alojada la web.


Podemos cambiarle el nombre siempre que esté disponible bajo .netlify.com. También es posible usar nuestro propio dominio, comprado en GoDaddy, 1&1 u otro proveedor. Simplemente tienes que hacer click en Set up domain.

Conclusión

Después de probar varios servicios Netlify es el hosting estático que más me convence. El plan gratuito es muy potente y nos aseguramos una velocidad en la carga del juego envidiable. Por supuesto, con Phaser gozas de libertad y puedes usar cualquier otro hosting. Usa lo que mejor se adapte a ti y a tus usuarios.

domingo, 26 de febrero de 2017

Física: Colisiones de objetos complejos con P2

En este tutorial veremos como implementar colisiones de objetos con P2, el motor de física más avanzado disponible para Phaser. En primer lugar necesitamos los objetos, en mi caso voy a usar este cohete:
En primer lugar necesitamos generar un archivo con la forma del objeto, que sirva para tener los bordes que el motor de física usará. Yo voy a usar Physics Editor, es de pago pero tiene una prueba de uso de 7 días.
La interfaz es muy sencilla. Arrastramos las imágenes de las que queramos generar colisiones a la izquierda. Ahora para generar los bordes usamos la varita mágica. Modificamos el valor de Tolerancia para que el número de vértices sea el menor posible pero aun así coja bien la forma.
Si el trazado automático no funcionase puedes añadir polígonos y círculos así como añadir o eliminar vértices. Cuando ya tenemos la figura vamos a la derecha en Exporter y seleccionamos Phaser (P2). Y pulsamos Publish. Ese archivo JSON contendrá las formas para las colisiones de todos las imágenes cargadas en la columna de la izquierda (en nuestro caso solo contará con una entrada, "cohete").

Ahora vamos a cargar el cohete con sus físicas.

var game = new Phaser.Game(480,320,Phaser.CANVAS,"",{preload: preload, create: create, update: update});

function preload(){
  game.load.image("cohete","cohete.png");
  game.load.physics("fisica","fisica.json");
}

function create(){
  game.physics.startSystem(Phaser.Physics.P2JS);
  game.physics.p2.gravity.y = 1000;
  
  var cohete = game.add.sprite(100,100,"cohete");
  game.physics.p2.enable(cohete);
  cohete.body.clearShapes();
  cohete.body.loadPolygon("fisica","cohete");
}

function update(){

}

Los objetos P2 colisionan solamente entre ellos. Si quieres tener un objeto P2 estático debes ponerlo como static.


cohete.body.static = true;

Puede ajustar algunas propiedades de los cuerpos como la masa:

cohete.body.mass = 50;





El equipo formado por Phaser.js Hispano gana el VallaHackaton 2017

Esta semana se ha celebrado en Valladolid el VallaHackaton, esta vez con temática de videojuegos.
La temática de la game jam era ¡Rómpelos! y finalmente titulamos nuestro juego ¡No lo rompas! El jurado estuvo compuesto por gente de Pyrolite Games y de Demium Games, con la ayuda de Víctor Ferrer de Wave Engine.

La mecánica de ¡No lo rompas! es la de una patata caliente. Es un juego multijugador para dos personas en local. Cada jugador tiene que intentar que el otro rompa la tabla. Para ello el jugador selecciona un objeto de 5 para elegir (cada uno con distinto peso) y lo lanza. Si lo lanza la mal el factor multiplicador de la fuerza será mucho y puede romper la tabla.



Para realizar el juego tuvimos la tarde del jueves y el viernes hasta las 18:00. Originalmente pensamos en una cuerda pero el jurado vino el primer día a comentarnos un par de cosas. Ellos no veían la cuerda como una buena solución y además nos dijeron que teníamos que transmitir un feedback al usuario del estado de la cuerda a los jugadores para que pudieran actuar en consecuencia. Así que optamos por una tabla con diversos estados de fractura, visibles por el número de grietas.

Usamos Phaser con P2 para las físicas. Para escribir mi compañero usó Brackets y yo Visual Studio Code. Los gráficos y animaciones se realizaron con Adobe Illustrator. Para definir las colisiones para P2 usamos Physics Editor. Intentamos usar Git, pero tenemos muy poca experiencia con merges y provocamos conflictos varias veces. Al principio usamos un pincho que pusimos de nombre GIT y finalmente terminamos usando Telegram para pasarnos fragmentos de código.

El mayor problema al que nos enfrentamos tuvo que ver con el escalado de los sprites en Phaser, que no se aplican a la física y nos provocaba extraños errores.
La parte blanca era donde se aplicaba la colisión y la tabla como se puede ver se muestra más a la derecha

Finalmente tuvimos que reescalar los sprites y volver a Physics Editor para generar archivos de colisiones de nuevo.
¡Cuando la física ya funciona bien!
Fue un buen evento y volveré a asistir si es posible el año que viene, aunque no trate de videojuegos. Haciéndolo me he dado cuenta de que me faltan tutoriales sobre P2 en Phaser así que intentaré escribirlos lo antes posible.

sábado, 25 de febrero de 2017

Los Instant Games HTML5 son el futuro de cara a 2017

Las apps con el modelo tradicional de app store no pueden crecer más. En 2016 las apps empezaron a comerse a sí mismas.

Nos hacemos eco de un artículo publicado en LinkedIn Pulse por Alexander Krug, CEO de SOFTGAMES. En él explica que el modelo de las aplicaciones ha empezado a quedarse obsoleto, sobre todo respecto a los juegos. En 2016, el tiempo medio que un usuario medio de teléfono pasaba en apps de juegos ha bajado por primera vez.

Por contra, las aplicaciones de redes sociales y mensajería han aumentado de forma espectacular. ¿Qué es lo que está pasando?

Aplicaciones como Telegram, Kik o BBM han incluido bots y aplicaciones. En el caso de Telegram la plataforma Gamee proporciona juegos instantáneos HTML5. Las ventajas de tener un juego instantáneo HTML5 son muchas:
  • Reducidos tiempos de carga
  • No ocupan espacio
  • No hay que preocuparse de actualizar la aplicación
  • Al estar integradas dentro de una app de comunicación es muy fácil compartir con amigos o retarles.
El mayor problema actualmente de este sistema es el descubrimiento, pues no hay todavía un modo sencillo de que un usuario conozca un juego instantáneo de buenas a primeras.

La oportunidad es grande ahora que empieza a despegar este nuevo ecosistema. Flappy Bird no se hizo popular por la app store, sino porque la gente lo compartió en redes sociales.

Es por ello, concluye Alexander, que los juegos HTML5 que se adapten a este ecosistema se harán cada vez más populares. Su empresa ya ha diseñado más de 400 juegos para estas plataformas pero cualquiera de nosotros puede hacerlo (Y Phaser funciona a la perfección en dispositivos móviles con HTML5 😜)

jueves, 19 de enero de 2017

Animaciones

Los juegos no son juegos si no se siente vida en ellos. ¿O acaso a alguien le gustaría jugar con el Word? Una parte fundamental para dar vida a los juegos son las animaciones. Las animaciones nos hacen ver que el mundo del juego no es estático.

Un Spritesheet específico

En los juegos 2D normalmente animamos los sprites cambiándolos completamente con otro sprite similar. Normalmente todas las imágenes que van a representar un sprite se almacenan en el mismo archivo. Recuerda la lección sobre Spritehsheets.

Para este ejemplo voy a usar este spritesheet.
Es obra de Brett Steele. He hecho una modificación para que el color azul se vuelva transparente.

Generando animaciones

En primer lugar cargamos el spritesheet.


    function preload() {
        game.load.spritesheet("mujer", "mujer-alpha.png", 32, 64);
    }

Después añadimos las animaciones al sprite. El primer argumento es el nombre de la animación, el segundo es la lista de frames de los que se compone la animación. Estos son los frames del spritesheet. Por último la velocidad de la animación y si queremos que se repita.

function create() {
        cursor = game.input.keyboard.createCursorKeys();
        mujer = game.add.sprite(100, 100, "mujer");
        mujer.frame = 10;

        mujer.animations.add("left", [24, 25, 26, 27, 28, 29, 30, 31], 10, true);
        mujer.animations.add("right", [16, 17, 18, 19, 20, 21, 22, 23], 10, true);
        mujer.animations.add("up", [0, 1, 2, 3, 4], 10, true);
        mujer.animations.add("down", [8, 9, 10, 11, 12], 10, true);
    }

Después lo podemos usar en la función update donde arrancamos y paramos las animaciones según la entrada de teclado.


    function update() {
        if (cursor.left.isDown) {
            mujer.animations.play("left");
            mujer.x--;
        } else if (cursor.right.isDown) {
            mujer.animations.play("right");
            mujer.x++;
        } else if (cursor.up.isDown) {
            mujer.animations.play("up");
            mujer.y--;
        } else if (cursor.down.isDown) {
            mujer.animations.play("down");
            mujer.y++;
        } else {
            mujer.animations.stop();
            mujer.frame = 10;
        }
    }
Con <sprite>.frame podemos ajustar manualmente el frame de la animación, muy útil cuando hemos parado la animación.

Resultado

Ahora podemos ver el resultado.

viernes, 13 de enero de 2017

Diferencia entre Arcade, Ninja y P2 physics en Phaser

Mucha gente tiene dudas de por qué hay tres motores de física en Phaser. Y sin contar Box2D que es un plugin de pago para Phaser. ¿Cuáles son las diferencias entre estos tres motores?


Arcade Physics

Arcade Physics únicamente detecta colisiones de tipo AABB. Es decir, se generan rectángulos y se comprueba si se superponen entre sí. En ese caso se entiende que se ha producido una colisión. Es un sistema muy rápido pero no es muy preciso (no todos los sprites son rectángulos perfectos). Es el único motor que además cuenta soporte en la API de Partículas de Phaser.

Ninja Physics

Ninja Physics es más preciso que Arcade. Es capaz de manejar formas complejas y rotaciones. Se recomienda para el diseño de niveles, por ejemplo, de un plataformas.

P2 Physics

P2 es un motor físico completo, con más cosas aparte de colisiones complejas como fuerzas y aceleraciones. Es el más lento de los tres pero es el más completo. Se recomienda cuando tenemos objetos a los que queremos dotar de física completa, por ejemplo, los pájaros de Angry Birds.

sábado, 7 de enero de 2017

Este 2017, OneGameAMonth

¡Feliz año nuevo a todos nuestros lectores! En estas fechas la gente suele ponerse propósitos. Cosas que intentarán cumplir durante el nuevo año y así mejorar como persona. Dejar de fumar, hacer ejercicio, aprender inglés,... Si me preguntáis a mí os diré que no suelo ponerme propósitos y que es mejor aplicar kaizen diariamente. Sin embargo hay un propósito que me hace mucha ilusión y que voy a intentar realizar. Os animo también a vosotros a que los sigáis. Se trata del desafío OneGameAMonth.

Se trata de un desafío con vosotros mismos (o de vuestro equipo). Se trata de hacer todos los meses un juego. No hay más normas. Es un reto personal, de disciplina, de mejora continua. Podéis usar cualquier tecnología. La comunidad #1GAM que se encuentra por las redes sociales os ayudará a mantener la motivación y a compartir los progresos que vayas realizando. El objetivo no es hacer un The Witcher 3 cada mes, sino un pequeño juego, a poder ser con una idea innovadora. Quizá el año que viene uno de los 12 juegos que hiciste te gustó más que el resto. Con ese juego podrás centrarte el año que viene.

Si tienes Twitter puedes registrarte en la web e ir anotando tu progreso a la vez que ganando puntos de experiencia. No es mal sistema, pero recuerda que lo importante eres tú y no esa web, puedes seguir también el desafío sin estar registrado.

Todos los meses se sugiere un tema y eres libre de seguirlo o no. Personalmente en competiciones de menos horas el tema me parece más importante que en este desafío personal que es #1GAM y en mi caso no lo voy a seguir.

Anímate y comenta tu progreso en #1GAM en el foro de Gamedev Hispano.

jueves, 5 de enero de 2017

Partículas en Phaser

En esta entrada vamos a ver como usar partículas en Phaser. Para ilustrarlo intentaremos construir un fluido.

El concepto de partícula

Para construir nuestro fluido vamos a usar partículas. ¿Qué son las partículas? Podemos entenderlo como pelotillas o puntos, cada una independiente del resto de las demás partículas pero que se usan de forma combinada para generar formas. Las partículas se pueden usar para generar fuegos artificiales, fluidos, humo, lluvia, etc

En el caso del agua es fácil de entender. Podemos asimilarlo a la realidad donde el agua contenida en una copa está formada por moléculas de H2O.

El sistema de partículas en Phaser

Phaser cuenta con un sistema de partículas, que usa Arcade Physics como motor de física. Es interesante usar un sistema de partículas siempre que sea posible pues normalmente ya están optimizados para trabajar con grandes cantidades de objetos. Usando Arcade Physics tendremos varios problemas y no es 100% válido para fluidos (si lo es, por ejemplo, para explosiones y fuegos artificiales). En otro post veremos como diseñar fluidos de forma más completa usando otro motor de físicas.

En el sistema de partículas de Phaser hay dos clases importantes: Emitter y Particle. Estas dos clases son las que usaremos. La clase Particle derive de Sprite por lo que todo lo que podías hacer con un sprite lo puedes hacer con un Particle. Por su parte Emitter es el emisor de partículas. Tiene una posición en la pantalla y es invisible pero de él salen todas las partículas.

Simples pelotas

Vamos a hacer un programa que suelte pelotas naranjas. El código es el siguiente:

var game = new Phaser.Game(800,600,Phaser.CANVAS,"particulas",{preload: preload, create: create, update: update});

var emitter;

function preload(){
    game.load.spritesheet("pelota","pelota.png",16,16);
}

function create(){
    emitter = game.add.emitter(64,64,400);
    emitter.makeParticles("pelota",0,400,true,true);
    emitter.setXSpeed(-64,64);
    emitter.setYSpeed(-10,10);
    emitter.gravity = 1000;
    emitter.bounce.setTo(1,0.7);

    emitter.start(false,0,10);
}
function update(){
    game.physics.arcade.collide(emitter);
}


Veamos el código. En la función create añadimos un Emitter en la posición 64,64. Indicamos que emitirá como máximo 400 elementos. Posteriormente pasamos a crear las partículas, usamos la imagen pelota, generamos 400 y activamos las colisiones tanto con otras partículas como con los bordes de la pantalla.

A continuación unos ajustes con los que podemos jugar hasta que demos con los que nos gusten. La velocidad en X y en Y se refiere a la velocidad mínima y máxima que pueden tener las partículas al salir. Phaser aleatoriamente les dará velocidades dentro del rango. La gravedad que afecta a las partículas y por último el rebote, indicando un rebote para el eje X y otro para el eje Y. Un rebote de 1 quiere decir que no pierde velocidad al chocar con otra partícula en ese eje.

Finalmente podemos arrancar con start. El primer argumento sirve para indicar si va a ser una explosión (todas las partículas de golpe) o no. El segundo argumento indica cuanto tiempo van a mantenerse en pantalla las partículas, un valor de 0 hace que duren para siempre. Por último, indicamos en milisegundos cada cuanto queremos que salga una partícula nueva.

En la función update llamamos a Arcade Physics para que compruebe las colisiones de las partículas y las separe.

Si ahora pruebas a aumentar el número de partículas mientras las sigues haciendo más pequeñas conseguirás un fluido cada vez más realista.