Skip to content
Aug 8 14

Rhythm Squares: Segundo juego para Android en HTML5!

by Pere Monfort

Han pasado 6 meses desde que publiqué mi primer juego “Klobs: Move the pipes” y hoy es el día de mi segundo release: Rhythm Square

Como con el anterior, el juego ha sido desarrollado utilizando el elemento Canvas de HTML5 y el framework MesmerismJS.

¡Espero que os guste!

https://play.google.com/store/apps/details?id=js.mmm.magneticsquare

featured

 

Mar 24 14

Klobs: Move the pipes! Mi primer juego en Google Play. 100% Javascript

by Pere Monfort

Hace mucho (concretamente 1 año y 7 meses) que no escribia nada en el blog. Pero hoy escribo para publicitar mi primer juego publicado en la app store de Google Play.

Como no podía ser de otra forma, el juego está desarrollado 100% con Javascript con mi propio framework “MesmerismJS” (el “hijo listo” de cyanJS).

Sin más, os dejo con el enlace del juego. Espero que os guste!

https://play.google.com/store/apps/details?id=js.mesmerism.klobsmovepipes

destacada

Aug 1 12

Eventos durante el juego: Crear variables auxiliares

by Pere Monfort

Cuando empecé con mis primeros desarrollos fueron varias las veces en las que cometí el error que os explicaré a continuación.

Si recordamos el flujo básico de un juego (tuto 1, tuto 2), éste cuenta con una función “update” que es la que actualiza el estado de todas nuestras entidades, y de una función “draw” que dibuja todas las entidades actualizadas. Además, el juego está pendiente de ciertos eventos (keydown, mousemove, click…) que producen cambios de estado en las entidades. Un simple ejemplo: Evento keydown para mover a una entidad a través de las teclas.

Pues bien, el caso es que nuestra función update/draw va a ejecutarse a una velocidad constante: 60 veces por segundo o lo que es lo mismo cada 0.016 segundos. Por otro lado, no podemos saber en qué momento van a ejecutarse las funciones encargadas de gestionar los eventos ya que dependen de lo que el usuario haga. Es precisamente esto lo que puede llegar a ser un problema si dichas funciones modifican parámetros de nuestras entidades. ¿Por qué? Lo explicaré con un ejemplo:

read more…

Jul 28 12

Limitación del evento “keydown” con 3 teclas pulsadas simultáneamente

by Pere Monfort

Me he encontrado ante un caso curioso: Estaba programando el movimiento de un personaje basándome en el evento “keydown“. Generalmente no es necesario, pero esta vez necesitaba tener en cuenta todas las opciones posibles de teclas. Para que os hagáis a una idea, un poco de pseudo-código:

if (!bRight && !bLeft && !bUp && !bDown) {
    // Not move.
} else if (bRight && !bLeft && !bUp && !bDown) {
    // Move Right.
} else if (!bRight && bLeft && !bUp && !bDown){
    // Move Left.
} else if (!bRight && !bLeft && !bUp && bDown) {
    // Move Down.
} else if (!bRight && !bLeft && bUp && !bDown) {
    // Move Up.
} else if (bRight && !bLeft && !bUp && bDown) {
    // Move Right-Down.
} else if (bRight && !bLeft && bUp && !bDown) {
    // Move Right-Up.
} else if (!bRight && bLeft && !bUp && bDown) {
    // Move Left-Down.
} else if (!bRight && bLeft && bUp && !bDown) {
    // Move Left-Up
} else if (bRight && bLeft && bUp && !bDown) {
    // Move Up.
} else if (bRight && bLeft && !bUp && bDown) {
    // Move Down.
} else if (bRight && !bLeft && bUp && bDown) {
    // Move Right.
} else if (!bRight && bLeft && bUp && bDown) {
    // Move Left.
} else if ((!bRight && !bLeft && bUp && bDown) || (bRight && bLeft && !bUp && !bDown)) {
    // Not Move.
}

Imaginemos que tenemos una función que se ejecuta cada vez que el usuario aprieta una tecla y hace lo siguiente:

// PSEUDOCODIGO.
function keyDownHandler (KEYDOWN) {
     if (KEYDOWN === "A") {
        bLeft = true;
    }
    if (KEYDOWN === "D") {
        bRight = true;
    }
    if (KEYDOWN === "S") {
        bDown = true;
    }
    if (KEYDOWN === "W") {
        bUp = true;
    }
}

Pues bien, si pulsaramos “W“, sin dejar de pulsar “W” pulsaramos “S”, y sin dejar de pulsar “W” y “S” pulsaramos “D” o “A” , lo esperado es que el primer condicional nos retornara “left” o “right”… peeeero TACHAN! El evento “KEYDOWN” no se ejecuta en el momento de apretar la tercera tecla “D” o “A”! Pero, si teniendo pulsadas “W” y “S” , pulsamos “M” o “N”, el evento SÍ se ejecuta.

Es decir, parece ser que según qué combinación, no es posible pulsar 3 teclas simultáneamente… sin duda alguna, una limitación a tener en cuenta!

May 2 12

requestAnimationFrame: adiós al setInterval.

by Pere Monfort

Hasta hace poco la única forma que teníamos de ejecutar nuestro game loop era a través del setInterval. Por suerte ahora disponemos de una nueva función más adecuada para la ocasión: requestAnimationFrame.

¿Por qué cambiarlo si iba bien?
Pues porqué realmente no iba “tan bien”.

El mayor problema del setInterval es que va a mandar peticiones para ejecutar nuestro game loop cada X milisegundos indiferentemente de si el sistema está ocupado o no. Por lo tanto, si pasados los X milisegundos el game loop no ha terminado, setInterval igualmente va a mandar una nueva petición. Como el sistema estará aún ocupado con el game loop anterior, éste pondrá dicha petición en “cola de espera”.

Imaginad que el game loop necesita 60ms para ejecutarse, pero setInterval está llamando al game loop cada 30ms… ¡por cada ejecución real del game loop estaríamos añadiendo 2 peticiones en la “cola de espera”! Y cómo podéis imaginar eso supone un gasto innecesario de memoria.

El segundo problema con setInterval, es que seguirá emitiendo peticiones aunque no tengamos el foco en el juego: Si minimizamos la ventana o cambiamos de tab, setInterval seguirá mandando peticiones. Una vez más, un gasto innecesario de memoria… ¡y de batería en dispositivos móviles!.

 

¿Cómo va el requestAnimationFrame?

requestAnimationFrame espera recibir un sólo parámetro: La función que se quiere ejecutar. A diferencia de setInterval, una vez finalizado el game loop tenemos que volver a llamar a la función requestAnimationFrame pasándole nuevamente la función a ejecutar. Veamos un ejemplo simple:

read more…

Apr 28 12

Vídeo de la presentación en we <3 JS

by Pere Monfort

Os dejo el vídeo de la presentación que he dado esta mañana en la segunda edición del We Love JS.

Las diapositivas no se ven demasiado bien (o nada bien) en el streaming, así que he colgado los PNG con los textos de las diapositivas para que podáis seguir mejor la explicación. Podéis descargarlas desde aquí.

Sin más, os dejo con el vídeo:


Video streaming by Ustream

Apr 20 12

“We <3 JS” el próximo sábado 28 de abril

by Pere Monfort

Aprovechando que el viernes 27 se celebra en barcelona el DevUp (HTML5 Developers Conference), al día siguiente el grupo “We <3 JS” ha montado un evento para los amantes del Javascript.

Dicho evento va a estar compuesto por dos charlas y dos workshops. Podéis ver toda la información del evento (ubicación, charlas y workshops) y sacar los tickets (gratu-gratu-ito-ito) en http://we-love-js-2.eventbrite.com/.

Como ponente de “Game Development” os dejo el extracto de la charla:

El objetivo de la charla es hacer una introducción a Canvas centrándonos en el desarrollo de juegos: ¿qué ofrece? ¿Cuáles son sus virtudes? ¿Y sus limitaciones?. En otras palabras: dar una visión general de la API de Javascript destinada a la manipulación de gráficos. Hecha la introducción hablaré sobre las técnicas más utilizadas para el desarrollo de juegos en Javascript y, para finalizar, veremos de forma teórica (aunque no va a faltar código) cual es la estructura básica que debe tener un Framework destinado al desarrollo de videojuegos.

Intentaremos retransmitir en streaming las charlas para los que estéis interesados pero no podáis asistir.

Mar 28 12

BrowserQuest: Juego RPG online en Canvas de HTML5

by Pere Monfort

Mozilla ha publicado un juego hecho íntegramente en HTML5, Canvas y Javascript que de bien seguro va a dar mucho que hablar. El juego en sí se llama “BrowserQuest” y utiliza WebSockets y NodeJS para gestionar la parte de servidor.

Y lo mejor de todo es que es Open Source y han publicado el código en: https://github.com/mozilla/BrowserQuest

The video cannot be shown at the moment. Please try again later.

¡A despedazar el código se ha dicho!

 

 

Mar 25 12

Crear un grid de tiles con “Tiled” y Javascript

by Pere Monfort

Muchos juegos utilizan un sistema de tiles (“azulejos”) para crear los backgrounds o los niveles. Para este tutorial utilizaremos un programa Open Source llamado “Tiled” para realizar los mapas. Una vez realizados exportaremos la información del mapa y crearemos una función en Javascript encargada de pintar el mapa recién creado a nuestro canvas de HTML5.

Requisitos para el tutorial

  • Lógicamente tener Tiled instalado.
  • Descargar éste Tile set para el tutorial (extraído de google images).

 

Parte 1: Crear mapa con Tiled

Lo primero es crear un mapa nuevo desde el menú “Archivo > Nuevo…” de Tiled. En la ventana que nos aparecerá:

  • Mapa: “ortogonal”
  • Tamaño de mapa: 8 patrones x8 patrones
  • Tamaño del patrón: 32 x 32 pixeles

Una vez creado el nuevo mapa, desde el menú “Mapa > Nuevo conjunto de patrones…” seleccionaremos la imagen utilizada para éste ejemplo.

Veremos como nos aparece en la ventana “Conjunto de Patrones” del panel derecho nuestra imagen partida en porciones de 32×32:

read more…

Mar 22 12

Limpiar el Canvas: clearRect vs fillRect vs Width

by Pere Monfort

Últimamente ando leyendo un libro sobre HTML5 y Canvas. Uno de los aspectos que me llamó la atención es que en todos los ejemplos expuestos utilizaba el método fillRect para limpiar el área del canvas. Así que me puse a investigar sobre las distintas técnicas utilizadas para limpiar el área de dibujo del Canvas:

read more…