Puede acceder al curso completo aquí: Crear un juego Crossing Road, con Phaser 3

Tabla de contenidos

Rendering Sprites

Correcciones

A 11’00” , digo ‘340’ cuando debería haber dicho ‘640’ (esto fue codificado correctamente en pantalla).

A 15’14” en la diapositiva ‘sistema de coordenadas’, el texto se lee en su lugar:
Coordenada X: positiva hacia la izquierda, negativa a la
DERECHO
Coordenada Y: HACIA ABAJO positivo, negativo HACIA ARRIBA

Objetivos de aprendizaje

  • precarga de Phaser y crear métodos.
  • Rendering un sprite.
  • Sistema de coordenadas.
  • Sprite origen.

    En esta lección usted aprenderá cómo mostrar imágenes en la pantalla usando Phaser. Las imágenes que se utilizarán durante esta lección se pueden descargar desde el curso. Ellos están en la carpeta de activos. Hay un total de 4 imágenes en la carpeta: fondo, dragón, jugador, y el tesoro .

    comenzará cargando el fondo, y la carga se producirá dentro de nuestra escena.

    El diagrama para el ciclo de vida de una escena

    diagrama del ciclo de vida Phaser

    La método init () – llamó una vez que esta se utiliza para iniciar ciertos parámetros de la escena. Este método no se utiliza siempre.

    precarga () método precarga activo -todas tiene lugar. Esto significa que Phaser se cargarán todas las imágenes, todos los archivos de audio y otros archivos externos es posible que desee utilizar en su juego. Todos los archivos se cargarán en la memoria para que puedan ser utilizados sin ningún retraso. Cuando se quiere mostrar un enemigo o carácter, que no quiere que el jugador tenga que esperar hasta que se cargue la imagen.

    método create () -llamado una vez y esto es en realidad donde se crean los sprites y mostrarlas en la pantalla.

    método update () -Vamos a mirar a este método más adelante en el curso, pero se llama en cada fotograma durante el juego. Este método se utiliza cuando las cosas deben ser controlados todo el tiempo.

    Ahora vamos a crear el método de precarga para la escena. Ver el código abajo y seguir a lo largo:
    // crear un nuevo scenelet gameScene = new Phaser.Scene ( ‘Juego’); // assetsgameScene.preload carga = function () {// cargar imágenes this.load.image ( ‘fondo’ ‘activos / background.png’ ); this.load.image ( ‘jugador’, ‘activos / player.png’);}; // llama una vez después de la precarga endsgameScene.create = function () {// crear sprites bg bg = dejó this.add.sprite ( 0, 0, ‘fondo’); // cambiar el origen de la esquina superior izquierda //bg.setOrigin(0,0); // lugar de sprites en la bg.setPosition centro (640/2, 360/2); dejó gameW = this.sys.game.config.width; dejar que gameH = this.sys.game.config.height; console.log (gameW, gameH); console.log (bg); console.log (this);}; // establecer la configuración de la gamelet config = {type: Phaser.AUTO, // Phaser utilizará WebGL si está disponible, si no que utilizará la anchura de la lona: 640, altura: 360, escena : gameScene}; // crear un nuevo juego, pasar el juego configurationlet = new Phaser.Game (config); 12345678910111213141516171819202122232425262728293031323334353637383940 // crear un nuevo scenelet gameScene = newPhaser.Scene ( ‘juego’); // assetsgameScene.preload carga = function () {// imagesthis.load.image carga ( ‘fondo’, ‘activos / background.png’); this.load.image ( ‘jugador’, ‘activos / player.png’);}; // llama una vez después de la función de precarga endsgameScene.create = () {// crear bg spritelet bg = this.add.sprite (0,0, ‘fondo’); // cambiar el origen de la esquina superior izquierda // bg.setOrigin ( 0,0); // lugar de sprites en la centerbg.setPosition (640/2360/2); dejó gameW = this.sys.game.config.width; dejar gameH = this.sys.game.config.height; consola. log (gameW, gameH); console.log (bg); console.log (this);}; // establecer la configuración de la gamelet config = {type: Phaser.AUTO, // Phaser usará WebGL si está disponible, si no va a utilizar Canvaswidth: 640, altura: 360, escena: gameScene}; // crear un nuevo juego, pasar el juego configurationlet = newPhaser.Game (config);

    En los juegos Phaser una sistema de dos dimensiones de coordenadas se utiliza. Hay un eje X que va de izquierda a derecha. Hay un eje Y que va de arriba a abajo. La origen (0,0) es siempre en la esquina superior izquierda del juego.

    sistema de coordenadas para juegos Phaser

    Si nos dijo que quería que el jugador comenzará en la posición (5,4) Lo que estamos diciendo es que el centro de nuestra sprite ir en esa posición.


    • X:. Positivo a la derecha, negativa a la izquierda
    • Y:. Positiva hacia arriba, hacia abajo negativas

      Por defecto, el origen es el punto medio en el X y el punto medio en Y.

      Puede utilizar el bg.setOrigin (0,0) método para cambiar el origen de los sprites.

      Aprendizaje Resumen



      • caracteres SpritesGame y elements.Origin: por defecto, el middle.Position en x, y se puede acceder y cambiar:. Posición de ajuste
      • Coordinar systemx: positivo a la derecha, negativa a la left.Y:. Positiva hacia arriba, hacia abajo negativas
      • ChallengePlace el sprite en el centro de la pantalla cambiando el cambio position.Don’t la origin.Use el método setPostion.

        archivos de código fuente

        Acceso a los archivos de origen del proyecto aquí.

        Transcripción

        En esta lección aprenderá a crear sprites en Phaser. Esto significa, básicamente, mostrar imágenes en la pantalla. El primer paso, por supuesto, a la creación de juegos. Las imágenes que que usaremos son todos en el activo, por lo que tenemos nuestra imagen de fondo, tenemos un dragón, un jugador, y un tesoro.

        Así que vamos a empezar a cargar el fondo, y la carga se producirá dentro de nuestra escena. Escenas en Phaser tienen diferentes métodos que tienen una finalidad distinta para el ciclo de vida de esa escena. Este es un concepto que vamos a estar viendo una y otra vez en este curso. Así que permítanme plantear un esquema de este ciclo de vida por primera vez para que usted vea. Cuando se inicia una nueva escena, hay un método llamado init, que se llama una vez. Esto se utiliza para iniciar ciertos parámetros de la escena. No siempre se utiliza. Después se llama ese método, que llamamos un método llamado precarga, y aquí es donde el activo pre-carga tiene lugar.

        Ahora, ¿qué significa eso? Básicamente significa que Phaser se carga todas las imágenes y todos los archivos de audio y otros archivos externos que es posible que quiero usar en su juego. Todos estos archivos se cargarán a los recuerdos, por lo que entonces pueden ser utilizados sin ningún retraso. Cuando se quiere mostrar un enemigo o un personaje, que no quiere que el jugador tenga que esperar hasta que se cargue la imagen.

        Imagínese si usted juega un juego de video y el enemigo no está cargado todavía, por lo que se ve un … no sé, un rectángulo de color rosa, y después de unos segundos más tarde se ve el enemigo real. Eso no sería aceptable para un juego, así que es por eso que tenemos que cargar todas las imágenes primero, y luego en el método create, que se llama una sola vez después de que finalice la fase de pre-carga, esto es donde realmente se crea su sprite y mostrarlos en la pantalla. El método de actualización, vamos a ver que más adelante en el curso. Pero básicamente se llama en cada fotograma durante el juego, por lo que se utiliza para las cosas que se deben controlar en todo momento.

        Muy bien, así que vamos a ir y crear este método de precarga para nuestra escena. Entonces, ¿qué vamos a hacer aquí es, vamos a activos de carga. Así que vamos a escribir gameScene.preload, y esto será una función. Esta será una función, y es dentro de la función en la que vamos a ser la adición de todos los códigos.

        Así que vamos a empezar por la carga de nuestro fondo. Y para ello vamos a escribir esto, que hace referencia al objeto de escena. Nuestro objeto de escena tiene un componente llamado cargador que es … Esto nos dará acceso a este objeto de carga aquí. Así que vamos a cargar la imagen, que es el nombre del método que se utiliza para cargar una imagen.

        Y tenemos que dar la imagen, tenemos que darle una etiqueta. Puede ser cualquier cosa que queramos. No tiene por qué ser el mismo que el nombre del archivo. Así que estoy llamando fondo, pero de nuevo, la imagen se llama background.png, pero esto podría ser cualquier cosa. Esto podría ser X, Y, Z. Y ahora tenemos que especificar la ubicación de nuestra imagen. Y aquí vamos a escribir activos / background.png. Así que aquí es necesario introducir el nombre de la ruta correcta. Esto es sólo para fines de etiquetado. Cerrar que con un punto y coma.

        Muy bien, así que estamos cargando una sola imagen aquí. Podemos ir a cargar más si queremos, así que voy a copiar y pegar esta línea, y vamos a cargar el reproductor también. Voy a llamar a ese jugador y el archivo se llama jugador. Bueno por lo que es nuestro método de precarga. Nada está sucediendo realmente hasta entonces. En realidad quiero crear el sprite ahora y demostrar que en la pantalla para que los jugadores ven. Esto se llama una vez después de los extremos de precarga. Y este será nuestro método de crear. Recordemos que habíamos precarga y luego crear. No estamos usando init por el momento. Es un método opcional. Todos ellos son opcionales para ser estrictamente hablando, pero necesitamos imágenes de precarga si queremos luego mostrarlas en la pantalla.

        Así que esto es también va a ser una función. Y aquí vamos a crear un sprite. Crear fondo, fondo de sprites. Una vez más, que vamos a escribir esto, esto se refiere a nuestro objeto de escena. Y this.add.create nos permite … Lo sentimos, this.add.sprite nos permite crear un sprite.

        Ahora, ¿dónde colocamos el sprite? Tenemos que entender cómo funciona el sistema de coordenadas. Así que sólo voy a escribir 0, 0 en primer lugar, y verá el resultado. La imagen que estamos carga, tengo que especificar que la etiqueta que he definido. Así que cualquier cosa que entré aquí es lo que tengo para entrar aquí, independientemente del nombre del archivo.

        Bueno por lo que vamos a ver si esto muestra nada en la pantalla. Vamos a ver si hemos hecho ningún error. No estamos viendo nada por lo que me dejó sólo asegúrese de que estamos en la carpeta aquí mismo en el servidor web. Muy bien, aquí vamos. Así como se puede ver, estamos mostrando la imagen, pero no es un aspecto muy correcto. Tenemos que entender cómo funciona el sistema de coordenadas funciona en primer lugar.

        En los juegos Phaser, tenemos un sistema bidimensional de coordenadas, así que me voy y … Dibujar este sistema de coordenadas. Básicamente tenemos un eje x que va de izquierda a derecha. Y tenemos un eje y que va de arriba a abajo. Entonces, ¿qué significa esto? Esto significa que el origen está en realidad en la esquina superior izquierda del juego. Así que si traemos nuestro juego aquí, el origen, la coordenada 0, 0 es el punto aquí en la esquina. Y si, en caso de ir en esta dirección, esto va a ser 0, 0, el origen. Si usted va en esta dirección, vas positivo en X. Y si se va hacia abajo, vas positivo en Y. Así que esto es diferente a la forma en que aprendimos en la escuela, donde aprendimos que era así. Bien que funciona de manera diferente en el contexto del trabajo con la lona en general en la Phaser.

        Así que, ahora ¿qué pasa con la posición de un sprite? Vamos a decir que tenemos … digamos Vamos que esto es 0,5, 4, o algo por el estilo. Y queremos poner nuestro jugador, así que si decimos que nuestro jugador estará en posición 5, 4, de ese momento allí, lo que estamos diciendo es que el centro de nuestra sprite ir en esa posición.

        Así que este es nuestro sprite. Digamos que este es nuestro jugador. El centro del sprite va a ir en la posición que le damos. Si volvemos a nuestro código y con el resultado que hemos obtenido, veremos que nos dice Phaser para colocar la posición de fondo 0, 0. Así que lo que hizo, que tomó el centro del sprite y el lugar de ese momento 0, 0. el punto que ha especificado que se llama el origen. Lo que por defecto el origen de un sprite es el punto medio de x, y el punto medio de y. Ahora que puede ser un poco complicado, ¿verdad? Porque en realidad quiero esta esquina aquí para ir a la esquina superior izquierda. Así que hay diferentes maneras de cómo se puede lograr eso.

        La primera de ellas es cambiar realmente el origen del sprite, por lo que el nuevo origen es la esquina superior izquierda del sprite. Así que vamos a ir y hacer eso. Vamos a colocar por primera vez esta en una variable. Llamemos a este fondo BG. Y ahora vamos a cambiar el origen de la esquina superior izquierda. Así bg.setOrigin es un método que está disponible para nosotros para usar en sprites, y podemos especificar las coordenadas en el interior de los antecedentes que corresponderá al punto de origen.

        Si nos fijamos en el fondo, la coordenada 0, 0 es la parte superior izquierda. Así que lo que estamos haciendo aquí es por lo que estamos diciendo la parte superior izquierda del fondo es el nuevo origen, de modo que cuando se coloca en una determinada posición, ahora es este punto, este punto que sólo será colocado en esa posición. Así que vamos a guardar y ver lo que obtenemos. Impresionante, así que tenemos que brillar Ahora donde queremos que sea. Así que es una manera de hacerlo. Sólo está cambiando el origen.

        Otra forma de hacerlo, si se mantiene el origen donde estaba antes, sería básicamente empujar la posición de modo que si el medio que realmente ocurre en el centro de la pantalla aquí … Y eso me lleva al desafío de esta lección. Por tanto, coloca el sprite de fondo en el centro de la pantalla al cambiar su posición. Así que no se cambie el origen como vimos, en lugar de utilizar un método llamado setPosition, y se puede ir a la documentación y encontrar este método, o puede tener una oportunidad y ver si puede hacerlo sin la documentación. Pero en cualquier caso, tener un ir, tener una oportunidad.

        Si no está seguro de cómo hacerlo, está bien. Yo te mostraré ahora la solución.

        Está bien. Tenías una oportunidad, ahora la bienvenida de nuevo. Te voy a enseñar cómo podemos resolver este desafío. Así que vamos a volver a nuestro código, y vamos a mostrar ese juego de nuevo. Entonces, ¿qué voy a hacer aquí es colocar el sprite en el centro de la pantalla utilizando setPosition. Así que voy a escribir bg.setPosition. Y el primer parámetro que aquí se corresponderá con X, y el segundo parámetro aquí corresponderá a Y. Así que sé que la pantalla es de 340 de ancho, por lo que voy a escribir en 640 dividido por 2. También puede escribir 320, pero Sólo quiero hacerlo de modo muy explícito de que sabe dónde estos números provienen. Muy bien, así que esta es la solución, o se trata de una solución. Y si actualiza la página, se verá que el sprite es … Perfectamente situado en el centro. Así que es una forma de hacer eso.

        Ahora estoy seguro de que algunas personas se preguntan: “Está bien, ¿cómo puedo simplemente tomar el ancho sin tener que escribir manualmente el número?” Y sí que es posible también, así que si quieres tomar el ancho de la pantalla. la llamada de dejar que esto gameW. Si quieres agarrar ese valor, realmente puede hacerlo escribiendo esto, que se refiere a nuestra escena, .sys, que es el componente del sistema, que le da acceso a las propiedades de nivel de juego, y luego juego, que le da acceso a la actual objeto de juego, y luego hay un objeto de configuración, y adivina qué? Este objeto de configuración nos dará acceso a todas estas cosas. Así que aquí podemos escribir ancho, y podemos hacer lo mismo con la altura.

        Así que voy a llamar a este W, gameW y gameH, console.log. Vamos a mostrar los dos, y ver lo que tenemos aquí. Así que voy a refrescar eso y se puede ver los números aquí. Ahora hay un par de otras cosas que os quieren dar justo antes de dirigirse a la siguiente lección. La primera de ellas es que … lo quiero saber qué propiedades están disponibles para nosotros para usar en diferentes sprites. Así que algo que puede hacer por su cuenta o mientras se está desarrollando, que es bastante útil, es simplemente para mostrar este elemento sprite. Mostrar un sprite en la consola, y usted será capaz de … Usted aprenderá un poco al hacer esto.

        Así se verá el sprite objetivo aquí, y verá todas estas propiedades como el valor alfa, y verá que hay animaciones objeto aquí. Hay una gran cantidad de propiedades y es útil para obtener las horas extraordinarias cada vez más familiarizados con lo que está disponible para nuestro uso. Así, por ejemplo, el mismo método de posición, estoy seguro de que podemos encontrar aquí, así que si no es aquí, será en el prototipo, que es el objeto de que este objeto viene, en términos simples.

        Así que se puede encontrar este método setPosition aquí. Los otros métodos que utilizaremos para los sprites, todos van a encontrar allí. Y usted puede hacer lo mismo con la escena también. Así que si escribe console.log y esto, usted está poniendo su escena, la escena del juego, en la consola, y que también le dará tanta información y tantos detalles de lo que está pasando aquí. Así, por ejemplo, que el TDA, que utilizamos cuando estamos pre-carga, es aquí también. Y la carga está allí también. La carga es la que utilizamos cuando pre-carga. Así que eso es algo que sólo quería mencionar porque es bastante útil, en general, a hacer.

        De acuerdo, entonces resumir aquí, hemos hecho un poco. Empezamos hablando del ciclo de vida de la escena, o al menos parte de ella, porque hay más métodos hecho que los que he mostrado, pero estos son los principales que vamos a utilizar. Y creamos nuestro método de precarga, donde cargamos todos los elementos de imagen. Dimos a cada imagen una etiqueta. Y luego nos fuimos en y creamos nuestro primer sprite, que era el fondo. Y hablamos sobre el sistema de coordenadas, el posicionamiento y el origen. Muy bien, así que es todo para este video. Te veré en la próxima lección.

        interesado en continuar? Echa un vistazo a la plena Crear un juego Crossing Road, con Phaser 3 platos, que es parte de nuestra HTML5 desarrollo del juego Mini-Grado.

        Mensajes relacionados
        Precarga activos ejemplo de codificación

Deja una respuesta

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