Inicializar el framework
Este es el primero de los 16 tutoriales para aprender a usar Gamedev Phaser. Luego de completar este tutorial, puede encontrar el código fuente de esta sección en Gamedev-Phaser-Content-Kit/demos/lesson01.html.
Antes de que podamos comenzar a escribir la funcionalidad del juego, necesitamos crear una estructura básica para procesarlo. Esto podemos hacerlo usando HTML — el framework de Phaser va a generar el elemento <canvas> requerido.
El HTML del juego
La estructura del elemento HTML es bastante simple, ya que el juego va ser renderizado por completo en el elemento <canvas> generado por el framework. Utilizando su editor de texto favorito, cree un nuevo documento HTML, guárdelo como index.html, en una ubicación sensata y agregue el siguiente código:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Gamedev Phaser Workshop - lesson 01: Initialize the framework</title>
<style>
* {
padding: 0;
margin: 0;
}
</style>
<script src="js/phaser.min.js"></script>
</head>
<body>
<script>
var game = new Phaser.Game(480, 320, Phaser.AUTO, null, {
preload: preload,
create: create,
update: update,
});
function preload() {}
function create() {}
function update() {}
</script>
</body>
</html>
Descargando el código de Phaser
A continuación, necesitamos pasar por el proceso de descargar el código fuente de Phaser y aplicarlo a nuestro documento HTML.
- Ir a la página de descarga del Phaser download page.
- Elegir la opción que mas le convenga — Recomendaría la opción min.js ya que mantiene el codigo más pequeño, y es poco probable que tenga que pasar por el código fuente de todos modos.
- Guarde el código Phaser dentro de un directorio
/jsen la misma ubicación que su archivoindex.html. - Actualice el valor
srcdel primer elemento<script>como se muestra arriba.
Caminando a través de lo que tenemos hasta ahora
En este punto, tenemos un charset definido, <title> y algunos CSS básicos en el encabezado para restablecer el margin y el padding. También tenemos un elemento <script> para aplicar el código fuente del Phaser a la página. El cuerpo contiene un segundo elemento <script>, donde vamos a escribir el codigo JavaScript para renderizar el juego y controlarlo.
El elemento <canvas> es generado automaticamente por el framework. Estamos inicializandolo creando un nuevo objeto Phaser.Game y asignandolo a la variable del juego. Los parametros son:
- El ancho y el alto para configurar el
<canvas>. - El método de renderizado. Las otras tres opciones son
AUTO,CANVASyWEBGL. Podemos establecer uno de los dos últimos explícitamente o usarAUTOpara dejar que Phaser decida cuál usar. Usualmente usa WebGL si está disponible en el navegador, volviendo a Canvas 2D si no es así. - El
iddel<canvas>se utilizará para renderizar si ya existe en la pagina (hemos especificado null porque queremos que Phaser cree el suyo propio). - Los nombres que se usarán para las tres funciones claves del Phaser que cargan e incian el juego, y actualizan el bucle del juego en cada fotograma; usaremos los mismos nombres para mantenerlo limpio.
preloadse encargará de precargar los assetscreatese ejecuta una vez cuando todo está cargado y listoupdatese ejecuta en cada fotograma.
Compara tu código
Aquí está el código fuente completo de la primera lección, ejecutándose en un JSFiddle:
Pasos siguientes
Ahora hemos configurado el HTML básico y aprendido un poco sobre la inicialización de Phaser, continuemos con la segunda lección y aprendamos sobre scaling.
page(Doc) not found /es/docs/Games/Workflows/2D_Breakout_game_Phaser