Competicion Js13k

Hoy empieza el Js13k una competición para desarrollar juegos con Javascript pero esa no es la parte interesante sino que solo tienes un limite de 13kb para todo los componentes de tu juego.

El creador es Andrzej Mazur  un programador y desarrollador de juegos Html5 entre sus projectos se encuentra su estudio Enclave Games y GameDev un boletin informativo semanal sobre todo lo que rodea al desarrollo de juegos Html5 la verdad es excelente.

Como crear Vida y puntaje en Phaser "Invader Reborn"

En este ocasion vamos agregar los últimos detalles para nuestra versión del Space Invaders como es de esperar cada vez que seamos impactados nuestra vida sera reducida, si logramos dar en el objetivo(Aliens) estos serán destruidos.

Entonces solo necesitamos activar la colision entre ambos objetos cuya reaccion seria en caso de el heroe una vida menos, para los Aliens seria su fin y ademas nuestro puntaje seria aumentado. 

Como hacer al Enemigo "Space Invaders con Phaser".

La llegada del enemigo es inminente pero ya nuestro heroe esta mas que preparado para recibirlos, en esta ocasion veremos como crear al enemigo al finalizar estas naves van a estar en capacidad de moverse y de disparar.

Nuestros enemigos tiene la capacidad de moverse de un lado a otro tal como lo hace nuestra nave con una caracteristica y es que a medida que completan el ciclo estos descienden ademas que en cada movimiento nos van disparando sin compasion. 

Su opinion es fundamental.

Esta vez no vengo hablar de Phaser , leyendo sus preguntas y dudas acerca de Javascript quiero preguntar que les parece si creo un tutorial de Javascript, lo que quiero saber es  que tan basico debe ser, tengo claro que no todos son unos expertos en javascript pero si quisiera saber su nivel, hacia donde quieren que este enfocado, es decir me puedo dedicar a explicar un javascript orientado a nuestro juegos y Phaser, las estructura que vamos a usar  y como funciona pero para los que no esten tan familiarizado con lo mas basico se pueden perder mas bien se van a perder.

Estados en Phaser

Otras de las caracteristicas muy utiles de Phaser son los Estados, las funciones que usamos comunmente (Preload,Create,Update) no es mas que estados si has estudiado notaras cuando se termina el estado Preload inmediatamente cambia al estado Create y asi sucesivamente hasta que ya no quede ningun estado pendiente. 

Como ganar dinero con videojuegos.

Mucho de nosotros quizas empezamos a hacer videojuegos por pasion, pasatiempo ,un sueño o anhelo desde niño pero a medida que entras en este mundo y haces tus primeras incursiones la situacion ya empieza a cambiar, te enteras de lo que representa hacer un videojuego, que puede pasar de ser un hobbie a un estilo de vida, que se puede ganar dinero y vivir de eso.

Crear particulas con Phaser

Seguimos conociendo a nuestro amigo Phaser, en juegos donde hay disparos , destrucción véase Angry Birds, etc. Cuando se produce un contacto entre dos objetos vemos generarse un monton de partículas ya sea de humo , piedras, luces y esto da un efecto muy cool, en esta oportunidad aprenderemos a crear un efecto similar.

Empezemos:

Agarrando nuestros objetos en Phaser.

En html5 podemos hacer lo que conocemos como hacer drag, que consiste en agarrar a nuestro sprite con el puntero del mouse o en smartphones mediante un evento touch y phaser lo realiza de una forma muy sencilla. Cuando aprendimos a agregar eventos del mouse conocimos propiedades importantes sobre los eventos del mouse y como hacer que nuestro sprite los reconozca, en esta ocasión solo con un nuevo método podemos lograr el objetivo de este tutorial.

Empezemos:

Agregar un sprite a un grupo en Phaser.

En la anterior entrada vimos como agregar varias imágenes, pero en nuestros juegos en html5 tener muchos objetos que ya no se estén usando sin control alguno puede traernos problemas de performance, para eso necesitamos mas control sobre los objetos que agregamos en pantalla.Esto normalmente lo hacemos creando un array donde meteríamos objetos a eliminar , estos serian aquellos que ya no estén visible en pantalla o sean destruidos y asi poder controlar el uso de recursos.
 En phaser esto lo hacemos creando grupos , Phaser.Group es una de la partes mas importante del nucleo de este framework, y gracias a esto podemos hacer un uso adecuado de nuestros sprites si necesitamos reciclar objetos, un grupo es lo que necesitamos pero de eso hablare en próximas entradas. Por ahora veamos como crear un grupo y agregar cosas a el.

Agregando eventos del mouse en Phaser

En este tutorial aprenderemos a agregar eventos del mouse en phaser y comprobaremos una vez mas lo sencillo que nos hace todo, para esto aplicaremos conceptos vistos y conoceremos unos nuevos. Declaramos tres variables: 
Bloque: nuestra imagen.
Texto:la string que agregaremos.
Contador: Inicializada en cero,será actualizada cada vez que se presione click.
A todas nuestras imágenes podemos activarles unas serie de eventos, en esta oportunidad será un evento del mouse que se activara cuando hagamos click sobre ella, entonces veamos el código:

bloque = game.add.image(game.world.centerX, game.world.centerY,"_bonus");
bloque.anchor.set(0.5);
bloque.inputEnabled = true; 
bloque.events.onInputDown.add(actualiza, this);
texto=game.add.text(game.world.centerX, game.world.centerY-100,contador+'',
{ fill:'#ccffcc'});  

Agregando imagenes y efectos en Phaser.

Despues de haber terminado nuestro primer juego html5 con phaser aprendimos lo básico para empezar pero probablemente en nuestro juego queremos agregar imágenes, efectos y eso es lo que vamos a aprender en esta ocasión.

Todo lo que utilizaremos en este tutorial son imágenes básicas que hice en Inkscape

recuerda iniciar Wamp Sever y probarlo localmente, presiona click derecho seleccionas "guardar como" abrimos  el script en nuestro editor de texto y estamos listos.

Trabajar con imágenes en Phaser es muy sencillo, antes de agregar una imagen necesitamos cargarla y para esto tenemos la función Preload  el cual es el lugar indicado para hacerlo, a continuación tenemos: 

function preload () {
game.load.image("fondo","fondo.png");
game.load.image("edificios","edificios.png");
};

Juego con Html5 y Phaser "Archaic Roll"

Este es mi videojuego creado con el framework Phaser insipirado por el juego llamado Rapid Roll.

Como hacer un juego con Phaser "El Codigo"

En la entrada anterior mi primer juego en html5 "holamundo" mostre el resultado de lo que conseguiremos, para ver el codigo solo es cuestión de presionar click izquierdo y seleccionar "ver codigo fuente de la pagina", puedes seleccionar esto y abrir tu editor de preferencia en mi caso notepad ++, crear un nuevo documento , pegar el codigo y guardarlo con extensión .html. 

Esto es algo básico una  estructura en html con sus etiquetas básicas <html>,<head>,<body>,<script> dentro de la etiqueta <head> tenemos la etiqueta <meta> donde colocamos el tipo de codificación para nuestro documento, un ejemplo rápido para demostrar para que sirve esto si presionas ctrl+mayus+j en el navegador se desplegara la consola de javascript aqui puedes la versión de Phaser y algunos corazones intenta quitar esta línea y nota que pasa, también tenemos la etiqueta <title> como lo indica es el titulo que tendrá nuestra pagina esta aparece en la parte superior de la pestaña de nuestro navegador, la etiqueta <script> con su atributo src aquí especificamos la ruta de nuestro archivo minificado que esta en la misma carpeta junto a nuestro archivo Html.

         Como hacer un juego en Html5 con              Phaser "Hola Mundo"

Configurado el servidor viene el siguiente paso, si no tienes mucha experiencia con Html5 ni haciendo juegos no te preocupes phaser nos hace la vida muy fácil en ese sentido, solo es cuestión de aprender cómo funciona sus componentes más básicos y tener algo de conocimiento sobre que es javascript, ya después entraremos en temas más específicos y complejos pero lo más importante es tener bien claro los conceptos esenciales.

Como es tradición en programación nuestra primera incursión será hacer el muy conocido “Hola Mundo”, lo primero que necesitamos es entrar en la página oficial de phaser y procedemos a descargar la última versión del framework, obtendremos un archivo llamada phaser-master lo descomprimimos, y estaríamos aquí 

                         Configurando WampServer

Antes de comenzar con phaser nos hace falta cierto pasos, primero necesitamos un servidor local para poder probar nuestros juegos, para eso descargamos un programa llamado Wamp este es el que yo uso pero existen muchos mas ,a continuación lo descargamos e instalamos damos si a todo, aparece un ventana de búsqueda preguntado acerca del navegador que deseas usar solo presionas cancelar y listo, para configurar nuestro espacio de trabajo iniciamos el programa nos aparece un logo en la barra de tareas, presionamos click izquierdo sobre el se despliega unas opciones y escogemos tal como se muestra a continuación:

                             Un Framework llamado Phaser

Cuando empiezas a conocer Html5 y su canvas, a medida que aprendes cosas mas avanzadas notas que el código es mas complejo y algo repetitivo, es aquí donde entra a jugar un framework que nos haga la vida mas fácil y nos permita concentrarnos en cosas mas concretas.

Despues de recorrer muchos framework me tope con uno aproximadamente hace un año, me refiero a Phaser es todo lo que estaba buscando, divertido para programar, intuitivo, una gran comunidad de respaldo, muchos ejemplos, multiplataforma, rápido para renderizar y sobre todo gratis. Si aun no lo has probado te invito que le des una oportunidad te aseguro que es uno de los mejores que hay, fue el que escogí para hacer mis juegos y del cual hablare y escribiré tutoriales en próximos entradas.

Como crear un videojuego

Como hacer un Videojuego ¿ Por donde Empezar ?

  Una pregunta difícil y la cual tiene una respuesta muy relativa, lo que te puedo decir es como inicie, siempre me gusto todo sobre la programación obviamente orientada hacia los videojuegos, pero nunca había entrado de lleno en esto como muchas personas no sabia donde empezar y por tal motivo leí todo libro que encontré,pase por videojuegos en 3d, por naturaleza programar un juego es complejo y en 3d aun mas, como resultado siendo muy joven al querer todo rápido y fácil esto me trajo un poco de frustración, pero si hay que tener en esto y  como todo en la vida es perseverancia entonces pues opte por los juegos en 2d, al llegar aquí vienes con una idea algo vaga sobre los videojuegos pero al comenzar a investigar bien a fondo te enteras de todo lo que implica, hacer de programador,diseñador, marketing, sonido, etc.

El Renacer

   Después de mucho tiempo de haber dejado un poco de lado la programación y todo esto, vuelvo a  retomarlo en gran medida porque ahora tengo mas tiempo libre para experimentar y jugar con esta tecnología, Html5 representa una gran oportunidad para personas expertas y las que se quieran iniciar en cierta medida en la producción de videojuegos,no diré que el camino es fácil aunque tampoco seria emocionante si fuera así pero la emoción y la satisfacción que se siente el poder ver terminada aquella idea que surgía de nuestra cabezas, siento y creo que es la recompensa, claro pero me preguntaras, y el dinero?, como se si el juego será exitoso?, etc. Compartiré contigo una frase que siempre me repito cuando estos pensamientos vienen a mi mente dicha por el maestro y creador de Mario Shigeru Miyamoto.

"Para realizar un idea de éxito se necesita la inspiración y la inspiración solo llega si realmente te gusta lo que haces sin pensar si ello será un éxito o no".

 Así empezara y te lo digo con seguridad un emocionante viaje por este mundo.