Publicado el Deja un comentario

¿Se puede ganar dinero desarrollando videojuegos para WEB?

4 Ejemplos de videojuegos que tuvieron éxito en internet

Agar.io, Super Meat Boy, Canabalt, Flappy Bird, son ejemplos de videojuegos desarrollados por personas que en diferentes circunstancias lograron tener un rédito económico de sus creaciones y por lo tanto se constituyen en ejemplos de que si es posible ganar dinero desarrollando videojuegos para web. 

A todas las personas que posiblemente hayan llegado hasta aquí buscando una respuesta concreta, debo adelantarles, que el tema de este artículo con seguridad es la pregunta que muchos de nosotros nos hacemos para intentar dar unos primeros pasos en el mundo del desarrollo de videojuegos, y ciertamente si se puede.

Internamente nos apasiona pensar que, desarrollar nuestros propios videojuegos puede brindarnos un rédito económico o incluso poder establecer nuestra propia empresa de desarrollo. 

Generalizadamente tenemos podemos poner los grandes ejemplos de la actualidad sobre la mesa, es decir empresas que ya desarrollan en la actualidad videojuegos para WEB como Zynga o KING. ¿fácil verdad?

Claro con ese ejemplo cualquiera lo demuestra, pero ¿Qué pasa con las personas que recién estamos empezando o a medio camino? Bueno pues la respuesta sigue siendo la misma, Si SE PUEDE, y obviamente necesita mucho trabajo para hacerlo realidad. 

Para demostrar que si es posible ganar dinero basta inspirarse en algunos casos de éxito:

  • Agar.io
  • Super Meat Boy
  • Canabalt
  • Flappy Bird

AGAR.io

Agar IO simplifica la huida y la caza a un máximo nivel

Este videojuego creado por el desarrollador Matheus Valladares de nacionalidad Brasileña en 2015 tiene una historia de éxito comercial bastante interesante. Confiando en la información que suministra internet, se dice que el juego fue desarrollado en pocos días y está inspirado en un pequeño ecosistema microbiótico, o como se vería un mundo de este estilo bajo la mira de un microscopio.

La idea del videojuego es súper simple, vivir o ser comido. De igual forma la implementación de los controles está originalmente pensada para jugar simplemente con el mouse y teclado aunque ahora existe también la posibilidad de jugarlo en dispositivos móviles. 

Una vez que este videojuego vio la luz, rápidamente se viralizó gracias a su original sistema de juego y capacidad multijugador, lo que deriva en partidas emocionantes dónde el objetivo es vivir el mayor tiempo posible.

Se dice que este videojuego recibe alrededor de 1 millón de visitas diarias solo en su sitio web, lo que puede traducirse en ganancias mensuales entre USD 100.000 a USD 500.000 mensuales. (https://bit.ly/2WmuWkW)

Super Meat Boy

Super Meat Boy es frenético y simple en su premisa

En realidad el videojuego que debe estar en esta lista debería ser el llamado MEAT BOY que fue el videojuego antecesor de Super Meat Boy y que era un videojuego web desarrollado en la antigua tecnología FLASH. 

Meat Boy el videojuego inicial fue desarrollado por Edmund McMillen y Tommy Refenes un equipo conformado por un diseñador y un desarrollador respectivamente, quienes tuvieron la genialidad de desarrollar un videojuego de plataformas basado en un llamativo personaje de “carne”.

El videojuego tiene varias referencias a otros videojuegos clásicos como el mismo Super Mario Bros y hasta el famoso videojuego de peleas Street Fighter. 

Está claro que el dúo de profesionales no desaprovecharon la fama de su creación y lograron desarrollar un reconocido universo alrededor de su videojuego original y al momento cuentan con versiones para móviles, consolas e incluso para Linux.

Canabalt

Canabalt crea una atmósfera de misterio y acción con ingredientes sencillos

Este original videojuego desarrollado en 2009 por Adam Saltsman seguramente se puede considerar como un clásico de los videojuegos WEB, con el tiempo este videojuego ha tenido varias re implementaciones a otros diferentes formatos. 

Canabalt representa los orígenes de la tendencia de los llamador “runners” o juegos de carrera infinita que por un tiempo dominaron internet y que tuvieron incluso adaptaciones en 3D. Sin embargo Canabalt era precisamente especial porque su implementación era relativamente sencilla y perfectamente ejecutada en gráficos muy sencillos en 2D que imitan en cierta forma la gracia de otro tipo de videojuegos clásicos como Prince of Persia o Karateka. 

Es interesante conocer que el código del motor del juego que desarrollaron para este proyecto fue publicado bajo una licencia de tipo MIT, es decir puede ser utilizada gratuitamente por cualquier persona que requiera imitar la jugabilidad de un tipo de juego basado en Canabalt. 

Flappy Bird

Flappy Bird apuesta por el reto como principal elemento de diseño

Ciertos elementos de éxito involucrados en el caso de este videojuego pueden considerarse como un  factor entre varios videojuegos “indie” o independientes. 

Este videojuego desarrollado por un vietnamita llamado Dong Nguyen presenta una jugabilidad y mecánicas de juego muy sencillas, retadoras y divertidas y su salto a la fama representa una seria demostración del poder de la viralización. 

Se dice que el desarrollador de este famoso videojuego pudo llegar a tener ganancias de cerca de 90.000 USD en el año que el videojuego estuvo activo. Extrañamente el desarrollador decidió retirar el videojuego argumentando que generaba demasiada adicción a muchas personas que pudieron jugar la versión original. 

Muchos otros títulos parecidos han salido a la luz desde entonces para tratar de imitar el éxito del videojuego original. 

Publicado el Deja un comentario

Phaser 3: Cómo mejorar el control de colisiones con un tilemap

Me encuentro en medio del desarrollo de un videojuego de plataformas utilizando Phaser 3, y para construir el nivel lo hago con la ayuda de TILEMAPS. El personaje principal tiene la habilidad de saltar y ejecutar un «Power drop» es decir caer con mas velocidad. Al momento de realizar este movimiento el personaje logra atravesar el suelo que esta determinado por mi tilemap a pesar de que las colisiones están correctamente implementadas. ¿Cómo arreglar esto?

En mi caso la solución fue mixta:

  • Verificar que las animaciones sean del mismo tamaño
  • Incrementar el tamaño de la variable de configuración TILE_BIAS sea la adecuada

Verificar que las animaciones sean del mismo tamaño

Las animaciones que utiliza el personaje en mi caso las estoy desarrollando con Adobe Animate, y el primer problema es el llamado «clipping de animaciones»:

El clipping de la animación se produce al momento que se requiere cambiar rápidamente de animación por ejemplo cuando tienes una animación para «caer» y otra para aterrizar o simplemente «idle» o estática para caminar y las animaciones no tienen el mismo alto:

Como la animación de caer, es ligeramente mas alta que la animación idle, entonces el BODY correspondiente a caer puede traspasar por unos momentos el TILE correspondiente al piso, y como ya lo atravesó Phaser simplemente prefiere pasar todos los TILES hasta llegar a una nueva superficie.

Como la animación de caer es mas alta que la animación o el estado «idle» del personaje, algunas veces logra traspasar el piso o el tile. Esto puede ocurrir también con paredes.

Para corregir esto es preferible hacer que todas las animaciones del personaje sean del mismo ancho y alto, esto corregirá en gran medida el problema de «clipping» que puedan tener ciertas animaciones. Esta solución no solo ayudará a las colisiones con tiles sino también a animaciones con otros objetos de tipo Arcada.physics

Incrementar el tamaño de la variable de configuración TILE_BIAS sea la adecuada

Esta solución es súper sencilla UNA VEZ QUE LA ENCUENTRAS. Pasé mucho tiempo preguntándome porque Phaser tenía este problema y no daba con una solución sencilla al problema de que mi personaje principal traspase paredes o pisos cuando aceleraba o tenía una caída ligeramente rápida.

Muchas de las soluciones que existen en la desorganizada información de ayuda que tiene Phaser o en los foros simplemente se limitaba a explicar como debe implementarse la colisión entre objetos y tiles, pero no explicaban bien la solución a mi problema.

Cuando en un momento de desesperación pensaba crear una especie de «sensores» que detecten la proximidad contra el suelo y hagan algo mágico evitando que el personaje de mi videojuego atraviese el piso, encontré en un foro rebuscado de Phaser la solución a mi problemática.

La adición de la siguiente línea de código en mi método create prácticamente solucionó el traspaso de paredes y pisos en mi videojuego:


create(){

    physics.world.TILE_BIAS = 40;

}

El número que se coloque seguramente tendrá que pasar una serie de pruebas hasta dar con el adecuado, en mi caso 40 parece funcionar bastante bien y no permite que el personaje atraviese de forma anormal las paredes o los pisos de mi juego de plataformas. Sim embargo se debe tomar en cuenta que esta solución no es perfecta ya que ha casos como cuando otro objeto empuja o aplica una fuerza a otro al borde de una pared entonces es posible que se produzca un clipping indeseado. En todo caso esta clase de problemas se da hasta en los mejores engines de la industria ya sea Unity o Unreal.

También encontré que esta variable puede definirse directamente en los datos de configuración del juego, si alguien lo ha hecho de esta forma, agradecería mucho si me puede extender el ejemplo para tenerlo en cuenta.

Bitácora fuera¡

Publicado el Deja un comentario

Nuevos video tutoriales de programación con Phaser

Ponemos a disposición de nuestros amigos, los primeros cuatro videos de una serie de tutoriales planificados para aprender a programar videojuegos web con Phaser. Los videos muestran una visión global de lo que es Phaser y explican rápidamente como se desarrollan videjouegos o aplicaciones interactivas para web con esta tecnología. 🤓

Esperamos sean de su agrado

Publicado el Deja un comentario

Santa Deliver

Nos complace presentar un pequeño proyecto en el que Weveana estuvo trabajando últimamente como parte de una serie de tutoriales que estamos planeando hacer, este proyecto está lejos de ser perfecto pero su objetivo es su simpleza y su diseño espartano en el que podremos dar rienda suelta a nuestras capacidades didácticas explicando las funciones básicas que tiene Phaser y Phaser Editor para desarrollar videojuegos HTML5.

Para darle un pequeño contexto, el videojuego se centra en la vieja rivalidad de Santa Claus vs El Crampus, mismos que han sido representados en pequeños personajes de estilo sencillo y atractivo.

Santa Deliver demo

PRUEBA LA DEMO DEL JUEGO AQUÍ

Publicado el Deja un comentario

Desarrollo de la idea y creación de personajes para juegos HTML5

La idea de un videojuego puede venir de cualquier parte, la creatividad depende mucho del diseñador y su capacidad de correlacionar ideas y conceptos. Además como se adelantó en la Introducción de esta serie de entradas, esta idea debe enfocarse en dar una solución tomando en cuenta los elementos con los que se debe diseñar.

Para este curso se ha identificado un concepto global que servirá de base para generar un pequeño videojuego que explique todas el proceso de desarrollo de un videojuego casual HTML5 para su uso en dispositivos móviles y web browsers.

Identificar el alcance de la idea

Este es uno de los puntos principales en los que desarrolladores novatos pueden dimensional incorrectamente el alcance del videojuego. Debido a una serie de factores, un desarrollador puede enfocar el desarrollo de un videojuego sin tomar en cuenta factores como el tiempo de desarrollo, el desconocimiento del lenguaje de programación, el esfuerzo requerido en la elaboración de los artes y concepción general del videojuego.

Para evitar caer en un desarrollo insostenible y por lo tanto un proyecto que puede resultar desalentador, el diseñador de videojuegos debe tener en cuenta y plantearse cuales son las habilidades y herramientas con las que cuenta para desarrollar y definir la idea en mente.

Tener un concepto permite encasillar la idea y ser consciente de las habilidades y herramientas que se posee permite visualizar el diseño y el tiempo de desarrollo y los recursos necesarios para llevar a cabo una idea.

En esta serie de tutoriales nos hemos planteado la misión de diseñar y desarrollar un videojuego que tenga que ver con los conceptos de Navidad y Santa Claus.

Esta simple definición ya delimita el accionar del diseñador y recorta en gran medida el alcance del videojuego. El tiempo de desarrollo por lo tanto deberá reducirse a exageradamente un par de meses para que salga antes de diciembre, por lo que las consideraciones que se hagan frente al desarrollo deben estar limitadas por estas variantes de tiempo y concepto.

Para delimitar más la idea, se puede elaborar un pequeño listado que ayude visualizar las variantes de diseño como el que se presenta a continuación:

  • El juego es navideño y el personaje será Santa Claus
  • El juego deberá ser simple, rápido y adictivo
  • El juego deberá funcionar en móviles y en desktops

Conceptualización y bocetos, el GDD de los juegos html5 (GAME DESIGN DOCUMENT)

A partir de las ideas iniciales y las consideraciones de diseño, empezamos a bocetar en un papel, las soluciones que puede tener el videojuego, para ejemplificar dejo dos imágenes de las posibles soluciones que encontré al problema de diseño con las características de ser un juego simple, rápido y adictivo.

En esta etapa es posible que las mecánicas de juego, es decir cómo se va a jugar, cuáles son los controles y cómo van a funcionar no son muy claras. Para el ejemplo, lo que se ha definido es que el juego está destinado a un formato vertical para fácil uso en teléfonos móviles.

Por lo tanto los controle estarán supeditados a movimientos con los dedos en la pantalla. Así que la idea será posiblemente hacer que el personaje se desplace de izquierda a derecha y con movimientos para abajo dispare.

En esta etapa se puede detallar incluso más a fondo las mecánicas de juego bocetando los enemigos, y los personajes principales.

En el ejemplo al ser un juego navideño y tener a Santa Claus como personajes principal ayudó en gran medida que clase de videojuego tendría que ser.

Boceto del videojuego

Creación del personaje

Los personajes en videojuegos conforman una parte esencial en la inmersión que este tipo de desarrollos tienen como característica principal.

Aunque no todos los juegos tienen un personaje principal, el desarrollo de un buen personaje puede incrementar en gran medida el atractivo de un videojuego.

En el ejemplo se pensó en el diseño de un pequeño Santa Claus que pueda moverse por la pantalla y a la vez no interferir en gran medida con los aspectos artísticos de la programación.

Es trabajo del diseñador pensar en un estilo artístico adecuado que se adapte a las necesidades técnicas como la resolución de pantalla o jugabilidad, formato o tipo de juego.

Adicionalmente en este apartado puede intervenir fuertemente la subjetividad y habilidad de cada diseñador, es donde la creatividad y estilo se hacen presentes.

Para el ejemplo hice uso de un estilo conocido como Kawaii, termina siendo una preferencia personal que he desarrollado en los últimos meses y marca el estilo general del juego.

El boceto se lo debe digitaliza y re dibujar en un programa de ilustración ya sea vectorial o raster como Illustrador y Photoshop o cualquiera de sus alternativas en el mundo de uso libre.

Se debe tener en cuenta que el personaje posiblemente tenga que pasar a una etapa de animación y las funcionalidad que debe cumplir en el videojuego como lanzar misiles o saltar, etc.

El enemigo también tendrá que ser diseñado
El personaje escogido entre varios bocetos
El personaje pasado a ilustración vectorial en una primera etapa
El personaje finalizado

Diseño del Nivel o Escenario de juego

El escenario de juego es muy importante ya que es el espacio donde ocurrirá todas las acciones entre el personaje y su entorno y por ende las interacciones entre el videojuego y el jugador.

El escenario permite contar una historia sin palabras y transmitir las emociones que se requieren al jugador.

Un escenario oscuro posiblemente sirva para transmitir misterio, mientras que un escenario con colores claros puede servir para juegos más relajados.

Hay autores que incluso aplican las teorías arquitectónicas del espacio, luz y color para la construcción de escenarios de videojuegos.

Si bien los videojuegos casuales para Web desarrollados en HTML5 suelen ser desarrollos relativamente sencillos de poner en marcha, también pueden hacer uso de reglas básicas de diseño como la composición o la psicología del color.

En el ejemplo, el boceto final del nivel permite al desarrollador orientarse claramente en las mecánicas que tendrá el juego, si bien este concepto puede cambiar drásticamente a futuro debido a que la puesta en práctica de lo planteado puede o no satisfacer las necesidades de diseño.

En el caso de que estas necesidades de diseño no sean las adecuadas se puede replantear en la fase de prototipo del videojuego.

Boceto de juego terminado
Publicado el Deja un comentario

Cómo Diseñar y Desarrollar Videojuegos HTML5

Introducción:

En Weveana amamos los videojuegos, en especial los juegos HTML5 o juegos web.
En esta serie de entradas de blog, nos hemos dispuesto a brindar una revisión general de como se diseña y desarrolla esta clase de videojuegos para que aquellas personas interesadas en aprender o tener una idea general acerca de este tema puedan entender como funcionan y cuales son los requerimientos para empezar a desarrollar videojuegos para web.

Requisitos

  • Una hoja de papel y un lápiz
  • Un programa de diseño vectorial o raster como Ilustrador o Photoshop
  • Entendimiento generalizado de programación
  • Mucha creatividad
Los personajes conforman parte de la llamada «inmersión» que los videojuegos tienen frente a otros medios
La creación de personajes es muy importante en el desarrollo de videojuegos

Desarrollar videojuegos constituye una tarea multidiciplinaria que puede ser abrumante al principio por no tener una idea clara de donde empezar.

Esta serie de entradas explicaran el desarrollo de videojuegos HTML5 desde una perspectiva general explicando los conceptos que se deben tener en cuenta al momento de desarrollar un videojuego casual para la web o redes sociales, también se verán detalles técnicos que pueden ayudar a la persona interesada a desarrollar sus propios videojuegos utilizando herramientas de fácil alcance y que permiten obtener resultados relativamente rápidos.

El diseño de videojuegos al ser una tarea multidisiplinaria se constituye como parte del Diseño Multimedia y requiere de un diseñador de videojuegos que tenga ciertas aptitudes profesionales tanto para el lado lado artístico comunicacional como para el lado de desarrollo como programador.

Desde los videojuegos más sencillos, hasta los más complejos, el diseñador de videojuegos está en la capacidad de conceptualizar y producir inicialmente prototipos que permitan tener un entendimiento específico acerca de las mecánicas involucradas en un videojuego dado.

Objetivos del Curso

En la presente serie de entradas, voy a desarrollar paso a paso un videojuego muy simple, mientras muestro conceptos generales y necesarios para entender claramente los detalles involucrados en el diseño y desarrollo de los videojuegos HTML5.

Weveana

¿Por dónde empezar?

Como todas las cosas en el mundo del diseño y específicamente en el diseño de videojuegos, se deberá empezar con una idea.

Para el caso de un videojuego las ideas pueden venir de cualquier parte, sin embargo se debe tomar en cuenta que el diseño tiene la particularidad, a diferencia de lo artístico, que siempre se debe trabajar con límitantes o características impuestas por influencias externas.

Como ejemplo de lo anterior, se puede tomar el trabajo de un diseñador industrial quien tiene que trabajar con las limitantes impuestas por los materiales, o un diseñador de interiores que debe siempre tener en cuenta el espacio y el presupuesto.

Por lo tanto para diseñar y desarrollar videojuegos HTML5 se debe tener en cuenta los factores que pueden limitar a la tecnología como el tamaño de las pantallas, si el videojuego tendrá una orientación horizontal o vertical o el propio lenguaje de programación que se utilice.

Para HTML5 el lenguaje que se utiliza para programar es normalmente JS (Java Script) , no se debe confundir este lenguaje con JAVA, los cuales son solo similares en el nombre.

La principal ventaja de utilizar JS como lenguaje de programación para juegos HTML5 es la interpretación directa que ofrecen los exploradores modernos para este lenguaje sin necesidad de compilación previa, además que en la actualidad su estabilidad y compatibilidad es bastante universal y prácticamente se pueden obtener los mismos resultados para cualquier explorador de internet moderno, incluso en dispositivos móviles.

Java Script se ha convertido en un leguaje robusto y moderno, con un amplio abanico de frameworks e IDEs que respaldan su fácil desarrollo y puede acomodarse fácilmente a las necesidades de programadores nuevos como profesionales.

Publicado el Deja un comentario

Como NO programar un juego multijugador HTML5

A continuación presento un proyecto en el que estuve trabajando, que en papel es súper interesante debido a la implementación multijugador entre Phaser y Croquet.IO, sin embargo he llegado a constatar ciertas características que debo tomar en cuenta antes de continuar con el desarrollo de un juego como el planteado.

Se trata de un juego tipo PACMAN, AGAR.io, Bomberman, una mezcla de jugabilidad que pensaba podía implementar fácilmente utilizando la tecnología Croquet.IO.

El prototipo funciona bastante bien hasta donde logré desarrollarlo, y se puede apreciar las bondades de utilizar Croquet como marco de desarrollo para juegos multijugador.

Sin embargo tuve que detener el proyecto al constatar que la forma en la que estaba implementando ciertas características de los juegos multijugador es incorrecta.

El prototipo tiene el problema que al momento remite la información en tiempo real de todos los jugadores conectados pero no hace ningún cálculo en el servidor de predicción, lo que provoca desfases al actualizar la posición de cada jugador en los diferentes clientes conectados. Es un típico problema de programación de juegos multijugador en los que normalmente se deja al servidor predecir la posición de todos los jugadores conectados, sin embargo por ser algo nuevo en este tipo de desarrollos decidí ver con mis propios ojos este problema de latencia, y he terminado en un camino que todavía debo descifrar frente a la programación de videojuegos multijugador.

Se puede apreciar dos jugadores conectados al mismo tiempo

¿Qué hace al momento este videojuego?

Este pequeño desarrollo hasta el momento es capaz de administrar las conexiones en un canal determinado randómico que puede ser compartido para jugar con quien se requiera para probarlo. Si se habilita la consola de desarrollo del navegador web se podrá ver algo de esta implementación en práctica, para probarlo a manera de multijugador, en la pantalla de inicio se debe escoger «play with friends»

El sistema genera un cuarto aleatoreo

El sistema genera un ID para jugar y un URL que se debe compartir con las personas a jugar. El sistema registra los usuarios e internamente crea una instancia de juego en por cada jugador conectado, esto es parte de la tecnología Croquet, que como ventaja principal frente a las implementaciones tradicionales por ejemplo con socket.io, NO SE REQUIERE la implementación de un servidor dedicado que administre las conexiones, sino que con una infraestructura propietaria evita al desarrollador tener que hacer toda la implementación multijugador y simplemente permite enfocarse en el desarrollo del videojuego.

Nótese la conjunción entre Croquet y Phaser

Para ver el videojuego y probar la implementación con Croquet.IO y Phaser puedes dar click en el siguiente enlace:

CLICK PARA IR AL PROYECTO

Publicado el Deja un comentario

Damos la bienvenida a CITY HERO

Nuestro más reciente juego acaba de ver la luz y está disponible para los juegos de Facebook, puedes invitar a tus amigos a formar parte de la «Resistencia» contra los alienígenas robapájaros que invaden la Tierra. Esta adictiva aventura te permite recolectar montones de dinero y comprar mejoras para poder derrotar a los jefes finales.

Esperamos que este nuevo lanzamiento sea del agrado de muchos y en Weveana continuaremos diseñando y desarrollando más y mejores videojuegos HTML5 🙂

Puedes acceder al juego con el enlace de la siguiente imagen:

Publicado el Deja un comentario

Cómo usar node http server con Phaser

En la búsqueda de actualizarnos a tiempos modernos y dejar el clásico XAMPP de lado por la versatilidad que ofrece NODE, he llegado a encontrar una fácil solución que puede servir para los desarrolladores de Phaser al momento de levantar un servidor http para poder visualizar los videojuegos en un browser.

Paso 1: Instalar NODE

El primer paso es instalar el entorno NODE en el computador. Este paso en caso de que sea una instalación limpia no requiere mayor esfuerzo y se puede hacer mediante línea de comnados en Linux o Mac, o simplemente descargando el archivo de instalación para PC.

Recomiendo acceder a la página oficial de NODE.js para consultar directamente el procedimiento detallado.

Paso 2: Instalar Globalmente el módulo HttpServer de NODE

Una vez que la instalación de NODE fue exitosa procedemos a instalar el módulo de HttpServer de node que servirá de reemplazo de XAMPP con APACHE para poder ejecutar los videojuegos de PHASER.

Para realizar este paso, simplemente ejecutamos en una ventana de línea de comando (Terminal en MAC ó CMD en Windows) el siguiente código:

npm install -g http-server

Recuerda, es diferente instalar el servidor de manera local, directamente en la carpeta del proyecto, a instalarlo de manera global, para poder ejecutarlo con cualquier proyecto en el momento que se requiera.

Para las personas que desarrollan videojuegos en Phaser y dependiendo el caso, encontramos muy útil la función de ejecutar el NODE Http-Server de manera global, ya que de esta forma, mediante Terminal o Línea de comando de Windows se accede a la carpeta de desarrollo del juego y se ejecuta el servidor.

Paso 3: Ejecutar el Http-Server

Para ejecutar el servidor se debe acceder mediante línea de comando a la carpeta donde se encuentra la instalación de Phaser o los archivos del videojuego en desarrollo y ejecutar el siguiente comando:

http-server

También se puede utilizar la versión corta y sólo ingresar «hs» sin las comillas.

Listo, con esos tres simples paso se debe acceder a un explorador de Internet y si todas las opciones se encuentran en «predeterminado» se puede acceder a la dirección localhost:8080

Esta dirección mostrará lo que se tenga albergado en la carpeta donde se lanzó el servidor que en nuestro caso debe ser el juego de Phaser

Y si quiero ejecutar un servidor HTTPS?

Para ejecutar el servidor HTTPS o SSL se deben seguir un par de pasos adicionales

Cómo ejecutar mi juego con servidor HTTPS

Una vez instalado el servidor http, para ejecutarlo en modo Https se debe tomar en cuenta que este tipo de servidor requiere dos tipos de archivos de claves que se deben generar para poder acceder al servicio.

Para generar estos archivos de clave lo más sencillo es hacerlo en una MAC o en un LINUX que tienen instalado de antemano el llamado openssl, un comando que te permite generar estas claves de manera fácil, sin embargo si te encuentras en windows lo más fácil y recomendable será instalar PUTTY Keygen

En caso de utilizar línea de comando con MAC o Linux, se deben ingresar los siguientes códigos y seguir las instrucciones que aparecen en pantalla:

 openssl req -newkey rsa:2048 -new -nodes -keyout key.pem -out csr.pem

Este comando creará dos archivos, key.pem y csr.pem, como la idea es tener un servidor para desarrollo con https habilitado procedemos a AUTO firmar nuestro archivo csr.pem, sin embargo en caso de que se necesite habilitar un servidor HTTPS validado se debe enviar este archivo a un proveedor de certificados autorizado como goddady ó ssls.

Procedemos a firmar nuestro archivo de claves con el siguiente código de comando:

 openssl req -newkey rsa:2048 -new -nodes -x509 -days 36500 -keyout key.pem -out cert.pem

Finalmente, debemos tener en cuenta dónde se encuentran guardados estos archivos respecto a la carpeta de nuestro juego de Phaser ya que mediante línea de comando se debe levantar el servidor HTTPS apuntándolos de la siguiente manera:

http-server ./ -S -C cert.pem -K key.pem

El ./ indica que el server https ejecutará los archivos de la carpeta raíz donde me encuentre, si le indico por ejemplo /webcontent en lugar de ./ u otra carpeta dentro, pues el server ejecuta los archivos de dicha carpeta a partir de la raíz.

Por último se debe tomar en cuenta que los archivos de claves también pueden ser relativos y pueden estar dentro o fuera de la carpeta del proyecto, sin embargo para los juegos de Phaser es recomendable que estos archivos estén fuera y que inclusive el server se lo lance en un directorio superior para no tener que mezclar archivos de server con los archivos de del proyecto.