En la primera parte de este tutorial, se trataron los siguientes temas:


  • ¿Cómo crear un plugin básico en Phaser 3.
  • ¿Cómo cargar y registrar un plug-in.
  • Configuración de las propiedades predeterminadas para nuestro plugin.
  • Configuración de la lógica para colocar dinámicamente la ventana de diálogo.
  • crea la ventana de diálogo básico.

    En el caso de que no, se puede encontrar la primera parte aquí. En este tutorial, vamos a terminar nuestra ventana del plugin de diálogo agregando la siguiente:


    • La adición de un botón de cierre de la ventana de diálogo.
    • Adición de lógica para mostrar / ocultar la ventana.
    • Añadido lógica para ajustar y visualizar el texto de diálogo en la ventana.
    • Añadir lógica para animar el texto.

      Si no se ha completado la primera parte y le gustaría continuar a partir de aquí, se puede encontrar el código para la primera parte aquí.

      Se puede ver que es lo que vamos a crear a continuación:


      Puede descargar todos los archivos asociados con el código fuente aquí.

      get Vamos a empezar!

      Tabla de contenidos

      Aprender Phaser 3 con nuestro nuevo mini-Grado

      El desarrollo del juego HTML5 Mini-Grado ya está disponible para pre-pedido en Zenva Academia. Aprender a código y hacer que los juegos impresionantes con JavaScript y Phaser 3!

      El acceso al instante temprano

      Al cerrar la ventana

      Con el fin de crear nuestro botón de cierre, vamos a utilizar GameObjects gráficos y texto de Phaser. En primer lugar, vamos a utilizar el GameObject texto para crear el botón de cierre, y luego hará que sea interactiva, de modo que podemos hacer clic en él. A continuación, vamos a utilizar los GameObject.Graphics para crear un pequeño borde rectángulo alrededor del botón para que lo distinguen.

      abren dialog_plugin.js en su editor de código y añadir el siguiente código a continuación el método _createOuterWindow en la parte inferior del archivo:
      // Crea la estrecha ventana de diálogo button_createCloseModalButton: function () {self var = esta; this.closeBtn = this.scene.make.text ({x: this._getGameWidth () – this.padding – 14, y: this._getGameHeight () – this.windowHeight – this.padding + 3, texto: ‘X’ , estilo: {font: ’12px Arial negrita’, relleno: this.closeBtnColor}}); this.closeBtn.setInteractive (); this.closeBtn.on ( ‘pointerover’, function () {this.setTint (0xff0000);}); this.closeBtn.on ( ‘pointerout’, function () {this.clearTint ();}); this.closeBtn.on ( ‘pointerdown’, function () {self.toggleWindow ();});} 123456789101112131415161718192021222324 // Crea la estrecha ventana de diálogo button_createCloseModalButton: function () {varself = esta; this.closeBtn = this.scene. make.text ({x: this._getGameWidth () – this.padding-14, y: this._getGameHeight () – this.windowHeight-this.padding + 3, texto: ‘X’, el estilo: {font: ‘negrita 12px Arial’, relleno: this.closeBtnColor}}); this.closeBtn.setInteractive (); this.closeBtn.on ( ‘función pointerover’, () {this.setTint (0xff0000);}); this.closeBtn.on ( ‘pointerout’, function () {this.clearTint ();}); this.closeBtn.on ( ‘pointerdown’, function () {self.toggleWindow ();});}

      Repasemos el código que acaba de añadir:


      • En primer lugar, hemos creado el botón ‘x’ cerca llamando scene.make.text, y pasamos la posición x e y del texto, el texto que se muestra en el juego, y el estilo del texto somos mostrando.
      • Con el fin de tener nuestro trabajo plugin con diferentes tamaños del juego, se calcula la posiciones X e Y dynamically.For la posición x, llamamos al método _getGameWidth () para obtener el ancho del juego, y restamos el relleno entre la ventana y el borde del juego. Esto nos dará la posición del borde derecho de la ventana, y desde allí se puede restar algunos píxeles para mantener el botón cerca de la derecha de la window.For la posición y, llamamos al método _getGameHeight () para obtener la altura de el juego, y luego restar la altura de la ventana de diálogo y el relleno entre la parte inferior de la ventana y el fondo de la escena. Esto nos dará la posición de la parte superior de la ventana, y desde allí podemos añadir unos pocos píxeles para mantener el botón de cierre en la parte superior de la ventana.
      • A continuación, se llama al método setInteractive en nuestra closeBtn GameObject. El método setInteractive pasará el GameObject al Gestor de entrada para que pueda ser habilitado para la entrada.
      • Por último, con el closeBtn habilitado para la entrada, se añade código para escuchar el pointerover, pointerout y pointerdown events.In caso pointerover, cambiamos el matiz de la closeBtn, y en el caso pointerdown, quitamos el matiz .En el caso pointerdown, llamamos a un nuevo método llamado toggleWindow. Este método se utilizará para mostrar / ocultar la ventana de diálogo.

        A continuación, en el método _createWindow añadir el siguiente código en la parte inferior de la función:
        this._createCloseModalButton (); 1this._createCloseModalButton ();.

        Si vuelve a cargar su juego en el navegador, debería ver el nuevo botón de cierre


        Si mueve el puntero del ratón sobre el botón de cierre, debe cambiar los colores.


        Ahora, vamos a añadir el borde alrededor del botón de cierre. En dialog_plugin.js, añadir el siguiente código a continuación el método _createCloseModalButton que acabamos de añadir:
        // Crea el botón de diálogo cerca border_createCloseModalButtonBorder: function () {var x = this._getGameWidth () – this.padding – 20; var y = this._getGameHeight () – this.windowHeight – this.padding; this.graphics.strokeRect (x, y, 20, 20);} 123 456 // Crea el botón de diálogo cerca border_createCloseModalButtonBorder: function () {varX = this._getGameWidth () – this.padding-20; variar = this._getGameHeight ( ) -this.windowHeight-this.padding; this.graphics.strokeRect (x, y, 20,20);}

        En el código anterior que:


        • Se calcula la posición xey de nuestra frontera rectángulo con la misma lógica que usamos cuando creamos el botón de cierre.
        • Llamado el método strokeRect para llamar nuestra rectángulo sin relleno.

          Para ver la nueva frontera en nuestro juego, tenemos que añadir el siguiente código a la parte inferior del método _createWindow:
          this._createCloseModalButtonBorder (); 1this._createCloseModalButtonBorder ();.

          Si actualiza su juego, debería ver la nueva frontera


          Por último, para mostrar / ocultar la ventana tenemos que crear el método toggleWindow. Vamos a utilizar este método para actualizar la propiedad visible de cada GameObject de la ventana.

          En dialog_plugin.js, añadir el siguiente código a continuación el método _createCloseModalButtonBorder que acabamos de añadir:
          // Ocultar / Mostrar el windowtoggleWindow de diálogo: function () {this.visible = this.visible; si (This.Text) this.text.visible = this.visible; si (this.graphics) this.graphics.visible = this.visible; si (this.closeBtn) this.closeBtn.visible = this.visible;} // 1234567 Ocultar / Mostrar el windowtoggleWindow de diálogo: function () {this.visible = this.visible; si (This.Text) This.Text!. visibles = this.visible; si (this.graphics) this.graphics.visible = this.visible; si (this.closeBtn) this.closeBtn.visible = this.visible;}

          Ahora, si actualiza su juego y clic en el botón de cierre, el diálogo modal debe desaparecer del juego.

          Agregar texto a la ventana

          Con la funcionalidad básica de la ventana en su lugar, ahora vamos a trabajar en la adición de la pieza de diálogo real. En dialog_plugin.js, añadir el siguiente código a continuación el método toggleWindow que acabamos de añadir:
          // establece el texto para el cuadro de diálogo windowsetText: function (texto) {this._setText (texto);}, // calcuate la posición del texto en el cuadro de diálogo window_setText: function (texto) {// Reiniciar el cuadro de diálogo si (esto .text) this.text.destroy (); var x = this.padding + 10; var y = this._getGameHeight () – this.windowHeight – this.padding + 10; This.Text = this.scene.make.text ({estilo x, y, texto,: {wordWrap: {width: this._getGameWidth () – (this.padding * 2) – 25}}});} 12345678910111213141516171819202122 / / Establece el texto para el cuadro de diálogo windowsetText: function (texto) {this._setText (texto);}, // calcuate la posición del texto en el cuadro de diálogo window_setText: function (texto) {// Restablecer el dialogif (This.Text ) this.text.destroy (); varX = this.padding + 10; varían = this._getGameHeight () – this.windowHeight-this.padding + 10; This.Text = this.scene.make.text ({x, Y, texto, estilo: {wordWrap: {width: this._getGameWidth () – (this.padding * 2) -25}}});}

          Repasemos el código que acabamos de añadir:


          • Hemos añadido dos nuevos métodos: setText y _setText. El método setText será el método que llamamos de game.js, y se necesita el texto que desea establecer en la ventana de diálogo como un parámetro. En la actualidad, este método simplemente llama al método _setText, y vamos a añadir más código a este método en un momento.
          • Se utiliza el método _setText para crear un nuevo texto GameObject y colocar la nueva GameObject en la ventana de diálogo.
          • En el método _setText, primero se comprueba para ver si la propiedad de texto de nuestro plugin ha sido ajustada, y si lo ha sido, entonces tenemos que destruir GameObject.
          • A continuación, se calcula la posición x para el nuevo GameObject añadiendo la propiedad padding y 10 píxeles, lo que colocará el texto GameObject justo dentro del borde de la ventana de diálogo.
          • A continuación, se calcula la posición y de la nueva GameObject por conseguir la altura de la escena. Luego restamos el relleno entre la ventana y el fondo de la escena, y luego restamos la altura de la ventana de diálogo. Por último, añadimos 10 píxeles para colocar el nuevo GameObject justo por debajo del borde superior de la ventana de diálogo.
          • Por último, llamamos al método scene.make.text para crear el nuevo GameObject. Para el estilo de la nueva GameObject texto, se pasa la propiedad wordWrap. La propiedad wordWrap forzará el texto para mantenerse dentro de la anchura que pase, insertando el resto del texto en una nueva línea. Phaser hace esto mirando los todos los espacios dentro de la cadena y para cada uno, si la longitud de la cadena en ese punto va a ir por todo el ancho de ajuste de línea entonces se insertará un carácter de nueva línea.

            Ahora, podemos probar el nuevo método setText. En game.js, agregue el código siguiente en la parte inferior de la función de crear:
            this.sys.dialogModal.setText ( ‘Prueba de esto.’); 1this.sys.dialogModal.setText ( ‘Prueba de esto.’);

            Si actualiza el juego, usted debe ver el siguiente texto que se muestra:


            Si reemplaza la ‘Prueba de este’ texto con una cadena más larga, se puede ver el ajuste de línea mantiene el texto dentro de la ventana de diálogo. Actualizar la siguiente línea de this.sys.dialogModal.setText ( ‘Prueba de esto.’); a ser:
            this.sys.dialogModal.setText ( ‘Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed hacer eiusmod tempor incididunt ut labore et dolore magna aliqua.’); 1this.sys.dialogModal.setText ( ‘Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ‘);

            Si actualiza el juego, usted debe ver el nuevo texto:.

            Animación de texto

            Con la ventana de diálogo se muestra el texto, vamos a añadir una opción a la ventana de diálogo que permitirá que el texto animado en la pantalla. Para ello, vamos a tomar el texto que se pasa al método setText como un argumento, y luego vamos a crear una matriz de cada carácter en la cadena. A continuación, vamos a configurar un evento que mostrará lentamente cada personaje de la matriz.

            Ahora, en dialog_model.js actualizar el método setText para que coincida con el siguiente código:
            // establece el texto para el cuadro de diálogo windowsetText: function (texto, animado) {// Restablecer el diálogo this.eventCounter = 0; this.dialog = text.split ( »); si (this.timedEvent) this.timedEvent.remove (); var = tempText animado? »: Texto; this._setText (tempText); si (animado) {this.timedEvent = this.scene.time.addEvent ({retardo: 150 – (this.dialogSpeed ​​* 30), de devolución de llamada: this._animateText, callbackScope: esto, bucle: true}); }} 12345678910111213141516171819 // establece el texto para el cuadro de diálogo windowsetText: función (texto, animado) {// Reiniciar el dialogthis.eventCounter = 0; this.dialog = text.split ( »); si (this.timedEvent) esto. timedEvent.remove (); vartempText = animado »: texto; this._setText (tempText), si (animado) {this.timedEvent = this.scene.time.addEvent ({retardo: 150- (this.dialogSpeed ​​* 30 ), devolución de llamada: this._animateText, callbackScope: esto, bucle: true});}}

            El fragmento de código anterior es bastante pequeña, pero hay mucho que hacer, así que vamos a revisar lo que acabamos de añadir:


            • En primer lugar, hemos añadido un parámetro adicional al método denominado setText animado. Este parámetro permitirá especificar si será animado o no el texto.
            • A continuación, nos restablecer las propiedades que se utilizan para la animación de la text.We tomar el texto que se pasa como argumento, y utilizamos el método de división para crear una matriz de todos los personajes de esa cadena. Entonces almacenamos esta matriz en el diálogo de propiedades property.The eventCounter se utiliza para la visualización de cada carácter en el cuadro de diálogo property.Lastly, comprobamos para ver si existe la propiedad timedEvent y nosotros eliminaremos si es que lo hace.
            • A continuación, vamos a crear una variable llamada tempText. Si el argumento animado se establece en true, entonces establecemos la variable tempText a ser una cadena vacía, y si el argumento animado se establece en falso, entonces nos propusimos tempText para igualar el argumento de texto. entonces llamamos al método _setText y pasamos la variable tempText.
            • Por último, se comprueba si el argumento animado se establece en true, y si era entonces se crea una nueva Phaser hora del evento y almacenarlo en el timedEvent property.Phaser 3 tiene una nueva clase de reloj, y todos los estados de Phaser 3 tiene una de estas clases unidas a la misma. Estos relojes permiten añadir eventos a ellos, y cuando se agrega estos eventos se puede especificar cuándo y con qué frecuencia le gustaría que los eventos que se activa mediante el paso de un objeto con que la propiedad de retardo information.The se utiliza para especificar el retardo en milisegundos hasta este evento se trigger.The propiedad de devolución de llamada permite especificar qué función se llama cuando se activa el evento. Hemos establecido esta al método _animateText, que no hemos añadido todavía. Este método se utiliza para mostrar el texto que se almacena en la propiedad property.The callbackScope de diálogo permite especificar el ámbito en el que se llamará a la función de devolución de llamada. Para este evento, pasamos por el alcance de la plugin.Finally, la propiedad de bucle se utiliza para especificar si desea que el evento desencadenante para mantener en el tiempo de espera especificado. Cuando se establece un bucle de repetición, puede llamar al método remove que matará el evento.

              Ahora que el evento está en su lugar, vamos a añadir el método _animateText. En dialog_model.js añadir el siguiente código a continuación el método setText:
              // muestra lentamente el texto en la ventana para que parezca annimated_animateText: function () {this.eventCounter ++; this.text.setText (this.text.text + this.dialog [this.eventCounter – 1]); si (this.eventCounter === this.dialog.length) {this.timedEvent.remove (); }} 12345678 // muestra lentamente el texto en la ventana para que parezca annimated_animateText: function () {this.eventCounter ++; this.text.setText (this.text.text + this.dialog [this.eventCounter-1]); si (this.eventCounter === this.dialog.length) {this.timedEvent.remove ();}}

              Cada vez que el método se llama _animateText hacemos lo siguiente:


              • incrementamos la propiedad eventCounter por uno.
              • actualizamos el texto actual de nuestro GameObject texto llamando al método setText, y se pasa el valor de texto actual más el siguiente carácter en nuestra gama de diálogo.
              • Por último, se comprueba para ver si imprimimos cada carácter en nuestra gama de diálogo comprobando si la propiedad eventCounter es igual a la longitud de la matriz, y si es entonces llamamos al método remove en nuestro caso.

                Finalmente, para probar el nuevo texto animado, sólo tenemos que actualizar el this.sys.dialogModal.setText ( ‘…’); línea en game.js a ser:
                this.sys.dialogModal.setText ( ‘Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed hacer eiusmod tempor incididunt ut labore et dolore magna aliqua.’, true); 1this.sys.dialogModal.setText ( ‘Lorem ipsum dolor sit amet , consectetur adipiscing elit, sed hacer eiusmod tempor incididunt ut labore et dolore magna aliqua ‘, true);.

                Ahora, si actualiza su juego debería ver el mismo texto aparece en la ventana de diálogo, pero debe aparecer un carácter a la vez.

                Cleanup adicional

                Antes de terminar, vamos a añadir unas pocas líneas de código a nuestro plugin que se ejecutará cuando se hace clic en el botón de cierre, y cuando la escena se cierra. Este código será utilizado para matar el tiempo del evento Phaser si se está ejecutando, y se destruirá el GameObject texto si es que existe.

                En primer lugar, en dialog_plugin.js Agregue el código siguiente al método de apagado:
                si (this.timedEvent) this.timedEvent.remove (); si (This.Text) this.text.destroy (); 12Si (this.timedEvent) this.timedEvent.remove (); si (This.Text) esto. text.destroy ();

                a continuación, en el método _createCloseModalButton añadir el código siguiente a la función de evento pointerdown oyente:
                si (self.timedEvent) self.timedEvent.remove (); si (self.text) self.text.destroy (); 12Si (self.timedEvent) self.timedEvent.remove (); si (self.text) auto. text.destroy ();

                Conclusión

                Con esas últimas piezas de código en su sitio, que trae este tutorial a su fin. En resumen, este tutorial le mostró cómo crear un plugin para Phaser 3.

                espero que hayan disfrutado de este tutorial y lo encontró muy útil. Si tienes alguna pregunta o sugerencia sobre lo que debemos cubrir próxima, vamos a saber en los comentarios a continuación.

                Mensajes relacionados
                > <img src =

Deja una respuesta

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