En el último tutorial que creó los estados básicos Phaser para nuestro juego. Ahora, vamos a añadir el entrenador en el WorldState, y cambiar nuestro juego de Pokemon desovar con regularidad. Los siguientes temas serán cubiertos en este tutorial:

En este primer tutorial que cubrirá el siguiente contenido:


  • Creación de un entrenador prefabricada para caminar alrededor del mundo
  • Creación de una casa prefabricada de Pokemon desovar regularmente en el mundo
  • Adición de diferentes especies de Pokemon con diferentes probabilidades
  • Guardar el Pokémon capturado por el entrenador, que se muestran en su Pokedex

    Para leer este tutorial, es importante que usted está familiarizado con los conceptos siguientes:


    • Javascript y conceptos orientados a objetos.
    • conceptos básicos Phaser, tales como: estados, sprites, los grupos y la física de arcade
    • Creación de mapas con baldosa

      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 descargar los archivos de código fuente tutorial aquí.

      Trainer prefabricada

      Empecemos creando el entrenador prefabricada. En el juego original Pokemon GO el entrenador camina de acuerdo a su posición GPS. Sin embargo, en esta serie sólo vamos a hacer que camine hacia una posición deseada se obtiene cuando los clics del jugador (o toques la pantalla).

      Con el fin de hacer eso, en el constructor que necesitamos para salvar su velocidad al caminar, definir sus animaciones, inicializar su cuerpo físico y el evento de entrada para mover el entrenador.
      Pokemon.Trainer = function (game_state, nombre, posición, propiedades) { «utilizar estricta»; rotate_tween var; Pokemon.Prefab.call (esto, game_state, nombre, posición, propiedades); this.walking_speed = + properties.walking_speed; this.animations.add ( «walking_down», [0, 1, 2, 3], 10, true); this.animations.add ( «walking_up», [4, 5, 6, 7], 10, true); this.animations.add ( «walking_right», [8, 9, 10, 11], 10, true); this.animations.add ( «walking_left», [12, 13, 14, 15], 10, true); this.stopped_frames = [0, 8, 12, 4, 0]; this.game_state.game.physics.p2.enable (this); this.game_state.game.input.onDown.add (this.move_to, este); this.target_position = new Phaser.Point (this.position.x, this.position.y);}; 1234567891011121314151617181920Pokemon.Trainer = function (game_state, nombre, posición, propiedades) { «uso estricto»; varrotate_tween; Pokemon.Prefab. llamada (esto, game_state, nombre, posición, propiedades); this.walking_speed = + properties.walking_speed; this.animations.add ( «walking_down», [0,1,2,3], 10, true); this.animations .add ( «walking_up», [4,5,6,7], 10, true); this.animations.add ( «walking_right», [8,9,10,11], 10, true); this.animations .add ( «walking_left», [12,13,14,15], 10, true); this.stopped_frames = [0,8,12,4,0]; this.game_state.game.physics.p2.enable ( este); this.game_state.game.input.onDown.add (this.move_to, este); this.target_position = newPhaser.Point (this.position.x, this.position.y);};

      El “ método move_to”simplemente establecer una nueva posición de destino para el entrenador.
      Pokemon.Trainer.prototype.move_to = función (puntero) { «utilizar estricta»; this.target_position.x = Math.round (pointer.position.x); this.target_position.y = Math.round (pointer.position.y);}; 12345Pokemon.Trainer.prototype.move_to = función (puntero) { «utilizar estricta»; this.target_position.x = Math.round (pointer.position .x); this.target_position.y = Math.round (pointer.position.y);};

      Ahora el método de actualización es el responsable de mover el entrenador. Este método comienza comprobando si el entrenador tiene que moverse en la coordenada y, mediante la comparación de su actual coordenada y en la coordenada y de la posición de destino. Si es así, nos propusimos su velocidad en la dirección y. A continuación, vamos a hacer lo mismo para la coordenada x. Si no hay movimiento es necesario, fijamos la velocidad de 0.

      Por último, jugamos la animación correcta de acuerdo a la velocidad del entrenador. Si la velocidad es 0 en ambas direcciones, nos detenemos la animación actual y establecer el cuadro actual a la apropiada marco detuvo, utilizando la propiedad frente del cuerpo físico.
      Pokemon.Trainer.prototype.update = function () { «utilizar estricta»; direction_y var, direction_x; si (Math.abs (this.position.y – this.target_position.y)> 1) {direction_y = (this.position.y 1) {direction_x = (this.position.x 0) {this.animations.play ( «walking_down»); } Else if (this.body.velocity.y <0) {this.animations.play ( "walking_up"); } Else if (this.body.velocity.x> 0) {this.animations.play ( «walking_right»); } Else if (this.body.velocity.x <0) {this.animations.play ( "walking_left"); } Else {this.animations.stop (); this.frame = this.stopped_frames [this.body.facing]; }}; 123456789101112131415161718192021222324252627282930Pokemon.Trainer.prototype.update = function () { "utilizar estricta"; vardirection_y, direction_x; si (Math.abs (this.position.y-this.target_position.y)> 1) {direction_y = (este .position.y 1) {direction_x = (this.position.x 0) {this.animations. juego ( «walking_down»);} elseif (this.body.velocity.y <0) {this.animations.play ( "walking_up");} elseif (this.body.velocity.x> 0) {this.animations. play ( «walking_right»);} elseif (this.body.velocity.x <0) {this.animations.play ( "walking_left");} else {this.animations.stop (); this.frame = this.stopped_frames [this.body.facing];}};

      a estas alturas, ya se puede intentar añadir el entrenador al mapa de baldosa WorldSt comió. Sólo es necesario recordar para añadir el entrenador prefabricada a la propiedad “prefab_classes” en WorldState.

      entrenador

      PokemonSpawner prefabricada

      El siguiente paso es generar Pokemon en todo el mapa del mundo.

      En primer lugar, vamos a cambiar el prefabricada PokemonSpawn. Hasta ahora, este prefabricada sólo tenía un evento de entrada para iniciar el CatchState. Vamos a cambiarlo para que sea visible sólo cuando el entrenador está cerca, y matar la semilla después de algún tiempo.

      Por lo tanto, en el constructor que necesitamos para salvar la duración PokemonSpawn y el radio de detección. Luego, configurándola como invisible e iniciar el evento matanza.
      Pokemon.PokemonSpawn = function (game_state, nombre, posición, propiedades) { «utilizar estricta»; Pokemon.Prefab.call (esto, game_state, nombre, posición, propiedades); this.anchor.setTo (0,25); this.scale.setTo (0,25); this.duration = properties.duration; this.detection_radius = properties.detection_radius; = This.visible FALSE; this.add_kill_event (); // evento de entrada añadir a tratar captura de esta Pokemon this.events.onInputDown.add (this.try_catching, este);}; 1234567891011121314151617Pokemon.PokemonSpawn = función (game_state, nombre, posición, propiedades) { «uso estricto»; Pokemon.Prefab .call (esto, game_state, nombre, posición, propiedades); this.anchor.setTo (0,25); this.scale.setTo (0,25); this.duration = properties.duration; this.detection_radius = properties.detection_radius; esto. visible = false; this.add_kill_event (); // evento de entrada añadir a intentar atrapar el presente Pokemonthis.events.onInputDown.add (this.try_catching, this);};

      El método “add_kill_event” se inicia un temporizador con una aleatoria duración que matará a la semilla después de algún tiempo. Se obtiene la duración aleatoria entre los valores mínimo y máximo en la propiedad de duración.
      Pokemon.PokemonSpawn.prototype.add_kill_event = function () { «utilizar estricta»; var duración; duración = this.game_state.rnd.between (this.duration.min, this.duration.max); this.kill_timer = this.game_state.time.create (); this.kill_timer.add (Phaser.Timer.SECOND * duración, this.kill, este);}; 1234567Pokemon.PokemonSpawn.prototype.add_kill_event = function () { «utilizar estricta»; varduration; duración = this.game_state.rnd. entre (this.duration.min, this.duration.max); this.kill_timer = this.game_state.time.create (); this.kill_timer.add (Phaser.Timer.SECOND * duración, this.kill, este); };

      el método de “actualización”, por su parte, se comprobará si el entrenador está cerca de la PokemonSpawn, con el fin de mostrarlo. Hacemos esto mediante la medición de la distancia entre las dos casas prefabricadas. Si esta distancia es menor que el radio de detección hacemos el desove visible y permitir a sus entradas, por lo que ahora el jugador puede cogerla.
      Pokemon.PokemonSpawn.prototype.update = function () { «utilizar estricta»; distance_to_trainer var, trainer_within_detection_radius; distance_to_trainer = this.position.distance (this.game_state.prefabs.trainer.position); trainer_within_detection_radius = distance_to_trainer <= this.detection_radius; this.visible = trainer_within_detection_radius; this.inputEnabled = trainer_within_detection_radius;}; 12345678Pokemon.PokemonSpawn.prototype.update = function () { "utilizar estricta"; vardistance_to_trainer, trainer_within_detection_radius; distance_to_trainer = this.position.distance (this.game_state.prefabs.trainer.position); trainer_within_detection_radius = distance_to_trainer <= this.detection_radius; this.visible = trainer_within_detection_radius; this.inputEnabled = trainer_within_detection_radius;};.

      Ahora vamos a crear un PokemonSpawner prefabricada, que en realidad va a crear PokemonSpawn en el mapa

      Con el fin de hacer eso tenemos que ahorrar en el constructor de las siguientes propiedades: las propiedades predeterminadas de desove con el fin de crear ellos, el mínimo y el tiempo máximo de regeneración con el fin de crear un temporizador de desove, y una gama de distancias de desove. Al final creamos un temporizador de desove y llamar a un método para planificar su próximo evento.
      Pokemon.PokemonSpawner = function (game_state, nombre, posición, propiedades) { «utilizar estricta»; Pokemon.Prefab.call (esto, game_state, nombre, posición, propiedades); this.DEFAULT_SPAWN_PROPERTIES = {textura: «», grupo: «desova», duración: {min: 30, max: 60}, detection_radius: 50}; this.spawn_time_min = + properties.spawn_time_min; this.spawn_time_max = + properties.spawn_time_max; this.spawn_range = + properties.spawn_range; this.spawn_timer = this.game_state.time.create (false); this.schedule_spawn ();}; 123456789101112131415161718Pokemon.PokemonSpawner = function (game_state, nombre, posición, propiedades) { «utilizar estricta»; Pokemon.Prefab.call (esto, game_state, nombre, posición, propiedades); this.DEFAULT_SPAWN_PROPERTIES = { textura: «», grupo: «desova», duración: {min: 30, max: 60}, detection_radius: 50}; this.spawn_time_min = + properties.spawn_time_min; this.spawn_time_max = + properties.spawn_time_max; this.spawn_range = + properties.spawn_range; this.spawn_timer = this.game_state.time.create (false); this.schedule_spawn ();};

      El método “schedule_spawn” pick un número aleatorio entre los tiempos mínimo y máximo de regeneración y añadir una nuevo evento con esta duración. Este evento se llama al método “engendro”, lo que creará un nuevo PokemonSpawn.
      Pokemon.PokemonSpawner.prototype.schedule_spawn = function () { «utilizar estricta»; var tiempo; // añadir un nuevo evento desove con el tiempo aleatorio entre un rango de tiempo = this.game_state.rnd.between (this.spawn_time_min, this.spawn_time_max); this.spawn_timer.add (* Phaser.Timer.SECOND tiempo, this.select_pokemon, este); this.spawn_timer.start ();}; 12345678Pokemon.PokemonSpawner.prototype.schedule_spawn = function () { «utilizar estricta»; vartime; // Añadir un nuevo evento desove con el tiempo aleatorio entre una rangetime = this.game_state.rnd.between (this.spawn_time_min, this.spawn_time_max); this.spawn_timer.add (* Phaser.Timer.SECOND tiempo, this.select_pokemon, this); this.spawn_timer.start ();};

      con el fin de crear un nuevo engendro , vamos a utilizar un método definido en un archivo diferente (Utils.js) que crea una casa prefabricada de una piscina. La idea es conseguir el primer prefabricada muertos de la piscina y la creación de una nueva prefabricada sólo si no hay nadie muerto para su reutilización. Si ya hay una casa prefabricada muertos, simplemente restablecerla a la posición deseada.
      Pokemon.create_prefab_from_pool = función (piscina, prefab_constructor, game_state, prefab_name, prefab_position, prefab_properties) { «utilizar estricta»; prefabricada var; // obtener el primer prefabricada muertos de la piscina prefabricada = pool.getFirstDead (); Si {// si no hay prefabricada muertos, crear una nueva prefabricada = new prefab_constructor (game_state, prefab_name, prefab_position, prefab_properties) (prefabricada!); } Else {// si hay una casa prefabricada muerto, vuelve a establecer en la nueva posición prefab.reset (prefab_position.x, prefab_position.y); } Return prefabricada;}; 1234567891011121314Pokemon.create_prefab_from_pool = function (piscina, prefab_constructor, game_state, prefab_name, prefab_position, prefab_properties) { «use strict»; varprefab; // Obtener el primer prefabricada muerto de la poolprefab = pool.getFirstDead (), si (! prefabricada) {// si no hay prefabricada muertos, crear un nuevo oneprefab = newprefab_constructor (game_state, prefab_name, prefab_position, prefab_properties);} else {// si hay una casa prefabricada muerto, vuelve a establecer en el nuevo positionprefab.reset (prefab_position.x, prefab_position.y);} returnprefab;};

      por lo tanto, en el método de “engendro”, simplemente hay que definir la piscina, el nombre prefabricada, su posición y propiedades, con el fin de llamar a la “ método create_prefab_from_pool”. Tenga en cuenta que la posición se calcula por recoger una distancia aleatoria del desove mediante la propiedad “spawn_range”. Después del desove otro pokemon, llamamos al método “schedule_spawn” de nuevo, para programar el próximo evento.
      Pokemon.PokemonSpawner.prototype.spawn = function (pokemon_data) { «utilizar estricta»; var piscina, spawn_name, distancia, spawn_position, spawn_properties; Piscina = this.game_state.groups.spawns; spawn_name = this.name + «_spawn_» + pool.countLiving () + pool.countDead (); distancia = nuevo Phaser.Point (this.game_state.rnd.between (-this.spawn_range, this.spawn_range), this.game_state.rnd.between (-this.spawn_range, this.spawn_range)); spawn_position = nuevo Phaser.Point (this.x + distance.x, this.y + distance.y); spawn_properties = Object.create (this.DEFAULT_SPAWN_PROPERTIES); spawn_properties.texture = pokemon_data.properties.texture; spawn_properties.pokemon_properties = pokemon_data.properties; Pokemon.create_prefab_from_pool (piscina, Pokemon.PokemonSpawn.prototype.constructor, this.game_state, spawn_name, spawn_position, spawn_properties); this.schedule_spawn ();}; 1234567891011121314Pokemon.PokemonSpawner.prototype.spawn = function (pokemon_data) { «utilizar estricta»; varpool, spawn_name, distancia, spawn_position, spawn_properties; piscina = this.game_state.groups.spawns; spawn_name = esto. nombre + «_ freza _» + pool.countLiving () + pool.countDead (); distancia = newPhaser.Point (this.game_state.rnd.between (-this.spawn_range, this.spawn_range), this.game_state.rnd.between (- this.spawn_range, this.spawn_range)); spawn_position = newPhaser.Point (this.x + distance.x, this.y + distance.y); spawn_properties = Object.create (this.DEFAULT_SPAWN_PROPERTIES); spawn_properties.texture = pokemon_data. properties.texture; spawn_properties.pokemon_properties = pokemon_data.properties; Pokemon.create_prefab_from_pool (piscina, Pokemon.PokemonSpawn.prototype.constructor, this.game_state, spawn_name, spawn_position, spawn_properties); this.schedule_spawn ();};

      A estas alturas ya se puede intentar añadir un desovador a su mapa de baldosa y ver si se está generando correctamente Pokemon. Además, verifique si las huevas están funcionando correctamente, al presentarse sólo cuando el entrenador está cerca de ellos.

      freza

      Adición de diferentes especies de Pokemon

      Ahora que estamos de desove Pokemon, queremos añadir diferentes especies de Pokémon con diferentes probabilidades de reaparición.

      Vamos a describir todos los Pokémon en un archivo JSON separada como la siguiente (si tienes curiosidad, tomo el nombre de Pokémon usando este generador):
      [{ «Probabilidad»: 0,3, «propiedades»: { «textura»: «draros_image», «grupo»: «pokemons», «de anclaje»: { «x»: 0,5, «y»: 0,5}, «marco» : 1, «fleeing_rate»: 0,3, «especie»: «Draros»}}, { «probabilidad»: 0,5, «propiedades»: { «textura»: «penguine_image», «grupo»: «pokemons», «ancla» : { «x»: 0,5, «y»: 0,5}, «marco»: 1, «fleeing_rate»: 0,4, «especie»: «Penguine»}}, { «probabilidad»: 1,0, «propiedades»: { » textura «: «spinron_image», «grupo»: «pokemons», «ancla»: {» x «: 0,5, «y»: 0,5}, «marco»: 1, «fleeing_rate»: 0,5, «especie»:» Spinron»}}] 1234567891011121314151617181920212223242526272829303132333435 [{ «probabilidad»: 0,3, «propiedades»: { «textura»: «draros_image», «grupo»: «pokemons», «de anclaje»: { «x»: 0,5, «y»: 0.5}, «marco»: 1, «fleeing_rate»: 0,3, «especie»: «Draros»}}, { «probabilidad»: 0,5, «propiedades»: { «textura»: «penguine_image», «grupo»:» pokemons», «ancla»: { «x»: 0,5, «y»: 0,5}, «marco»: 1, «fleeing_rate»: 0,4, «especie»: «Penguine»}}, { «probabilidad»: 1,0, «propiedades»: { «textura»: «spinron_image», «grupo»: «pokemon», «ancla»: { «x» : 0,5, «y»: 0,5}, «marco»: 1, «fleeing_rate»: 0,5, «especie»: «Spinron»}}]

      Este archivo se lee en el método de “precarga” de WorldState, y analizada en el final del método “crear”.
      Pokemon.WorldState.prototype.preload = function () { «uso estricto»; this.load.text ( «pokemon_probabilities», this.level_data.pokemon_probabilities);}; this.pokemon_probabilities = JSON.parse (this.game.cache.getText ( «pokemon_probabilities»)); 123456Pokemon.WorldState.prototype.preload = function () { «utilizar estricta»; this.load.text ( «pokemon_probabilities», this.level_data.pokemon_probabilities);}; this.pokemon_probabilities = JSON.parse (this.game.cache.getText ( «pokemon_probabilities»)); < p> Ahora vamos a cambiar las estructuras prefabricadas y PokemonSpawn PokemonSpawner para soportar diferentes especies.

      En el PokemonSpawn prefabricada simplemente tenemos que añadir una nueva propiedad llamada “pokemon_properties”, que tendrá las propiedades específicas de la especie (obtenidos del archivo JSON. Entonces, el método “try_catching” comenzará CatchState con los “pokemon_properties ”como un parámetro adicional.
      this.pokemon_properties = properties.pokemon_properties; Pokemon.PokemonSpawn.prototype.try_catching = function () { «utilizar estricta»; // iniciar CatchState this.game_state.game.state.start ( «BootState», verdadero, falso, «activos / niveles / catch_level.json», «CatchState», {pokemon_properties: this.pokemon_properties});}; 1234567this.pokemon_properties = properties.pokemon_properties; Pokemon.PokemonSpawn.prototype.try_catching = function () { «use strict»; // iniciar CatchStatethis.game_state.game.state.start ( «BootState», verdadero, falso, «activos / niveles / catch_level. json», «CatchState», {pokemon_properties: this.pokemon_properties});};

      En el PokemonSpawner prefabricadas tenemos que seleccionar la especie pokemon antes del desove ella. Por lo tanto, el temporizador de desove ahora llamar a un método “select_pokemon”, que recogerá un número aleatorio entre 0 y 1. Este número se utiliza para seleccionar las especies a ser generado. Podemos hacer eso por iteración a través de todas las especies y la elección de la primera cuya probabilidad es mayor que el número generado (siempre y cuando las especies de probabilidades se clasifican en orden ascendente). Después de la elección de la especie, que llamamos el método de “semilla”. También tenemos que cambiar el método de “semilla” para establecer la propiedad “pokemon_properties” de acuerdo a la especie.
      Pokemon.PokemonSpawner.prototype.schedule_spawn = function () { «utilizar estricta»; var tiempo; // añadir un nuevo evento desove con el tiempo aleatorio entre un rango de tiempo = this.game_state.rnd.between (this.spawn_time_min, this.spawn_time_max); this.spawn_timer.add (* Phaser.Timer.SECOND tiempo, this.select_pokemon, este); this.spawn_timer.start ();}; Pokemon.PokemonSpawner.prototype.select_pokemon = function () { «utilizar estricta»; var random_number, pokemon_index, pokemon_data; random_number = this.game_state.rnd.frac (); para (pokemon_index = 0; pokemon_index Por último, tenemos que cambiar nuestra Phaser estados para permitir CatchState para recibir el parámetro adicional. En primer lugar, cambiamos BootState y LoadingState para recibir el parámetro extra y simplemente lo envían al siguiente estado.
      Pokemon.BootState.prototype.init = función (level_file, next_state, extra_parameters) { «utilizar estricta»; this.level_file = level_file; this.next_state = next_state; this.extra_parameters = extra_parameters;}; Pokemon.BootState.prototype.create = function () { «utilizar estricta»; level_text var, level_data; // analizar el archivo de nivel que un objeto JSON y enviar sus datos a LoadingState level_text = this.game.cache.getText ( «Nivel 1»); level_data = JSON.parse (level_text); this.game.state.start ( «LoadingState», verdadero, falso, level_data, this.next_state, this.extra_parameters);}; 123456789101112131415Pokemon.BootState.prototype.init = función (level_file, next_state, extra_parameters) { «utilizar estricta» ; this.level_file = level_file; this.next_state = next_state; this.extra_parameters = extra_parameters;}; Pokemon.BootState.prototype.create = function () { «utilizar estricta»; varlevel_text, level_data; // analizar el archivo de nivel como una objeto JSON y enviar sus datos a LoadingStatelevel_text = this.game.cache.getText ( «level1»); level_data = JSON.parse (level_text); this.game.state.start ( «LoadingState», verdadero, falso, level_data, este .next_state, this.extra_parameters);}; Pokemon.LoadingState.prototype.init = function (level_data, next_state, extra_parameters) { «utilizar estricta»; this.level_data = level_data; this.next_state = next_state; this.extra_parameters = extra_parameters;}; Pokemon.LoadingState.prototype.create = function () { «utilizar estricta»; this.game.state.start (this.next_state, verdadero, falso, this.level_data, this.extra_parameters);}; 1234567891011Pokemon.LoadingState.prototype.init = función (level_data, next_state, extra_parameters) { «utilizar estricta»; esta .level_data = level_data; this.next_state = next_state; this.extra_parameters = extra_parameters;}; Pokemon.LoadingState.prototype.create = function () { «utilizar estricta»; this.game.state.start (this.next_state, es cierto, falsas, this.level_data, this.extra_parameters);};

      a continuación, en CatchState podemos guardar las propiedades de pokemon el parámetro adicional. Ahora, en lugar de crear el Pokémon en CatchState desde el archivo JSON, vamos a crear manualmente en el final del método “crear” (y extraerlo del archivo JSON). Al hacerlo, podemos crear el Pokémon con las propiedades correctas de acuerdo a sus especies.
      Pokemon.CatchState.prototype.init = function (level_data, extra_parameters) { «utilizar estricta»; this.level_data = level_data; this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; this.scale.pageAlignHorizontally = true; this.scale.pageAlignVertically = true; // iniciar la física del sistema this.game.physics.startSystem (Phaser.Physics.P2JS); this.game.physics.arcade.gravity.y = 0; this.pokemon_properties = extra_parameters.pokemon_properties;}; Pokemon.CatchState.prototype.create = function () { «utilizar estricta»; var GROUP_NAME, prefab_name, pokemon_data; // crear grupos this.groups = {}; this.level_data.groups.forEach (function (GROUP_NAME) {this.groups [GROUP_NAME] = this.game.add.group ();}, this); this.collision_groups = {}; this.level_data.collision_groups.forEach (función (collision_group_name) {this.collision_groups [collision_group_name] = this.game.physics.p2.createCollisionGroup ();}, this); // crear prefabricadas this.prefabs = {}; para (prefab_name en this.level_data.prefabs) {if (this.level_data.prefabs.hasOwnProperty (prefab_name)) {// crear prefabricada this.create_prefab (prefab_name, this.level_data.prefabs [prefab_name]); }} pokemon_data = {tipo: «Pokémon», de posición: {x: 0,5, Y: 0,6}, propiedades: this.pokemon_properties} this.create_prefab ( «Pokémon», pokemon_data);}; 12345678910111213141516171819202122232425262728293031323334353637383940414243444546Pokemon.CatchState.prototype.init = de función (level_data, extra_parameters) { «use strict»; this.level_data = level_data; this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; this.scale.pageAlignHorizontally = true; this.scale.pageAlignVertically = true; // iniciar la física systemthis.game.physics.startSystem (Phaser.Physics.P2JS); this.game.physics.arcade.gravity.y = 0; this.pokemon_properties = extra_parameters.pokemon_properties;}; Pokemon.CatchState.prototype.create = function () { «utilizar estricta»; vargroup_name, prefab_name, pokemon_data; // crear groupsthis.groups = {}; this.level_data.groups.forEach (function (GROUP_NAME) {this.groups [GROUP_NAME] = this.game.add.group ( );}, this); this.collision_groups = {}; this.level_data.collision_groups.forEach (function (collision_group_name) {this.collision_groups [col lision_group_name] = this.game.physics.p2.createCollisionGroup ();}, this); // crear prefabsthis.prefabs = {}; para (inthis.level_data.prefabs prefab_name) {if (this.level_data.prefabs.hasOwnProperty ( prefab_name)) {// crear prefabthis.create_prefab (prefab_name, this.level_data.prefabs [prefab_name]);}} pokemon_data = {tipo: «Pokémon», de posición: {x: 0,5, y: 0.6}, propiedades: esto. pokemon_properties} this.create_prefab ( «pokemon», pokemon_data);};

      Por ahora se puede tratar de jugar con diferentes especies de Pokemon. Comprobar si se generaron correctamente, y si el Pokemon en CatchState se crean correctamente.

      Mostrando la Pokedex

      La última cosa que vamos a hacer en este tutorial es la adición de un Pokedex prefabricada para mostrar los Pokémon atrapados actualmente.

      Con el fin de mostrar los Pokémon atrapados vamos a crear un PokemonSprite prefabricada, que se limitará a mostrar los Pokémon y sus especies. Así, en el constructor que necesitamos para crear un TextPrefab, que debe ser matado en el método de “matar”.
      var Pokemon = Pokemon || {}; Pokemon.PokemonSprite = function (game_state, nombre, posición, propiedades) { «utilizar estricta»; Pokemon.Prefab.call (esto, game_state, nombre, posición, propiedades); text_position var; this.anchor.setTo (0,5); this.scale.setTo (0,25); text_position = nuevo Phaser.Point (this.x, this.y + (this.height / 2) + 10); this.message_text = new Pokemon.TextPrefab (this.game_state, this.name + «_TEXT», text_position, properties.text_properties); this.message_text.anchor.setTo (0,5);}; Pokemon.PokemonSprite.prototype = Object.create (Pokemon.Prefab.prototype); Pokemon.PokemonSprite.prototype.constructor = Pokemon.PokemonSprite; Pokemon.PokemonSprite.prototype.kill = function () { «utilizar estricta»; Phaser.Sprite.prototype.kill.call (this); this.message_text.kill ();}; 1234567891011121314151617181920212223varPokemon = Pokemon || {}; Pokemon.PokemonSprite = función (game_state, nombre, posición, propiedades) { «utilizar estricta»; Pokemon.Prefab.call (esto, game_state, nombre, posición, propiedades); vartext_position; this.anchor.setTo (0,5); this.scale.setTo (0,25); text_position = newPhaser.Point (this.x, this.y + (this.height / 2) 10); esta .message_text = newPokemon.TextPrefab (this.game_state, this.name + «_ texto», text_position, properties.text_properties); this.message_text.anchor.setTo (0,5);}; Pokemon.PokemonSprite.prototype = Object.create (Pokemon. Prefab.prototype); Pokemon.PokemonSprite.prototype.constructor = Pokemon.PokemonSprite; Pokemon.PokemonSprite.prototype.kill = function () { «utilizar estricta»; Phaser.Sprite.prototype.kill.call (this); this.message_text .kill ();};

      Ahora el Pokedex tendrá las propiedades predeterminadas para PokemonSprite, que se pueden cambiar de acuerdo con las especies de Pokemon. En el constructor también vamos a inicializar la posición de la primera PokemonSprite y añadir un evento de entrada para ocultar el Pokedex cuando se hace clic.
      Pokemon.Pokedex = función (game_state, nombre, posición, propiedades) { «uso estricto»; Pokemon.Prefab.call (esto, game_state, nombre, posición, propiedades); this.anchor.setTo (0,5); this.DEFAULT_POKEMON_SPRITE_PROPERTIES = {textura: «», grupo: «pokemon_sprites», text_properties: {texto: «», grupo: «HUD», estilo: {font: «14px Arial», relleno: «# 000»}}}; this.initial_pokemon_sprite_position = new Phaser.Point (this.x – (this.width / 2) + 50, this.y – (this.height / 2) + 50); // evento de entrada complemento al método de estado del juego llamada this.events.onInputDown.add (this.hide, este); this.visible = false;}; 1234567891011121314151617181920212223242526Pokemon.Pokedex = función (game_state, nombre, posición, propiedades) { «utilizar estricta»; Pokemon.Prefab.call (esto, game_state, nombre, posición, propiedades); this.anchor.setTo (0,5); this.DEFAULT_POKEMON_SPRITE_PROPERTIES = {textura: «», grupo: «pokemon_sprites», text_properties: {text: «», grupo: «HUD», el estilo: {font: «14px Arial», relleno: «# 000» }}}; this.initial_pokemon_sprite_position = newPhaser.Point (this.x- (this.width / 2) + 50, this.y- (this.height / 2) 50); // evento de entrada añadir a estado del juego llamada methodthis.events.onInputDown.add (this.hide, this); this.visible = false;};

      el método “show” hará que el Pokedex visible, permitir a sus eventos de entrada (de modo que podemos ocultarlo más adelante) y mostrar todos los Pokémon atrapados (guardado en una matriz “caught_pokemon” en el juego). Vamos a crear las PokemonSprites utilizando el método de “create_prefab_from_pool”, por lo que sólo hay que definir el nombre prefabricada, posición y propiedades. Tenga en cuenta que sólo tenemos que cambiar la textura y el texto en las propiedades por defecto, mientras que la posición empieza por la inicial y se actualiza después de cada iteración.
      Pokemon.Pokedex.prototype.show = function () { «utilizar estricta»; pokemon_sprite var, pokemon_sprite_position; = This.visible verdaderos; this.inputEnabled = true; pokemon_sprite_position = nuevo Phaser.Point (this.initial_pokemon_sprite_position.x, this.initial_pokemon_sprite_position.y); this.game_state.game.caught_pokemon.forEach (function (pokemon) {piscina var, pokemon_sprite_name, pokemon_sprite_properties; piscina = this.game_state.groups.pokemon_sprites; pokemon_sprite_name = «pokemon_sprite_name_» + pool.countLiving () + pool.countDead (); pokemon_sprite_properties = Object.create (this.DEFAULT_POKEMON_SPRITE_PROPERTIES); pokemon_sprite_properties.texture = pokemon.texture; pokemon_sprite_properties.text_properties.text = pokemon.species; pokemon_sprite = Pokemon.create_prefab_from_pool (piscina, Pokemon.PokemonSprite.prototype.constructor, this.game_state, pokemon_sprite_name , pokemon_sprite_position, pokemon_sprite_properties); pokemon_sprite_position.x + = pokemon_sprite.width + 50; si (pokemon_sprite_position.x> (this.width – 50)) {pokemon_sprite_position.x = this.initial_pokemon_sprite_position.x; pokemon_sprite_position.y + = pokemon_sprite.height + 50;}}, esto);}; 123456789101112131415161718192021222324Pokemon.Pokedex.prototype.show = function () { «utilizar estricta»; varpokemon _sprite, pokemon_sprite_position; this.visible = true; this.inputEnabled = true; pokemon_sprite_position = newPhaser.Point (this.initial_pokemon_sprite_position.x, this.initial_pokemon_sprite_position.y); this.game_state.game.caught_pokemon.forEach (function (pokemon) { varpool, pokemon_sprite_name, pokemon_sprite_properties; piscina = this.game_state.groups.pokemon_sprites; pokemon_sprite_name = «pokemon_sprite_name _» + pool.countLiving () + pool.countDead (); pokemon_sprite_properties = Object.create (this.DEFAULT_POKEMON_SPRITE_PROPERTIES); pokemon_sprite_properties.texture = pokemon .texture; pokemon_sprite_properties.text_properties.text = pokemon.species; pokemon_sprite = Pokemon.create_prefab_from_pool (piscina, Pokemon.PokemonSprite.prototype.constructor, this.game_state, pokemon_sprite_name, pokemon_sprite_position, pokemon_sprite_properties); pokemon_sprite_position.x + = pokemon_sprite.width + 50; si (pokemon_sprite_position.x> (this.width-50)) {pokemon_sprite_position.x = this.initial_pokemon_sprite_position.x; pokemon_sprite_position.y + = empuje mon_sprite.height+50;}},this);};

      The “hide” method, by its turn, will simply make the Pokedex invisible, disable its input events and kill all created PokemonSprites.

      Pokemon.Pokedex.prototype.hide = function () { «use strict»; = This.visible FALSE; this.inputEnabled = false; this.game_state.groups.pokemon_sprites.forEach(function (pokemon_sprite) { pokemon_sprite.kill(); }, this);};123456789Pokemon.Pokedex.prototype.hide=function(){«use strict»;this.visible=false;this.inputEnabled=false;this.game_state.groups.pokemon_sprites.forEach(function(pokemon_sprite){pokemon_sprite.kill();},this);};

      There are two things left to do. First, we need to add all caught Pokemon to the “caught_pokemon” array. The second thing is adding a button to show the Pokedex.

      In order to add caught Pokemon to the “caught_pokemon” array we need to change the Pokemon prefab. Once a Pokemon is caught we check if it is the first time this species was caught. If so, we add it to the array. The “already_caught” method simply checks if there is already a Pokemon with the same species in the array.

      Pokemon.Pokemon.prototype.catch = function () { «use strict»; var catch_message; // kill the Pokemon and show the catch message box this.kill(); if (!this.already_caught()) { this.game_state.game.caught_pokemon.push({species: this.species, texture: this.texture_key}); } catch_message = new Pokemon.MessageBox(this.game_state, «catch_message», {x: this.game_state.game.world.centerX, y: this.game_state.game.world.centerY}, this.MESSAGE_PROPERTIES); catch_message.message_text.text = «Gotcha!»;};Pokemon.Pokemon.prototype.already_caught = function () { «use strict»; var caught = false; this.game_state.game.caught_pokemon.forEach(function (pokemon) { if (pokemon.species === this.species) { caught = true; } }, this); return caught;};123456789101112131415161718192021222324Pokemon.Pokemon.prototype.catch=function(){«use strict»;varcatch_message;// kill the Pokemon and show the catch message boxthis.kill();if(!this.already_caught()){this.game_state.game.caught_pokemon.push({species:this.species,texture:this.texture_key});}catch_message=newPokemon.MessageBox(this.game_state,»catch_message»,{x:this.game_state.game.world.centerX,y:this.game_state.game.world.centerY},this.MESSAGE_PROPERTIES);catch_message.message_text.text=»Gotcha!»;};Pokemon.Pokemon.prototype.already_caught=function(){«use strict»;varcaught=false;this.game_state.game.caught_pokemon.forEach(function(pokemon){if(pokemon.species===this.species){caught=true;}},this);returncaught;};

      Finally, to create the Pokedex button we are going to create a Button prefab which will simply extend Phaser.Button calling a method from “game_state” (defined in the “callback” property) when clicked. Then, we can add a Button prefab in the Tiled map to call the “show_pokedex” method in WorldState. This method will simply call the “show” method from the pokedex.

      var Pokemon = Pokemon || {};Pokemon.Button = function (game_state, name, position, properties) { «use strict»; Phaser.Button.call(this, game_state.game, position.x, position.y, properties.texture, game_state[properties.callback], game_state); this.game_state = game_state; this.name = Nombre; this.game_state.groups [properties.group] .add (this); this.anchor.setTo (0,5); this.game_state.prefabs[name] = this;};Pokemon.Button.prototype = Object.create(Phaser.Button.prototype);Pokemon.Button.prototype.constructor = Pokemon.Button;12345678910111213141516171819varPokemon=Pokemon||{};Pokemon.Button=function(game_state,name,position,properties){«use strict»;Phaser.Button.call(this,game_state.game,position.x,position.y,properties.texture,game_state[properties.callback],game_state);this.game_state=game_state;this.name=name;this.game_state.groups[properties.group].add(this);this.anchor.setTo(0.5);this.game_state.prefabs[name]=this;};Pokemon.Button.prototype=Object.create(Phaser.Button.prototype);Pokemon.Button.prototype.constructor=Pokemon.Button;Pokemon.WorldState.prototype.show_pokedex = function () { «use strict»; this.prefabs.pokedex.show();};1234Pokemon.WorldState.prototype.show_pokedex=function(){«use strict»;this.prefabs.pokedex.show();};

      Now you can try catching some Pokemon and check if your Pokedex is being updated. Try catching the same species more than once and see if the Pokedex is only showing each species once.

      pokedex

      And that concludes this tutorial. In the next one we are going to add Pokestops to get Pokeballs, as well as different types of Pokeballs with different catching rates.

      Mensajes relacionados

Deja una respuesta

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