Phaser 2014

Es increible lo rapido que se ha pasado el tiempo , desde cuando comenze el blog alla en los primeros meses del año y mirar que este ya ha llegado a su fin.

La verdad esto fue muy divertido e inriquecedor , poder compartir conocimiento, aficiones etc..,con tantas personas fue genial , muchas gracias a todas las personas que me escribieron que se comunicaban conmigo, a todos los que leen este blog, ya que son los pilares para continuar con todo esto.

                    Minijuego en Phaser

En esta oportunidad vengo con algo que habia estado pensando y que finalmente hice, un pequeño ejemplo de un juego que quiero hacer con un estilo muy conocido pero no por eso aburrido.

Como usar Plugins en Phaser

Este framework no es uno de los mejores solo por su creador y su gran funcionamiento , sino tambien por la enorme comunidad que posee.

Gracias a esto los aportes al momento de encontrar bug, fallas ha sido mas facil y el constante mejoramiento se ha visto enormemente a pesar del poco tiempo que fue lanzado. 

Como Colisionar Particulas en Phaser 

En esta ocasion veamos como colisionar particulas usando fisica y creando una reaccion despues de dicha colision. 

Las particulas en Phaser heredan propiedades y metodos de la clase Sprite asi que podemos acceder a metodos del sistema de fisica directamente. 

Como hacer colisiones y rebotes con Phaser 

Despues de una temporada muy enfermo vamos a ver un poco mas el uso de la fisica en Phaser en el tutorial fisica hize una explicacion sobre como funciona el sistema de fisicas de este framework, ahora veamos cosas divertidas y utiles.

 Lo que vamos a hacer es accelerar una pelota en todas las direcciones y que esta colisione con todos los bordes y con cualquier otro objeto asi de simple. 

Como crear eventos de tiempo en Phaser

 

En esta ocasion vamos a crear uno de lo eventos mas basicos que podemos usar con este framework con respecto al tiempo, muy util al momento de agregar objetos cada cierto tiempo.

Como hacer música para videojuegos

Una de los componentes mas importantes en un videojuego sin duda es la música, esto comprende efectos(Fx,golpes,saltos),música de fondo,etc. Esto puede ayudar que un videojuego llegue a otro nivel, que cada nivel quede grabado en nuestras mentes o por el contrario puede arruinar un buen videojuego simplemente por un mala elección de sonido. 

                      Resultados del Js13k

Ya hace tiempo que salieron los resultados de este concurso y si estoy bastante atrasado en la publicación pero vengo renovado y con ideas muy innovadoras ;). 

La mala noticia no logre terminar nada solo me quede con la idea, aunque pueda que la use para un juego comercial, la buena noticia es que ya tengo terminado mi ultimo juego el cual en su momento estaré mostrando por aquí. 

Este año hubieron sorpresas destronaron a Jack Rugile del primer lugar como resultado nuevos ganadores, aunque no era para menos ya que el ganador de la competencia hizo muy bien su trabajo. 

Descargue cada juego y asi probarlos en local con wamp, algunos con un codigo interesante ya que en 13kb hay que hacer maravillas.

                 Acelerar objetos en Phaser

Despues de un tiempo sin ningun tutorial de phaser volvemos a la carga y no crean que me habia olvidado de el, con respecto al js13k aun no tengo ningun prototipo pero creo que en dos semanas lo puedo hacer y publicar, tambien quiero publicar algunos reportes de mi juego, como va el mercado entre otras cosas ya veremos.

Una de las partes mas complejas de phaser ya las hemos visto asi que si lo asimilaste lo que viene solo sera aplicar conceptos vistos y una gota de creatividad. 

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. 

Como hacer un juego de Naves con Phaser. "El Heroe"

Voy a comenzar esta serie explicando todo lo relacionado con nuestro heroe, despues de terminar este tutorial la nave va estar en capacidad de moverse y de disparar.

 Vamos a necesitar dos objetos nuestra nave y la municion tambien vamos a agregar un fondo para dar un aspecto mas estilizado.

Libro Discover Phaser

Desde hace una semanas salio a la venta el libro sobre Phaser la verdad un buen libro y vas aprender mucho de este framework, posee muchos tips utiles a la hora de crear juegos muy tipicos (scrolling,plataformas).

  Juego Phaser:Invader Reborn

Después de estar un poco ausente estas semanas en gran medida porque estoy estudiando un poco de Armonía(Teoría Musical) para mejorar la composiciones de mis próximos juegos, un poco de Social Marketing,también tengo pendiente el curso javascript pero bueno espero que este tiempo hayan estudiado a Phaser y sin mas pasemos a lo que vinimos.

Fisica en Phaser

En nuestro ultimo paso para entrar de lleno a hacer nuestro juego vamos a aprender fisica gracias a Phaser, aclaro esto no quiere decir que no hay mas cosas para aprender y que explicar para que tengas una nocion Phaser tiene mas de 200 ejemplos oficiales. 

Solo he querido explicar lo que considero basico para abordar un juego ya que en demasiada informacion se produce mucha confusion y claro aprenderemos mas cosas en este mundo nunca vamos a dejar de aprender.

En este framework tenemos tres tipos de fisicas (Arcade,P2,Ninja), nosotros usaremos Arcade en primera medida porque es mas facil de usar sino estas muy familiarizado con sistemas de fisicas claro tiene sus limitaciones por ejemplo el body siempre es un cuadro entonces si agregas una imagen circular igual el cuerpo sera un cuadro. 

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 crear SpriteSheets en Phaser.

Existen muchas forma de pulir nuestros juegos con el fin de darle un acabado muy profesional y atractivo para la vista, hacer animaciones de nuestros objetos ya sea explosiones, saltos,etc. es una de ellas. 

 Para lograrlo en Phaser necesitamos de el programa ShoeBox la cual uso ya que es gratis y muy comoda ya la hemos configurado previamente, ahora solo es cuestion de tomar las imagenes que vamos a usar y crear los archivos necesarios explicado en como usar ShoeBox  .

Como configurar ShoeBox para exportar archivos Json.

En esta ocasión vamos a configurar esta magnifica herramienta llamada ShoeBox la cual ya conocimos, para que se capaz de exportar un archivo json.

Si has jugado un poco con este programa notaras que ya exporta json, si pero ese fomato no nos sirve para usarlo en Phaser.

Como reciclar objetos en Phaser

En el tutorial de grupos vimos como se crea un grupo y para que sirve, en esta oportunidad aprenderemos como utilizarlo para reutilizar esos objetos con el fin de optimizar recursos,esto resulta muy útil debido a que en juegos de disparos en el cual habrá cantidad de balas de las cuales muchas ya no estarán en pantalla pero aun siguen vivas y se siguen creando mas causando un gasto de memoria.

Entonces lo mejor seria detruirlas para luego volver a utilizarlas creando un proceso de reciclaje que se activaría cuando dicha partícula golpee con algo o salga de los limites de nuestro mundo.

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.

Como usar shoeBox para hacer spriteSheet

ShoeBox es una herramienta que nos da una mano en temas de UI(user interface) la interfaz de usuario, sprites, animaciones etc.. Esta herramienta es la que uso para hacer las animaciones , tipos de letras que uso en phaser. Una de las técnicas para optimizar nuestros juegos para que este cargue rápido y mas fluido es tomar nuestras imágenes y agruparlas en una sola a esto se le conoce como spritesheet (tira de imagenes), luego para usarlas es sencillo cada una se encuentra en una posición exacta dentro de una única textura, esto representa una gran ayuda no es lo mismo cargar una animación de 20 imágenes una por una que cargar todas en una sola, lo primero será descargar la aplicacion ShoeBox, debes tener instalado Adobe Air en tu computador, luego iniciamos nuestra aplicación y estaremos aquí:

Usando la camara en Phaser

En los juegos de tipo plataforma por ejemplo el mas grande de todos Mario Bros es normal ver que el mundo se mueve a la par con nuestro héroe esto no es mas que una cámara que lo sigue hacia donde se mueva, en esta oportunidad vamos a ver como se logra hacer esto.

En Phaser todos los objetos viven en un mundo world y para ver estos objetos dentro de este necesitamos una cámara, como sabemos el Stage visto en el tutorial de particulas en Phaser es quien controla nuestro canvas y por defecto nuestro world tiene el mismo tamaño que el stage, pero no esta limitado por este, podemos hacerlo del tamaño que deseamos, teniendo esto claro. 

           Haciendo animaciones con Phaser

 Nuestros juegos siempre debemos pulirlos llevándolos a su máxima expresión, Phaser nos permite hacer animaciones fluidas gracias a algo llamado Tween , muy usado por muchas librerías de juegos ya que permiten efectos muy llamativos. Existen variedad de métodos Easing como me gusta traducir literalmente seria métodos de suavizado pero digamos que son métodos para pulir, esto nos ayuda a definir curvas movimientos autónomos, predefinidos.
 Comenzemos:

Usando el teclado con Phaser.

Ya vimos algo básico sobre eventos del mouse ahora vamos a explorar un poco con nuestro teclado, usaremos las teclas mas comunes me refiero a las direccionales y otras complementarias usadas muy seguido en juegos de plataformas, disparos me refiero a nuestra barra esparceadora.

Información de nuestros objetos en Phaser.

Una de las características de Phaser utiles al momento de desarrollar nuestro proyecto es observar la información sobre los objetos que tenemos en pantalla, esto nos permite saber exactamente tanto la información mas básica hasta la mas avanzada de nuestro sprites,etc.

Pero en que nos puede ayudar?

En todo si estamos utilizando algún sistema de física y en algún momento determinado los cuerpos no colsionan esto nos ayudara a identificar rápidamente el problema, si necesitas ver los limites del sprite, conocer su velocidad, posición ,angulo, son muchas posibilidades.

Graficos gratis para juegos

En nuestros juegos no todo es programación, casi siempre unos buenos graficos le dan mas vida y atención a nuestras creaciones , como no todo las personas son muy buenas en temas de diseño siempre esta la opción de buscar en la web y encontrarnos con personas que permiten usar sus pequeñas obras de arte en nuestros proyectos sean comerciales o no, claro no esta de mas colocar y dar el crédito a sus creadores.

Para mis ejemplos uso graficos tomados de un pack creado por Kenney y la verdad son de muy buena calidad, los hay de todo tipo si quieres hacer un juegos de plataforma, puzzle, y con un poco de imaginación crear nuevas mecanicas.

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 muchas Imagenes en Phaser

En esta oprtunidad aprenderemos como agregar cierta cantidad de sprites y en lugares diferentes de la pantalla,empezemos:
Tenemos nuestras variables declaradas :
_alien: nuestro sprite.
 Contador: cada cuanto aparece un nuevo sprite
Cantidad:cuantos sprite queremos que aparezcan.
Cargamos nuestra imagen:

 function preload(){
 game.load.image("extra",'alien.png');
 };

Llamamos a la función creaSprite.

function create(){
 creaSprite();
};

Creamos la función responsable de gestionar nuestros sprites.

function creaSprite(){
_alien=game.add.sprite(game.world.randomX,(Math.random()*400),'extra');
_alien.angle = game.rnd.angle();
cantidad-=1;
contador = game.time.now + 200;
}; 

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.