NOTA:. Este tutorial no se actualiza a la versión más reciente Quinto y no correr con ella

HTML5 Mario-estilo de plataformas Series con Quinto:

¿Es un hablante de francés? Si es así, gracias a Alejandro Bianchi se puede disfrutar de una adaptada versión francesa de este tutorial.

Entre todos los estilos de juego, juegos de plataformas se han destacado durante décadas y han demostrado ser una simple diversión para jugar matriz de caracteres, bloques, tubos y monstruos. En este tutorial vamos a crear un juego de plataformas al estilo de Mario sencilla utilizando el Quinto marco juego HTML5, lo que le permite acelerar la construcción de un prototipo simple y reproducible.

Esta será una serie de tres partes. En esta primera parte, nos centraremos en la construcción del nivel usando el editor de mapas de baldosa, cargando el nivel en el juego y la configuración del tipo de plataforma de juego (básicamente un personaje que corre y salta de un nivel de desplazamiento). En la segunda parte de la serie vamos a añadir enemigos con comportamientos diferentes. El tercer tutorial tendrá monedas y vidas para el jugador.

No se pierda! extremos de la oferta en

  • Accede a los más de 200 cursos
  • Nuevos cursos añadió mensual
  • Cancelar en cualquier momento
  • Los certificados de terminación

    ACCESO ahora

    Tabla de contenidos

    Los Requisitos

    Vamos a utilizar el Quinto marco de desarrollo de juegos en este tutorial. Este marco de código abierto fue creado por Pascal Retig y está dirigido a la creación de videojuegos con JavaScript para móviles, de escritorio y más allá.

    Los puntos de partida para familiarizarse con el Quinto son la guía oficial, la comunidad de G + y mi anterior tutorial Quinto.


    • La familiaridad con HTML, CSS, JavaScript y conceptos básicos orientados a objetos.
    • Clonar o descarga Quinto de ella de la página de Github.
    • Configuración de un servidor web local. Tenemos que ejecutar el código en este tutorial en un servidor web y no por simplemente haciendo doble clic en los archivos. Más sobre esto más adelante. WAMP para Windows, MAMP para Mac. En Linux sólo tiene que escribir sudo apt-get install apache2.
    • Descargar e instalar el editor del juego de baldosa, disponible para Linux, Mac y Windows
    • Haga que su IDE favorito listo (Netbeans, Eclipse, Sublime2, Notepad ++, VIM, o cualquier herramienta que se utiliza para la codificación).
    • Descargar el código fuente aquí.
    • crack nudillos y empezar a programar!

      El programa de instalación

      Crea una nueva carpeta en la carpeta pública del servidor web (www carpeta en la mayoría de los casos), vamos a llamar a esta nueva carpeta “zenvaplatformer”. En ella, crear los siguientes sub-carpetas y archivos vacíos, y copiar los archivos JS contenidas en Quinto / lib donde se muestra:

      zenvaplatformer / index.html
      zenvaplatformer / data /
      zenvaplatformer / lib / -> copiar el Quinto / lib archivos JS aquí
      zenvaplatformer / images /
      El cara a cara!
      Cuando se trabaja con Quinto, así como otras bibliotecas de Github, siempre es bueno mantener un ojo en la página de recompra como se están agregando constantemente nuevas características. Usted no quiere quedarse atrás con una versión antigua de la biblioteca. En el caso de Quinto mucho trabajo se está haciendo en este momento a fin de mantener un ojo para las nuevas características y cambios en la API!

      Después de descargar los archivos de aquí. Me gustaría recomendar que no se ven en el código menos que quiera arruinar la diversión de codificación de tiempo. Lo que se necesita hacer es copiar a pesar de los recursos del juego de / datos y / imágenes a sus carpetas de proyecto correspondientes.

      El mapa

      Todos los juegos, y en especial los juegos de plataformas tienen lugar en un mundo virtual. En nuestro caso será un mundo mosaico basado en 2D. medios a base de baldosas de que el mundo está compuesto de “baldosas” individuales o bloques. Piense en los juegos de NES de edad, la forma en que sólo podría encontrar patrones de bloque que se repetían. Bueno, eso es lo que estamos construyendo aquí también.

      Para crear esta 2D, basado en baldosas mundo vamos a utilizar el editor de juego de baldosas. El motor Quinto tiene soporte para TMX archivo de carga, que es uno de los formatos que se pueden producir por baldosa.

      El mapa para este ejemplo está listo y esperando por usted en la carpeta / datos, pero todavía quiero guiará a través del proceso de creación de un mapa básico:

      1. Abrir baldosa y crear un nuevo mapa. En el cuadro de diálogo que tiene que especificar el tamaño del mapa en términos de cuántos azulejos o bloques que tendrá para la anchura y la altura. También se puede especificar aquí el tamaño de la baldosa en píxeles. En nuestro ejemplo el ancho del mapa es de 40 baldosas, azulejos La altura 10, y vamos a estar trabajando con azulejos de 70 x 70 píxeles.

      2. Ahora ¿de dónde sacamos los azulejos de? tenemos lo que se llama un spritesheet o conjunto de baldosas, que es el nombre dado a los archivos de imágenes que contienen todas las fichas / sprites del juego. Usted puede obtener un montón de spritesheet gratuita en OpenGameArt.org, acabo de leer detenidamente la licencia de las imágenes y dar al autor la atribución apropiada en caso de que sean de Creative Commons. Si son de dominio público sólo se puede utilizar sin restricciones.

      Pero bueno que acaba de descargar los archivos de ejemplo por lo que tenemos un spritesheet tener un juego con. Ir a Mapa -> Nueva teja, a continuación, en “Examinar” y busque el archivo de /images/tiles_map.png. Asegúrese de configurar correctamente las dimensiones de las baldosas (70 × 70), también existe el margen, el espaciamiento y las compensaciones deben ser 0.
      Con la versión actual de Quinto, no se puede utilizar spritesheets que tienen separaciones o márgenes. Además, el primer bloque de la spritesheet (de izquierda a derecha) no se mostrará así que deje ese espacio en blanco como lo he hecho en el archivo de ejemplo.

      azulejos conjunto de baldosas añadiendo

      3. Después de haber cargado el juego de fichas que ahora podemos “pintar” un mapa con los botones en el menú. En el ejemplo de plataformas tendremos dos capas, una para sujetar los cuerpos de colisión (los elementos que bloquean el camino del jugador, o sostenerlo como un polvo) y un capa de fondo para la decoración justa. Crear una nueva capa usando el icono con el signo “+” en el área de la capa. darles ambos nombres para distinguirlos. Ahora se puede empezar a pintar su mapa.

      azulejos editor de mapas

      4. Si queremos tener nuestros archivos cargado con Quinto tenemos que guardarlos en formato XML no comprimido (TMX extensión). Ir a “Preferencias”, a continuación, haga clic en la pestaña “General”, donde dice “datos de la capa de baldosas tienda como” asegurarse de que se selecciona XML. Ahora se puede guardar el mapa y este tipo de mapas TMX son los que usted puede utilizar en sus juegos HTML5.

      La configuración del Quinto y activos Cargando

      Copia el siguiente contenido a su archivo index.html: