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. 

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 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.

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.