jueves, 15 de mayo de 2014

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.

Leer mas »

martes, 13 de mayo de 2014

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;
};

Leer mas »

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'});

Leer mas »

jueves, 8 de mayo de 2014

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");
};

Leer mas »

martes, 6 de mayo de 2014

Juego con Html5 y Phaser "Archaic Roll"

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

lunes, 5 de mayo de 2014

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.

Leer mas »

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í

Leer mas »

Páginas

jueves, 15 de mayo de 2014

Agregar un sprite a un grupo en Phaser.

martes, 13 de mayo de 2014

Agregando muchas Imagenes en Phaser

Agregando eventos del mouse en Phaser

jueves, 8 de mayo de 2014

Agregando imagenes y efectos en Phaser.

martes, 6 de mayo de 2014

Juego con Html5 y Phaser "Archaic Roll"

lunes, 5 de mayo de 2014

Como hacer un juego con Phaser "El Codigo"

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