Construye tu primer juego en 2D con flutter y llama para iOS y Android

1. Curso Introducción Video: ¿Recuerdas los clásicos juegos 2D que solíamos jugar cuando éramos niños, como Mario contract, Donkey Kong, mortal combat, etc. Muy buena noticia es que ahora también puedes construir tu propio juego móvil 2D con este nuevo y emocionante curso que te llevará en un viaje de desarrollo de juegos desde cero con la ayuda de Florida y motor de juegos de llamas, comenzaremos con lo básico como cómo para configurar un proyecto. Después aprende a crear y agregar sprites. Implemente entradas de usuario como controles de joystick, configure un bucle de juego para que nuestro juego funcione sin problemas. También aprenderás a detectar colisiones entre objetos y añadir efectos de sonido para mejorar su experiencia de juego. Si eres un principiante o un programador experimentado. Este curso está diseñado para ayudarte a dominar las habilidades que necesitas para crear tus propios juegos 2D. Al finalizar el curso, tendrás un juego completo que podrás compartir con amigos, familiares, e incluso publicar en la App Store. Así que sin perder más tiempo, Empecemos. 2. Video 1 Crea un proyecto de flutter: Hola, bienvenidos al primer video del curso, donde aprenderemos a construir un juego usando el motor de juego flutter y flame. Entonces espero que ya sepas lo que es la llama. Flame es un framework de juego 2D construido sobre Florida, que podemos crear cualquier tipo de juego 2D y ejecutarlo en todas las plataformas compatibles con Florida como móviles, web y escritorio. Con flame, podemos construir una amplia gama de juegos, incluyendo plataformas, juegos de rompecabezas y menos corredores, rol, juegos de aventura y muchos más. Entonces no quiero meterme tanto en la parte de teoría. Pero al menos deberíamos saber qué vamos a construir. Al finalizar el curso. Construiremos un juego donde un hombre tenga que recolectar mancuernas para mantenerse en forma, además de esquivar virus para que no pierda su masa muscular antes de que acabe el tiempo. Además, introduciremos vacunas, que podrá recolectar un inmune él mismo por unos segundos, así como batidos de proteínas, que le darán energía extra. Empecemos por crear un nuevo proyecto de Florida. Así que ve a tu directorio deseado y abre tu terminal y crea un nuevo proyecto de Florida con este código Flutter. Crear. Voy a nombrar al luchador del juego. Pulse Intro. Bien. Lo hemos hecho, hemos creado el proyecto k. también, ya que no voy a estar facturando para Windows, Linux y Mac OS. Entonces solo eliminaré este archivo solo para que esté limpio y consuma menos espacio. Ahora, añade el editor de VSCode y añade una nueva carpeta de juego. La semana del curso para k. Bien. Ahora, lo primero que voy a hacer es instalar los paquetes requeridos. Así que ve a dev. Y en primer lugar, buscar la culpa. Sólo llama. Este es requerido. Flame proporciona un conjunto de herramientas para construir los juegos, incluidos widgets para ingresar sprites y emisiones, y administrar las lógicas del juego. Simplemente, lo copiaré y lo pegaré en el archivo pub spec dot YAML abajo aquí en la sección de dependencia. Sólo guárdala. Y otro paquete que se requiere es este que es culpa de audio. Flame audio es un paquete que proporciona herramientas para manejar audio y juegos. Incluye utilidades para cargar y reproducir efectos de sonido y música, administrar canales de audio y controlar la reproducción de audio. Simplemente copia esta también. Y pegarlo aquí. Guárdalo. Bien, supongo que está funcionando muy bien. Tenemos los paquetes. Entonces lo siguiente que haré es crear una nueva carpeta, activos en la raíz de nuestro proyecto que está aquí, solo voy a crear activos. Aquí requerimos dos nuevas carpetas, audio e imágenes. Esta es la estructura de carpetas propuesta o juego de llamas falsas, que es la estructura visual. Nuestra carpeta, carpetas de activos como esta, es decir audio, imágenes. Y he adjuntado los activos necesarios en este video, así como en el último video donde nosotros, se puede descargar el conjunto, ese es el código fuente completo. Tengo estos ácidos. Simplemente lo copiaré y lo pegaré en nuestra carpeta de proyectos. Como puedes ver, tenemos el fondo, logo del juego con mancuernas, diferentes tipos de físico jugador, vacuna de batido de proteínas así como el virus. Y para el audio tenemos sonido de mancuernas, sonido proteico. Es decir, si nos chocan, estamos recolectando las cosas, entonces se tocarán los sonidos. Si quieres buscar tus propias imágenes, puedes buscar directamente en línea hombre levantando pesas, vacuna de dibujos animados, puedo PNG, batido de proteínas, puedo PNG. Y para el audio, simplemente puedes buscar gratis para hacer audio del juego. Ahora, tenemos la carpeta, carpeta assets, pero tenemos que asegurarnos de especificar las ubicaciones de carpetas recién creadas en el archivo Pub spec dot YAML. Entonces aquí puedes ver a continuación, tienes esta línea interior 64, tienes este activo. Así que solo quita, ve a esta línea y solo quita presiona eliminar dos veces, y ve abajo y presiona dos veces. Espero que sepan que este juicio es muy sensible. Cualquier espacio extra o pestaña arrojará un error. Aquí simplemente se mencionan, assets, imágenes, y el otro es assets audio. Y guárdala. Eso es todo para este video. En la próxima sesión, crearemos nuestra clase de juego. Gracias. 3. Video 2 Creación de una clase de juego: Hola. Por lo que ahora aprenderemos el concepto de clase de juego de llamas. Este será el corazón, o se puede decir, el punto de entrada de nuestro juego. Vamos a crear y administrar todos nuestros otros componentes desde aquí, ir al archivo punto punto principal. Y vamos a quitar, solo quitemos todo. ¿Bien? Quiero quitar todo aquí. Hagamos una clase separada para nuestra clase de juego que sea carpeta separada en sus vidas. Simplemente crea una nueva carpeta y nombra juegos. Y en su interior crear un nuevo archivo. Peso. Juego de combate. Ni dardo. Jugar clase de juego implementa un juego basado en componentes. Tiene un árbol de componentes y llama a los métodos de actualización y renderizado de todos los componentes que se han agregado al juego. Entonces, para crear una llama ganada clase, simplemente tienes que crear una clase, este juego de combate F8, y extenderlo al juego de llamas así. Así es como creas una clase de juego. Entonces tiene un método onload, o el conjunto de métodos también lo es, pero descargar. Y aquí simplemente voy a hacerlo futuro. Y un fregadero aquí relaciono un fregadero componentes que es cualquier otra imagen de fondo. Estos son todos los componentes que, cuales se pueden agregar a la clase de juego directamente con la ayuda de esta descarga. Y aquí usaremos el método add solo para agregar ese componente para nuestra clase. Y esta onload se ejecuta sólo una vez durante el inicio de nuestro juego. Entonces esta es la clase de juego de llamas. Hablemos de ese widget de juego. Cada juego que corres con llama es rígido. En nuestra aplicación de Florida, como cualquier texto o botón, el widget del juego es el widget de flutter que se utiliza para insertar este juego dentro del árbol de widgets de Florida. Entonces es muy sencillo. Sólo tienes que ir al archivo punto punto principal y eliminar este código que es mi clase y otro dar rienda suelta a la izquierda es la clase principal. Podemos pasar directamente el widget del juego aquí en la aplicación Run. Y requiere de una instancia de juego que simplemente llame al objeto de nuestro juego, como esta pelea final su juego. El juego aquí. Simplemente pasa la variable. Y para asegurarse de que esté listo. Vamos a escribir esta florida, un widget Florida vinculante y desvinculante, no asegurar inicializado. Entonces todo es inicializado por el aleteo. Ahora guarda todo, abre dispositivo VR, es decir, estoy usando un emulador, pero también puedes usar tu propio dispositivo. Ahora, espera, esto. Simplemente comience a depurar. Podría llevar algún tiempo. Veamos cuál es el error? No creo que haya ningún error aquí que bien, se me olvidó dar un slash. Es un error muy tonto. Ahora simplemente desarrolla la aplicación. Se trata de errores muy pequeños y tontos, lo que sucede. Entonces como puedes ver, la hay, nuestra app se está ejecutando, pero no va a hacer nada. Nosotros solo decimos pantalla vacía negra en nuestro dispositivo. Como sabemos que ya tenemos el audio assets add images inside asset folder. Pero en lugar de llamar a esos archivos por su nombre en todas partes, vamos a crear un archivo separado para ello. Así que vamos a crear una carpeta. Nombre son constantes, y dentro de él crear un archivo. Globales punto punto. Almacenaremos todos los nombres de activos en variables estáticas. Este enfoque evita cualquier error ortográfico, así como es conveniente cambiar cualquier activo más adelante. Vamos a crear una clase global. Lo primero que haré es hacer que ese constructor privado para que no tengamos que crear un objeto o instancia de esta clase. Llamaremos directamente a las imágenes usando esta cadena estática estática. Bolsa molida. Sprite es igual al fondo sprite nombre es background dot JPG. Denso, así de grueso. Miró. Trae mancuernas brillantes. ¿Va a hacer dumbbell dot PNG? Luego estático, const, jugador de cuerdas. Flaco. Sprite es igual a capa skinny dot PNG. Ahora solo cópielo y péguelo así. Después a continuación tenemos jugador sprite. Será player fit dot PNG. Entonces tenemos jugador musculoso Sprite. Es punto muscular PNG. Tienes fiebre. Es decir si ha sido atacado, entonces tenemos fiebre de capa que PNG. Entonces tenemos el sprite para virus. Virus. Y el nombre del spray es virus dot PNG. Pegado un poco más de tiempo. A continuación seremos vacuna, vacuna que PNG. Y luego tenemos proteínas sprite. Y el nombre es proteína ik punto PNG. Estas son las imágenes. Ahora es el momento del audio. Simplemente péguela y será el sonido Number. El nombre del sonido es Número, sonido MP3. Al copiarlo, péguelo cuatro veces. El siguiente es el sonido inalámbrico. Será y menos PNG. Siguiente vacuna sonido, sonido punto. Esto es ola, esa es ola. Y por último, tenemos el sonido proteico. Aquí está el punto de sonido proteico, mp3. Sí. Entonces nuestras constantes están listas. Será muy conveniente para nosotros llamar a cualquier activo más adelante en nuestra aplicación. Y Q 4. Video 3 agregando fondo y reproductor: Hola, bienvenido de nuevo. En este video, crearemos nuestro primer componente. Los componentes son los bloques de construcción básicos para el juego en fuego. Cualquier entidad u objeto dentro del juego puede ser representado como un componente. Es bastante similar a los widgets en Florida. Todo lo que vemos en la parte superior de la pantalla, es decir, todos los componentes, por ejemplo , imagen de fondo, personajes más antiguos , objetos en la pantalla, etcétera. Entonces vamos a la carpeta lib. Crea una nueva carpeta llamada Come ponens. Y dentro de él, si nuevo archivo y nombrarlo componente de fondo k, simplemente redes crean una clase. Pero componente de tierra. Esto extenderá el componente sprite así. Entonces ahora en ese motor de juego de culpa, un componente sprite es un objeto gráfico que representa una imagen o animación 2D. lo general, se usa para representar personajes, objetos u otros objetos en el mundo del juego. El componente Sprite se puede posicionar, rotar y escalar, y se puede actualizar a diferentes fotogramas de una animación. Aquí. Esto tiene un método de onload propio. Entonces cada componente tiene descarga, descarga, actualización. Todos estos métodos son preconstruidos. Simplemente escribiremos sprite, ese es el valor de este componente sprite. Aquí. Ahora solo entiende, este es solo el componente y tenemos que agregar este componente en nuestra clase de juego principal. Entonces definitivamente tenemos que tener alguna referencia la cual se puede hacer usando un mixin llamado que es width, tiene juego como este y el nombre del juego que es fistfight. Su clase. Esta es la clase de juego que tiene referencia de juego se utiliza para indicar que un objeto tiene una referencia a la clase de juego actual. Es decir, esto tiene la referencia a la clase de juego actual. Esto es útil porque muchos objetos de juego necesitan acceder a variables globales. Cualquier variable que esté aquí en esta clase, por ejemplo, partituras o cualquier cosa, entrada manejando la reproducción de audio. Entonces, en otras palabras, podemos acceder a las propiedades y métodos que están en esta clase de juego desde esta clase, tan simple como esto. Y podemos acceder a nuestras cosas de enviar o cargar usando este juego ref, el juego de fiesta ref punto, carga brillante. Entonces, ¿qué sprite queremos? Fondos de inicio global. Sprite, éste. ¿Y cuál debería ser el tamaño de este brillante? Debería ser del tamaño de ese juego. Esa es la pantalla completa. Bien, ahora, si lo guardo, no pasará nada. ¿Bien? Espero que entiendas que esta carga es el ciclo de vida de este componente. Estamos usando el evento OnLoad para lograr lo mismo que esta clase de juego. Que se asegurará de que todo esté listo cuando sea llamado por primera vez. Y el tamaño del punto de desarrollo del juego toma el ancho y la altura completos del dispositivo del usuario. Ahora, para mostrar ese componente en ellos, en ese juego, simplemente tenemos que usar este método add, que se utiliza para agregar un nuevo objeto de juego al mundo del juego. Por lo que el método add es útil para agregar nuevos objetos de juego como jugador enemigo o cuando se carga un nuevo nivel. Por todas estas cosas. Se utiliza el anuncio. Sólo tenemos que escribir componente de fondo así. Nuevamente, estoy tratando esto se llama cuando el juego se carga por primera vez y crea una nueva instancia del componente de fondo. Ahora vamos a guardarlo. Tenemos el juego rígido fit para su juego es su esquema referencia? Sí, es todo lo que voy a dominar. Y empezar de nuevo. Creo que debería haberme refrescado agregando varias veces. Veamos qué pasa si Fred y otra vez, a ver tenemos esa imagen de fondo. Entonces ese error fue este. Tuvimos que eliminar, reiniciar o a veces parar e iniciar nuestra aplicación ya que no estábamos usando la carga de Hartree. De manera similar a este fondo, vamos a crear un componente de sprite para nuestro reproductor también. Simplemente vaya a la carpeta de componentes, cree un nuevo archivo punto. Componente de capa. Punto, punto. Sí, similar como componente de capa de luz se extiende componente brillante y tiene un mixin que está aquí como referencia del juego. Como su juego, así. Cueva. Ahora, tenemos que usar la descarga. Mi papá dijo lo dijo futuro que descargar. Entonces. Del mismo modo, usaremos la propiedad sprite de este componente spread porque queremos que se cargue el sprite. Este sprite de carga y cuál es el nombre de la imagen, jugador de inicio global. Lote global. Tenemos al jugador flaco, éste. Entonces. Ahora también hay otras propiedades de un componente sprite. Esa es la que debería ser la posición de esta, derecha, de esta imagen bajo juego. Entonces deberíamos ponerlo, solo lo pondremos en medio de la pantalla. Es decir, tomamos la pantalla completa y dividimos por dos. Vamos a mostrarlo en el centro de la pantalla, eje x y eje y. Ahora bien, ¿cuál debería ser la altura? Simplemente mencionaremos la altura aquí en una variable para que podamos cambiar. Cuando queramos. Sprite, la altura va a ser de 100. Simplemente escriba, la altura es igual al peso es igual a psi. Entonces el agudizado, que debería ser el mismo ancla. Ancla donde donde. Entonces el ancla de un sprite componentes se refiere al punto dentro. Así que se utiliza como lo hace el origen de los sprites o el punto central. Esto es, se utiliza como referencia para particionar, rotar y escalar el sprite. Por defecto, el punto de anclaje se encuentra en la parte superior izquierda, pero ahora mismo lo hemos cambiado al centro. Ahora. Ahora vamos a guardar todo. Y de manera similar, tenemos que agregar esto también en nuestro componente de fondo. Entonces agregaremos componente de capa así. Y también recuerda, los componentes se agregan en esta secuencia. Los mencionamos, es decir, si escribimos fondo debajo del reproductor, entonces no podremos ver ese componente reproductor en la pantalla. Y también, sólo voy a cambiar estos globales. Como el nombre de archivo es global, simplemente lo cambiaré a globales y haré los cambios. Por. Ahora. Iniciamos la app y vemos, se puede ver el componente reproductor en el medio de la pantalla. Y cuando digo tamaño o posición, es eje x y eje y. Espero que hayas aprendido a crear tus primeros componentes. En el siguiente video, trabajaremos en agregar un joystick en nuestro juego. Gracias. 5. Agrega movimiento con joystick: Hola, bienvenido de nuevo. Entonces ahora es el momento de agregar algo de movimiento a nuestro componente jugador. Plano nos da diferentes opciones de entrada como teclado, gestos, arrastre, etcétera. Pero como pretendemos crear un juego móvil y mayoría de los dispositivos móviles no cuentan con teclado ni botones de hardware. Por ello, crearemos un joystick virtual, ¿qué llama? Esto se puede hacer usando el componente joystick. Así que vamos a crear una nueva carpeta dentro de lib conocida como inputs. En su interior crear un archivo. Joystick punto, punto. Ahora, simplemente crea instancia de componente joy stick. Joystick es igual al componente joystick de k. componente joystick se compone de tres elementos principales. Esa perilla, fondo y el margen. Entonces vamos a que perilla ahora será un componente de círculo. Entonces EDS esperará 30. Vamos a pintarlo. Paleta básica, ese punto rojo con alfa dos y pintura roja. Este es el círculo interno que el usuario arrastrará. Esa perilla es esa. Entonces tenemos los antecedentes. Antecedentes. Otra vez. Tengo un componente de círculo. El radio será mayor a 80. Pintar. Básico, paleta punto rojo. Cambiemos algún tipo de opacidad, tipo de esa pintura. Bien, Ahora bien, este es el círculo exterior. Lo entenderás cuando se esté renderizando. Y luego finalmente, vamos a tener ese margen. Insets de borde const. Envolturas de borde que solo solo requiero. Aquí. Se peleará a la izquierda. módem D será para T. Entonces esto es lo que, esta es la posición del joystick. Posición del joystick. Entonces este es ese componente de joystick. Guardemos nuestro archivo. Agreguemos este joystick en nuestro juego. Ve al archivo de caza F8 aquí. Haga clic debajo del componente del reproductor justo. Joystick. Se importa de las entradas. Y también recuerda, tenemos que usar que tiene mezcla arrastrable en el archivo principal del juego, en la clase de juego principal cuando estamos usando cualquier tipo de elección, los componentes, así que como este ancho ha arrastrado esto porque como también lo entiendes, estamos arrastrando la perilla aquí. Vamos a salir otra vez. Bien. Lo siento otra vez, tengo que refrescarme. Ver. Ya lo tenemos. Simplemente no me gustó el color del círculo exterior. Vamos otra vez. El círculo exterior debe estar escrito a mano. Se ve tan bonito. Ahora, agreguemos que este movimiento fue para nuestro componente jugador. Vaya al archivo de componente de capa. En primer lugar, tendremos una variable de componente de joystick. Es decir, aquí vamos a aceptar ese joystick. En este expediente. Componente de capa requerido, este tipo joystick de punto. ¿Bien? Entonces tenemos que mandar ese joystick aquí. También. Lets mencionó la velocidad a la que se moverá el jugador. Serán 500. Ahora, usaremos el método de actualización. Ahora, la actualización es una especie de bucle de juego. Tenemos dos bucles de juego, principalmente actualizar y renderizar. Entonces usaremos el método de actualización la mayor parte del tiempo. La llama llama al método de actualización de un componente una vez que cada tick off frame del bucle de eventos para volver a dibujar cada componente del juego que ha cambiado. Es similar a los aleteo. Construye mi turno. Vamos a agregar lógica aquí en esta actualización, mi cargo de director, el personaje, o el movimiento de los personajes. El método de actualización toma un solo parámetro, que es ese tiempo delta. Es decir este d t se mide en segundos. Ese tiempo delta se utiliza para garantizar que los objetos del juego se muevan y se comporten de manera consistente en diferentes dispositivos y velocidad de fotogramas. ejemplo, si se supone que un jugador se mueve a una velocidad de cien píxeles por segundo. Y el tiempo transcurrido desde el último fotograma fue de 0.02 s, el objeto debería moverse a dos píxeles en este fotograma. Es decir, 100 píxeles por segundo multiplicados por 0.02 segundos. En este juego, los desarrolladores pueden crear juegos que se sientan suaves y receptivos en varios dispositivos. Ahora, vamos a agregarlo. Yo lo haré. En primer lugar, sólo voy a comprobar si joystick, esa dirección es igual a dirección, dirección joystick que ralentí Eso no está pasando nada, entonces simplemente regresa de aquí. Si el usuario no está arrastrando la perilla. Duro en otra parte es simplemente cambiar la posición que esta, esta variable punto añadir. Añadiremos joystick delta relativo al festival de primavera. Te voy a mostrar lo que pasa si no multiplico el delta. Entonces simplemente enviaremos un palo como este. Echemos un vistazo a nuestra aplicación. Ahora. Si la arrastro hacia arriba, mira, fue tan rápido. Pero si voy al componente jugador aquí dentro, si también multiplico d T, entonces verás que se siente tan suave. El movimiento. Se siente muy bien. Entonces nuestro movimiento está sucediendo correctamente. Eso es todo para este video. Nos vemos en la próxima sesión. 6. Video 5 fronteras de pantalla: Hola. Entonces como puedes ver, nuestro jugador se mueve muy bien, pero si se acerca al límite, entonces lo supera. Es decir, pasa por el límite. Entonces tenemos que hacer algo o implementar alguna lógica que ese usuario no pueda mover el límite de la pasta del jugador. Eso es por aquí que tiene que parar. Aquí, tiene que parar así. Así que tenemos que asegurarnos de que el jugador solo pueda moverse dentro de la pantalla de ese dispositivo. Componente de jugador de referencia. Sí. Primero, vamos a crear una variable de límite para los cuatro lados. Tarde, doble, con rumbo a la derecha, tarde, izquierda, atado, abajo, atado. Ahora, como son variables tardías, obviamente tenemos que inicializarlo en la onload. Encuadernado a la derecha será juego DE ese tamaño, NO x -60. Entonces te voy a explicar este valor. Entonces este es el límite correcto. ¿Bien? Entonces antes que nada, hicimos qué juego rho f tamaño de punto x, el eje x. Este lado. Tomamos todo el tamaño vertical u horizontal aquí entonces -60 para que no vaya de este lado. Es decir, no quiero que sea verde azulado aquí. Si solo doy juego ref punto tamaño punto x, será Delia, así que doy -60, así que se parará aquí. Estamos restando 60. Entonces se detendrá aquí. Entonces esta era la lógica para el encuadernado a la derecha o al lado izquierdo. Simplemente serán 60. Es decir, si escribimos cero, entonces nuevamente el mismo concepto. Se irá hasta el final. Pero sólo estoy dando algún tipo de, se puede decir margen 60. El límite superior será el mismo. 60. Desde que y comienza, y comienza con cero, solo estamos sumando cero más 60. Aquí, ya que la dirección x comienza con cero. Y aquí sólo estamos restando. Espero que entiendas el tamaño completo de la pantalla -16. Y la izquierda empieza de cero arriba y luego tenemos eso abajo. Juego ref punto tamaño punto. Por qué esto fue hasta la dirección vertical, ir hasta el fondo, y luego restar seis. Cueva. Ahora tenemos las variables. En el método de actualización. Simplemente comprobaremos si el eje x y el eje y del Sprite salen de los límites de compra, entonces haremos que los valores del eje x e y sean constantes. Es decir, es ese valor que es el borde del límite. Voy a implementar y explicar de nuevo. Entonces abajo aquí. Y sólo vamos a decir, si no es ideal, entonces comprobar no de límites. Verifique si el eje x del componente de sprite es mayor que igual al límite de resaltado, luego el eje x al paquete derecho, estos no agregan más valor a esa ubicación. De nuevo, me gustaría explicar. Entonces eso significa que aquí el jugador accede al eje x es cero. Entonces comienza a aumentar, a aumentar, a aumentar. Entonces es en la encuadernación derecha que está aquí. Entonces ahora solo estamos asegurándonos de que el eje x no aumente. Sólo estamos asignando el XX, derecho obligado por aludido es que este valor se le está asignando una y otra vez. De igual manera. Vamos a verificar si eje x es menor que igual al límite izquierdo, entonces x es igual al límite izquierdo. Ahora bien, si el eje y es mayor que igual al límite superior, entonces y es igual a enlace. Y si y es mayor que igual a abajo herida, entonces y es igual a ahora sin consolidar K. No tenemos cambiar nada aquí que se reinicie. Ahora bien, si traté de ir en cualquier dirección, ver que los límites están funcionando a la perfección. Ahora. Aquí, como dije, si el eje x es mayor que el enlace derecho, entonces solo asegúrate de que el valor x esté encuadernado a la derecha. ¿Bien? Ahora sólo voy a cambiar la valencia. Mostrarte cuál es la diferencia. Si presiono la última vez que si solo por ejemplo si lo escribo, ¿qué pasará si voy directamente a escribir existe c, ok? Era demasiado valor, ¿de acuerdo? Si solo escribo encuadernado, creo que solo debería más, debería ser menos -60 más. A ver. Si voy C. Aquí nos empujan a -60. Esto es -60. Pero quiero no quiero un -60. Por eso solo quiero el eje x hasta el, hasta el final. Ese es éste. Eso es. Lo mismo va a cualquier otra dirección. Espero que hayas entendido el concepto. Si solo construyes una o dos aplicaciones, entonces simplemente te acostumbrarás a estos conceptos y a todos. Gracias. Nos vemos en el siguiente video. 7. Video 6 agrega componente de mancuerna: Hola. Ahora vamos a crear un nuevo componente de sprite para esas mancuernas. Dentro de la carpeta de componentes crea un nuevo archivo. Componente Ponens, punto, punto. Bien, así que de manera similar lo haremos más LastName. Ven oponente extiende componente sprite. Tendrá el juego de tiene de mixin apto para su juego. K. Números, ¿verdad? Se jugará el tamaño. La altura es igual a 60. Vamos a tener la descarga mi total. Otra vez, eso es sprite. El valor estará a la espera. Juego ref dot load sprite, globals dot dumbbell sprite. La altura será igual al peso, que será igual a 60. Esa es la variable de altura del sprite. La partición será el vector dos es solo el eje x y el eje y. Sólo voy a dar valor x a 200, 200. Esto lo cambiaremos más adelante. Y ancla será punto ancla centro. Guárdalo. Ahora agreguemos este componente de mancuernas en nuestro juego. Ir a tarifa de lucha FIT. Por. Después por debajo del componente de capa. Solo agrega aquí como este componente de mancuernas, k. Reiniciemos la aplicación y verifiquemos. Mira, aquí tenemos la mancuerna. Obviamente no pasará nada si tocamos la mancuerna ahora mismo. Pero al menos esto, nuestra aplicación de juegos se ve algo bien. La gente puede ver y decir, bien, esto es algún tipo de juego. Entonces eso es todo para este video. En el siguiente video trabajaremos en esa detección de colisiones. Gracias. 8. Video 7 Agrega HitBoxes a componentes: Hola. Entonces ahora es el momento de trabajar en la lógica de que cada vez que el jugador se acerca a la mancuerna, debería haber algo sucediendo en la pantalla, si deberíamos poder agarrarlos a los dos y a todos. Estas funcionalidades se pueden hacer utilizando el concepto de detección de colisiones. detección de colisiones es necesaria en la mayoría de los juegos para detectar y actuar sobre dos componentes que se cruzan entre sí, por ejemplo, una flecha golpeando y cualquier otro jugador recogiendo una moneda. Entonces, para detectar colisiones en cualquier componente, debe haber una caja delimitadora precisa alrededor de ese componente. Y técnicamente se le conoce como cajas de golpe. Ahora vamos a implementarlo. Entonces, el primer paso es habilitar detección de colisiones en nuestra clase de juego principal. Y en esta clase podemos hacerlo agregando una llamada de mezcla. Tiene detección de colisiones, simple como eso. Por lo que se asegurará de que nuestro juego ahora vamos a escuchar cualquier colisión entre componentes. Ahora para asegurarnos de que nuestros componentes puedan chocar entre sí, tenemos que agregar la mixina conocida como callbacks de colágeno. Estas cosas solo tienes que recordar, eso es todo. Nuevamente, lo mismo en ellos. Devoluciones de llamada de colisión de componentes de capa. Ahora, tenemos que agregar cajas de calor a un componente. Ese sistema de detección de colisiones admite tres tipos diferentes de formas que puedes construir. Odio las cajas de. Esto da forma, a nuestro polígono, rectángulo y círculo. Se pueden agregar múltiples cajas de odio a un componente para encontrar el área que se puede usar para detectar colisiones. Sin agregar la caja principal, ese componente no tendrá idea de que pueden chocar. Nuestros intereses, se cruzan entre sí. Ahora, ya que nuestra mancuerna es que la estructura de nuestra mancuerna es una especie de rectángulo. Entonces agregaremos la caja rectangular a nuestro componente de mancuernas. Simplemente podemos agregarlo así. Cuando la función onload, es muy similar a cualquier adición de cualquier otro componente. Ir al componente jugador y hacer lo mismo. En el OnLoad. Simplemente agregue la caja de cabeza de enredo dama. Bien, ahora si guardo y voy a nuestra app, no verás ninguna diferencia. Pero podemos, al menos en ese modo de depuración, usar una facilidad dada por el motor de lemma. Es decir, podemos encender el de Beauvoir a true. Es una herramienta que permite a los desarrolladores visualizar y depurar colisiones entre objetos en el mundo del juego. Cuando el modo de depuración está habilitado, los objetos de colisión se resaltan, se muestran de manera que los desarrolladores puedan ver dónde están y cómo interactuarán entre sí. Simplemente ve a mancuernas. Y aquí, solo escribir el modo de depuración es igual a true. Y lo mismo va para el jugador. Abajo aquí. Solo escribir el modo de depuración es igual a true. Ahora, guarda y reinicia. Ahora puedes ver algún tipo de caja rectangular. Ahora puedes al menos visualizar la caja principal. Entonces esta es la caja principal. Obviamente. Nuevamente, ahora mismo no va a pasar nada. Tenemos que hacer algunas funcionalidades más para asegurarnos de que la colisión está ocurriendo. Pero al menos sabemos que hemos implementado la caja principal. Y mira aquí si voy, el eje x es dos novenos, uno, si voy aquí, el eje x es obviamente cero, pero no se puede ver. Lo mismo ocurre con el eje y. Ver aquí. También como el modo de depuración que las cajas de impacto tienen un campo llamado colisión tipo C, como este, tipo colisión punto tenemos activo, inactivo y pasivo. Pasivo se refiere a un tipo de objeto de colisión que no se mueve ni reacciona ante colisiones. Ejemplo. Digamos que estamos creando un juego donde la pelota está rebotando por la habitación. Las paredes de la habitación serán de tipo colisión pasiva. Entonces tenemos los valores predeterminados activos de tipo colisión para un tipo de objeto de colisión que puede moverse y reaccionar ante colisiones con otros objetos. ejemplo, en un juego donde controlamos una nave espacial volando por el espacio, hay muchas balas que no pueden chocar entre sí. Línea hacia la nave espacial. nave espacial se establecerá en punto de tipo colisión activa, pero las balas se establecerán tipo colisión punto pasivo. Entonces tenemos a los inactivos. Inactivo, por otro lado, se refiere a un tipo de objeto de colisión que actualmente no está activo en el mundo del juego. Esto puede ser útil para optimizar el rendimiento ya que los objetos inactivos no necesitan ser verificados para detectar colisiones hasta que se activen. Ajusta un YouTube. Yo solo quería que supieras que este concepto está disponible para que en futuros juegos, si ves algún tipo de colisión tipo punto pasivo y todo, al menos sabrás que esto está conectado a las colisiones y cajas de golpes. Gracias. Eso es todo por este video. Nos vemos en la próxima sesión. 9. Video 8 Reacciona a una colisión: Por lo que ahora el siguiente paso es recibir notificaciones en caso de colisión entre dos componentes. Flame hace eso que verifica por ti en cada ciclo de actualización. Tan pronto como para golpear cajas, interactuar o intersectar, llamará al método on collision que tenemos que evitar. Esta sobrecarga es posible debido a esta colisión llamada mezcla de retorno. Debajo de la carga, justo justo en colisión aquí. Así. Entonces obtenemos dos parámetros sobre esto, sobre el método de colisión. Uno es una lista de puntos que se superponen entre las casillas de impacto, es decir, los puntos de intersección. Y el otro es el componente que este componente colisionó. Eso es mancuerna con, choca con ella ese jugador. Ahora, simplemente vamos a escribir la lógica. Si ese otro componente, otro es componente claro. Entonces simplemente quita este componente que es componente de mancuerna del padre que es de ese juego, simplemente hazlo desaparecer. Vamos a probarlo. Me estoy moviendo hacia la mancuerna y veo. Desapareció. Por lo que da una sensación o un efecto que el jugador haya agarrado, esa mancuerna, recogió ese número. Se puede decir. Nuestra detección de colisiones funciona perfectamente. Podemos eliminar este modo de depuración ya que no lo necesitamos. Ahora. Empezar de nuevo y ver si voy hacia ella, desaparece. Entonces esto se ve bien. Ahora toquemos un sonido cuando los componentes del reproductor choquen con ellos. Componente de mancuernas. El paquete flame audio, que ya agregamos en nuestra dependencia del proyecto, es una herramienta diseñada para que gestión del audio sea mucho más fácil y eficiente. De esa manera se hace es que tenemos que precargar todos nuestros archivos de audio en el método de nodo de nuestra clase de juego que va a encajar juego de Fighter. Aquí en la clase de juego, en el método onload. Simplemente escriba audio de llama, audio, efectivo, carga por puntos toda la resolución. Simplemente significa que cargaremos todo en la memoria, la memoria caché. Esto acepta una lista o una matriz que los nombres de sonido son globales, sonido de mancuernas de punto. Globales. Tenemos el sonido del virus. Luego está el sonido de la vacuna global dot. Y finalmente tenemos amantes del sonido de proteínas punteadas. ¿Bien? Esta carga es recomendable porque si intentamos reproducir sonidos directamente en el juego que no se han agregado a la caché. Ahí, entonces, ahí, entonces podría haber algún retraso en la reproducción del sonido. Eso después de eso, toca el sonido. Esto está hecho. Toquemos este sonido en el componente de mancuernas después de la colisión. Aquí. Simplemente escribiremos antes de que te mudes, el audio de llama derecha que reproduzca. Y el nombre que queremos tocar, el sonido de la mancuerna. K. Vamos a probarlo. Si me acerco a él. Sí. ¿El sonido funciona correctamente? Espero que hayas podido escuchar ese sonido. Esto también se hace. Gracias por ver el video. Espero que estés disfrutando construyendo este juego. Nos vemos en la próxima sesión. 10. Video 9 Mancuerna aleatoria: Hola, bienvenido de nuevo. Entonces hasta ahora la posición del componente de mancuernas estaba fija. Y después de que el jugador choca con él, consigue desaparecer. Modifiquemos y permitamos las mancuernas aparezcan en posiciones aleatorias. Para que cuando el jugador coja eso primero, luego eliminaremos ese componente de mancuerna y crearemos una nueva mancuerna y colocaremos aleatoriamente en la pantalla. Y esto continuará hasta que termine el juego. Oh, ve al archivo dot dot del componente de mancuernas. En primer lugar, crear una instancia de la clase aleatoria. Es eso que nos da la biblioteca matemática la cual puede ser utilizada para generar números aleatorios. Simplemente al azar así. Y mira, tienes este mate oscuro importado. Vamos a crear una nueva función que devolverá un vector de dos objetos, es decir, los valores x e y obtendremos una audición. Ahora, primero, obtendremos el valor x, es decir, x es igual al entero aleatorio siguiente int. ¿Bien? Ahora bien, si ve la descripción aquí, incluso entiende que tenemos al azar siguiente intenso. Entonces el valor es mayor que igual a cero y menor que igual a diez. Entonces así es como llegamos ahí, entero aleatorio, ¿de acuerdo? Simplemente obtendremos ese entero aleatorio de X como juego ref dot size punto x punto a int, y lo haremos doble. ¿Bien? Entonces esto significa que el eje x puede ser desde cero hasta el final del valor de la pantalla cualquier entero aleatorio para la x Del mismo modo para la y, tenemos punto aleatorio. Siguiente, int, juego Raf, raf punto, tamaño punto y. integral ya que excepto entero, pero tenemos que cambiarlo para doblarlo nuevamente. Y luego vamos a devolver un vector dos objeto con el x y. Así que espero que entiendas esto es sólo para obtener un valor aleatorio x e y. Eso es. Esto siguiente, playera, puedes entenderme aquí también. ¿Qué hace? Ahora tenemos que llamar a esta función dentro del método onload del componente dumbbell aquí. Ahora cuando estamos asignando el valor, esta posición aquí, simplemente escribiremos get random position. ¿Bien? También, después de la colisión, eliminaremos el presente componente de mancuernas, y luego después de eso, nuevamente, agregaremos un componente de mancuerna aleatoria a ese juego DE este número estará en una posición aleatoria por defecto, como ya hemos mencionado esta lógica aquí en el método onload. Ahora, guardemos todo y veamos ahora mismo que el paraguas está aquí. Y si lo vuelvo a hacer, refrescarlo otra vez, irá ahí. Y si lo tomo, ver, es solo generar unas posiciones aleatorias. Ahora bien, esto es divertido, voy a decir. Y obviamente lo hace. Se está sonando el sonido de mancuernas. Pero como estoy grabando la pantalla, quizá no la puedas escuchar, pero estoy seguro de que puedes oírla en tu propio sistema. Espero que hayan entendido el concepto de detección de colisiones. Eso es todo para este video. Nos vemos en la próxima sesión. 11. Video 10 Agrega componentes de virus: Hola, bienvenido de nuevo. Entonces, hasta ahora, el juego es muy sencillo. El jugador puede agarrar fácilmente las mancuernas sin enfrentar ningún obstáculo. Necesitamos agregar algún tipo de desafío a nuestro juego. Vamos a sumar dos virus que el jugador tiene que esquivar. Así que ahora dentro de la carpeta de componentes crear un nuevo archivo de datos. Componente de virus, punto punto aquí. De igual manera, como antes, Gran componente de virus, X componente sprite denso tiene referencia de juego. Juego Fit Fighter. Tenemos la altura del sprite. Es mencionaremos el sprite I-T para terminar. Y tomaremos como argumento la posición de inicio. Es vector para iniciar partición. Y lo tomaremos que lo construyó es, se requiere así. Ahora, el OnLoad mi tercer sí. Esperar. Y creo que en la capa está ahí. Sí, y simplemente olvidé el debate correcto. S vuelo será juego ref, cargas oscuras brillantes. Punto azul punto y. Esta posición de sprite será la posición inicial que se envía a este componente. Entonces el peso será igual que la altura, que se mostrará la altura que es de 200. Veamos cuanto es 200. Y n es igual al centro de puntos de anclaje. Ahora simplemente agrega este componente de virus recién creado a la clase de juego. Simplemente agregue componentes inalámbricos. Posición de inicio ahora mismo solo lo estoy codificando duro. A valorar. Tenemos que enviar y leer y 150. Y de manera similar sumar a por qué esto está aquí. X será tamaño punto x -50 y tamaño punto y -200. Simplemente puedes jugar con estos valores y entender lo que hace. Todo el k lo hace, ¿verdad? La altura es demasiado. Vamos a darle 100. También es muy grande. Vamos a darle una D. T. Entonces. Si le doy 60, obviamente. Sí. Los sesenta se ven decentes. No2 y se veía muy mal. Sí. También tenemos el virus en nuestra pantalla. En el siguiente video, trabajaremos en el movimiento de los componentes de este virus. Gracias. 12. Video 11 Agrega movimiento al virus: Hola. Podemos ver a nuestros dos virus en su esquina de la pantalla, pero no se mueven a ningún lado. Por lo que ahora trabajaremos en agregarles movimiento para que el jugador tenga que esquivarlos y agarrar las mancuernas. Empecemos por ir al archivo dot dot del componente virus aquí. Y vamos a crear algunas variables. Primero se colocará a velocidad. Esta será la velocidad y la velocidad. Lo van a mover, 300. Obviamente, lo multiplicaremos por D, D y L. Vamos a crear una función. A qué manera giraron un vector para moverse. ¿Verdad? Ahora, la primera línea de código generará un ángulo aleatorio en radianes por nulo. Entonces el ángulo es igual al punto de clase aleatoria siguiente doble en dos. En Dubai. Entonces tenemos que escribir Kool-Aid. El seno y cos seno del ángulo. El ángulo sinusoidal es igual al signo. Y manga final cos ángulo es igual a cos ángulo aleatorio. Ahora, el valor final de la velocidad en x es igual al ángulo cos en velocidad. Por otro. Doble velocidad en y es igual a ángulo sinusoidal en esas velocidades. Y por último, volveremos a esto será, bueno, veamos d x, d x, bueno, veamos a DY. Guárdalo. Entonces, ¿qué es esta función? Para mover un sprite en un ángulo aleatorio, primero necesitamos generar un ángulo aleatorio. El ángulo se mide típicamente en radianes, que es una unidad de medida utilizada en geometría para describir ángulos. Un círculo completo es igual a dos radianes pi, que es aproximadamente 6.28 rad. Entonces para generar el ángulo aleatorio en radianes, podemos usar un número aleatorio para generar un número 0-2 pi, así. Punto aleatorio. Siguiente doble es que mi tech a college, y es decir, genera un valor aleatorio entre 0.0 y 1.0 multiplicando el resultado de NextDouble por dos y Pi, estamos generando efectivamente un ángulo aleatorio ingredientes 0-2 pi. Una vez que tenemos un ángulo aleatorio, utilizamos la trigonometría para calcular la velocidad x e y es la velocidad x se calcula como el coseno del ángulo multiplicado por la velocidad. Y la velocidad y se calcula en el seno del ángulo multiplicado por la velocidad. Entonces tengo que decir que esta cadena i2 tiene Google y busca a través de StackOverflow y todo. Entonces solo hay que recordar esta línea de código. Y obviamente si quieres, puedes investigar para eso también. Ahora bien, lo siguiente que tenemos que hacer es en el método onload se acaba de escribir velocidad es igual a mover sprite. Entonces obtendremos la velocidad que está en qué ángulo se moverá. Y ahora tenemos que crear un método de actualización. Y en deuda cuando sea tercero, cambiaremos la posición a la velocidad, velocidad multiplicada por d t. Así que como saben, multiplicando la variable de velocidad por d t, nos aseguramos de que el sprite mueva EdTech a ellos velocidad consistente, independientemente de la velocidad de fotogramas, por ejemplo, si la velocidad de fotogramas cae a 30 cuadros por segundo, que el parámetro T será un paquete de bytes del segundo sprite, moveremos la velocidad a una por 30 unidades en este marco. Y de manera similar, si lo aumentamos a 60, será en, es decir velocidad multiplicada por uno por 60 unidades. Esto solo asegura que el juego se comporte de manera consistente en diferentes dispositivos y pantallas. Ahora, vamos a guardar todo y reiniciar. Y como puedes ver, los virus se están moviendo. Entonces eso es todo. Para este video. En los próximos videos, trabajaremos en dar límites al componente de virus así como colisiones. Gracias. 13. Video 12 Límites en componente de virus: Hola. Como podemos ver que hay virus están saliendo de límites. Asegurémonos de que haya alguna detección de colisiones entre ellos. Para eso primero, agregue la caja de calor al componente inalámbrico así como a la clase de juego. Así que ve al componente de virus aquí. Y aquí por debajo de la velocidad sobre solo agrega círculo hit box. En el archivo de juego Fit Fighter. Aquí. Voy a añadir cuadro de golpe de pantalla. Es decir, esta es nueva. Es cualquier colisión en los límites de la ventana gráfica. Inflame. Screen hate box es un objeto que representa los límites de esa área de pantalla visible. Se utiliza para determinar si nuestro otro componente del juego está dentro del área de pantalla visible y debe renderizarse en la pantalla. Ahora guárdala. Ahora en el componente de virus. En los componentes inalámbricos. En el método de colisión. Primero, verificaremos si ese objeto colisionado es una caja de calor de pantalla o no. Entonces simplemente vamos en la parte inferior. En cuatro, en colisión. Tenemos que agregar devoluciones de llamada de lesiones. Y luego en colisión. Ahora vamos a comprobar si ese es el cuadro de golpe de pantalla. Aquí. Obtendremos los puntos de intersección. Como saben, ahí está esta. Con la ayuda de esto, verificaremos condicionalmente en qué dirección en la pantalla colisionó, y luego cambiaremos la velocidad opuesta a esa. Aquí. Hagámoslo como por otro vector al punto de colisión. ¿Va a hacer puntos de intersección, archivos de punto? Ese es el primer punto de intersección. Eso es en cuanto éste, cuanto chocó con la pantalla. Verificaremos si el punto de colisión punto x, el valor de x es igual a cero. Es decir, a la izquierda. Entonces cambiaré la velocidad del eje X a menos velocidad eje x. Y punto de velocidad eje y. El mismo, eso es punto de velocidad y. Así que sólo voy a cambiar la dirección del eje x. De igual manera, si punto de lesión.xx es igual al juego ref tamaño punto x, es decir en el lado derecho. Entonces voy a hacer lo mismo. punto de velocidad x es igual a menos punto de velocidad x es solo cambiar el mismo valor de velocidad. Punto de velocidad y. Es igual a punto de velocidad y. Entonces comprobaré si punto de coalición punto y es igual a cero. El punto de velocidad x será el mismo. Pero el punto de velocidad y sería negativo. Velocity dot y. Y finalmente, y recuerda que esta está en la parte superior de la pantalla. Si punto de colisión punto y es igual a juego de.tamaño.y.xy y dos menos velocidad punto y.Bien, vamos a guardar todo y echa un vistazo a nuestra app. Href es igual a cero. Veamos qué está pasando aquí. Entonces ese top está funcionando. Bien, éste no está funcionando. A ver. C estaba funcionando bien. Izquierda, eso es a la derecha no está funcionando. Es mayor que igual a, veamos. Entonces me estoy cambiando. Ahora velocidad K. No, no lo será. En esta sección. Primer punto. Sí ve que no es puntos de intersección de lesiones que primero este. Bien. Así que izquierda y top model trabajando lado derecho. Y el estándar es, este cálculo no es correcto aquí. Juego de Dulles. Como dije en el fondo. El fondo también está trabajando K. Como puedes ver. Abajo, voy a decir que están trabajando en ello. El lado derecho no está funcionando. No debería ser menos porque obviamente, vamos a ver. Ver juego ref, punto tamaño k. algún pequeño error. Debe ser mayor que igual a esto. Veamos, -60 cc. En este momento está funcionando porque -60 es el borde. Como tenemos la cabeza de sprite a los 60. Por eso. Entonces estos cálculos son un poco complejos. No voy a decir mucho, pero sí. Entonces como puedes ver, está funcionando perfectamente. Nuestros virus chocan y se mueven por toda la pantalla. Gracias. 14. Video 13 colisión entre virus y jugador: Hola. Ahora es el momento de trabajar bajo funcionalidad. A la gripe es el movimiento del jugador. Al tener fiebre después de chocar con alguno de los dos componentes del virus. Ya tenemos el sprite de fiebre y el activo de sonido de virus. Ahora, vamos a crear algunas variables dentro de ese componente reproductor. Aquí. En primer lugar, veamos. Colocaron componente brillante. Jugador, flaco, dicha. ¿Alguna nota? Vamos a escribir jugador flaco primero. Es brillante. Fiebre de capa. Estoy escribiendo el jugador flaco y fiebre aquí porque lo vamos a cambiar acuerdo a las colisiones antes solo estábamos haciendo salir el sprite aquí directamente. Ahora en el método onload, voy a escribir player skinny es igual a este. Justo aquí. La fiebre del jugador es igual a lo mismo pero solo el sprite vamos a cambiar. Es decir, las fiebres de capa brillantes. Y ahora en el Sprite principal, quedará flaco al comienzo mismo del juego. ¿Bien? Ahora es el momento escribir una lógica donde el jugador no podrá moverse durante 3 s. luego de que choca con el virus. También cambiaremos esta imagen de sprite. Vamos a crear nuevas variables de estado así como funciones para congelar y descongelar el movimiento del jugador. Así que aquí voy a añadir archivo FASTA cuando virus booleano atacado es igual a falso. Y lo voy a usar. Dímero. dímero es igual a 3 s, por lo que es como congelado durante 3 s. Iniciaremos este temporizador cuando el virus y el jugador choquen. Entonces ahora, vamos a crear una función, void, freeze player más la caída. Comprobaremos si y esto es cierto. Y vamos a escribir, no, voy a publicar comprobación de nivel alfa. Si el virus atacado es falso, entonces solo congelarlo porque si es cierto entonces ya esta congelado. En primer lugar, tocaremos el sonido global start virus sound. Reproducir el sonido en la lesión. Entonces vamos a escribir ataque de virus es igual a verdadero. Entonces vamos a genes hace derecho a la capa de fiebre. Cambiar la imagen del sprite. Y finalmente arrancaremos el temporizador C. ¿Bien? Y también vamos a crear una función para descongelar capa también. Simplemente vamos a cambiar el ataque del virus es igual a falso. Y vuelve a cambiar esto a jugador flaco. Espero que haya entendido estas dos funciones. Estos son muy básicos y directos. Ahora, en el método de actualización, comprobaremos condicionalmente si jugador está siendo atacado por un virus o no. Es decir, si el valor booleano es falso, entonces permita los movimientos del joystick. Y si el valor es tres, es decir, si el valor es verdadero, entonces actualice ese temporizador y llame a la función de descongelar reproductor después de que hayan pasado 3 s. Entonces aquí, antes que nada, solo comprobaremos si el ataque de virus es falso. Si es falso, entonces solo permita estos códigos. Es decir, todo este código. Sólo córtala y pela aquí. Porque si lo es, si, si no es atacado por un virus, entonces sólo se permiten los movimientos. Y como vamos a actualizar ese dímero, es decir, comprobaremos esos segundos. Y si el dímero está terminado, es decir 3 s ha pasado, entonces solo más frío y función de congelación. Ahora esto también se hace. Por último escribe eso sobre el método de colisión para ese componente del jugador. Ya tenemos la devolución de llamada de colisión. Así que simplemente aquí el trineo en colisión. Y solo vamos a escribir si es por eso que este componente entonces simplemente se llama función de reproductor de congelación. Bien. Ahora reinicia la app y ve el sonido. Está ahí. Imagen del jugador, sprite se congela y no podemos movernos durante 3 s. Y si toma la mancuerna, entonces está funcionando. Y nuevamente, si golpea entonces sus movimientos están restringidos. Se ve muy bonito. Espero que hayas entendido el funcionamiento de la aplicación así como hayas disfrutado construyéndola hasta ahora. Gracias. 15. Video 14 Componente de texto: Hola. Ahora nuestras funcionalidades de juego están funcionando a la perfección, pero necesitamos que el usuario sepa cuántas mancuernas ha agarrado en forma de puntuación, así como cuánto tiempo le queda para terminar el juego. No queremos que el juego funcione para siempre. Para eso, vayamos a la principal, esta gran pelea, a su clase de juego principal. Tenemos que crear dos nuevas variables. El primero será score, que comenzará desde cero, luego dímero tardío, dímero, luego nt. Restante. El tiempo es igual a 30. Es decir, queremos que el juego esté apagado 30 s. Ahora usaremos ese componente fiscal de llama solo para sacar la puntuación y el tiempo al usuario. El siguiente componente, texto de moneda de diez centavos. Ahora, en la onload, primero mencionaremos ese modo temporizador. Haz que se repita un poco. A través de esto, en cada repetición. En cada repetición, se comprobará. Si el tiempo restante es igual a cero. Si es cierto, entonces pausa el motor que está pausado, el motor del juego, todo se quedará atascado. O de lo contrario vamos a deducir o decrementar el tiempo restante que distrajeron durante 28, 27, así. Y cuando comience el juego, iniciaremos ese temporizador también automáticamente en el método de onload en NCL. Entonces en la descarga, después de que todo esté editado, este componente de virus, arrancará todo el temporizador. Ahora, vamos a crear un componente de texto para mostrar anotado y colocarlo en la parte superior izquierda. Para que este componente de texto, ese texto sea una audición de partitura, donde se deben en el eje x muy superior para el eje d, y para t anclaje será punto anclado. Izquierda. Decks render, texto, pintura. Estas son las propiedades del componente de texto que solo tienes que recordar o estilo de listados, estilo dec. Vamos a cambiar ese color. Boleta básica, color punto negro 25. Y después de esto, agregaremos el componente de texto de partitura a la pantalla. Vamos, se inicia. Y como puedes ver, tenemos el componente score en la pantalla. Obviamente es cero y no va a incrementar en estos momentos. Tenemos que escribir algo más de lógica en las funciones de actualización, lo que haremos en el siguiente video. Gracias. 16. Video 15 Actualización de puntuación y tiempo: Hola, Vamos a continuar y crear otro componente de texto para el tiempo restante que queda aquí. Del mismo modo, ¿verdad? El texto de tiempo es componente de texto. X2 quedará muriendo. Lesión de segundos. Ahí también. Acabamos de decir días de escritorio verde menos cuatro d. y para DDT está en el lado muy derecho. El ancla se anclará arriba a la derecha. Y luego habrá texto, pintura de pintura, y luego peinado. Color de estilo, igualmente boleta básica. Ahora, color negro. El tamaño de la fuente leerá cuantificando. Y después de esto, simplemente agregue ese componente al texto del nombre de pantalla. Mira, el tiempo también está ahí, y yo sólo voy a colorear aquí. 30 segundos. Podemos ver la partitura y el tiempo restante de los textos en la pantalla, pero los valores no se están actualizando. Trabajemos en eso. En el juego de la flota de combate. Crear la función de actualización. Después de la OnLoad. Crear la función de actualización. Obviamente funcionará manera similar como cualquier otro componente. Lo primero que tenemos que hacer es actualizar ese objeto temporizador. Entonces actualizaremos la partitura, esa puntuación x punto x es igual a, solo diremos puntaje. Y como el valor de puntaje se está actualizando automáticamente aquí, es decir en este tiempo o no en este tiempo donde obviamente vamos a hacer, tenemos que hacer algo en ese componente de mancuernas para actualizarlo? Decks a tiempo, es decir, tiempo. Eso puede. Y aquí está el texto en tiempo real, el texto. ¿Bien? Ahora en componente de mancuernas, cuando la mancuerna choca con el jugador, acabamos de quitarla. Pero ahora se asegura de que aumentemos ese valor de puntuación que este juego ref dot score más igual a uno. Y la variable de puntuación se ubica en la clase de juego principal a la que estamos accediendo con el juego tendrá como de costumbre. Ahora, reiniciemos y veamos el segundo set, 26, 25. Y si agarro los números, va en aumento. Si no eres capaz de escuchar ese sonido, está bien porque solo tengo discapacidad. Pero en su sistema, estoy cien por ciento seguro que es capaz de escuchar su sonido. Entonces eso es todo para este módulo. Nos vemos en el siguiente video. Gracias. 17. Video 16 sobre menú: Hola, bienvenido de nuevo. En este video, trabajaremos en superposiciones y superposiciones y habilitaremos que cualquier widget de Florida se muestre encima de una instancia de juego. Esto hace que sea muy fácil crear cosas como pausa, pantallas heads-up o una pantalla de inventario. Por lo que esta gestión se realiza a través las sobrecargas de puntos del juego que anuncio y el punto del juego se superponen a los métodos de eliminación de puntos. Así que vamos a crear una nueva carpeta, pantallas dentro de lib, y crear un nuevo archivo de datos. Juego sobre menú punto punto punto. Esta pantalla actuará como una pantalla superpuesta. Importar. Mi juego de vidrio TTL sobre mi nuevo se extiende widget sin estado. Tenemos doble método. Aquí. Lo primero que voy a hacer es crear una identificación que sea const. String ID es que van a hacer Game Over Menu. Este ID de superposición es un identificador único adjunto a cada superposición en esa pantalla. Se utiliza para identificar y manipular una superposición específica, como agregarla o eliminarla de la pantalla o del juego. La idea de superposición generalmente se asigna cuando se crean las superposiciones y Canvas cadena o valor entero. Después tomaremos el juego de referencia fit Fighter game, game href como parámetro para el constructor. Sólo dices const. Menú Gameover. Super punto t requirió estos dardos juego ref. Ahora en el doble mi tercero, volvamos andamio. Estos son todos los widgets de florida. Espero que conozcas ese cuerpo. Tendremos un contenedor. Entonces declaración tendrá imagen de Declaración. Contará con imagen de Declaración. Entonces aceptará una imagen. Esta será una decoración de caja, por lo que encajonaron ecuación y aquí será imagen de declaración. Imagen. Tenemos la imagen de fondo, assets slash images slash blue balls, globals, backgrounds, sprite. Y el ajuste será Box fit, cubierta de punto. Esta será la declaración. Y entonces ese niño que tenga el contenedor será el centro. Niño. Entonces la matriz de columna matriz es la alineación, la alineación del centro del punto. Entonces en esos niños, lo primero que voy a tener es un widget de texto. Y recuerda que esto no es un componente es merecer widgets de aleteo. Juego sobre estilo, estilo, tamaño de fuente 50. Otros textos serán score, que será game, game ref dot score. Y aquí el estilo será const, textil en talla. Se han ido. Por lo que vamos a dar algún tamaño de espacio, en caja, altura 200. Entonces tendremos dos botones, uno para jugar, otro para permitir que el usuario vuelva a jugar, o para volver al menú principal. Como digo, es la caja. Envolveremos la caja del tamaño del botón solo por el ancho y alto. Ancho 200, alto 50. Niño. Botón elevado. Y prensa. No va a hacer nada por ahora. Y volveremos a ir a la capa de texto const. Estilo, estilo de texto, tamaño de fuente, unificación. Entonces tener un tamaño considerable sólo para dar algo de espaciamiento aquí, de nuevo, tamaño de la caja de altura durante D. Y por debajo de esta caja de tamaño. Cargamos este tamaño Vox. Tengamos otra caja de tamaño para el botón. Altura. 50. Botón elevado infantil. En prensa. Y nuevamente, niño const texto. Menú Principal, cubiertas. No hay una talla 25. Entonces eso es todo para el juego sobre menú. Mostraremos esta salida, este menú más adelante. En el siguiente video, trabajaremos en la pantalla del menú principal. Gracias. 18. Video 17 Pantalla de menú principal: Hola, bienvenido de nuevo. Así que hemos creado el juego sobre menú. Ahora, vamos a crear otra pantalla y ponerle un nombre al menú principal. El menú principal, punto, punto. Empecemos con la importación de material. Será apátrida, rígida. Denle el nombre menú principal. Y el retorno es andamio. En ese cuerpo. Tengamos un contenedor. Vamos a darle una decoración de caja. De igual manera, le daremos una imagen de fondo. Esta imagen de decoración de imagen. Simplemente una imagen establecida. Assets slash images slash globals. Ese sprite de fondo. Y b caja con tapa de punto, mosfet punto sobre k. Ahora, el hijo del contenedor, vamos a tener un centro. Entonces. Dale el micrófono principal de la columna. X es matriz de elementos es m punto centro. Que los niños que es lo tienen que eso es tener un texto que es el nombre del juego y también jugar botón. Y recuerda que esto no es una superposición, esta es directamente una pantalla. Es decir, esta será la primera pantalla el usuario abra la app y vea const incipiente. Esto es solo el estilo. Puedes hacer lo que quieras. Todo depende de ti. Insets de borde, simétricos, verticales 50. Entonces niño con el estilo textil. Talla única 50. ¿Bien? Y después de este widget de relleno, vamos a tener una caja de tamaño. Dan algo de espaciamiento. Ya que ya sé que lo eres. Por eso estoy puedo escribir directamente este relleno y realzado todo. Obviamente cuando intentas construir algo desde cero, tienes que probar y probar los widgets de Alda UI y todo. Hago cien. Entonces esto será, esto es sólo un botón. Prefiero el botón infantil elevado. En prensa. No hagamos nada ahora mismo. Y en ese niño, tenemos una const. Texto a x es simplemente juego y estilo, estilo dec en tamaño 25. Así que eso es todo para el menú principal también. En el siguiente video, crearemos la pantalla de juego y conectaremos todas las pantallas juntas. Gracias. 19. Pantalla de juego de video 18: Hola, bienvenido de nuevo. Entonces, en lugar de llamar al widget del juego directamente en este archivo punto punto principal, crearemos un nuevo archivo dentro de las pantallas y lo nombraremos. Gameplay punto, punto o material. Que es menos rígido. Ajuste límite. Su juego. Ahora no vamos a nombrarlo apto para la diarrea. Simplemente lo nombraremos juego. Bien, le vamos a nombrar jugabilidad. Entonces girará un widget de juego, como este widget de juego. Y obviamente tenemos que mandar una instancia de un juego. Inicializaremos el juego de Street Fighter aquí. Nunca lucho juego mortal. Para el juego así. Y lo enviaremos aquí. No estamos inicializando esto directamente aquí porque si guardamos o pasa algo o si se llama a esos métodos de factura, entonces perdemos todos los datos porque volverá a crear una nueva instancia del juego Fruit Fighter. ¿Bien? Y ahora trabajaremos o usaremos la propiedad del juego. Eso lo hicimos, este mapa de construcción superpuesto. Aquí, solo tenemos que asignar overlay, ID, pantalla, Bill, contextos, contexto, juego, rref de juego. Y este es el juego sobre menú. En nuestra aplicación, la única pantalla superpuesta es la pantalla, así que solo estamos asignando el id, es verde. Eso es lo que tenemos que mostrar cuando se llama a esta idea. Ahora ya lo hemos hecho. Vamos al archivo punto punto principal. Y aquí en la app. En primer lugar, eliminaré esta app de material de inicialización . Mueven el banner y la página de inicio es la primera pantalla será el menú principal. Y ahora ir al menú principal. Aquí. Cuando el usuario haga clic en el botón Reproducir, debe navegar a la pantalla del juego. Es navegante del contexto. El reemplazo de empuje. Hagamos que el juego se juegue. Como ya sabes, jugabilidad. A ver, jugar a esto, a este juego. El juego comenzará. Ahora reiniciemos nuestra aplicación. Como, como puedes ver, el verde es la pantalla de introducción del juego, ese es el nombre. Este logo ya está ahí, ya ahí en el fondo. Y tenemos el botón de reproducción. Si hacemos click en play C, ya podemos jugar. Bien. Sólo voy a hacer una pausa en el motor del juego. Ahora tenemos que tomar uso del esquema de superposición, es decir juego sobre pantalla. Tenemos que llamarlo después de que ese temporizador o termine el juego. Así que ve al juego de luchadores de peso aquí. Y aquí. Cuando estamos, cuando estamos cortando el motor de pausa simplemente superpone punto add. Y tenemos que darle al juego ID sobre menu dot ID así. Y esto le mostrará Game Over Menu. Y además, vamos a crear una función en la parte inferior para reiniciar el juego. Es decir, si el usuario quiere volver a jugarlo, entonces simplemente comenzaremos. Simplemente asignaremos esa puntuación a cero y el tiempo restante es igual a 30 s. finalmente, ir al menú GameOver y permitir que el usuario vuelva a jugar también es ir a la pantalla del menú principal. Aquí. Cuando el usuario haga clic en el Reproducir de nuevo. En primera parada, moveremos el overlay. Es juego, nuestro menú ese id Entonces llamaremos a la función de reinicio, que acabamos de mencionar se crean. Y después de eso, retomaremos el motor. Eso es. Estos son los tres pasos. ¿Y qué pasa si el usuario quiere volver al menú principal? Nuevamente, antes que nada, eliminaremos el ID de GameOver superpuesto así. Entonces tenemos que llamar al set. Entonces retomaremos el juego. Pero después de eso, simplemente usaremos el reemplazo de pus push y enviaremos un menú principal de usuario. Así. Espero que puedan ver el código. Este es el código. Cuando el usuario quiera ir al menú principal. Reiniciemos y verifiquemos todas las funcionalidades. Si hago clic en play. Y veamos después de 30 s. Entonces, ¿qué pasa? Esta final, voy a decir. Ahora, mira, tenemos el juego sobre menú. Podemos ver esa puntuación. Y si simplemente volvemos a hacer clic en jugar, entonces el marcador es cero. Y tenemos ese dímero. De nuevo comenzando eso es de Tatu. Y ahora otra vez, qué pasa si haces clic en Menú Principal, luego nos envían de vuelta a la pantalla del menú principal. Eso es. Eso es todo para ese juego. Sobreles. Nos vemos en el siguiente video. 20. Video 19 Cambiar jugador Sprite condicionalmente: Entonces hasta ahora, cuando el jugador lo agarra, aumentamos esa puntuación. Pero, ¿por qué no hacerlo interesante? Cambiemos también la imagen del sprite. Cuanto más anota, más musculoso se vuelve. Ya que todo el mundo conoce cinturones de levantamiento de pesas, músculos. Entonces intentemos implementar eso. Archivo de componentes del reproductor de referencia. Vamos a crear dos nuevas variables de estado para otros sprites. Por capa. Peso. Sprite tardío, blair, muscular, k. Carguemos la imagen del sprite en esas variables. Ten la onload aquí. Sólo tienes que copiar y pegar dos veces. El peso será jugador encaja brillante y claro, musculoso Live Player muscular sprite k Ahora, en lugar de llamar sprites aquí, directamente, esto aquí. Y también en la función de congelación. Aquí estamos cambiando la imagen del sprite. Vamos a crear la función que condicionalmente renderizó sprite. Lo que quiero decir es a k, Vamos a crear aquí amplio jugador sprite. Primero comprobaremos si es atacado por un virus. Entonces sprite será fiebre del jugador. Entonces comprobaremos si juego ref dot score mayor cinco y menor que igual a diez, es 5-10. El baile cambió a jugador por ello. ¿Bien? De igual manera, Jack else-if game ref dot score mayor a diez, luego cambia el sprite a jugador musculoso. O de lo contrario finalmente, firma el sprite inicial, el skinning display hace sprite. Ahora hemos mencionado esta función, llamemos a esta función para renderizar los sprites en todas partes. Primero, vaya al método onload. Aquí. En lugar de llamar a rociado así, simplemente llama a la función. Después vaya a actualizar. Sólo nos aseguraremos de que estamos llamando a la función aquí. Es decir, si no es atacado por un virus, entonces comprobará esa puntuación y esa función será llamada una y otra vez. Entonces ve a descongelar aquí. Llamemos a esa función. Entonces después de que el ataque del virus sea falso, nuevamente, el sprite cambiará. De igual manera ir a congelar. Aquí. Cambiaremos la imagen del sprite así. Y también por qué no decrementar esa puntuación cuando es atacado por el virus, lo que significa que perderá los músculos después de obtener castor o frío por ese virus. Ya que la puntuación disminuirá, así como el sprite también cambiará demasiado flaco. Al final. A quien sólo vamos a comprobar si juego ref dot score. Si es mayor que cero, entonces sólo decrementado, pasará a negativo. Así. Tan simple como eso. Bien, vamos a refrescarnos. O puedes establecer un inicio. Y vamos a comprobar qué pasa. Bien, mira, el marcador bajó. Pero ahora tengo seis entonces mi imagen de sprite cambia a encajar. Y obviamente ya veo, Como pueden ver, se cambió la imagen del sprite y también se volvió a cambiar. Y finalmente, se acabó el juego. Pero ahora verás qué pasará si vuelvo a jugar. La mayor parte del tiempo. Te voy a mostrar a lo que me refiero. Peso. Ve a FIT, lucha contra eso otra vez. Voy a quitar el virus o unos. A ver. Te voy a mostrar que tienen ese sprite musculoso ahora mismo. Vaya, si no hay dirección, entonces podemos anotar tanto. Pero ahora, qué pasa si vuelvo a hacer clic en Borrar, ver si volvemos a reproducir o vamos al Menú Principal, entonces la imagen del sprite no se cambia a la predeterminada. Es el flaco. Al principio. Como cuando los juegos La función de actualización pasada de Genie dejó de funcionar para cada componente. Para solucionar ese problema, vamos a crear una variable de estado para el componente Player. Grados. Ve a nuestro código. Ir a caber por delta. Aquí. Vamos a componente de capa de cuadrícula, componente de reproductor, ¿de acuerdo? Después onload. Primero, inicializaremos el componente player así y luego lo agregaremos para que podamos cambiar este componente de capa directamente ya es una variable de estado que no está dentro de la función. Bien. Cambiemos esa imagen de sprite a la predeterminada en la función reset. Aquí. Vamos a restablecer el componente del jugador puntos sprite es igual a esperar cargas brillantes. Hagámoslo un fregadero. Globales. Sprite flaco. Se inició la serie de plomo. Y vamos a revisar ese juego otra vez. Digamos 4/32. Sólo tengan paciencia conmigo. Voy a crear una puntuación alta como esta. Bien, ahora, esperemos a que termine el temporizador. Ahora, esta vez, si hago clic en Reproducir de nuevo, vea que la imagen se restablece nuevamente a desollar. Entonces espero que hayas entendido los conceptos, por qué estoy haciendo esto, por qué lo estoy haciendo. Y nuevamente, voy a descomentar el componente del virus. Entonces eso es todo para este video. Nos vemos en la próxima sesión. 21. Video 20 Crea un componente de vacuna: Hola, hagamos el juego más interesante. Añadiremos un componente de vacuna a intervalos aleatorios y el usuario del proveedor lo agarra. Será inmune al virus por unos segundos. Esto suena muy interesante, ¿verdad? Vamos a implementarlo. Dentro de los componentes. Crear un nuevo archivo. Componente de vacuna, punto, punto, copia y pega código completo del componente del virus. Así que vamos a copiar todo. Pégalo aquí. Veamos. Cambiémoslo a componente de vacuna. Componente de pecado. Tenemos la velocidad del vector en el cambio OnLoad, por lo tanto brillante a sprite de vacunas. Posición, posición de inicio. El peso es igual a la altura, ¿de acuerdo? Y eso es todo para anclar el centro. ¿Bien? Todo está bien. Ese código es muy similar a básicamente dividir este componente, solo cambiaremos la imagen del sprite y esa calificación de parte de detección de colisiones es la misma. Bien, tenemos el spray Move, esto también es lo mismo. Vamos a la colisión. Aquí. Debajo del odio verde solo comprobará si hay componente de capa. Después quitarle esto al progenitor, solo se eliminará este componente de la vacuna. Bien, guárdalo. Ahora, trabajemos en la colisión entre jugador y una vacuna. Componente de jugador de referencia. Tenemos que hacer cambios aquí también para que la vacuna funcione. En primer lugar, vamos a crear una variable de estado. Este booleano está vacunado, es igual a falso. Entonces aquí solo comprobaremos si el jugador está vacunado, lo que significa inmune a por qué esto. No tenemos ninguno que tengamos en colisión y esto Sí. Si hay virus, solo diremos si no está vacunado, entonces solo lo libera. Los adultos no congelan al jugador porque lo está, ya se agarró la vacuna. Y también vamos a escribir, si hay un componente de vacuna, entonces vamos a crear una función inyectar cera. Vamos a crear funciones para las vacunas. Al fondo, escribiré amplio, y voy a crear esta vacuna inyectada. Además de los cuatro niveles. Cheque. Es decir, solo escribe primero el comentario. No ejecutes si y, esto es si blade es levantado por el virus, es si no es atacado. No por qué este ataque, entonces James es vacunado, es igual a Drew. Y reproducir el audio. Globales vacuna sonido 0, K. Y otra función eliminar x in. Simplemente vamos a cambiar, es vacunado es igual a falso aquí. Nada mucho. Entonces, sí, hemos hecho muchos cambios. Entonces eso es todo para este video. Sigamos haciendo cambios más necesarios en el siguiente video. Gracias. 22. Video 21 Añade vacuna a intervalos aleatorios: Continuemos y hagamos los cambios necesarios en la clase de juego para que el componente de vacuna funcione. Vayamos al juego de Fit Fighter. Tenemos que crear nuevas variables de estado. En primer lugar, inicializaré el componente de la vacuna. Está bien. Componente vacuna, componente z. Acabamos de mencionar la posición inicial. Voy a escribir el vector dos, eje x para enriquecer el eje y 200. Entonces escribiré en inmunidad vacunal, dy es igual a cuatro. Esto significa que la vacuna dará inmunidad, o se puede decir que trabajaremos en ese jugador con licencia por 4 s. Después de eso, se verá afectado por el virus que el dímero tardío de la vacuna. Entonces este es el objeto temporizador para la vacuna. Comprobaremos que es por segundo ha terminado o no. Y entonces tendremos tiempo de vacuna. Los padres de familia lo harán más interesante porque le daremos tiempo aleatorio para la vacuna a FPS. Entonces ni siquiera sabemos cuándo aparecerá la vacuna en el juego. Y cada vez que aparecerá en diferentes, diferentes tiempos se puede decir porque ese gamer está fuera de fiestas segundos. Ahora. Vayamos a la onload. Aquí. En la onload solo escribiremos vacuna. La apariencia de tiempo es igual al punto aleatorio siguiente int. Y escribiremos el tiempo restante -20 más 20. De esta manera es que aparecerá el momento para que aparezca la primera vacuna. Mira aquí, como puedes ver, random next da un entero aleatorio. Si escribimos directamente el valor aquí que es diez, entonces dará un valor que es mayor que, igual a cero e inferior a diez. Pero como el juego es de 30 s, quiero que el primero aparezca en cualquier momento entre 20/32 para que todavía nos quede tiempo para que aparezca otra vacuna. Supongamos aquí la vacuna, si la aleatoria se eligió 5 s, entonces en todo el juego, sólo aparecerá una vacuna. Esta es mi propia elección. Depende de ti. Y aquí mira lo que pasa. Si hago algo como siguiente en el cien más 50, valor es mayor que 50, ya que también he sumado 20. Por lo que el valor será mayor a 20, y aquí será menor a 150, la suma de ambos. Entonces supongamos que aquí el tiempo restante se etiqueta t menos 2010 más 2030. Entonces yo simplemente, este cálculo significa que debería ser mayor que 20 y menor que 30. Ahora, después de esto, tenemos que hacer cambios en ese objeto temporizador anterior. Aquí, este objeto temporizador. Y comprobar si ese tiempo restante de juego es igual al tipo de aparición de vacuna aleatoria. En caso afirmativo, entonces agregue el componente de la vacuna. Entonces lo que voy a hacer es verificar primero si el tiempo restante es igual a cero. Pausa en Qian, ¿de acuerdo? Bueno, yo sólo lo apagaré. Aquí voy a comprobar otra cosa, si el tiempo restante es igual al dímero de vacunas padres. A continuación, agregue el componente de la vacuna. Y tenemos el componente de vacuna y eso arriba así. ¿Bien? Entonces supongamos la manía, ese tiempo de vacuna de virus, es decir esta se suponía que Indy cinco supongamos. Entonces cuando ese temporizador marque 302-920-8206, entonces cuando vaya a 25, agregaremos el componente de vacuna a ese juego. Y también, vamos a crear un nuevo objeto temporizador para la vacuna. Aquí. Debajo de este temporizador. Vamos a escribir el temporizador de vacunas es igual a uno. Repita el ****. Debe ser cierto. En cada garrapata se comprobará si el tiempo de inmunidad a la vacuna es igual a cero. Es decir, se acabó la vacuna. Si no es así, entonces decrementar el tiempo de inmunidad a la vacuna en uno, el gusto por el segundo tres, segundo dos, segundo 1 s. Y si se acaba, antes que nada, escribiré componente jugador que elimine la función de vacuna. Es decir, espero que se acuerden. C, Cambiaremos cada vacuna que sea igual a falsa. ¿Bien? Después de eso, volveré a escribir vacuna el tiempo de inmunidad es igual a cuatro nuevamente. Entonces agregaré vacuna. Apariencia, atando el tiempo de prueba de vacuna y padres es cero. Esto se hace para la comprobación condicional. Lo haremos más adelante para volver a mostrar la vacuna. Aquí. Nuevamente dijo inmunidad, tiempo para remover. Función de vacuna en la clase de jugador. Bien. Entonces solo quiero que este temporizador, temporizador de vacunas se detenga. Es decir, no quiero que una y otra vez vaya para siempre. Bien. Ahora, finalmente en el método de actualización, comprueba si el jugador está vacunado y si VS entonces sigue ejecutando ese objeto temporizador. Y si el tiempo de la vacuna, el valor de un padre es cero, eso significa que el efecto de inmunidad ha terminado. Eso, de nuevo, crear un tiempo aleatorio para la vacuna a una pareja en ese juego. Entenderás, Espera, vamos a la función de actualización. Comprobará si el componente está vacunado. Entonces solo actualizaremos el temporizador de vacunas. Esta semana. Vamos a camino entonces tendrá funciones Enda. Y más-si la vacuna muere la apariencia es igual a cero. Entonces solo comprobaremos si el tiempo restante del juego es mayor a 3 s por lo menos. Después otra vez ADA. Entonces otra vez, agrega la vacuna al juego que es al azar. Punto siguiente int. Tiempo restante -3 s más tres. Esta nueva vacuna. Padres de familia. Tiempo de renta. ¿Bien? Entonces aquí acabamos de leer al menos el tiempo en que el juego debería ser mayor a 3 s. al menos. Aquí espero que entiendas de nuevo. Entonces mayores a 3 s y cualquiera que sea el tiempo restante se supone que debe hacerlo en este segundo o lo que sea. De nuevo obtendrá un número aleatorio. Y debido a esto, todavía tenemos este temporizador y comprobará si tiempo restante es igual al tiempo de vacuna y volverá a estar en el componente de vacuna. Entonces el bucle seguirá y seguirá hasta que termine el juego. Y en ese método de reset estamos dando la capa de puntuación. Tenemos el tiempo restante. Vamos a escribir req visto. El tiempo de inmunidad es igual a cuatro. Y vamos a quitar el componente de la vacuna de aquí. K mucho código lo sé, pero hay que entender el concepto. Por último, el componente jugador de referencia en la vacuna inyectada. Se comprobará si no está tan bien. Después de jugar, simplemente escribirá juego ref, dot vaccine timer, dot start. Espero que lo hayas visto. Aquí. Escribimos el temporizador de vacunas, pero aquí no lo estamos llamando. Es decir, no estamos iniciando el temporizador de vacunas. Solo comenzaremos si componente de la capa superior choca con el componente de la vacuna. Digamos, bueno, bien, volvamos a ejecutar eso. A ver, estamos consiguiendo cualquier editor o el juego está funcionando. Mantengamos los dedos cruzados. Juguemos. Verás, tenemos ese componente de vacuna, pero como fui atacado por el virus, no funcionó. Pero esperemos. Supongo que habrá otra ocasión aparezca el componente de la vacuna. Se vuelven a emparejar con ellos. Juguemos de nuevo. Ver. Ahora tengo el componente de vacuna y no me está pasando nada. Pero después de 4 s, de nuevo, estoy siendo atacado. Entonces eso significa que somos al menos el componente de la vacuna. Está funcionando perfectamente. A ver. ¿La vacuna volvió a aparecer o no? No necesariamente está bien, Apareció. Ver finalmente, esta funcionalidad está funcionando a la perfección. Espero que hayas disfrutado así como entendido ese concepto. Si no es así, intente verificar esos códigos nuevamente antes de pasar a otra sección. Gracias. 23. Video 22 trabajo en componente de proteína: Hola, bienvenido de nuevo. Entonces el último giro que agregaremos en el juego es un componente proteico. Como la construcción muscular y la ingesta de proteínas van de la mano. Básicamente aquí, aparecerá un suplemento proteico a tiempo aleatorio por solo una vez por juego. Y si el jugador lo grafica antes de que desaparezca, entonces obtiene un incremento de código de bono aleatorio que puede ser cualquier valor 0-8. Esto creará curiosidad. Entonces hagámoslo. Vamos a crear un nuevo archivo dentro de los componentes, a saber, el componente proteico punto punto cuidado. Copia y pega el código completo de la vacuna. Aquí. Sólo tienes que copiar todo y pegarlo. Obviamente vamos a cambiarlo a Proteína. Ven por un n, k. y en el OnLoad, tendremos proteínas dub brillantes aquí y terminaremos en colisión. Simplemente escribiremos si otro es componente Player, supongamos. Entonces obviamente eliminaremos este componente u objeto de la pantalla, pero también incrementaremos la partitura. Entonces, para obtener la puntuación aleatoria, ya hemos implementado esto tantas veces. Y estoy puntaje de bonificación es que vamos a hacer punto de clase al azar siguiente int nueve. Entonces aquí, 0-8. Dado que nueve está excluido, 0-8, puede generar cualquier bono aleatorio. Y simplemente vamos a incrementar hace llamado juego ref, puntaje de punto, bobina de plástico, bono aleatorio. Así que imagina que el usuario no sabe que podría obtener ceros desafortunados core, depende de su suerte. Ahora tenemos que volver a hacer los cambios necesarios en la clase de juego. Entonces vamos al juego de Fit Fighter. Aquí. Vamos a crear nuevas variables de estado para la proteína. Entonces aquí al igual que lo que es el componente proteico. En primer lugar, vamos a inicializarlo. El componente proteico es igual a y vamos a dar la posición de inicio. De manera similar a 200.400 K. Y si quieres, también puedes generar posiciones de inicio aleatorias, pero ya sabes implementarlo, Depende de ti. Escribamos Proteína. Proteína. tiempo. Izquierda es igual a cuatro, lo que significa que la proteína desaparecerá automáticamente automáticamente después de 4 s. Así que aquí, el usuario tiene que agarrarla dentro de 4 s. Tendremos un dímero de proteína también. Hoy. Decano. Dímero. Entonces vamos a tener dy. Mis padres, este será un tiempo aleatorio para que la proteína sea. Bien. Y por último, solo diremos bono proteico. A ver. Cuál es el bono proteico para que podamos mantener esa pista, realizar un seguimiento de cualquier bono que podamos mostrarlo al usuario más adelante. Eso, ¿cómo es el monto exacto del bono que obtuvo? Entonces aquí por debajo del tiempo de la vacuna, mis padres, Vamos a escribir dímero de proteínas padres es igual al punto aleatorio siguiente int, tiempo restante menos cinco más cinco. Lo que simplemente significa que el tiempo debe ser mayor a 5 s e inferior a 30 s. ¿Bien? De igual manera, esto sucede. Vamos a hacerlo bien. Tiempo rutinario mis padres aquí. Del mismo modo que antes, haremos cambios en ese temporizador de juego. Objeto a verificar. Si ese juego el tiempo restante es igual al tiempo de aparición de proteínas al azar. Si VS, luego agregue el componente proteico en la pantalla. Así que vamos aquí. Primero. Estamos comprobando como si el tiempo restante es igual a la vacuna. Y aquí de nuevo vamos a comprobar els-si tiempo restante es igual a la apariencia de tiempo de rutina. Después añadimos el componente proteico y también iniciaremos ese dímero proteico. ¿Bien? Ahora, vamos a crear el temporizador de proteínas. Todo esto funciona de la misma manera que hemos creado el dímero de la vacuna antes. Una repetición es igual a verdadera. En garrapata. Comprobaremos si la proteína de diez centavos que queda es igual a cero, que esta vez se acabó, luego simplemente retiraremos el componente proteico. Pero el siguiente juego que acaba de decir poner en el tiempo que queda es igual a falso, r es igual a cuatro. No debemos hacerlo definitivo. Y vamos a detener el temporizador de proteínas. Si es cero. Else-si simplemente decremento que imaginé que estos 4321, como este **** dejaron menos igual 10 k Así que hemos implementado para agregar ese componente proteico. Inicie el temporizador en el dímero se iniciará. Actualicemos ese dímero si se agrega componente proteico al juego. Aquí. Simplemente escribiremos si el componente proteico está cargado, es decir, está en el juego. Entonces temporizador de proteínas punto de actualización DT. Bien, y luego tenemos que hacer algunos cambios. Ahora ya está establecido. Porque realmente dijimos que el tiempo de proteína dejó, quitamos el componente y además asignamos un tiempo aleatorio para la siguiente jugada del juego. Si el jugador jugaba, otra vez. Simplemente, VS Code es igual a este componente abierto, componente de vacuna. Eso es aquí como Dean, queda tiempo para componente proteico se elimine de los padres. Rutina. Diamond Princess es igual al azar. Nextint, tiempo restante menos cinco más cinco. Espero que entiendas que nuevamente estamos reiniciando el tiempo porque si el usuario lo vuelve a reproducir, entonces no se llamará al método onload. Esa es la razón. Ahora, después de eso, digamos cuando vamos a componente proteico, tenemos que dub dub protein timer. Si la proteína choca con el componente del jugador, reproduce el sonido y también actualiza ese valor de bonificación en esa variable de bonificación de proteína. Aquí. Si es así, entonces tocaremos audio, reproduciremos globals, suenan las proteínas. Entonces simplemente pararemos el temporizador de proteínas. Y como estamos, ya que la proteína aparecerá sólo una vez, es por eso que no hay problema de detener y arrancar temporizador una y otra vez. Y solo diremos juego DE ese bono proteico va a hacer puntaje de bonus aleatorio. Y mostraremos ese valor de bonificación en ese juego sobre el menú. Así que vayamos al juego sobre mi nuevo debajo de ese marcador. Por debajo de esa puntuación. Digamos texto. Dentro de esas cubiertas. En la biosíntesis emular bono proteico. Entonces juego DE bono proteico. Dar alguna forma dice const. Textil en talla 20. Hazlo pequeño. Guardemos todo y veamos si la proteína está ahí o no. Y sólo por simplicidad, voy a eliminar las vacunas de virus o un virus para que sea más fácil de probar. El juego. Tenemos aquí está aquí. Está comprobado. Voy a jugar, digamos obviamente Rey. Pero tomé delta x en C. El componente proteico está ahí. Y si lo tomo, conseguí una muy buena puntuación, supongo. Y esto lo podemos comprobar. En el juego sobre c, obtengo los bonos de proteína ocho. Si vuelvo a jugar. Veamos esto. Obviamente si me tomo la vacuna tampoco nada vemos. Ahora supongo que el bono proteico era cero, creo. Entonces tengo que decir que es muy divertido. Ver, esta vez el bono proteico fue cero. Entonces todo depende de su suerte. Voy a jugar otra vez. Y esta vez, si no me tomo la vacuna, veamos qué va a pasar. Solo esperaremos a que aparezca la vacuna. Bien, por error, me tomé la vacuna. Vacuna, perdón, proteína. Entonces la proteína fue para creo que esto es suficiente. Todo está funcionando muy bien. Estoy satisfecho con el juego. Entonces eso es todo acerca de ese juego. En el siguiente video, simplemente trabajaremos en la pantalla de inicio solo para que se vea hermosa. Gracias. 24. Video 23 Añade una pantalla de salpicadura: Hola, bienvenido de nuevo. Nuestro juego está terminado. Agreguemos algunas cosas extra, como una pantalla de bienvenida. Ese juego se verá hermoso y profesional con estos pequeños complementos. Ve a bob dot dev y escribe pantalla de bienvenida animada. Aquí tenemos este. Sí. Copia la dependencia y agréguala al archivo YAML de punto de especificación de Pub. Y de todos modos, ese inversor de paquete de pantalla de bienvenida es una solución preconstruida que proporciona una pantalla de bienvenida animada personalizable para nuestra pantalla. Hasta el momento que así los greens simplemente crean un nuevo archivo y lo nombran juego. Vidrios. punto verde Material de importación de punto verde. Entonces crea un juego rígido de nombres apátridas. Pantalla de bienvenida. Aquí devolveremos la pantalla de bienvenida animada. Así que algunas de las propiedades y argumentos comunes que podríamos encontrar al trabajar con la pantalla de bienvenida animada, nuestra duración, un valor de duración. valor de iteración especifica cuánto tiempo estará allí la pantalla de bienvenida. Entonces escribamos la duración a 2 s. entonces. El siguiente es slash, cualquier widget que especifique la imagen, el logotipo o el texto que se mostrará en la pantalla de bienvenida. Entonces splash, simplemente escribiremos imagen, set de puntos, luego assets, imágenes, juego, logo, punto PNG. Entonces tenemos la siguiente pantalla. Eso significa por dónde navegar. Después de eso, la duración de las salpicaduras sobrepasa después de 2 s. con algunos van al menú principal const. Entonces esto cambiará el tamaño del icono, 25250, y cambiará el color de fondo a colores negro oscuro. Y también escribamos transición de splash. Ese es el efecto o transición menos agradable. Empecemos con la transición de escala. ¿Bien? Vamos a asignar este menú a la casa. Simplemente escribe juego, pantalla de bienvenida. Guardemos todo y verifiquemos. Ver, hace pantallas de bienvenida allí y después de 2 s, nuestro menú de juego está ahí. Entonces volveré a reiniciar y ver que este era el efecto rituales y se ve muy bonito. Diré, si quieres, puedes probar diferentes transiciones. Depende de ti. Y también puedes cambiar el logo de la app o cualquier fondo o ese color. Obviamente, es tu propia creatividad. Entonces eso es todo para este video. En el siguiente video, cambiaremos ese icono de lanzador, encola. 25. Video 24 Cambia el ícono de lanzador: Hola, bienvenidos al video final de este curso. Trabajaremos en cambiar el nombre de la aplicación así como el icono del lanzador. Entonces si vas a la app y si sales, entonces puedes ver aquí este es el nombre de la app y este es el icono del lanzador. Para cambiar el nombre de nuestra app en Android. Ir al directorio Android app que fuente, que media. Después archivo de manifiesto de Android. Y aquí puedes encontrar esta etiqueta de aplicación aquí. Simplemente cámbialo a luchador de peso. Es decir, tiene espacio así como capiteles. Entonces esto fue por el nombre de la aplicación. Ahora, para cambiar el icono predeterminado de la aplicación de bandeja, usaremos el nombre del paquete es iconos de lanzador de plotter. Así que vamos aquí. ¿Correcto? Lanzador. Ahora estoy seguro de que puedo. Es un enfoque recomendado que hace todo el trabajo pesado de actualizar iconos del lanzador de aplicaciones para diferentes plataformas. Así que simplemente vamos a copiar la dependencia en tus puffs de vuelta ese archivo YAML. Simplemente, simplemente pegarlo. Pero recuerda, tenemos que pegar esto dentro de las dependencias de desarrollo y no bajo dependencias. Entonces aquí debajo de la lente de lotería, simplemente pega y guárdala. Ahora. Bien, espera, todavía se está poniendo bien, instantáneo. Ahora, para que funcione, tenemos que agregar algunas configuraciones de Florida dentro este archivo Pub spec dot YAML. Entonces a continuación, aquí, tenemos que ir exactamente por debajo de esas dependencias dev. Recuerda, y escribe iconos de letras. Y te estoy diciendo una y otra vez, esta especificación de Pub que el archivo YAML es muy sensible. Si haces algún espacio extra y todo, podrías conseguirnos. Ahora, haga clic en un espacio. Nuestro le daríamos ficha, bien. Dar pestaña. Y escribe Android para hacer iOS. A través de la imagen. Parte esa parte del icono. Voy a decidir activos, imágenes, el logo del juego, punto PNG, y luego mínimo como la K y paseo. Y usaremos 21. Y me salen estos códigos en la sección Léeme. C. Se puede entender cómo se hace, cómo está en las dependencias de desarrollo, esta inundación, iconos de Florida y todo 0, k. Hemos guardado todo. Después de configurar la configuración, todo lo que queda es ejecutar ese paquete con la ayuda de un comando anexado terminal y simplemente escribir, obviamente tenemos este platter get una y otra vez. Y después de esto simplemente escribe carta. Bob. Run, Flutter, lanzador, iconos y presentador. Oh, oye, vamos a ver. Supongo que creo que ya está hecho. No estoy seguro de que Wesley haya generado con éxito íconos de lanzador. Tenemos que detener ese modo de depuración y luego volver a ejecutar. A ver. Daikon está actualizado o no. Si voy a ver tenemos el bocado de fruta, nombre de su aplicación, y la tachueta de iconos y se ve realmente hermosa. Diré, si voy, obviamente podemos jugar el juego. Obviamente tengo un movimiento que voy a decir eso otra vez. Los componentes del virus, este es el juego que podemos jugar. Tenemos una lectura. Entonces eso es todo. Para este curso. Espero que hayas disfrutado así como aprendido mucho. Sigue practicando. Y me aseguraré de hacer código más cursos sobre el motor de juego cojo y construir juegos hermosos. O se puede decir más juegos interactivos en el futuro. Mientras tanto. También puedes consultar mis otros cursos también. Gracias. Que tengas un buen día. 26. Prueba el juego completo: Guau.