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.
En el <body> tenemos un <div> esto es un bloque dentro de nuestro documento al cual se le puede asignar ancho, alto, color y es donde Phaser muestra nuestro juego, con la etiqueta <script> y su atributo “type” estamos indicando que el tipo de texto dentro de el es javascript y que sea ejecutado como tal, en este ejemplo creamos el script dentro del body pero cuando el juego sea más complejo esto se reflejara en mas líneas de código, clases, los mas practico sería crear archivos externos para despues cargarlos, ahora tenemos la sentencia:
var game = new Phaser.Game(800, 600, Phaser.AUTO, 'ejemplo', { preload: preload, create: create, update: update });
Creamos una variable llamada
game, luego creamos un nuevo objeto llamando a la variable global Phaser y a su
método Game es decir la clase Phaser.Game que recibe unos parámetros en este
caso son ancho, alto, tipo de render (AUTO:puede ser modo CANVAS o WebGl ),el
id o nombre de nuestra etiqueta
<div> , lo siguiente es un objeto donde le pasamos tres funciones muy
importantes:
Preload: Es utilizado para
cargar los archivos que necesitemos imágenes, sonido, y más.
Create: Es utilizado para
crear e inicializar nuestros objetos.
Update: Aquí es donde actualizamos
cada frame nuestros objetos.
Declaramos las variables
miTexto y estilo que inicializaremos en la función Create, como no tenemos nada
que cargar la función Preload esta vacía, en la función Create :
estilo = { font: "30px Arial", fill: "#ee5522", align: "center" };
miTexto = game.add.text(game.world.centerX, game.world.centerY, "HOLA \nMUNDO", estilo);
miTexto.anchor.set(0.5);
En la variable estilo:
Font: tamaño y tipo de letra.
Fill: el color del texto
Align: la dirección de nuestro texto en este caso hacia al centro, solo afecta cuando tengamos multiples textos.
Align: la dirección de nuestro texto en este caso hacia al centro, solo afecta cuando tengamos multiples textos.
En la variable miTexto:
game.add.text(): ahora
nuestra variable game puede acceder a los métodos de la Clase Phaser.Game, para
agregar cualquier objeto usamos .add(agregar) en este caso un texto
.text(texto) esta funcion recibe unos parámetros, posición en x, posición en y,
texto a mostrar, estilo de la letra, aquí le pasamos el estilo creado previamente.
Ahora si la textura esta
siendo posicionada la textura con respecto a su centro.
En la función Update tenemos:
miTexto.x +=5;
if(miTexto.x-miTexto.width > game.world.width){
miTexto.x -= game.world.width + miTexto.width;
};
Aquí actualizamos en cada
frame la posición de nuestro texto en su posición x con valor positivo, es
decir hacia la derecha ahora comprobamos si la posición de
nuestro texto en x menos su ancho es
mayor que el ancho de nuestro mundo (game.world.width) todo lo mostrado en
pantalla esta dentro de algo llamado "world"(mundo), si el resultado de la comprobación es verdadero entonces restamos a la posición actual
del texto el ancho del mundo mas el ancho del texto y le asignamos la nueva
posición a nuestro texto conseguiremos que el texto aparezca en la posición
contraria. Felicidades has completado tu primer juego con phaser en las
siguientes entradas agregaremos imágenes, sprites y muchas cosas interesantes.
Hasta la Proxima.
No hay comentarios:
Publicar un comentario