GAMES IN HTML5

Minijuego en Phaser: prototipo de lanzamiento y medidor de fuerza

Este minijuego nació como un prototipo rápido en Phaser: una esfera, una dirección de lanzamiento, un medidor de fuerza y varias estrellas que el jugador debía recoger. El objetivo no era terminar un juego completo, sino validar primero una mecánica.

Artículo original de 2014 · revisado en 2026

El concepto de prototipar sigue siendo válido. La implementación original, sin embargo, pertenece a Phaser 2 y el demo estaba alojado en el antiguo hosting web de Google Drive.

Prototipo del minijuego creado con Phaser
El prototipo original: lanzamiento, indicador de fuerza y objetivos.

La idea del prototipo

La mecánica era sencilla: lanzar un objeto hacia la parte superior de la pantalla para recoger estrellas. Este tipo de interacción aparece en muchos juegos porque combina una acción fácil de entender con variables suficientes para experimentar: dirección, potencia, gravedad, rebote y objetivos.

Antes de construir arte final, niveles o sistemas más grandes, quería comprobar si el lanzamiento era divertido. Esa sigue siendo una buena forma de trabajar: primero validar el gameplay y después invertir en producción.

Qué quería probar

DirecciónUna flecha indicaba hacia dónde sería lanzada la esfera.
FuerzaEl tiempo que el jugador mantenía presionado modificaba la potencia.
ObjetivosLas estrellas servían como primera condición de interacción y recolección.

Por qué prototipar con Phaser

Phaser permitía poner rápidamente algo en movimiento y comprobar la idea directamente en el navegador. Ese valor continúa vigente: Phaser sigue siendo un framework activo para juegos HTML5, aunque las APIs modernas son muy diferentes de las utilizadas en este prototipo.

Phaser 2 · código histórico

En la implementación original todavía había problemas evidentes, como la forma en que la flecha giraba con respecto a la esfera. El objetivo del prototipo era precisamente encontrar esos defectos antes de construir el resto del juego.

!
El demo original ya no está disponible

Estaba alojado mediante googledrive.com/host/.... Google retiró ese servicio de hosting en 2016. Si recuperamos los archivos originales, el demo debería republicarse en un hosting web actual.

Qué reconstruiría hoy

  1. Escena mínimaCrear esfera, objetivos y una cámara sencilla.
  2. Pointer inputRegistrar cuándo comienza y termina la pulsación.
  3. PotenciaConvertir el tiempo de pulsación en una fuerza limitada.
  4. DirecciónCalcular el ángulo entre el proyectil y el puntero.
  5. LanzamientoAplicar velocidad en lugar de acoplar la solución a APIs antiguas de Phaser 2.
Idea que sigue siendo válida

Un prototipo no tiene que verse perfecto. Tiene que responder una pregunta concreta: ¿esta mecánica funciona y merece que sigamos construyendo sobre ella?

ADVERTISEMENT
ADVERTISEMENT

4 comments:

Unknown said...

Juan Pablo, para invitarte a que publiques tus artículos sobre Phaser Framework en los siguientes grupos:
https://www.facebook.com/groups/javascriptgames/
https://www.facebook.com/groups/canvastico/
Saludos! :D

a said...

Oh O.O estan muy cool, gracias lo tendre en cuenta. Saludos :)

Unknown said...

oops! Phaser is not defined

a said...

Ups que mal, ahora hay problemas con los servidores de google drive,buscare una solucion ^^..

Post a Comment

Search the blog

Blog archive

Latest in English