Soy un gran fan de arriba hacia abajo juegos en 2D, principalmente RPG, juegos de aventura y los rastreadores de los calabozos.

En este tutorial vamos a crear una plantilla básica que puede utilizar para hacer su propia arriba hacia abajo juegos usando Phaser, un marco de juego HTML5 impresionante.

Esta plantilla se ampliará en otros tutoriales para agregar la capacidad de moverse entre los niveles, el trabajo en la materia móvil y mucho más fresco. Si hay aspectos que le gustaría que la cubierta de tutoriales futuros Siéntase libre de publicar que en los comentarios!

Vamos a utilizar un editor de mapas gratuito llamado baldosa para crear nuestro nivel. Una cosa buena de Phaser es que se puede cargar fácilmente archivos de mapas exportados de baldosa (formato JSON).

Este tutorial se basa en la parte superior de los conceptos tratados en nuestro anterior tutorial Phaser, por lo que si usted no está familiarizado con los Estados, la precarga de los activos y la prestación de sprites es posible que desee comprobar que Tut primero.

Tabla de contenidos

Aprender Phaser mediante la construcción de 15 juegos

Si usted quiere dominar Phaser y aprender cómo publicar juegos Phaser como juegos nativas para iOS y Android se sienten libres para comprobar Zenva En línea En este supuesto The Complete el juego para móvil Curso de Desarrollo – Construir 15 juegos.

archivos de código fuente

Puede tomar desde aquí (actualizado a la versión 2.4.2). Si desea que le notificará cuando liberamos nuevos tutoriales sobre Phaser o el desarrollo de juegos HTML5 no se olvide de hacer clic en “suscribirse a nuestra lista” al descargar los archivos (si no se quiere optar por no saber de nosotros!).

Tutorial objetivos

1-Aprende a crear niveles para su juego utilizando baldosa y cargarlos usando Phaser.

2-Aprende a crear un motor de arranque básico juego de arriba hacia abajo.

Conceptos cubierto

-Ajuste el tamaño en píxeles juego
-Tiled
uso básico
capas -Tile y capas de objetos
-Tilemaps
-Creación de sprites de capas de objetos
-Los que se mueven de un personaje en un nivel de arriba hacia abajo

Tutorial requisitos

: este tutorial se basa en los conceptos tratados en nuestro anterior tutorial Phaser Phaser HTML5 Tutorial – SpaceHipster, una exploración espacio de juego, por lo que se supone que sabe cómo configurar un juego, el trabajo con los Estados, los activos de juego precarga y crear sprites <. / p>

-Básico al conocimiento intermedio de JavaScript. Si necesita una sensación refresco libre de visitar nuestra JavaScript principiantes curso de vídeo en Zenva Academia.

editor de código -A o IDE. Mi preferencia personal por el momento es Sublime Text.

-Obtener baldosa, un código abierto y libre editor de niveles.

Phaser -Grab de ella de Github de pases. Puede clonar o bien la cesión temporal o descargar el archivo ZIP.

Usted necesidad de ejecutar el código y ejemplos Phaser utilizando un servidor web. Algunas opciones populares son Apache (WAMP si en Windows, si MAMP en Mac). Algunas alternativas son ligeros Mangosta servidor web y el servidor HTTP de Python. Echar un vistazo a esta guía para más detalles.

-Download la totalidad de código fuente y los juegos activos tutorial aquí. Si desea que le permiten saber cuando nos liberamos nuevos tutoriales sobre Phaser o el desarrollo de juegos HTML5 no se olvide de suscribirse a nuestra lista!

-Tener la documentación y la página de ejemplos a la mano. Asimismo, no se olvide que siempre se puede encontrar respuestas por mirar el código fuente de la misma Phaser!

Get Tejar-Cara

baldosa es un editor de niveles realmente impresionante creado por Thorbjørn Lindeijer que le permite crear de forma visual los niveles a base de baldosas para sus juegos. El formato del archivo principal usan estos niveles es TMX. Para utilizar estos niveles en Phaser que necesitamos para exportarlos como JSON.

Cuando hablo de “baldosas” y “juegos basados ​​en azulejos” lo que significan son juegos en los que los niveles se componen de pequeños bloques o piezas individuales. Echa un vistazo a la definición de Wikipedia si no está 100% familiarizados con este concepto.

Para crear un nuevo mapa de baldosa ir a Archivo -> Nuevo:

baldosas tutorial crear nuevo mapa

El ancho y alto especifican el número de fichas de su nivel tendrá en cada dimensión. Tamaño del azulejo se refiere al tamaño de las baldosas individuales. Asegúrese de Orientación se establece en “ortogonal” y el formato de capa a “CSV”.

El siguiente paso es crear las capas. Un nivel tendrá diferentes capas que se colocan una encima de la otra. La denominación de las capas es importante aquí, ya que necesitamos para hacer referencia a que en el código más adelante.

Hay dos tipos de capas:

capa -Tile:. capa hecha de azulejos / bloques
capa -Objetos:. capa donde se crean los objetos vectoriales que puede contener metadatos

Se puede crear capas utilizando el botón “+” bajo capas, cambiar el nombre de ellas, haga clic en el nombre de las capas de nueva creación. Las cuestiones de orden, puede cambiar su posición con las flechas.

baldosas crear capas

En nuestro ejemplo vamos a tener dos capas de mosaicos: una para el fondo denominado backgroundLayer (no choque con el jugador) y uno de los elementos de bloqueo llamados blockedLayer (paredes, árboles, etc.). También tendremos una capa de objetos (objectsLayer) que representará a los elementos del juego, en este caso el jugador que comienza ubicación en el nivel, los coleccionables / artículos, una puerta (que vamos a extender en un futuro tutorial). En esta capa te gustaría añadir enemigos y más cosas. Todo esto es sólo una sugerencia y como normalmente lo hago, es de ninguna manera una convención o una norma del marco.

Carga del conjunto de baldosas

A conjunto de baldosas es un conjunto de baldosas individuales, que vienen en una imagen. Puede tener muchas baldosas en sus tilemaps. Vamos a utilizar una sola:. Assets / images / tiles.png

Para cargar un juego de fichas: Mapa -> Nueva Tileset

azulejos complemento conjunto de baldosas

El buen juego de fichas retro vamos a utilizar es del Abierto de Arte del juego y es una imagen de dominio público (A0), por lo que se puede utilizar tanto para proyectos no comerciales y comerciales.

Los azulejos son de 16 × 16 y no hay separación entre ellos o margen. El “nombre” en el campo de texto, mantener ese nombre en su cabeza, ya que necesitamos refere a que cuando se incorpora al juego de fichas con el mapa en Phaser.

Crea el nivel

Ahora puede crear su nivel. Ahora es realmente depende de ti. Lo que hice fue llenar el backgroundLayer con un azulejo negro (con la función de cubo), y luego cambió a la blockedTile y pintado algunas paredes y árboles:

nivel simple de azulejos

La capa de objetos

Vamos a añadir 3 tipos diferentes de objetos o elementos de juego: artículos que serán recogidos por el jugador, el jugador de la posición de partida, y una puerta que le llevará a un nuevo nivel (para ser implementado en un seguimiento tutorial).

Estos objetos estará representada por los sprites del juego de fichas, pero eso es sólo para nuestro simplicidad. Phaser mostrará el sprite que le dices que cuando se crea un objeto Sprite.

Para insertar nuevos objetos: seleccione la capa objectsLayer, haga clic en el botón del azulejo de inserción (el que muestra una imagen de la puesta del sol) a continuación, haga clic en la ficha que desea mostrar, a continuación, haga clic en la ubicación del objeto dentro de la mapear.

baldosas crear el objeto

Vamos a añadir algunas tazas de té azules y verdes, una puerta y un “jugador”:

nivel de mapa de azulejos

Adición de propiedades a los objetos

¿Cómo se Phaser va a saber lo que representan estos elementos y lo que el sprite se debe utilizar para mostrarlos? Vamos a añadir que como propiedades del objeto.

Haga clic en el botón “Seleccionar objeto” del menú, a continuación, haga doble clic sobre cualquier objeto y verá un cuadro de diálogo donde puede introducir propiedades.

Introduzca una propiedad denominada “tipo” con el “elemento” valor a las tazas de té (esto no es el “tipo” seleccione desplegable !, esto está dentro del área Propiedades), “PlayerStart” para el jugador y la ubicación “puerta” a la puerta.

Para las tazas azules entran en un “sprites” propiedad con valor “bluecup”, “greencup” para la copa verde, “browndoor” a la puerta. Ninguno para el jugador comienzo, ya que no representará un sprite, pero un lugar para nosotros para usar. Estos valores son las claves de sprites que vamos a implementar en Phaser de los elementos de imagen correspondientes (pico a / assets / images).

** También se puede simplemente crear uno de cada elemento, a continuación, seleccione el elemento con el botón derecho del ratón y haga clic en “duplicar”, esto le permitirá replicar rápidamente un objeto y luego lo arrastra a su posición final.

No vamos a implementar el comportamiento de la puerta en este tutorial, pero entrar en estas propiedades por lo que se puede adivinar a dónde voy con esto:

propiedades de puertas

Antes de seguir adelante, me gustaría dejar claro que esto va a funcionar con la plantilla de juego que estamos construyendo en este tutorial, no es una funcionalidad Phaser defecto. Phaser sólo proporciona la capacidad de crear varios sprites de los objetos utilizando la misma clave de sprites. Echar un vistazo a la documentación Tilemap para aprender lo Phaser ofrece en este aspecto.

Una vez que está haciendo el nivel de exportación como un archivo JSON. Archivo -> Exportar como -.> JSON archivos, excepto en / activos / tilemaps

Hola Mundo Phaser

Me va a ir a través de esta sección sin entrar en muchos detalles, ya que estos conceptos fueron cubiertos en el anterior tutorial Phaser.

En este juego vamos a tener tres estados: Boot, precarga y Juego. Siempre se puede añadir una pantalla de menú principal como lo hicimos en el tutorial anterior.

Empecemos creando index.html, donde vamos a incluir los archivos del juego: