En la primera parte de este tutorial que creó el escenario mundial junto con un jugador que mueve en él. Ahora vamos a hacer que la escena de la batalla, donde las unidades jugador a luchar a los enemigos.

Tabla de contenidos

Objetivos de aprendizaje

  • Gestión de Escena en Phaser 3
  • entrada de teclado Procesamiento de navegar a través de la interfaz de usuario
  • Uso de eventos personalizados
  • Heredar Phaser 3 clases
  • Creación de lógica básica Escena de batalla
  • Uso de temporizadores

    El código fuente

    Puede descargar los archivos de tutorial aquí.

    Activos

    Todos los activos utilizados en este tutorial son A0 licencia. Puede descargar desde aquí:
    Reproductor de caracteres – https://opengameart.org/content/rpg-character-sprites
    Enemigos – https://opengameart.org/content/dragon-1

    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

      Creación de las escenas

      Vamos a empezar con un juego vacío y después vamos a fusionarlo con el código de la primera parte. Dos Escenas va a hacer todo el trabajo -. BattleScene, donde los jugadores podrán luchar y UIScene para la interfaz
      var BootScene = nuevo Phaser.Class ({Extiende: Phaser.Scene, initialize: función BootScene () {Phaser.Scene.call (esto, {key: ‘BootScene’});}, precarga: function () {// carga recursos this.load.spritesheet ( ‘jugador’ ‘activos / RPG_assets.png’, {frameWidth: 16, frameHeight: 16}); this.load.image ( ‘dragonblue’, ‘activos / dragonblue.png’); este .load.image ( ‘dragonorrange’, ‘activos / dragonorrange.png’);}, crear: function () {this.scene.start ( ‘BattleScene’);}}); var = new BattleScene Phaser.Class ({ extiende: Phaser.Scene, initialize: BattleScene función () {Phaser.Scene.call (esto, {clave: ‘BattleScene’});}, crear: function () {// Ejecutar Escena interfaz de usuario al mismo tiempo this.scene .launch ( ‘UIScene’);}}); var UIScene = new Phaser.Class ({Extiende: Phaser.Scene, initialize: función UIScene () {Phaser.Scene.call (esto, {key: ‘UIScene’}) ;}, crear: function () {}}); config var = {type: Phaser.AUTO, padre: ‘contenido’, anchura: 320, altura: 240, zoom: 2, pixelArt: true, la física: {default: ‘Arcade’, Arca DE: {gravedad: {Y: 0}}}, escena: [BootScene, BattleScene, UIScene]}; juego var = new Phaser.Game (config); 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576varBootScene = newPhaser.Class ({Extiende: Phaser.Scene, initialize: functionBootScene () {Phaser.Scene.call (esto, {clave: ‘BootScene’});}, precarga: function () {// carga resourcesthis.load.spritesheet ( ‘jugador’, ‘activos / RPG_assets.png’, {frameWidth: 16, frameHeight: 16}); this.load.image ( ‘dragonblue’, ‘activos / dragonblue.png’); this.load.image ( ‘dragonorrange’, ‘activos / dragonorrange.png’);} , crear: function () {this.scene.start ( ‘BattleScene’);}}); varBattleScene = newPhaser.Class ({Extiende: Phaser.Scene, initialize: functionBattleScene () {Phaser.Scene.call (esto, { clave: ‘BattleScene’});}, crear: function () {// Run Escena de interfaz de usuario al mismo timethis.scene.launch ( ‘UIScene’);}}); varUIScene = newPhaser.Class ({Extiende: Phaser. escena, initialize: functionUIScene () {Phaser.Scene.call (esto, tecla {: ‘UIScene’ });}, Crear: function () {}}); varconfig = {type: Phaser.AUTO, padre: ‘contenido’, anchura: 320, altura: 240, del mapa: 2, PixelArt: true, la física: {default : ‘Arcade’, Arcade: {gravedad: {y: 0}}}, escena: [BootScene, BattleScene, UIScene]}; vargame = newPhaser.Game (config);

      En el código anterior, la parte más interesante está en el BattleScene crear método. Aquí no usamos scene.start, pero scene.launch para ejecutar el UIScene.
      Cuando se ejecuta el juego ahora, no verá nada especial, pero tenga en cuenta que ambas escenas están activos al mismo tiempo. Para visualizar mejor que yo añadirá un objeto gráfico de interfaz de usuario y la escena se dibuja un fondo simple para la interfaz.

      En primer lugar añadir esta fila para crear BattleScene método:
      this.cameras.main.setBackgroundColor ( ‘RGBA (0, 200, 0, 0,5)’); 1this.cameras.main.setBackgroundColor ( ‘RGBA (0, 200, 0, 0,5)’);

      Esta es una truco sencillo para hacer el verde de fondo de escena sin añadir una imagen real de ella. Ahora agregue este código al crear UIScene método:
      this.graphics = this.add.graphics (); this.graphics.lineStyle (1, 0xffffff); this.graphics.fillStyle (0x031f4c, 1); this.graphics.strokeRect (2, 150, 90, 100); this.graphics.fillRect (2, 150, 90, 100); this.graphics.strokeRect (95, 150, 90, 100); this.graphics.fillRect (95, 150, 90, 100); this.graphics.strokeRect (188, 150, 130, 100); this.graphics.fillRect (188, 150, 130, 100); 123456789this.graphics = this.add.graphics (); this.graphics.lineStyle (1,0xffffff); this.graphics.fillStyle (0x031f4c, 1); esta .graphics.strokeRect (2,150,90,100); this.graphics.fillRect (2,150,90,100); this.graphics.strokeRect (95,150,90,100); this.graphics.fillRect (95,150,90,100); this.graphics.strokeRect (188,150,130,100 ); this.graphics.fillRect (188,150,130,100);

      al ejecutar el juego ahora, debería ver el fondo verde de la BattleScene y los tres rectángulos azules del UIScene:


      Ahora tenemos que crear un concepto para las unidades – ambos enemigos y héroes jugador. Voy a crear la Unidad de clase base como esto:
      Añadir este código en algún lugar fuera del código de escenas, por ejemplo en la parte superior del proyecto:
      Unidad var = new Phaser.Class ({Extiende: Phaser.GameObjects.Sprite, initialize: Función Unidad (escena, x, y, textura, marco, el tipo, CV, daños) {Phaser.GameObjects.Sprite.call (esto, escena , x, y, textura, marco) this.type type =; this.maxHp = this.hp = hp; this.damage = daño; // daños defecto}, ataque: function (objetivo) {target.takeDamage (esto. daño);}, takeDamage: function (daño) {this.hp – = daño;}}); 123456789101112131415161718varUnit = newPhaser.Class ({Extiende: Phaser.GameObjects.Sprite, initialize: functionUnit (escena, x, y, textura, marco, tipo, hp, daños) {Phaser.GameObjects.Sprite.call (esto, escena, x, y, textura, marco) this.type type =; this.maxHp = this.hp = hp; this.damage = daño ; // daños por defecto}, ataque: la función (objetivo) {target.takeDamage (this.damage);}, takeDamage: function (daño) {this.hp- ​​= daños;}});

      Y ahora lo haremos crear el Enemigo como esto:
      var = Enemigo nueva Phaser.Class ({Extiende: Unidad, initialize: función Enemigo (escena, x, y, textura, marco, el tipo, CV, daños) {Unit.call (esto, escena, x, y, textura, marco , tipo, hp, daños);}}); 12345678varEnemy = newPhaser.Class ({Extiende: Unidad, initialize: functionEnemy (escena, x, y, textura, marco, tipo, hp, daños) {Unit.call (esto, escena, x, y, textura, marco, el tipo, CV, daños);}});

      Y el jugador:
      var = new PlayerCharacter Phaser.Class ({Extiende: Unidad, initialize: función PlayerCharacter (escena, x, y, textura, marco, el tipo, CV, daños) {Unit.call (esto, escena, x, y, textura, marco , tipo, CV, daños); // voltear la imagen, así que no tengo que editar manualmente this.flipX = true; this.setScale (2);}}); 123456789101112varPlayerCharacter = newPhaser.Class ({Extiende: Unidad , initialize: functionPlayerCharacter (escena, x, y, textura, marco, tipo, hp, daños) {Unit.call (esto, escena, x, y, textura, marco, tipo, hp, daños); // voltear la imagen por lo que no tiene que editar es manuallythis.flipX = true; this.setScale (2);}});

      Como soy un poco perezoso, voy a utilizar este spritesheet sin los personajes miran a la izquierda. Para hacerlos girar a la izquierda en el juego voy a utilizar el flipX propiedad de Phaser3 Sprite.

      Para nuestra primera batalla que va a codificar tanto los héroes de los jugadores y los dragones enemigos. En la siguiente parte de este tutorial vamos a crear ellos de acuerdo con el flujo del juego.
      Cambiar el método de crear BattleScene a esto:
      crear: function () {// cambiar el fondo a this.cameras.main.setBackgroundColor verde ( ‘RGBA (0, 200, 0, 0,5)’); // personaje del jugador – guerrero var guerrero = new PlayerCharacter (esto, 250, 50, ‘player’, 1, ‘Warrior’, 100, 20); this.add.existing (guerrero); // personaje del jugador – mage var mage = new PlayerCharacter (esto, 250, 100, ‘player’, 4, ‘Mago’, 80, 8); this.add.existing (mage); dragonblue var = nuevo enemigo (esto, 50, 50, ‘dragonblue’, null, ‘Dragon’, 50, 3); this.add.existing (dragonblue); var dragonOrange = nuevo enemigo (esto, 50, 100, ‘dragonorrange’, null, ‘Dragon2’, 50, 3); this.add.existing (dragonOrange); // matriz con héroes this.heroes = [guerrero, mago]; // matriz con enemigos this.enemies = [dragonblue, dragonOrange]; // matriz con ambas partes, que atacarán this.units = this.heroes.concat (this.enemies); // Ejecutar Escena interfaz de usuario al mismo tiempo this.scene.launch ( ‘UIScene’); } 1234567891011121314151617181920212223242526272829create: function () {// cambiar el fondo a greenthis.cameras.main.setBackgroundColor ( ‘RGBA (0, 200, 0, 0,5)’); // personaje del jugador – warriorvarwarrior = newPlayerCharacter (esto, 250,50, ‘jugador’, 1, ‘Warrior’, 100,20); this.add.existing (guerrero); // personaje del jugador – magevarmage = newPlayerCharacter (esto, 250,100, ‘jugador’, 4, ‘Mago’, 80,8 ); this.add.existing (mage); vardragonblue = newEnemy (esto, 50,50, ‘dragonblue’, null, ‘Dragon’, 50,3); this.add.existing (dragonblue); vardragonOrange = newEnemy (esto , 50 100, ‘dragonorrange’, null, ‘Dragon2’, 50,3); this.add.existing (dragonOrange); // matriz con heroesthis.heroes = [guerrero, mago]; // matriz con enemiesthis.enemies = [ dragonblue, dragonOrange]; // matriz con ambas partes, la OMS attackthis.units = this.heroes.concat (this.enemies); // Run Ambiente de interfaz de usuario al mismo timethis.scene.launch ( ‘UIScene’);} < p> Ahora cuando se ejecuta el juego, debería ver algo como esto:


      Su momento de añadir la interfaz de usuario. Tendremos tres menús – Heroes del menú, enemigos del menú, y acciones del menú. Todos ellos heredarán clase Menu común. La clase de menú será un contenedor para objetos MenuItem y yo utilizará Phaser.GameObjects.Container que su clase base.

      Vamos a empezar con la clase MenuItem. Se extenderá Phaser.GameObjects.Text andit tendrá sólo dos métodos – seleccionar y deseleccionar. La primera de ellas a su vez, el texto amarillo y el segundo volverá a blanco.
      var MenuItem = new Phaser.Class ({Extiende: Phaser.GameObjects.Text, initialize: función MenuItem (x, y, texto, escena) {Phaser.GameObjects.Text.call (esto, escena, x, y, texto, { Color: ‘#ffffff’, align: ‘izquierda’, fontSize: 15});}, seleccionar: function () {this.setColor ( ‘# f8ff38’);}, anule la selección: function () {this.setColor (‘ #ffffff ‘);}}); 123456789101112131415161718varMenuItem = newPhaser.Class ({Extiende: Phaser.GameObjects.Text, initialize: functionMenuItem (x, y, texto, escena) {Phaser.GameObjects.Text.call (esto, escena, x , y, texto, {color: ‘# FFFFFF’, align: ‘izquierda’, fontSize: 15});}, seleccione: function () {this.setColor ( ‘# f8ff38’);}, para deshacer la selección: function () {this.setColor ( ‘# FFFFFF’);}});

      Ahora tenemos que crear la clase Menu. Va a ser un poco más complejo. Se necesita métodos para seleccionar y anular la selección en su conjunto (por ejemplo, cuando se selecciona el menú enemigos enteros al jugador necesidad de elegir un enemigo al ataque). También necesita métodos para añadir elementos de menú.
      var = new Menú Phaser.Class ({Extiende: Phaser.GameObjects.Container, inicialice: la función de menú (x, y, escena, héroes) {Phaser.GameObjects.Container.call (esto, escena, x, y); esto. MenuItems = []; this.menuItemIndex = 0; this.heroes = héroes; this.x = x; this.y = y;}, addMenuItem: function (unidad) {var menuItem = new MenuItem (0, this.menuItems. longitud * 20, unidad, this.scene); this.menuItems.push (menuItem); this.add (menuItem);}, moveSelectionUp: function () {this.menuItems [this.menuItemIndex] .deselect (); esto. menuItemIndex–; si (this.menuItemIndex <0) this.menuItemIndex = this.menuItems.length - 1; this.menuItems [this.menuItemIndex] .select ();}, moveSelectionDown: function () {this.menuItems [este .menuItemIndex] .deselect (); this.menuItemIndex ++; si (this.menuItemIndex> = this.menuItems.length) this.menuItemIndex = 0; this.menuItems [this.menuItemIndex] .select ();}, // seleccionar el menú en su conjunto y un elemento con índice de ella seleccionar: function (índice) {if índice = 0; this.menuItems [º (índice!) is.menuItemIndex] .deselect (); this.menuItemIndex = índice; this.menuItems [this.menuItemIndex] .select (); }, // desactivar esta anular la selección de menú: function () {this.menuItems [this.menuItemIndex] .deselect (); this.menuItemIndex = 0; }, Confirman: function () {// wen el jugador confirma su slection, hacer la acción}}); 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849varMenu = {(newPhaser.Class se extiende: Phaser.GameObjects.Container, inicialice: functionMenu (x, y, escena, héroes ) {Phaser.GameObjects.Container.call (esto, escena, x, y); this.menuItems = []; this.menuItemIndex = 0; this.heroes = héroes; this.x = x; this.y = y; }, addMenuItem: function (unidad) {varmenuItem = newMenuItem (0, this.menuItems.length * 20, unidad, this.scene); this.menuItems.push (menuItem); this.add (menuItem);}, moveSelectionUp: function () {this.menuItems [this.menuItemIndex] .deselect (); this.menuItemIndex -; if (this.menuItemIndex <0) this.menuItemIndex = this.menuItems.length-1; this.menuItems [this.menuItemIndex ] .select ();}, moveSelectionDown: function () {this.menuItems [this.menuItemIndex] .deselect (); this.menuItemIndex ++; si (this.menuItemIndex> = this.menuItems.length) this.menuItemIndex = 0; this.menuItems [this.menuItemIndex] .select ();}, // seleccionar el menú en su conjunto y un elemento con índice de itselect: function (índice) {if (índice!) de índice = 0; this.menuItems [this.menuItemIndex] .deselect (); this.menuItemIndex = índice; this.menuItems [this.menuItemIndex] .select ();}, // desactiva esta menudeselect: function () {this.menuItems [this.menuItemIndex] .deselect (); this.menuItemIndex = 0;}, confirman: function () {// wen el jugador confirma su slection , realizar la acción}});

      Ahora vamos a crear todos los menús separados:
      var HeroesMenu = new Phaser.Class ({Extiende: Menú, initialize: función HeroesMenu (x, y, escena) {Menu.call (esto, x, y, escena);}}); var ActionsMenu = new Phaser.Class ( {Extiende: Menú, initialize: función ActionsMenu (x, y, escena) {Menu.call (esto, x, y, escena); this.addMenuItem ( ‘Ataque’);}, confirman: function () {// hacer algo cuando el jugador selecciona una acción}}); var = new EnemiesMenu Phaser.Class ({Extiende: Menú, initialize: función EnemiesMenu (x, y, escena) {Menu.call (esto, x, y, escena);} , confirman: function () {// hacer algo cuando el jugador selecciona un enemigo}}); 12345678910111213141516171819202122232425262728293031323334353637varHeroesMenu = newPhaser.Class ({Extiende: Menú, initialize: functionHeroesMenu (x, y, escena) {Menu.call (esto, x , y, escena);}}); varActionsMenu = newPhaser.Class ({Extiende: Menú, initialize: functionActionsMenu (x, y, escena) {Menu.call (esto, x, y, escena); this.addMenuItem (‘ atacar ‘);}, confirman: function () {// hacer algo cuando el jugador selecciona una acción}}); varEnemiesMenu = newPhaser.Cla ss ({Extiende: Menú, initialize: functionEnemiesMenu (x, y, escena) {Menu.call (esto, x, y, escena);}, confirman: function () {// hacer algo cuando el jugador selecciona un enemigo} });

      Y ahora tenemos que añadir los menús a la UIScene. Añadir este código en la parte inferior de la UIScene crear método:
      // recipiente de base para contener todos los menús this.menus = this.add.container (); this.heroesMenu = new HeroesMenu (195, 153, this); this.actionsMenu = new ActionsMenu (100, 153, este); this.enemiesMenu = new EnemiesMenu (8, 153, este); // el menú seleccionado en ese momento this.currentMenu = this.actionsMenu; // menús añadir a los contenedores this.menus.add (this.heroesMenu); this.menus.add (this.actionsMenu); this.menus.add (this.enemiesMenu); 1234567891011121314 // recipiente de base para contener todos menusthis.menus = this.add.container (); this.heroesMenu = newHeroesMenu (195.153, este); this.actionsMenu = newActionsMenu (100153, esto); this.enemiesMenu = newEnemiesMenu (8153, this); // el menú seleccionado en ese momento this.currentMenu = this.actionsMenu; // añadir menús a la containerthis.menus.add (this.heroesMenu); this.menus.add (this.actionsMenu); this.menus.add (this.enemiesMenu);

      Ahora se verá que sólo el menú de acciones tiene algo en ella (porque hardcoded la acción ataque). HeroesMenu y EnemiesMenu tanto están vacíos. Tenemos que obtener los datos para ellos desde la BattleScene. Para acceder a la BattleScene del UIScene tenemos que añadir el siguiente código a su método de creación:
      this.battleScene = this.scene.get ( ‘BattleScene’); 1this.battleScene = this.scene.get ( ‘BattleScene’);

      En primer lugar voy a cambiar el menú. Voy a añadir funcionalidad para borrar todos los MenuItems de ella y luego añadir nueva. En primer lugar metthod será llamado claro y se eliminarán todos los elementos de menú de la matriz MenuItems. El segundo recibirá una serie de unidades y añadirlos como MenuItems través addMenuItem. Añadir estos dos métodos a la clase Menú:
      claro: function () {for (var i = 0; i Y necesitamos métodos para llamar a estas funciones de los menús. Añadir este código a la UIScene:
      remapHeroes: function () {héroes var = this.battleScene.heroes; this.heroesMenu.remap (héroes); }, remapEnemies: function () {enemigos var = this.battleScene.enemies; this.enemiesMenu.remap (enemigos); }, 12345678remapHeroes: function () {varheroes = this.battleScene.heroes; this.heroesMenu.remap (héroes);}, remapEnemies: function () {varenemies = this.battleScene.enemies; this.enemiesMenu.remap (enemigos); },

      Y tenemos que llamar a estas funciones. Añadir esto al final de la UIScene crear método:
      this.remapHeroes (); this.remapEnemies (); 12this.remapHeroes (); this.remapEnemies ();

      Ahora su juego debe tener este aspecto:


      Sin embargo, nuestro juego es demasiado inactivo. Tenemos que hacer que se mueva. La siguiente cosa en nuestra lista es para manejar la entrada del usuario. Un jugador se moverá a través del menú con las teclas de flecha y seleccionar un elemento en el menú pulsando el espacio.
      Para escuchar los eventos de teclado, añadir esta fila en la parte inferior de UIScene crear método:
      this.input.keyboard.on ( ‘keydown’, this.onKeyInput, this); 1this.input.keyboard.on ( ‘keydown’, this.onKeyInput, this);

      Y ahora tenemos que añadir a onKeyInput UIScene :
      onKeyInput: function (event) {}, 123onKeyInput: function (event) {},

      tendrá un menú activo, y todos los comandos se ejecutan en el mismo (currentMenu). Así que vamos a escribir el cuerpo de onKeyInput como esto:
      onKeyInput: function (evento) {if (this.currentMenu) {if (event.code === «ArrowUp») {this.currentMenu.moveSelectionUp (); } Else if (event.code === «ArrowDown») {this.currentMenu.moveSelectionDown (); } Else if (event.code === «ArrowRight» || event.code === «Shift») {} else if (event.code === «espacio» || event.code === «arrowleft» ) {this.currentMenu.confirm (); }}}, 12345678910111213onKeyInput: function (evento) {if (this.currentMenu) {if (event.code === «ArrowUp») {this.currentMenu.moveSelectionUp ();} elseif (event.code === «ArrowDown «) {this.currentMenu.moveSelectionDown ();} elseif (event.code ===» ArrowRight «|| event.code ===» Shift «) {} elseif (event.code ===» espacio «|| event.code === «arrowleft») {this.currentMenu.confirm ();}}},

      Es hora de poner en práctica las vueltas. Por ahora vamos a utilizar una matriz con todas las unidades del BattleScene. Vamos a mantener el índice de la unidad activa en ese momento y si se trata de un jugador, se va a esperar la entrada del usuario, de lo contrario el juego va a recoger héroe jugador al azar y el enemigo atacará a él.

      Añadir esta fila al final de BattleScene crear método:
      this.index = -1;

      Este índice nos mostrará la unidad actualmente activo en la matriz de unidades. Ahora necesitamos la función nextTurn. Añadir este código a BattleScene:
      nextTurn: function () {this.index ++; // si no hay más unidades, se comienza de nuevo desde el primero si (this.index> = this.units.length) {this.index = 0; } If (this.units [this.index]) {// si el jugador a su héroe si (this.units [this.index] instanceof PlayerCharacter) {this.events.emit ( ‘PlayerSelect’, this.index); } Else {// else if su unidad enemiga // escoger al azar héroe var = r Math.floor (Math.random () * this.heroes.length); // llamada a la función de ataque del enemigo this.units [this.index] .attack (this.heroes [r]); // temporizador complemento para la próxima vez, por lo que tendrá que suavizar juego this.time.addEvent ({retraso: 3000, devolución de llamada: this.nextTurn, callbackScope: esta}); }}}, 1234567891011121314151617181920nextTurn: function () {this.index ++; // si no hay más unidades, se comienza de nuevo desde el primer oneif (this.index> = this.units.length) {this.index = 0;} si (this.units [this.index]) {// si el jugador su heroif (this.units [this.index] instanceofPlayerCharacter) {this.events.emit ( ‘PlayerSelect’, this.index);} else {// más si su unidad enemiga // escogen al azar herovarr = Math.floor (Math.random () * this.heroes.length); // llamada a la función de ataque del enemigo this.units [this.index] [.attack (this.heroes r]); // añadir temporizador para el siguiente turno, por lo que tendrá que suavizar gameplaythis.time.addEvent ({retraso: 3000, devolución de llamada: this.nextTurn, callbackScope: esta});}}},

      a continuación enviamos el evento personalizado “PlayerSelect”. Vamos a esperar a que en UIScene.
      La otra parte interesante aquí es después de unidad de giro del enemigo utilizamos un evento programado para llamar nextTurn con un retraso de 3 segundos. De esta manera tendremos el tiempo para ver lo que está sucediendo en la pantalla.

      En Phaser3 puede detectar eventos de una escena en otra escena. Añadir esta fila en la parte inferior de UIScene crear método para escuchar ‘PlayerSelect’:
      this.battleScene.events.on ( «PlayerSelect», this.onPlayerSelect, this); 1this.battleScene.events.on ( «PlayerSelect», this.onPlayerSelect, this);

      Y entonces tenemos que crear el método UIScene onPlayerSelect .
      onPlayerSelect: function (id) {this.heroesMenu.select (id); this.actionsMenu.select (0); this.currentMenu = this.actionsMenu; }, 12345onPlayerSelect: function (id) {this.heroesMenu.select (id); this.actionsMenu.select (0); this.currentMenu = this.actionsMenu;},

      Su lógica relativamente simple, seleccionamos el id- ésimo elemento de la heroesMenu. A continuación, seleccionamos el primer elemento de la actionsMenu y se convierte en el menú activo en ese momento. Ahora tenemos que añadir métodos confirman a los menús. El usuario va a interactuar con el menú de acciones en primer lugar, a continuación, se confirmará su selección con la barra espaciadora y luego se debe elegir un enemigo para realizar la acción (ataque) sucesivamente. Cuando se selecciona un enemigo, tenemos que informar a la BattleScene.

      Ahora cambia el ActionsMenu a esto:
      var = new ActionsMenu Phaser.Class ({Extiende: Menú, initialize: función ActionsMenu (x, y, escena) {Menu.call (esto, x, y, escena); this.addMenuItem ( ‘Ataque’);}, confirman : function () {this.scene.events.emit ( ‘SelectEnemies’);}}); 1234567891011121314varActionsMenu = newPhaser.Class ({Extiende: Menú, initialize: functionActionsMenu (x, y, escena) {Menu.call (esto, x, y, escena); this.addMenuItem ( ‘Ataque’);}, confirman: function () {this.scene.events.emit ( ‘SelectEnemies’);}});

      En confirman enviaremos personalizada evento ‘SelectEnemies’. Ahora agregue esto al final del método UIScene crear:
      this.events.on ( «SelectEnemies», this.onSelectEnemies, this); 1this.events.on ( «SelectEnemies», this.onSelectEnemies, this);

      Y ahora tenemos que crear el método UIScene onSelectEnemies:
      onSelectEnemies: function () {this.currentMenu = this.enemiesMenu; this.enemiesMenu.select (0); }, 1234onSelectEnemies:. Function () {this.currentMenu = this.enemiesMenu; this.enemiesMenu.select (0);},

      Su relativamente simple, que acaba de hacer el enemiesMenu activo y seleccionamos el primer enemigo

      Ahora cambiar el método de confirmar EnemiesMenu a esto:
      confirman: function () {this.scene.events.emit ( «Enemigo», this.menuItemIndex); } 123confirm: function () {this.scene.events.emit ( «Enemigo», this.menuItemIndex);}

      Y a continuación, añadir esta fila en la parte inferior de UIScene crear método:
      this.events.on ( «Enemigo», this.onEnemy, this); 1this.events.on ( «Enemigo», this.onEnemy, this);

      Y el método onEnemy deseleccionará todos los menús y luego enviará los datos a la BattleScene:
      onEnemy: function (índice) {this.heroesMenu.deselect (); this.actionsMenu.deselect (); this.enemiesMenu.deselect (); this.currentMenu = null; this.battleScene.receivePlayerSelection ( ‘ataque’, index); }, 1234567onEnemy: function (índice) {this.heroesMenu.deselect (); this.actionsMenu.deselect (); this.enemiesMenu.deselect (); this.currentMenu = null; this.battleScene.receivePlayerSelection ( ‘ataque’, índice );},

      Somos casi listo. Vamos a empezar el primer turno de la UIScene crear método. De esta manera tendremos ambas escenas preparado antes de comenzar la lucha. Añadir esta fila a la parte inferior de UIScene crear método:
      this.battleScene.nextTurn (); 1this.battleScene.nextTurn ();

      Puede jugar un poco con el juego y se puede ver que la selección de jugadores no es recibida por el BattleScene
      .
      Añadir este método para BattleScene:
      receivePlayerSelection: función (acción, objetivo) {if (acción == ‘ataque’) {this.units [this.index] .attack (this.enemies [target]); This.time.addEvent} ({retraso: 3000, devolución de llamada: this.nextTurn, callbackScope: esta}); }, 123456receivePlayerSelection: función (acción, objetivo) {if (acción == ‘ataque’) {this.units [this.index] .attack (this.enemies [target]);} this.time.addEvent ({retardo: 3000, de devolución de llamada: this.nextTurn, callbackScope: esta});},

      Aquí tenemos una acción y un objetivo. Utilizamos la unidad activa en ese momento para atacar el objetivo. A continuación, utiliza un evento de temporizador para llamar al siguiente turno.
      Ahora el juego se puede jugar pero necesita mensajes para informar al jugador de lo que está pasando. Aquí es una clase simple mensaje, que puede utilizar:
      var message = nuevo Phaser.Class ({Extiende: Phaser.GameObjects.Container, initialize: Mensaje de función (escena, eventos) {Phaser.GameObjects.Container.call (esto, escena, 160, 30); gráficos var = this.scene .add.graphics (); this.add (gráficos); Graphics.lineStyle (1, 0xffffff, 0,8); graphics.fillStyle (0x031f4c, 0,3); graphics.strokeRect (-90, -15, 180, 30); gráficos .fillRect (-90, -15, 180, 30); This.Text = nuevo Phaser.GameObjects.Text (escena, 0, 0, «», {color: ‘#ffffff’, align: ‘centro’, fontSize: 13, wordWrap: {width: 160, useAdvancedWrap: true}}); this.add (This.Text); this.text.setOrigin (0,5); events.on ( «Message», this.showMessage, este); esta .visible = false;}, ShowMessage: function (texto) {this.text.setText (texto); this.visible = true; si (this.hideEvent) this.hideEvent.remove (false); this.hideEvent = esto. scene.time.addEvent ({retardo: 2000, de devolución de llamada: this.hideMessage, callbackScope: esta});}, HideMessage: function () {this.hideEvent = null; this.visible = false;}}); 12345678910111213141516 171819202122232425262728293031varMessage = newPhaser.Class ({Extiende: Phaser.GameObjects.Container, initialize: functionMessage (escena, eventos) {Phaser.GameObjects.Container.call (esto, escena, 160,30); VARGRAPHICs = this.scene.add.graphics (); this.add (gráficos); Graphics.lineStyle (1,0xffffff, 0,8); graphics.fillStyle (0x031f4c, 0,3); graphics.strokeRect (-90, -15,180,30); graphics.fillRect (-90, -15,180,30); This.Text = newPhaser.GameObjects.Text (escena, 0,0, «», {color: ‘# ffffff’, align: ‘centro’, fontSize: 13, wordWrap: {width: 160, useAdvancedWrap: true}}); this.add (This.Text); this.text.setOrigin (0,5); events.on ( «Message», this.showMessage, este); this.visible = false;}, ShowMessage: función (texto) {this.text.setText (texto); this.visible = true; si (this.hideEvent) this.hideEvent.remove (false); this.hideEvent = this.scene.time.addEvent ({retardo: 2000, de devolución de llamada: this.hideMessage, callbackScope: esta});}, HideMessage: function () {this.hideEvent = null; this.visible = false;}});

      I a añadir el objeto de mensaje a la UIScene ya que es parte de la interfaz. Esto, unido al método UIScene crear:
      this.message = new Mensaje (esto, this.battleScene.events); this.add.existing (this.message); 12this.message = newMessage (Esto, this.battleScene.events); this.add.existing (this.message);


      Y con esta segunda parte del tutorial es completa. Echa un vistazo a la tercera parte de aprender cómo combinar la WorldScene y BattleScene en un juego de trabajo.

      Mensajes relacionados
      > <img src =

Deja una respuesta

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