baldosa es un editor de mapas gratuito que puede ser fácilmente integrado con Phaser. En este tutorial, vamos a construir un juego de plataformas sencillo utilizando Phaser y baldosa. Mientras que el mapa se ha creado usando baldosa, utilizaremos Phaser para leer este mapa y cargar todos los objetos en el nivel. En este tutorial te asumiré está familiarizado con los siguientes conceptos.


  • Javascript y programación orientada a objetos.
  • conceptos básicos Phaser, tales como:. Estados, sprites, grupos y una galería física

    Los siguientes conceptos serán cubiertos en este tutorial:


    • Uso de Suelo para crear un nivel de plataformas.
    • Escribir un Estado Phaser que lee el mapa de baldosa y una instancia todos los objetos del juego.
    • Escribir la lógica del juego de un simple juego de plataformas.

      Tabla de contenidos

      Tutorial código fuente

      Puede descargar el código fuente tutorial aquí.
      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

        Crear el mapa

        En primer lugar, tenemos que crear un nuevo mapa de baldosa. En este tutorial vamos a utilizar una vista ortogonal de un mapa con 20 × 10 baldosas. Cada baldosa siendo 35 × 35 píxeles. Para aquellos que no están familiarizados con ella, una ortogonales medios opinión de que el jugador ve el juego por un ángulo de 90 grados (se puede leer más acerca de la diferencia entre la vista ortogonal e isométrica aquí: http://gamedev.stackexchange.com/questions/22277 / diferencia entre ortogonal-map-y-isométrica-mapa).

        nuevo mapa de azulejos

        Después de crear el mapa, tenemos que añadir nuestro juego de fichas, lo que se puede hacer clic en “mapa -> nuevo juego de fichas”. El juego de fichas que vamos a usar tiene 35 × 35 píxeles, y una separación de 1 píxel.

        Nuevo conjunto de baldosas

        En embaldosado, hay dos tipos de capas: capas de mosaico o de capas de objeto. capas de mosaico están compuestas por los sprites del conjunto de baldosas cargado y están alineados en el mapa de la red. En este tutorial, vamos a tener dos capas de mosaicos: Fondo y de la colisión. capas objeto no están alineados con una rejilla, y representan los objetos del juego. En este tutorial, vamos a tener una sola capa de objetos, que contiene todos los objetos del juego.

        Para crear capas de mosaico, sólo tiene que utilizar la herramienta de cepillo sello para pintar la capa con las baldosas deseados. Para la capa objeto, seleccionar una imagen de mosaico de usar y ponerlo en la posición deseada. Tenga en cuenta que las imágenes utilizadas en la capa de objetos no representan la imagen real que será utilizado por Phaser durante el juego. Vamos a tener que cargar el activo correcto más adelante en nuestro código. Este es un ejemplo de un mapa creado. Siéntase libre de crear su propio!

        mapa

        Ahora, vamos a establecer algunas propiedades que permitirán que nuestro juego para cargar el mapa. En primer lugar, en la capa de la colisión que se sumará una propiedad contando nuestro juego que esta capa puede colisionar con otros objetos, como se muestra a continuación:

        layer_properties

        Por último, para cada objeto, establecemos sus propiedades. El nombre, tipo, grupo y propiedades de textura son necesarios para nuestro juego, ya que los usaremos para crear una instancia adecuadamente los objetos del juego. Cualesquiera otras propiedades deben definirse de acuerdo con nuestra lógica del juego. Por ahora, vamos a establecer sólo las propiedades requeridas, después codificamos la lógica del juego, podemos volver a añadir cada propiedades del objeto.

        object_properties

        Con el mapa terminado, exportarlo a un archivo JSON, por lo que nuestro juego puede cargarlo.

        archivo de nivel JSON

        Hay alguna información de nuestro juego necesita saber antes de cargar el mapa, al igual que los recursos del juego, los grupos y la información del mapa. Vamos a mantener toda esta información en un archivo JSON que será leído en el comienzo del juego. A continuación se muestra el archivo JSON nivel vamos a utilizar en este juego. Nótese que tenemos para definir los activos vamos a necesitar, los grupos de sprites y la información del mapa.

        levels.json Archivo en activos / niveles
        { «activos»: { «map_tiles»: { «type»: «imagen», «fuente»: «assets / images / tiles_spritesheet.png»}, «player_spritesheet»: { «type»: «spritesheet», «fuente» : «assets / images / player_spritesheet.png», «frame_width»: 28, «frame_height»: 30, «marcos»: 5, «margen»: 1, «espaciamiento»: 1}, «slime_image»: { «tipo» : «imagen», «fuente»: «assets / images / slime.png»}, «fly_spritesheet»: { «type»: «spritesheet», «fuente»: «assets / images / fly_spritesheet.png», «frame_width» : 37, «frame_height»: 20, «marcos»: 2}, «goal_image»: { «type»: «imagen», «fuente»: «assets / images / goal.png»}, «level_tilemap»: { » type «: «tilemap», «fuente»: «activos / Mapas / level1_map.json»}}, «grupos»: [ «enemigos», «objetivos», «jugadores»], «mapa»: { «clave»: «level_tilemap», «juego de fichas»: «map_tiles»}} {12345678910111213141516171819 «activos»: { «map_tiles»: { «type»: «imagen», «fuente»: «assets / images / tiles_spritesheet.png»}, «player_spritesheet «: {» type «:» spritesheet», «fuente»: «assets / images / player_spritesheet.png», «frame_width»: 28, «frame_height»: 30, «marcos» : 5, «margen»: 1, «espaciamiento»: 1}, «slime_image»: { «type»: «imagen», «fuente»: «assets / images / slime.png»}, «fly_spritesheet»: {» type «:» spritesheet » «fuente»: «assets / images / fly_spritesheet.png», «frame_width»: 37, «frame_height»: 20, «marcos»: 2}, «goal_image»: { «type»:» imagen», «fuente»: «assets / images / goal.png»}, «level_tilemap»: { «type»: «tilemap», «fuente»: «activos / Mapas / level1_map.json»}}, «grupos» : [ «enemigos», «metas», «jugadores»], «mapa»: { «clave»: «level_tilemap», «tileset»: «map_tiles»}}

        Juego Unidos

        utilizará los siguientes estados para ejecutar nuestro juego:


        • Estado de arranque:. Carga un archivo JSON con la información de nivel y comienza la carga del Estado
        • Cargando Estado:. Cargas de todos los recursos del juego, e inicia el Estado Nivel
        • baldosa Estado:. Crea el mapa y todos los objetos del juego

          El código para el estado de inicio se muestra a continuación. La carga el archivo JSON Estado de arranque descrito anteriormente, por lo que los activos pueden ser cargados en el estado de carga.

          BootState.js de archivos en js / estados:
          var Platformer = Platformer || {}; Platformer.BootState = function () { «utilizar estricta»; Phaser.State.call (this);}; Platformer.prototype = Object.create (Phaser.State.prototype); Platformer.prototype.constructor = Platformer.BootState; Platformer.BootState.prototype.init = function (level_file) { » utilizar estricta «; this.level_file = level_file;}; Platformer.BootState.prototype.preload = function () { «utilizar estricta»; this.load.text ( «level1», this.level_file);}; Platformer.BootState.prototype.create = function () { «utilizar estricta»; level_text var, level_data; level_text = this.game.cache.getText ( «level1»); level_data = JSON.parse (level_text); this.game.state.start ( «LoadingState», verdadero, falso, level_data);}; 123456789101112131415161718192021222324252627varPlatformer = Platformer || {}; Platformer.BootState = function () { «utilizar estricta»; Phaser.State.call (esto) ;}; Platformer.prototype = Object.create (Phaser.State.prototype); Platformer.prototype.constructor = Platformer.BootState; Platformer.BootState.prototype.init = function (level_file) { «utilizar estricta»; this.level_file = level_file;}; Platformer.BootState.prototype.preload = function () { «utilizar estricta»; this.load.text ( «level1», this.level_file);}; Platformer.BootState.prototype.create = function () { «utilizar estricta»; varlevel_text, level_data; level_text = this.game.cache.getText ( «level1»); level_data = JSON.parse (level_text); this.game.state.start ( «LoadingState», verdadero, falso, level_data );};

          Como se muestra a continuación, las cargas de estado de carga de todos los recursos del juego en el método de precarga, y cuando esté terminado, se inicia el Estado de baldosa crean en el método. Tenga en cuenta que, dado que se especifica el tipo de activo en el archivo JSON, es sencillo para cargar ellos, y que puede cargar diferentes tipos de activos.

          LoadingState.js de archivos en js / estados:
          var Platformer = Platformer || {}; Platformer.LoadingState = function () { «utilizar estricta»; Phaser.State.call (this);}; Platformer.prototype = Object.create (Phaser.State.prototype); Platformer.prototype.constructor = Platformer.LoadingState; Platformer.LoadingState.prototype.init = function (level_data) { » utilizar estricta «; this.level_data = level_data;}; Platformer.LoadingState.prototype.preload = function () { «utilizar estricta»; var activos, asset_loader, asset_key, activo; = activos this.level_data.assets; para (asset_key en activos) {// activos de carga de acuerdo con la clave activo si (assets.hasOwnProperty (asset_key)) {activos = activos [asset_key]; interruptor (asset.type) {case «imagen»: this.load.image (asset_key, asset.source); descanso; caso «spritesheet»: this.load.spritesheet (asset_key, asset.source, asset.frame_width, asset.frame_height, asset.frames, asset.margin, asset.spacing); descanso; caso «tilemap»: this.load.tilemap (asset_key, asset.source, null, Phaser.Tilemap.TILED_JSON); descanso; }}}}; Platformer.LoadingState.prototype.create = function () { «utilizar estricta»; this.game.state.start ( «gamestate», verdadero, falso, this.level_data);}; 1234567891011121314151617181920212223242526272829303132333435363738394041varPlatformer = Platformer || {}; Platformer.LoadingState = function () { «utilizar estricta»; Phaser.State.call ( este);}; Platformer.prototype = Object.create (Phaser.State.prototype); Platformer.prototype.constructor = Platformer.LoadingState; Platformer.LoadingState.prototype.init = function (level_data) { «utilizar estricta»; esto. level_data = level_data;}; Platformer.LoadingState.prototype.preload = function () { «utilizar estricta»; varassets, asset_loader, asset_key, activo; activos = this.level_data.assets; para (inassets asset_key) {// activos de carga de acuerdo a keyif activo (assets.hasOwnProperty (asset_key)) {activos = activos [asset_key]; conmutador (asset.type) {case «imagen»: this.load.image (asset_key, asset.source); break; caso «spritesheet» : this.load.spritesheet (asset_key, asset.source, asset.frame_width, asset.frame_height, asset.frames, asset.margin, asset.spacing); break; caso «tilemap»: this.load.tilemap (asset_key, activos .Fuente, nul l, Phaser.Tilemap.TILED_JSON); break;}}}}; Platformer.LoadingState.prototype.create = function () { «utilizar estricta»; this.game.state.start ( «gamestate», verdadero, falso, este .level_data);};

          Finalmente, el Estado de baldosa lee los datos del mapa y crea los objetos del juego. Vamos a pasar por este estado en más detalles, ya que es el estado más importante de nuestro juego. Le recomiendo que eche un vistazo en el archivo JSON generado por baldosa, para tener una idea de su estructura. Si usted está confundido acerca de las propiedades y métodos mapa Phaser, compruebe la documentación Phaser (http://phaser.io/docs/2.4.3/Phaser.Tilemap.html).

          TiledState.js de archivos en js / estados:
          var Platformer = Platformer || {}; Platformer.TiledState = function () { «utilizar estricta»; Phaser.State.call (this);}; Platformer.TiledState.prototype = Object.create (Phaser.State.prototype); Platformer.TiledState.prototype.constructor = Platformer.TiledState; Platformer.TiledState.prototype.init = function ( level_data) { «utilizar estricta»; this.level_data = level_data; this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; this.scale.pageAlignHorizontally = true; this.scale.pageAlignVertically = true; sistema de física this.game.physics.startSystem (Phaser.Physics.ARCADE) // empezar; this.game.physics.arcade.gravity.y = 1,000; // crear el mapa y establecer conjunto de baldosas this.map = this.game.add.tilemap (level_data.map.key); this.map.addTilesetImage (this.map.tilesets [0] .name, level_data.map.tileset);}; Platformer.TiledState.prototype.create = function () { «utilizar estricta»; GROUP_NAME var, object_layer, collision_tiles; // crear capas de mapa this.layers = {}; this.map.layers.forEach (función (capa) {this.layers [layer.name] = this.map.createLayer (layer.name), si (layer.properties.collision) {// collision_tiles capa colisión = [] ; layer.data.forEach (function (data_row) {// encontrar azulejos usados ​​en la capa de data_row.forEach (function (teja) {// Comprobar si se trata de un índice de baldosas válido y no está ya en la lista si (teja. índice & gt; 0 & amp; & amp; collision_tiles.indexOf (tile.index) === -1) {collision_tiles.push (tile.index);}}, esto);}, this); this.map.setCollision (collision_tiles , cierto, layer.name);}}, this); // cambiar el tamaño del mundo para ser el tamaño de las this.layers capa actuales [this.map.layer.name] .resizeWorld (); // crear grupos this.groups = {}; this.level_data.groups.forEach (function (GROUP_NAME) {this.groups [GROUP_NAME] = this.game.add.group ();}, this); this.prefabs = {}; para (object_layer en this.map.objects) {if (this.map.objects.hasOwnProperty (object_layer)) {// crear capa de objetos this.map.objects [object_layer] .forEach (this.create_object, este); }}}; Platformer.TiledState.prototype.create_object = función (objeto) { «utilizar estricta»; posición var, prefabricada; coordenadas inicia // baldosa en la posición de la esquina inferior izquierda = { «x»: object.x + (this.map.tileHeight / 2), «y»: object.y – (this.map.tileHeight / 2)}; // crear el objeto de acuerdo con su tipo interruptor (object.type) {case «jugador»: Platformer.Player prefabricada = new (esto, la posición, object.properties); descanso; caso «ground_enemy»: = prefabricadas nuevo Platformer.Enemy (esto, la posición, object.properties); descanso; caso «flying_enemy»: = prefabricadas nuevo Platformer.FlyingEnemy (esto, la posición, object.properties); descanso; caso «objetivo»: Platformer.Goal prefabricada = new (esto, la posición, object.properties); descanso; } this.prefabs [object.name] = prefabricada;}; Platformer.TiledState.prototype.restart_level = function () { «utilizar estricta»; this.game.state.restart (verdadero, falso, this.level_data);}; 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394varPlatformer = Platformer || {}; Platformer.TiledState = function () { «utilizar estricta»; Phaser.State.call (this);} ; Platformer.TiledState.prototype = Object.create (Phaser.State.prototype); Platformer.TiledState.prototype.constructor = Platformer.TiledState; Platformer.TiledState.prototype.init = function (level_data) { «uso estricto»; esto. level_data = level_data; this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; this.scale.pageAlignHorizontally = true; this.scale.pageAlignVertically = true; // iniciar systemthis.game.physics.startSystem la física (Phaser.Physics.ARCADE) ; this.game.physics.arcade.gravity.y = 1,000; // crear el mapa y conjunto tilesetthis.map = this.game.add.tilemap (level_data.map.key); this.map.addTilesetImage (this.map. baldosas [0] .name, level_data.map.tileset);}; Platformer.TiledState.prototype.c reate = function () { «utilizar estricta»; vargroup_name, object_layer, collision_tiles; // crear layersthis.layers mapa = {}; this.map.layers.forEach (función (capa) {this.layers [layer.name] = this.map.createLayer (layer.name), si (layer.properties.collision) {// layercollision_tiles colisión = []; layer.data.forEach (function (data_row) {// encontrar azulejos usados ​​en la layerdata_row.forEach ( función (teja) {// Comprobar si se trata de un índice de baldosas válido y no está ya en la listif (tile.index & gt; 0 & amp; & amp; collision_tiles.indexOf (tile.index) === – 1) {collision_tiles.push ( tile.index);}}, this);}, this); this.map.setCollision (collision_tiles, es cierto, layer.name);}}, this); // cambiar el tamaño del mundo para ser el tamaño de los actuales layerthis .layers [this.map.layer.name] .resizeWorld (); // crear groupsthis.groups = {}; this.level_data.groups.forEach (function (GROUP_NAME) {this.groups [GROUP_NAME] = this.game. add.group ();}, este); this.prefabs = {}; for (inthis.map.objects object_layer) {if (this.map.objects.hasOwnProperty (object_layer)) {// crear objectsthis.map capa. obj ECTS [object_layer] .forEach (this.create_object, este);}}}; Platformer.TiledState.prototype.create_object = función (objeto) { «utilizar estricta»; varposition, prefabricada; // coordenadas azulejos comienza en la parte inferior izquierda cornerposition = { «x»: object.x + (this.map.tileHeight / 2), «y»: object.y- (this.map.tileHeight / 2)}; // crear el objeto de acuerdo con su typeswitch (object.type ) {case «jugador»: prefabricada = newPlatformer.Player (esto, la posición, object.properties); break; casos «ground_enemy»: prefabricada = newPlatformer.Enemy (esto, la posición, object.properties); break; caso «flying_enemy» : prefabricada = newPlatformer.FlyingEnemy (esto, la posición, object.properties); break; casos «objetivo»: prefabricada = newPlatformer.Goal (esto, la posición, object.properties); break;} this.prefabs [object.name] = prefabricada;}; Platformer.TiledState.prototype.restart_level = function () { «use strict»; this.game.state.restart (verdadero, falso, this.level_data);};

          en primer lugar, tenemos que decirle Phaser lo que representa la imagen de cada juego de fichas que utilizamos en baldosa (las baldosas azulejos, están en this.map.tilesets). Ya que tienen un solo juego de fichas, y tenemos el nombre de la imagen de nuestro archivo JSON, podemos hacerlo fácilmente.

          A continuación, tenemos que crear las capas del mapa. El objeto de mapa tiene una serie de capas que vamos a repetir. Si una capa tiene la colisión propiedad que hemos añadido en la baldosa, tenemos que hacer que esté disponible para la colisión. Para ello, tenemos que decirle Phaser qué fichas pueden colisionar, por lo que iterar a través de layer.data, que contiene todas las fichas de capa y añadirlos a una lista. Al final, nos propusimos la colisión para todos estos azulejos. Después de crear todas las capas, se cambia el tamaño del mundo para ser el tamaño de la capa actual. Puesto que todas nuestras capas tienen el mismo tamaño, no importa cuál es la capa actual.

          El siguiente paso es la creación de los grupos de nuestro juego. Esto puede hacerse fácilmente mediante la iteración de la serie de grupos de nuestro fichero JSON y la adición de un nuevo grupo para cada uno de ellos. Sin embargo, dos cosas son importantes en este paso: 1) el orden de los grupos de definir el orden en que se dibujan en la pantalla; 2) grupos deben crearse después de capas, de lo contrario las capas serían atraídos por encima de ellos.

          Por último, pasamos por todas las capas de objetos (en nuestro caso, sólo uno) y crear los objetos del juego. Dado que en nuestro plano definimos el tipo de objeto, es fácil crear una instancia del prefabricada correcta. Tenga en cuenta que nuestra posición prefabricada no es la misma posición del objeto de baldosa. Esto ocurre porque las coordenadas de baldosas comienzan en la esquina inferior izquierda, mientras que las coordenadas Phaser comienzan en la esquina superior izquierda. Además, queremos que nuestro punto de anclaje prefabricados a ser de 0,5, por lo que tenemos que ajustar la posición de ser el centro de nuestra prefabricada.

          Prefabs

          En Phaser, las casas prefabricadas son objetos que se extienden Phaser.Sprite, actuando como objetos en nuestro juego. En nuestro juego de plataformas, necesitaremos cuatro casas prefabricadas: jugador, enemigo, FlyingEnemy y Gol, que todos pueden explicar ahora. Esta es nuestra clase prefabricada:

          Archivo Prefab.js en js / casas prefabricadas:
          var Platformer = Platformer || {}; Platformer.Prefab = function (game_state, posición, propiedades) { «utilizar estricta»; Phaser.Sprite.call (esto, game_state.game, position.x, position.y, properties.texture); this.game_state = game_state; this.game_state.groups [properties.group] .add (este);}; Platformer.Prefab.prototype = Object.create (Phaser.Sprite.prototype); Platformer.Prefab.prototype.constructor = Platformer.Prefab; 12345678910111213varPlatformer = Platformer || {}; Platformer.Prefab = function (game_state, posición, propiedades) { «utilizar estricta»; Phaser.Sprite.call (esto, game_state.game, position.x, position.y, properties.texture); esto. game_state = game_state; this.game_state.groups [properties.group] .add (este);}; Platformer.Prefab.prototype = Object.create (Phaser.Sprite.prototype); Platformer.Prefab.prototype.constructor = Platformer.Prefab ;

          reproductor

          Nuestro jugador será capaz de caminar, saltar y matar enemigos. Para que necesitaremos las siguientes propiedades:. La velocidad de desplazamiento, velocidad saltando y rebotando, que son todos inicializado en el constructor

          En el método de actualización, que marque todas las que el jugador de colisión (capa de colisión y enemigos) y hacer la lógica caminar y saltar. Hay algunos detalles importantes a la notificación con respecto jugador caminar. En primer lugar, no queremos cambiar la dirección jugador, mientras que ya está en movimiento. Por ejemplo, si está moviendo hacia la izquierda y se pulsa la flecha hacia la derecha, queremos que el jugador a seguir moviéndose hacia la izquierda hasta que se suelte la flecha izquierda. Por lo tanto, cambiamos el jugador de velocidad sólo cuando se pulsa la tecla correcta y el jugador no se está moviendo en la dirección opuesta. En segundo lugar, tenemos que cambiar la dirección de sprites en consecuencia. Para ello, utilizamos el atributo escala del sprite, que se invertirá la dirección de sprites.

          Para permitir al jugador a saltar, podemos simplemente comprobar si la tecla de flecha hacia arriba en el método de actualización y cambiar la velocidad en consecuencia. La única cosa importante tener en cuenta aquí es que sólo queremos que el jugador pueda saltar cuando se está tocando el suelo. Desde el suelo es una baldosa, tenemos que utilizar la propiedad bloqueada del cuerpo, sin tocarse (consulte la documentación en http://phaser.io/docs/2.4.3/Phaser.Physics.Arcade.Body.html para más información ).

          Otra cosa que tenemos que hacer es comprobar si el jugador había caído. Para ello, comprobamos si el jugador inferior y es igual a la altura del mundo. Si es así, el jugador muere.

          Finaly, el golpe método comprueba enemigo se llama cuando el jugador choca con un enemigo y comprueba si el jugador está en la parte superior del enemigo. Si ese es el caso, el enemigo está muerto, de lo contrario los troqueles jugador.

          Archivo player.js en js / casas prefabricadas:
          var Platformer = Platformer || {}; Platformer.Player = function (game_state, posición, propiedades) { «utilizar estricta»; Platformer.Prefab.call (esto, game_state, la posición, propiedades); this.walking_speed = + properties.walking_speed; this.jumping_speed = + properties.jumping_speed; this.bouncing = + properties.bouncing; this.game_state.game.physics.arcade.enable (this); this.body.collideWorldBounds = true; this.animations.add ( «pie», [0, 1, 2, 1], 6, true); this.frame = 3; this.anchor.setTo (0,5); this.cursors = this.game_state.game.input.keyboard.createCursorKeys ();}; Platformer.Player.prototype = Object.create (Platformer.Prefab.prototype); Platformer.Player.prototype.constructor = Platformer.Player; Platformer .Player.prototype.update = function () { «utilizar estricta»; this.game_state.game.physics.arcade.collide (esto, this.game_state.layers.collision); this.game_state.game.physics.arcade.collide (esto, this.game_state.groups.enemies, this.hit_enemy, null, este); si (this.cursors.right.isDown & amp; & amp; this.body.velocity.x & gt; = 0) {// movimiento correcto this.body.velocity.x = this.walking_speed; this.animations.play ( «pie»); this.scale.setTo (-1, 1); } Else if (this.cursors.left.isDown & amp; & amp; this.body.velocity.x & lt; = 0) {// mover hacia la izquierda this.body.velocity.x = -this.walking_speed; this.animations.play ( «pie»); this.scale.setTo (1, 1); } Else {// parada this.body.velocity.x = 0; this.animations.stop (); this.frame = 3; } // saltar sólo si tocando una baldosa si (this.cursors.up.isDown & amp; & amp; this.body.blocked.down) {this.body.velocity.y = -this.jumping_speed; } // muere si toque el extremo de la pantalla si (this.bottom & gt; = this.game_state.game.world.height) {this.game_state.restart_level (); }}; Platformer.Player.prototype.hit_enemy = function (jugador, enemigo) { «use strict»; // si el jugador está por encima del enemigo, el enemigo está muerto, de lo contrario los troqueles jugador si (enemy.body.touching.up) {enemy.kill (); player.y – = this.bouncing; } Else {this.game_state.restart_level (); }}; 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768varPlatformer = Platformer || {}; Platformer.Player = función (game_state, posición, propiedades) { «utilizar estricta»; Platformer.Prefab.call (esto, game_state, la posición, propiedades); this.walking_speed = + inmuebles .walking_speed; this.jumping_speed = + properties.jumping_speed; this.bouncing = + properties.bouncing; this.game_state.game.physics.arcade.enable (this); this.body.collideWorldBounds = true; this.animations.add ( «pie», [0,1,2,1], 6, true); this.frame = 3; this.anchor.setTo (0,5); this.cursors = this.game_state.game.input.keyboard.createCursorKeys ( );}; Platformer.Player.prototype = Object.create (Platformer.Prefab.prototype); Platformer.Player.prototype.constructor = Platformer.Player; Platformer.Player.prototype.update = function () { «utilizar estricta»; this.game_state.game.physics.arcade.collide (esto, this.game_state.layers.collision); this.game_state.game.physics.arcade.collide (esto, this.game_state.groups.enem IES, this.hit_enemy, null, esta), si (this.cursors.right.isDown & amp; & amp; this.body.velocity.x & gt; = 0) {// movimiento rightthis.body.velocity.x = this.walking_speed; this.animations.play ( «pie»); this.scale.setTo (-1,1);} elseif (this.cursors.left.isDown & amp; & amp; this.body.velocity.x & lt; = 0) {// movimiento leftthis.body.velocity.x = -this.walking_speed; this.animations.play ( «pie»); this.scale.setTo (1,1);} else {// stopthis.body.velocity.x = 0 ; this.animations.stop (); this.frame = 3;} // saltar sólo si tocar un tileif (this.cursors.up.isDown & amp; & amp; this.body.blocked.down) {this.body.velocity. y = -this.jumping_speed;} // muere si toques finales de la screenif (this.bottom & gt; = this.game_state.game.world.height) {this.game_state.restart_level ();}}; Platformer.Player. prototype.hit_enemy = function (jugador, enemigo) { «utilizar estricta»; // si el jugador está por encima del enemigo, el enemigo está muerto, de lo contrario el jugador diesif (enemy.body.touching.up) {enemy.kill () ; player.y- = this.bouncing;} else {this.game_state.restart_level ();}};

          Enemigo

          Nuestro enemigo será sencillo, un viaje de solo caminar hasta una distancia máxima y luego cambiar de dirección. Para ello, las propiedades que necesitamos son: velocidad de la marcha, a poca distancia y dirección. Tenga en cuenta que, en el constructor fijamos la velocidad inicial y la escala de acuerdo a la propiedad de dirección. Además, se guarda la posición x anterior, lo que en un principio es el sprite x.

          En el método de actualización, comprobamos si la distancia recorrida (this.x – this.previous_x) es mayor o igual a la máxima distancia a pie. Si ese es el caso cambiamos la dirección, la actualización de la velocidad, y la escala x anterior.

          Enemy.js de archivos en JS / casas prefabricadas:
          var Platformer = Platformer || {}; Platformer.Enemy = function (game_state, posición, propiedades) { «utilizar estricta»; Platformer.Prefab.call (esto, game_state, la posición, propiedades); this.walking_speed = + properties.walking_speed; this.walking_distance = + properties.walking_distance; // guardar x anteriores para realizar un seguimiento de la distancia caminado this.previous_x = this.x; this.game_state.game.physics.arcade.enable (this); this.body.velocity.x = properties.direction * this.walking_speed; this.scale.setTo (-properties.direction, 1); this.anchor.setTo (0,5);}; Platformer.Enemy.prototype = Object.create (Platformer.Prefab.prototype); Platformer.Enemy.prototype.constructor = Platformer.Enemy; Platformer.Enemy.prototype.update = function ( ) { «utilizar estricta»; this.game_state.game.physics.arcade.collide (esto, this.game_state.layers.collision); // cambiar la dirección si caminado la distancia máxima si (Math.abs (this.x – this.previous_x) & gt; = this.walking_distance) {this.body.velocity.x * = -1; this.previous_x = this.x; this.scale.setTo (-this.scale.x, 1); }}; 12345678910111213141516171819202122232425262728293031323334varPlatformer = Platformer || {}; Platformer.Enemy = función (game_state, posición, propiedades) { «utilizar estricta»; Platformer.Prefab.call (esto, game_state, la posición, propiedades); this.walking_speed = + inmuebles .walking_speed; this.walking_distance = + properties.walking_distance; // ahorro x anteriores para seguir la pista de caminado distancethis.previous_x = this.x; this.game_state.game.physics.arcade.enable (this); this.body.velocity .x = properties.direction * this.walking_speed; this.scale.setTo (-properties.direction, 1); this.anchor.setTo (0,5);}; Platformer.Enemy.prototype = Object.create (Platformer.Prefab. prototipo); Platformer.Enemy.prototype.constructor = Platformer.Enemy; Platformer.Enemy.prototype.update = function () { «uso estricto»; this.game_state.game.physics.arcade.collide (esto, this.game_state. layers.collision); // cambiar la dirección si caminado el máximo distanceif (Math.abs (this.x-this.previous_x) & gt; = this.walking_distance) {this.body.velocity.x * = – 1; esto. previous_x = º is.x; this.scale.setTo (-this.scale.x, 1);}};

          Flying Enemigo

          Ahora que tenemos nuestro enemigo regular, la creación de un enemigo volador es muy fácil. No hacemos más que crear otra prefabricada que se extiende enemigo, y que no se ve afectado por la gravedad. Además, dado que su activo enemigo volador es diferente, tenemos una animación también.

          FlyingEnemy.js de archivos en JS / casas prefabricadas:
          var Platformer = Platformer || {}; Platformer.FlyingEnemy = function (game_state, posición, propiedades) { «utilizar estricta»; Platformer.Enemy.call (esto, game_state, la posición, propiedades); // enemigos voladores no son afectadas por la gravedad this.body.allowGravity = false; this.animations.add ( «volando», [0, 1], 5, true); this.animations.play ( «flying»);}; Platformer.FlyingEnemy.prototype = Object.create (Platformer.Enemy.prototype); Platformer.FlyingEnemy.prototype.constructor = Platformer.FlyingEnemy; 123456789101112131415varPlatformer = Platformer || {}; Platformer.FlyingEnemy = function (game_state, posición, propiedades) { «uso estricto»; Platformer.Enemy.call (esto, game_state, posición, propiedades); // volando enemigos no se ven afectados por gravitythis.body.allowGravity = false; este .animations.add ( «volando», [0,1], 5, true); this.animations.play ( «flying»);}; Platformer.FlyingEnemy.prototype = Object.create (Platformer.Enemy.prototype); Platformer.FlyingEnemy.prototype.constructor = Platformer.FlyingEnemy;

          Goal

          Nuestro objetivo es simple. Tiene una característica siguiente nivel, y la superposición con el jugador. Si el jugador llega a la meta, el siguiente nivel se debe iniciar.

          Tenga en cuenta que, para cargar el siguiente nivel sólo tenemos que iniciar el envío como parámetro la ruta del archivo JSON siguiente nivel Estado de arranque. En este tutorial, vamos a tener un solo nivel, pero esta estructura hace que sea sencillo para que sea un juego de niveles múltiples. Trate de crear diferentes niveles, y ver cómo funciona.

          Archivo Goal.js en JS / casas prefabricadas:
          var Platformer = Platformer || {}; Platformer.Goal = function (game_state, posición, propiedades) { «utilizar estricta»; Platformer.Prefab.call (esto, game_state, la posición, propiedades); this.next_level = properties.next_level; this.game_state.game.physics.arcade.enable (this); this.anchor.setTo (0,5);}; Platformer.Goal.prototype = Object.create (Platformer.Prefab.prototype); Platformer.Goal.prototype.constructor = Platformer.Goal; Platformer.Goal.prototype.update = function ( ) { «utilizar estricta»; this.game_state.game.physics.arcade.collide (esto, this.game_state.layers.collision); this.game_state.game.physics.arcade.overlap (esto, this.game_state.groups.players, this.reach_goal, null, este);}; Platformer.Goal.prototype.reach_goal = function () { «utilizar estricta»; // iniciar el this.game_state.game.state.start siguiente nivel ( «BootState», verdadero, falso, this.next_level);}; 123456789101112131415161718192021222324252627varPlatformer = Platformer || {}; Platformer.Goal = function (game_state, posición, propiedades ) { «utilizar estricta»; Platformer.Prefab.call (esto, game_state, de posición, propiedades); this.next_level = properties.next_level; this.game_state.game.physics.arcade.enable (this); this.anchor.setTo (0,5);}; Platformer.Goal.prototype = Object.create (Platformer.Prefab.prototype); Platformer.Goal.prototype.constructor = Platformer.Goal; Platformer.Goal.prototype.update = function () { «utilizar estricta «; this.game_state.game.physics.arcade.collide (esto, this.game_state.layers.collision); this.game_state.game.physics.arcade.overlap (esto, this.game_state.groups.players, this.reach_goal , null, este);}; Platformer.Goal.prototype.reach_goal = function () { «use strict»; // iniciar la siguiente levelthis.game_state.game.state.start ( «BootState», verdadero, falso, esto. next_level);};

          terminar el juego

          Ahora que tenemos nuestra lógica del juego, sabemos qué propiedades son necesarias para definir en el mapa de baldosa. Sólo podemos ponerlos en nuestro mapa y nuestro juego está funcionando!

          Phaser un juego de plataformas tutorial

          Avísame en la sección de comentarios de su opinión y lo que les gustaría ver en los próximos tutoriales.

          Mensajes relacionados
          HTML5 desarrollo del juego con Phaser

Deja una respuesta

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