Bienvenidos de nuevo a mis compañeros desarrolladores de juegos
a un video totalmente nuevo.
Y este, te darás cuenta de que tenemos
el desvanecimiento dentro y fuera.
¿ Y para qué es eso?
Bueno, si miramos justo aquí,
tenemos una enorme caja negra.
Y se puede ver eso ahora mismo.
No vemos nada en el juego.
¿ Por qué es eso?
¿ Qué pasó?
¿ Que dejaríamos el juego?
¿ Por qué es tan pequeño ahora mismo?
¿ Por qué estamos alejados?
Tantas preguntas, tan pocas respuestas.
Si ejecuto el juego,
notarás que empezamos del nivel al
desvanecernos de la imagen negra.
Y si caminamos por ahí,
se puede ver que en cuanto entramos al portal,
no sólo disminuimos la velocidad,
sino que nos desvanecemos,
y luego volvemos a desvanecernos cuando vamos al siguiente nivel.
Entonces, no perdamos
más tiempo y lleguemos a fallar.
Ah, está bien.
Por lo que ahora estamos
transitando adecuadamente de un nivel a otro.
Tenemos el efecto de escala temporal
donde ralentizamos todo.
Lo siguiente que queremos hacer es que queremos
tener algún tipo de efecto de desvanecimiento.
Entonces lo que queremos es B1,
la imagen o todo el juego para desvanecerse a negro.
Y luego cuando entramos a un nuevo nivel,
queremos desvanecernos.
Entonces vamos a hacer eso.
Lo primero que tenemos que hacer,
o ¿cómo funciona el saliente de desvanecimiento?
Tendremos aquí una gran imagen negra que se desvanecerá
y luego se desvanecerá a medida que pasemos de nivel a otro.
Entonces todo se trata de una imagen negra
y usamos el alfa en ella.
Entonces hagámoslo.
¿ Cómo vamos a añadir una imagen en Unity?
Bueno, necesitamos algo llamado lienzo.
Entonces voy a crear un lienzo.
Voy a hacer clic derecho en la jerarquía,
ir a tu ojo y encontrar el campus.
Ahí vas. Ahora tenemos un campus.
Si hago doble clic en él,
ahí tienes, puedes ver que es un lienzo enorme,
grande y quizá te estés preguntando,
¿por qué es tan grande el lienzo mientras que nuestro juego es tan pequeño?
Bueno, esta es la forma en que Unity
maneja usando Canvas y agregando imágenes.
Es mejor jugar con las imágenes aquí mismo.
En lugar de jugar alrededor en las imágenes,
escríbalo y tener todo delante
del jugador y de los objetos en el juego.
Entonces esta es una manera mucho mejor o
la forma que utiliza la unidad para manejar las cosas.
También se puede ver que tenemos
algo llamado el sistema de eventos.
Y esto nos permite, por ejemplo,
digamos que tenemos algún tipo de botón en el lienzo.
Queremos hacer clic en él para que podamos
agregar sistema de eventos bajo el Lienzo,
convertirlo en un niño, y mantenerlo ahí por ahora.
Y este sistema de eventos nos permite realmente presionar
botones en la pantalla y permitirnos
interactuar con el lienzo.
Ya veremos cómo funciona eso en tan solo un poco.
Pero por ahora, queremos entrar
en el escalador de lona aquí mismo.
Se puede ver que podemos escalar con tamaño de pantalla.
Y queremos cambiar esto de un 100 a 1920 para
entonces ocho,
que es del tamaño de la pantalla que
estamos usando o creando el juego.
Hit Enter.
Ahí vas. Ahora todo está hecho.
Se puede ver tenemos el lanzador de rayos y un elemento
para el lienzo lo cual no es tan importante.
No vamos a estar cambiando nada demasiado aquí.
Sólo queremos asegurarnos de que el escalador de lona como
tamaño de pantalla de escala y queremos que sea 1920 por 1080.
Está bien, genial.
Ahora con eso hecho,
el siguiente paso es agregar una imagen.
Entonces voy a hacer clic aquí dentro,
ir a ustedes son, y encontrar una imagen.
Entonces ahora puedes ver tenemos
una imagen en medio del
enorme lienzo y yo voy a,
es la imagen que se desvanece.
Pero a pesar de que lo tenemos en el lienzo,
se puede ver aquí abajo en el juego que
lo tenemos como una cuadra pequeña.
Y si lo muevo al lado superior,
notarás que está en el lado superior del juego,
y en el medio, es en
el medio donde reside el jugador.
Y en la parte inferior izquierda lo puedes ver.
Entonces no es a pesar de que la imagen
aquí arriba del juego sea enorme.
Pero se puede ver eso en el lienzo,
Es realmente pequeño y se escala hacia abajo.
Entonces así es como representamos las cosas en Unity en lienzo de UI.
Ahora, ¿qué vamos a hacer?
Queremos que esta imagen llene todo el lienzo,
que sea completamente negro.
Y luego vamos a usar
la transparencia en él para desvanecerse y desvanecerse.
En primer lugar, ¿cómo lo hacemos tan grande como la pantalla?
Bueno, aquí hay una opción.
Se puede ver que es la herramienta rect.
Al hacer clic en él, puedes arrastrar
y hacer que esta imagen sea cada vez más grande.
Y te darás cuenta aquí mismo tenemos
un montón de cosas que es
el Rect Transform para
manejar y cambiar cómo se ve la imagen.
También podemos sostener al Alt
y elegir una de las esquinas, o ejército.
Elige a uno de los coordinadores y mantén presionada la Alt.
Y se puede ver que podemos ampliarlo
y todas las formas.
Pero hay una solución aún mejor para esto.
Y es que si hacemos click aquí,
se puede ver que tenemos un par
de opciones y estas se llaman el ancla.
Entonces por ejemplo, si hago clic en este ancla,
la imagen escalará hacia abajo grande y pequeña con
escala hacia arriba y hacia abajo en base a este punto de aquí mismo,
también podemos hacer clic en este donde escalará
en base a todo el lienzo.
Ya verás a qué me refiero con
escalar cuando sí necesitamos escalar.
Pero, ¿qué pasa si sostenemos Alt?
Se puede ver que podemos expandir la imagen de esta manera.
Podemos expandirlo en el medio,
podemos expandirlo a la izquierda,
y podemos expandirlo por todos lados
para que llene toda la plaza.
Todo el Lienzo inmediatamente.
Y se puede ver que ahora la imagen ha
bloqueado el juego por completo.
Y si voy al lienzo y a la imagen que se desvanece,
puedo cambiar el color aquí mismo en la imagen,
y hagámoslo completamente negro.
Ahora bien, ¿cómo vamos a estar cambiando la transparencia?
En primer lugar, podemos hacer esto
aquí mismo para que podamos cambiar el alfa en la imagen.
Pero es un poco difícil acceder al alfa
en la imagen porque necesitamos acceder a todos los colores rojo,
verde y azul.
En otra forma de hacerlo es agregando
algo llamado grupo de campus.
Entonces si entro aquí y agrego un grupo de lona,
se puede ver que tengo la opción de tener Alpha.
Y si muevo este alfa hacia abajo
de 0 a uno o de uno a 0,
se puede ver en 0 es completamente transparente.
A una, no lo es.
Y puedo bloquear el recast.
Eso significa que recast
significa cada vez que quiero hacer clic en algo,
esto puede ayudar a bloquear el re-cast y
interactable ¿esta imagen es interactable?
Digamos que no lo es. Y ahí tienes.
Entonces ahora nuestro objetivo es crear una animación.
Usando esa animación, vamos a controlar
el grupo de lona alfa aquí mismo.
Y entonces vamos a desvanecernos y
desvanecernos cada vez y nuestra ganancia.
Entonces con eso explicado,
te voy a emitir un reto.
Y tu reto es desvanecer la imagen dentro y fuera.
Entonces les voy a dar
un proceso paso a paso de cómo hacer esto.
En primer lugar, necesitarás crear
una animación para el desvanecimiento
y el desvanecimiento y será de negro
a transparente y se desvanecerá,
que será lo transparente a negro.
Es necesario crear una transición entre
la transición entre las dos animación
basada en un disparador.
Entonces recuerda, creamos
la transición basada en un booleano.
Ahora es el momento de usar un gatillo.
Deberá agregar un parámetro de disparo.
Obviamente, necesitas crear
un script de UI Manager y añadirlo al lienzo.
Tendrás que crear un método
que desencadene el desvanecimiento.
Y por último, necesitas llamar a ese método desde
el Colton de carga en level manager.
Por lo que casi conocemos todos los pasos.
A lo mejor no sabes cómo poner un gatillo.
Entonces eso es lo que necesitarás para buscarte.
Y todo lo demás, creo que es algo que
hemos pasado por lo que hemos visto con probado.
Recuerda la forma en que funcionará la animación es pulsando
el pequeño botón rojo en
la grabación de la animación para que la información,
pause el video ahora mismo y vaya a hacer el Chavan.
De acuerdo, bienvenido de nuevo.
Entonces lo primero que vamos a hacer
es que vamos a entrar en la animación.
Voy a seguir adelante y asegurarme de que
tenga la imagen de desvanecimiento y crear una animación.
Y ahora puedo entrar en las animaciones,
hacer clic derecho aquí y crear la imagen que se desvanece.
Entonces estoy dentro de animaciones de activos y
aquí voy a crear en primer lugar,
el desvanecimiento, desvanecimiento y guardar eso.
Ahora lo que dijimos que el arma de decoloración debería
ser el desvanecimiento en negro a transparente.
Está bien, genial. Entonces, ¿cuánto tiempo quiero que esto tome?
Entonces hagámoslo alrededor de 1.5 segundos.
Por lo que voy a hacer clic en el botón de grabación.
Y qué dije otra vez, negro demasiado transparente.
Oops, esa no es la clave que buscaba.
¿ Y dónde está? De acuerdo, de vuelta aquí.
Por lo que empezamos en negro y al final estamos grabando.
Yo quiero bajar el alfa a 0.
Entonces, ¿qué pasa ahora cuando toco la animación?
Se inicia como negro y luego se desvanece demasiado transparente.
Excelente.
Lo siguiente que voy a hacer es crear el desvanecimiento.
Tan desvaneciéndose.
Y ahora empezamos a 0
y luego entramos en completa oscuridad después de 1 segundo.
Por lo que dejamos de grabar,
ejecutar el juego tan transparente, desvanecemos a negro.
Excelente.
Ahora lo siguiente vamos a abrir el Animador.
Y aquí dentro vamos a primero que nada, vale,
así que el desvanecimiento y el desvanecimiento en
significa que vamos de negro a transparente.
Esto debería comenzar tan pronto como empecemos de nuevo.
Entonces no solo aparecemos en el modo de juego,
nos desvanecemos en el modo de juego,
y luego tenemos el fundido a negro creará
una transición aquí mismo.
Esta transición no debe tener
tiempo de salida y la configuración debe ser un,
quiero decir que la duración de la transición debe estar en 0.
Voy a crear un parámetro el cual será un disparador,
y sólo lo llamaré Inicio, fade.
Hacer de esta capital.
Ahí vas. Y agréguelo como condición aquí mismo.
Excelente.
Y espero que hayan hecho todos estos pasos.
Estas son cosas que ya hemos
cubierto y que ya hemos creado.
Y antes de seguir adelante,
necesitamos asegurarnos de que este lienzo también esté
presente en el segundo nivel Y o en el nivel 1.
¿ Por qué? Porque si vamos al nivel 1,
¿dónde están las escenas?
Si vamos al nivel 1, verás
que no tenemos un lienzo,
por lo que no podremos acabar de desvanecimiento
cuando iniciemos el Nivel 1 o cuando vayamos al nivel 1.
Por lo que de vuelta en el nivel 2,
voy a llamar a esto el lienzo de UI Enter.
Y yo voy a entrar a los Prefabs.
¿ Dónde están los prefabs?
Y voy a crear y aquí una carpeta UI.
Y aquí dentro voy a arrastrar el campus de la UI.
Guarda eso.
Y ahora mira lo increíbles que son las prefabs.
Eigen no crea que hemos hablado de esto.
Pero si entramos en las escenas en el nivel uno,
inmediato podemos ir a
Prefabs UI y agregar un lienzo y nuestros juegos.
Entonces ahora tenemos un lienzo aquí mismo
en el nivel 1 y no tuvimos
que volver a crearlo todo.
Esta es la belleza de tener Prefabs.
Con eso hecho de nuevo en el nivel 2.
Veamos qué tenemos aquí dentro.
Por lo que juegan las animaciones,
todo debería estar funcionando ahora cuando ejecutamos nuestro juego,
deberíamos tener un desvanecimiento y animación.
Entonces ejecuto el juego.
Ahí vas.
Para que veas que tengo un desvanecimiento de looping en animación.
Entonces voy a entrar en las animaciones,
encontrar el desvanecimiento y desvanecerse,
y asegurarme de que no haya tiempo de bucle. Guarda eso.
Y ahora cuando corremos el juego y el segundo ahora tenemos
tenemos un desvanecimiento en una pulgada.
Excelente.
Entonces, ¿sabes por qué está pasando esto?
Bueno, porque al entrar,
lo primero que hacemos es el desvanecimiento.
Por lo que esto ya está configurado para nosotros.
Ahora, lo siguiente que tenemos que hacer es crear
el Gestor de UI y agregado al campus.
Entonces voy a entrar en mis scripts aquí,
hacer clic derecho y crear una nueva carpeta para la interfaz de usuario.
Cambiamos mucho el nombre de esta carpeta,
pero por ahora, sigamos adelante y creamos un script C-sharp,
que va a ser el UI Manager
o debería haber estado en la realidad del manager.
Y no tiene preocupaciones.
Espere a que esto se compile.
Pasémoslo a los directivos.
Creo que aquí es mantequilla o tal vez no.
No lo sé. Depende de tu preferencia.
Creo que en el directivo tal vez sea mejor.
Cancelar o no, dejémoslo.
Vamos a mantenerlo en tu ojo.
A pesar de que es un manager lo mantendrá en la interfaz de usuario.
Voy a abrir el Administrador de UI,
abrir Visual Studio.
Y lo primero que necesitaremos
es una referencia a la imagen
que queremos desvanecer de nuevo aquí.
Espero que esto no fuera demasiado duro porque
va a ser un campo serializado,
que es una imagen de tipo imagen.
Ah, así que había algo que espero que
algunos de ustedes fueran capaces de descifrar.
Si traté de usar la imagen aquí mismo.
Te darás cuenta de que no tengo opción para ello.
Lo que sí necesito es usar
tu motor Unity dot u i
Así que espero que esto no fuera un gran problema para ti.
Espero que encontraras este error o
encontraras este inconveniente en el reto y
apartaras de tu camino y trataras de averiguar
la solución si no lo hiciste, no te preocupes por ello.
Fue en mi nombre.
Debí haberte advertido de antemano.
No se preocupe.
Imagen al destino.
Algunos de ustedes podrían estar pensando, Sí, sin preocupaciones, seguro,
solo mi confianza fue destruida.
De todos modos, ¿qué vamos a hacer en
esta clase aquí y el Administrador de UI?
Bueno, como dijimos,
necesitamos un método.
Crear un método que desencadene el desvanecimiento y llamar a
ese método desde el coworking de carga en level manager.
De acuerdo, entonces me voy a asegurar que esto sea un público.
Entonces voy a crear una imagen de desvanecimiento del vacío público.
Y aquí dentro voy a seguir adelante
y acceder a la imagen para desvanecerse.
Voy a conseguir un componente en él,
que es el animador.
Y voy a poner el gatillo.
Y ese gatillo va a ser
la referencia de una cadena al desvanecimiento de Inicio.
Y hoy, ahora, copia esto de vuelta aquí,
pégalo aquí, cierra, guarda eso.
Entonces, ¿qué estamos haciendo?
Porque creamos la animación
en la imagen real para desvanecerse.
Se puede ver que el animador está aquí
en este objeto de juego.
Uno de los componentes en la imagen para desvanecerse.
Entonces lo que hacemos es acceder al animador en
la imagen y luego configuramos el gatillo que se inicia.
Está bien, genial.
Ahora el siguiente paso es seguir adelante
y llamarlo Level Manager.
Y hay dos formas de hacer esto.
Podemos o bien ir adelante y encontrar
el objeto del juego o encontrar al Gestor de UI.
O vamos a seguir adelante y crear una instancia de esto.
Voy a crear un gestor de UI público estático.
En la instancia. Guarda eso.
Y voy a crear un inicio aquí.
Y luego iniciar la instancia será igual a esto.
Guarda eso.
Ahora de vuelta en el manager de nivel,
¿dónde debemos poner esto?
Bueno, yo creo en cuanto golpeamos
o en cuanto entramos al nivel de carga.
Por lo que tenemos la escala de tiempo en 0.2.
Voy a seguir adelante y acceder al
Administrador de UI, la instancia.
Y voy a seguir adelante y desvanecer la imagen.
Ahora, notarás algo que
porque hemos dicho la escala de tiempo a 0.2,
el desvanecimiento de la imagen será
más lento que lo que tenemos aquí dentro.
Entonces vamos a probar esto y a ver si funciona.
Si sientes que es un poco lento,
puedes seguir adelante y hacer que
el desvanecimiento de la imagen sea un poco más lento.
Entonces ahí vamos.
Empezamos, corremos.
Y cuando entramos a este portal aquí mismo, allá vamos.
Estamos bajando la velocidad y nos olvidamos de añadir un hey,
nos olvidamos de añadir la referencia.
Aquí puedes ver el error.
Si hago doble clic en él,
verás que la imagen de punto de IU Manager se desvanece,
hay algo mal. ¿Qué pasa?
Bueno, no hay instancia.
De acuerdo, entonces si voy al lienzo de la UI,
notaría que ni siquiera agregué el manager,
Así que no estoy seguro de cómo se está llamando.
Entonces vamos a arrastrar en el Administrador de UI.
Vamos a asegurarnos de que dijimos
la imagen de desvanecimiento y vamos a aplicar los cambios.
Entonces nota ahora el lienzo
este nivel no tenía un Administrador de UI, ¿verdad?
Y este es el que usamos en el nivel uno.
Si voy ahora mismo al nivel uno,
hago clic en el lienzo de UI.
Cuenta con un Administrador de UI y tiene la imagen ya configurada.
Para que puedas ver de nuevo el poder de usar apps de duelo.
¿ Qué tan guay es eso?
Por lo que de vuelta al nivel para correr el juego,
nos desvanecemos. No más errores.
Caminamos arriba, pasamos por el portal,
y ahí vamos, bajamos la velocidad.
Tenemos este azúcar aquí mismo.
Por lo que hubo un ligero problema aquí.
Ya que notan que no tuvimos
el tiempo para ni siquiera desvanecerse.
Entonces voy a acceder de nuevo al desvanecimiento
y a la imagen que se desvanece.
¿ Y dónde está esto?
Bueno, esto dependerá de cuánto tiempo o
cuál es la escala temporal que tengas aquí mismo.
Entonces voy a hacerlo 0.5. Guarda eso.
Y en lugar de 1.5 segundos,
voy a hacerlo alrededor,
Hagámoslo alrededor de 0,
tal vez 1 segundo o 2.5th.
Digamos que son unos 40 del juego.
Pruébalo, a ver si tenemos tiempo para desvanecerse.
Entonces subo, me muevo.
Ahí vamos, nos desvanecemos por
completo y después paramos de desvanecerse.
Y muy normalmente.
Entonces con eso hecho,
espero que disfruten.
Asegurémonos de comprometer nuestros cambios.
Etapa todos comprometen los cambios.
Creado una imagen de entrada y salida que se desvanece
usando eres innumerables.
Comete los cambios.
Espero que lo disfruten y los veré en el siguiente video.