Adición de monedas y vidas al estilo Mario HTML5 Plataformas – GameDev Academia

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

Este tutorial es la tercera parte de la serie de plataformas de Mario HTML5, así que prepárate para cavar más profundo en el marco impresionante juego Quinto. En este tutorial vamos a aprender cómo agregar monedas, vidas a nuestro jugador y cómo mostrar todo esto en una zona de “estadísticas de los jugadores”.

¿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.

Tabla de contenidos

Tutorial objetivos

  1. Implementación de “vidas” de nuestro jugador.
  2. ¿Cómo recoger las monedas.
  3. Carga de la ubicación monedas de un objeto JSON.
  4. Visualización de una zona de “estadísticas de los jugadores” y mantenerla actualizada.
  5. La búsqueda de un objeto en una escena.

    tener otra oportunidad HTML5 GameDev

    Si usted está disfrutando de este tutorial y quiere mucho más de estas cosas no dude en visitar nuestra desarrollo de juegos HTML5 cursos en línea que cubren todos los aspectos básicos para empezar:


    Requisitos

    Los requisitos para las series clon tutoriales poco fiables Mario son:


    • 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. 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).
    • Haga que sus nudillos agrietados y listo para una nueva inmersión en HTML5 GameDev.

      Tutorial Activos

      Obtener el código fuente completo tutorial y las imágenes aquí. Todas las imágenes utilizadas en este tutorial tienen una licencia de dominio público.
      El cara a cara!
      He proporcionado los archivos Quintus entre el código fuente tutorial, pero ten en cuenta que el marco es en fuerte desarrollo. Es mejor si usted acaba de agarrar ellos directamente desde la página de Github. Además, mantener un ojo en el repositorio como usted trabaja en sus partidos desde que se añaden nuevas características.

      Estadísticas de jugadores

      En esta serie hemos estado trabajando todo el tiempo con una sola escena: el nivel que contiene el juego real. Quinto nos permite mantener en muchas escenas en la pantalla de manera que, por ejemplo, podemos estar desplazándose a través del nivel de uno, pero los otros quedarse en su mismo lugar y no quedar desplazado.

      Al ser más claro en este punto, imagine sólo tiene que utilizar una escena, la de una sola planta, y añadir estadísticas de los jugadores al mismo, como el número de vidas y el número de monedas. Es todo va a parecer bueno hasta que comience a trabajar y la cámara de visualización se aleja de su ubicación inicial. Las estadísticas de los jugadores se quedarán como el resto del nivel. Este concepto se explora con mayor profundidad en nuestro tutorial HTML5 juego educativo.

      De todos modos, vamos a crear una segunda escena llamada “GameStats”:
      Q.scene ( «GameStats», la función (etapa) {var statsContainer = stage.insert (nuevo Q.UI.Container ({fill: «gris», x: 960/2, y: 620, frontera: 1, sombra: 3, shadowColor: «RGBA (0,0,0,0.5)», w: 960, h: 40})); vidas var = stage.insert (nuevo Q.UI.Text ({label: «vidas x 3» , color: «blanco», x: -300, y: 0}), statsContainer); monedas var = stage.insert (nuevo Q.UI.Text ({label: «monedas x 0», color: «blanco», x: 300, y: 0}), statsContainer);}); 123456789101112131415161718192021222324252627Q.scene ( «GameStats», la función (etapa) {varstatsContainer = stage.insert (newQ.UI.Container ({llenado: «gris», x: 960/2, y: 620, frontera: 1, sombra: 3, shadowColor: «RGBA (0,0,0,0.5)», w: 960, h: 40})); varlives = stage.insert (newQ. UI.Text ({label: «vidas x 3», color: «blanco», x: -300, y: 0}), statsContainer); varcoins = stage.insert (newQ.UI.Text ({etiqueta: «monedas x 0» , los colores: «blanco», x: 300, Y: 0}), statsContainer);});

      lo que estamos haciendo aquí es crear una nueva escena que tiene un contenedor gris, que va en la parte inferior de la página. Este recipiente tiene dos objetos Q.UI.Text, uno para la vida y una para las monedas. Ambos comienzan con valores por defecto. Con el fin de aprender más sobre la Q.UI.Text y los contenedores de comprobar los quintus_ui.js de archivo de la biblioteca y el tutorial del juego HTML5 para la Educación.

      Staging escena del juego de las estadísticas sería el último paso. La carga de activos debe tener este aspecto (vemos que también estamos agregando un archivo activo coin.png, que se utilizarán siguiente):
      // carga assetsQ.load ( «tiles_map.png, player.png, slime.png, fly.png, level1.tmx, coin.png», la función () {Q.sheet ( «baldosas», «tiles_map.png» , {tileW: 70, tileh: 70}); Q.stageScene ( «level1»); Q.stageScene ( «GameStats», 1);}); 123 456 // assetsQ.load carga ( «tiles_map.png, reproductor. png, slime.png, fly.png, level1.tmx, coin.png», la función () {Q.sheet ( «baldosas», «tiles_map.png», {tileW: 70, tileh: 70}); Q. stageScene ( «level1»); Q.stageScene ( «GameStats», 1);});

      el segundo parámetro cuando puesta en escena de la escena es el índice (0 por defecto). Escenas con alto índice muestran en la parte superior de las escenas con el índice más bajo.

      Monedas

      Righto. Todas las plataformas necesitan monedas o algo parecido (diamantes, oro, frutas?). Su puesta en práctica utilizando Quinto y las cosas que hemos aprendido hasta ahora es bastante sencillo:
      Q.Sprite.extend ( «Coin», {init: function (p) {this._super (p, {activo: «coin.png»});}}); 12345Q.Sprite.extend ( «Coin», { init: function (p) {this._super (p, {activo: «coin.png»});}});

      Vamos a cargar las monedas en nuestra inicialización nivel utilizando un objeto JSON de una manera similar a como lo hicimos con los enemigos:
      // activos de nivel. formato debe ser como se muestra: [[NombredeClase, params], ..] levelAssets var = [[ «GroundEnemy», {x: 18 * 70, y: 6 * 70, activo: «slime.png»}], [» VerticalEnemy «{x: 800, y: 120, rangey: 70, activo: «fly.png»}], [ «VerticalEnemy», {x: 1.080, Y: 120, rangey: 80, de activos:» fly.png «}], [» GroundEnemy», {x: 6 * 70, y: 3 * 70, activo: «slime.png»}], [ «GroundEnemy», {x: 8 * 70, y: 70, de activos: «slime.png»}], [ «GroundEnemy», {x: 18 * 70, y: 120, activo: «slime.png»}], [ «GroundEnemy», {x: 12 * 70, y: 120, activo: «slime.png»}], [ «Coin», {x: 300, y: 100}], [ «moneda», {x: 360, Y: 100}], [ «moneda», {x: 420, Y: 100}], [ «moneda», {x: 480, Y: 100}], [ «moneda», {x: 800, Y: 300}], [ «moneda», {x: 860, y: 300}], [ «Coin», {x: 920, y: 300}], [ «moneda», {x: 980, Y: 300}], [ «moneda», {x: 1040, Y: 300}], [ «Coin», {x: 1100, y: 300}], [ «Coin», {x: 1.160, Y: 300}], [ «Coin», {x: 1250, y: 400} ], [ «moneda», {x: 1.310, Y: 400}], [ «Coin», {x: 1370, y: 400}]]; // activos de nivel de carga stage.loadAssets (levelAssets); 123456789101112131415161718192021222324252627 activos // nivel. formato debe ser como se muestra: [[NombredeClase, params], ..] varlevelAssets = [[ «GroundEnemy», {x: 18 * 70, y: 6 * 70, activo: «slime.png»}], [ «VerticalEnemy «, {x: 800, y: 120, rangey: 70, activo: «fly.png»}], [ «VerticalEnemy», {x: 1.080, Y: 120, rangey: 80, de activos: «fly.png» }], [ «GroundEnemy», {x: 6 * 70, y: 3 * 70, activo: «slime.png»}], [ «GroundEnemy», {x: 8 * 70, y: 70, activo:» slime.png «}], [» GroundEnemy», {x: 18 * 70, y: 120, activo: «slime.png»}], [ «GroundEnemy», {x: 12 * 70, y: 120, de activos : «slime.png»}], [ «moneda», {x: 300, Y: 100}], [ «moneda», {x: 360, Y: 100}], [ «moneda», {x: 420 , y: 100}], [ «Coin», {x: 480, y: 100}], [ «moneda», {x: 800, Y: 300}], [ «moneda», {x: 860, y : 300}], [ «Coin», {x: 920, y: 300}], [ «moneda», {x: 980, Y: 300}], [ «moneda», {x: 1040, y: 300 }], [ «Coin», {x: 1100, y: 300}], [ «Coin», {x: 1.160, Y: 300}], [ «Coin», {x: 1250, y: 400}] , [ «moneda», {x: 1.310, Y: 400}], [ «Coin», {x: 1370, y: 400}]]; assetsstage.loadAssets // nivel de carga (levelAssets); Heads up !
      Se recomienda intenta cargar todas las entidades en el juego, tales como enemigos, objetos, etc, usando objetos JSON. JSON es un protocolo de intercambio de datos que se utiliza comúnmente para recibir y enviar información hacia y desde la web. Si su plan es cargar con el tiempo los datos de nivel desde la web o desde el almacenamiento local que es bueno que mantenga JSON en mente y se acostumbre a trabajar con este formato.

      Nuestro nivel se puede llenar con monedas de ahora, pero todavía necesidad para poder agarrar y mantener un total de monedas. Vamos actualización un poco nuestra definición del jugador:
      Q.Sprite.extend ( «Player», {init: function (p) {this._super (p, {activo: «player.png», x: 110, y: 50, jumpSpeed: -400, monedas: 0} ); this.add ( «2D, platformerControls»); this.on ( «hit.sprite», la función (colisión) {if (collision.obj.isA ( «Coin»)) {collision.obj.destroy (); this.p.coins ++; // TODO: actualización de la interfaz gráfica de usuario}});}, … 123456789101112131415Q.Sprite.extend ( «jugador», {init: function (p) {this._super (p, {activo:» player.png», x: 110, y: 50, jumpSpeed: -400, monedas: 0}); this.add ( «2D, platformerControls»); this.on ( «hit.sprite», función (colisión) { si (collision.obj.isA (la «moneda»)) {collision.obj.destroy (); this.p.coins ++; // TODO: actualizar la interfaz gráfica de usuario}});}, …

      Esto es, en primer lugar , el establecimiento de un valor inicial de 0 monedas. estamos comprobando la colisión con objetos de monedas. Si nos encontramos con una moneda y luego destruir la moneda y aumentar el número de monedas en 1. todavía tenemos que actualizar la interfaz gráfica de usuario, lo que vamos a hacer siguiente.

      En busca de la interfaz gráfica de usuario

      agarró una moneda, destruido y el aumento de nuestra cuenta de monedas. La interfaz gráfica de usuario necesita ser actualizado, pero ¿cómo lo encontramos? tenemos que buscarla. Quinto tiene su propio modo de búsqueda de objetos:
      this.on ( «hit.sprite», la función (colisión) {if (collision.obj.isA ( «Coin»)) {collision.obj.destroy (); this.p.coins ++; var coinsLabel = Q ( «UI .text», 1) .items [1]; coinsLabel.p.label = ‘monedas x’ + this.p.coins;}}); 123456789this.on ( «hit.sprite», función (colisión) {if ( varcoinsLabel = Q ( «UI.Text», 1) .items [1];; collision.obj.isA ( «Coin»)) {collision.obj.destroy (); this.p.coins ++ coinsLabel.p.label = ‘monedas x’ + this.p.coins;}});

      Al hacer
      Q ( «UI.Text», 1) .items [1]; 1T .items ( «UI.Text», 1) [1];

      estamos buscando todos los Q.UI.Text objetos en la escena localizado en el índice 1. Esto devuelve un objeto, donde la propiedad “elementos” contiene una matriz con todos los resultados. En este caso, el índice 1 (segundo elemento de la matriz) contiene el texto que estamos buscando. El índice 0 de la matriz contiene el texto vidas.

      Una vez que nos encontramos con el objeto de texto que estamos buscando, acabamos de actualizar la propiedad etiqueta (object.p.label, no se olvide de la p que siempre podemos acceder a los parámetros de una entidad en Quinto).

      Vidas del jugador

      Nuestro resultado hasta ese momento es extremadamente difícil. Una huelga y estás fuera! Ahora vamos a implementar vidas jugador o energía. Si la vida se quedan entonces estamos recibiendo el juego más directo.

      Hay muchas maneras en las que la vida / energía se puede implementar. La forma en que va a ser en este ejemplo es:


      1. El jugador es golpeado por un enemigo (las mismas reglas de colisión tenemos en marcha)
      2. Las vidas ir menos uno
      3. El jugador es “invencible” durante 1 segundo, por lo que si usted es golpeado otra vez de inmediato que no tomará una segunda vida
      4. Después de 1 segundo que se puede golpear de nuevo si no se tiene cuidado
      5. Si la vida se quedan sin .. juego!

        Cuando se golpea al jugador, a ser posible, el jugador de sprites debe parpadear para ese segundo o tienen algún tipo de señal visual. Puesto que esto es sólo un tut no es un juego real que no mostrará ninguna señal visual.

        Configuración de un número inicial de 3 vidas:
        Q.Sprite.extend ( «Player», {init: function (p) {this._super (p, {activo: «player.png», x: 110, y: 50, jumpSpeed: -400, vidas: 3, Monedas: 0}); … 1234Q.Sprite.extend ( «jugador», {init: function (p) {this._super (p, {activos: «player.png», x: 110, Y: 50, jumpSpeed: -400, vidas: 3, monedas:. 0}); …

        Modificar los enemigos de modo que ahora no te matan, pero el daño () en su lugar
        // componente para enemigo común behaviorsQ.component ( «commonEnemy», {añadido: function () {entidad var = this.entity; entity.on ( «bump.left, bump.right, bump.bottom», la función (colisión) {if (collision.obj.isA ( «jugador»)) {collision.obj.damage ();}}); entity.on ( «bump.top», la función (colisión) {if (collision.obj.isA ( «jugador»)) {// hacer que el jugador salto collision.obj.p.vy = -100; // matanza enemigo this.destroy ();}});},}); // 123456789101112131415161718192021 componente para behaviorsQ enemigo común .Componente ( «commonEnemy», {añadido: function () {varentity = this.entity; entity.on ( «bump.left, bump.right, bump.bottom», la función (colisión) {if (collision.obj.isA ( «jugador»)) {collision.obj.damage ();}}); entity.on ( «bump.top», la función (colisión) {if (collision.obj.isA ( «jugador»)) {// hacer que el jugador jumpcollision.obj.p.vy = -100; // enemythis.destroy kill ();}});},});

        el método daños () en el reproductor seguirá los pasos mencionados antes. Se le hará invencible durante 1 segundo y luego usted será damageable nuevo. También necesitamos etapa de actualización () para realizar un seguimiento de este 1 segundo. A continuación se va dentro de jugador:
        paso: function (dt) {if (Q.inputs [ «izquierda»] & amp; & amp; this.p.direction == «derecha») {this.p.flip = «x»; } If (Q.inputs [ «derecho»] & amp; & amp; this.p.direction == «izquierda») {this.p.flip = false; } If (this.p.timeInvincible & gt; 0) {this.p.timeInvincible = Math.max (this.p.timeInvincible – dt, 0); }}, Daños: function () {// sólo daños si no en modo «invencible», de lo contrario beign junto a un enemigo toma todas las vidas inmediatly if (! This.p.timeInvincible) {this.p.lives–; // será invencible durante 1 segundo this.p.timeInvincible = 1; si (this.p.lives & lt; 0) {this.destroy (); Q.stageScene ( «Final de partida», 1, {label: «Juego sobre»}); } Else {var livesLabel = Q ( «UI.Text», 1) .First (); livesLabel.p.label = «Lives X» + this.p.lives; }}} 123456789101112131415161718192021222324252627282930step: function (dt) {if (Q.inputs [ «izquierda»] & amp; & amp; this.p.direction == «derecha») {this.p.flip = «x»;} Si (Q .inputs [ «derecho»] & amp; & amp; this.p.direction == «izquierda») {this.p.flip = false;} if (this.p.timeInvincible & gt; 0) {this.p.timeInvincible = Math .max (this.p.timeInvincible-dt, 0);}}, daños: function () {// sólo daños si no es en modo «invencible», de lo contrario beign junto a un enemigo toma todas las vidas inmediatlyif (esto!. p.timeInvincible) {this.p.lives -; // será invencible durante 1 secondthis.p.timeInvincible = 1; si (this.p.lives & lt; 0) {this.destroy (); Q.stageScene (» Final de partida «1, {label: «Juego encima»});} else {varlivesLabel = Q ( «UI.Text», 1) .First (); livesLabel.p.label =» vidas x «+ this.p. vidas;}}}

        Esta parte:
        var livesLabel = Q ( «UI.Text», 1) .First (); 1varlivesLabel = Q ( «UI.Text», 1) .First ();

        está actualizando la interfaz gráfica de usuario de una manera similar a la del contador de monedas , pero utilizando un método primero () que el objeto devuelto viene con (recordemos que el índice 0 de la matriz fue la vida de texto).

        Esto nos da una demo donde se puede recoger las monedas, saltar, matar a los malos y si no se tiene cuidado se puede llevar a sus vidas lejos y matar!

        Felicidades

        Enhorabuena si tienes todo el camino aquí! usted tiene ahora los fundamentos de lo que puede llegar a ser un gran juego! Algunas ideas sobre qué construir próxima:


        • Visual blanca cuando el jugador está dañado
        • niveles múltiples
        • Nivel jefe
        • agarre vidas extra
        • Los enemigos que aceptan monedas de distancia en lugar de la vida

          ¿Qué más Material para verificar

          Si te gusta mi estilo de enseñanza, en Zenva tenemos dos cursos de vídeo de alta calidad en el desarrollo de juegos HTML5 donde construimos varios ejemplos de diferentes tipos de juegos, como una vista superior disparar chicos malos juego al estilo Zelda, juegos de naves espaciales, la agricultura juegos, juegos de mascotas virtuales y muchos otros ejemplos!


          Mensajes relacionados

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *