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.
Esta entrada forma parte del archivo histórico del blog. Se ha limpiado su HTML y conservado el contenido original; cuando utiliza APIs antiguas, se indica el contexto para no confundirlas con las versiones modernas.
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.
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:
El código de esta entrada pertenece a una versión antigua de Phaser. El concepto de la mecánica explicada sigue siendo útil, pero para un proyecto nuevo conviene consultar la API de la versión de Phaser que estés utilizando en lugar de copiar literalmente estas llamadas.
No comments:
Post a Comment