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 😜)