Bienvenidos de nuevo a mis compañeros desarrolladores de juegos a
un video completamente nuevo en el que aprendimos todo sobre los deslizadores.
Aprenderemos sobre la próxima malla Pro y
también creamos nuestra propia fuente.
¿ Qué tan emocionante es eso?
Entonces, no perdamos más tiempo y empecemos.
Ah, caso.
Por lo que es hora de agregar un poco más de sabor a
la forma en que nuestra salud se deteriora por los enemigos.
Entonces, empecemos.
El primero que queremos hacer es hacer
la escena un poco más grande.
Y vamos a hacer doble clic en
el enorme lienzo de UI que tenemos.
Entonces podemos ver que tenemos la,
lo que pasa aquí, la
imagen que se desvanece que hemos apagado.
Y vamos a
mover las armas un poco a la derecha.
Y podemos ver aquí mismo que
estas imágenes deben estar en el 0,
0, en la y y en la x
Solo para tenerlas en medio de la
no-UI y moverlas hacia abajo.
Esto es solo un poco de ajuste,
y ahí tienes.
Entonces ahora voy a
poner el arma a la derecha porque a
la izquierda voy a estar agregando
algo llamado deslizador.
Antes de eso, voy a crear aquí un objeto de juego,
que representará la salud.
Sólo llamémoslo salud.
Ahí vamos.
Y bajo la salud voy a hacer clic derecho ir a
tu y crear algo llamado el deslizador.
Entonces vamos a añadir el deslizador.
Entonces como puedes ver, hemos creado un pequeño deslizador.
Y el deslizador hace un par de cosas.
Se mueve de izquierda a derecha.
Tiene antecedentes.
Si lo abro, tiene un fondo,
tiene un área de relleno y tiene el deslizador de mango.
Si hago clic en el deslizador justo aquí,
se puede ver que hay un componente de juego
o componentes en el deslizador.
Y se puede ver que hay un par de cosas.
El color normal, el color resaltado,
todo eso bueno.
Pero la cosa en la que más queremos enfocarnos,
el valor mínimo, el valor máximo,
y el valor justo aquí.
puede ver que mientras lo incremento
en movimientos de izquierda a derecha,
y esto es lo que vamos a usar
para representar la ayuda que tenemos.
Pero obviamente, que el deslizador se mueva
izquierda a derecha es bastante feo.
Por lo que nunca quieres tener
tu salud representada de esa manera.
Por lo que queremos tener algún tipo de barra para representar
la salud igual que tenemos en
las ganancias de aspecto profesional.
Entonces lo voy a hacer en primer lugar
es eliminar el deslizador de mango.
Entonces ahora ya no tenemos
este poco o nada lo que se llama el,
algún tipo de, de todos modos,
este círculo que se
movía y ahora sólo vemos el bar.
Lo siguiente que quiero hacer es
que quiero acceder al fondo.
Y los antecedentes.
Voy a dar click aquí.
¿ Sabes qué?
Antes de hacer eso, sigamos
adelante y sumamos estos sprites, los
elementos de la interfaz de usuario que vamos a usar.
Entonces en los sprites,
eso es abrir esta carpeta
y veamos qué tenemos aquí dentro.
Haremos clic derecho en crear una nueva carpeta
para los elementos de la interfaz de usuario.
Haga doble clic aquí, y entremos a los recursos.
Como puedes ver, te he proporcionado un par de
barras y puedes usar el color que quieras.
También tienes los botones justo aquí que
estaremos usando más adelante y la fuente.
Entonces voy a elegir la fuente, el
deslizador rojo y el fondo del deslizador.
Y los voy a arrastrar al elemento UI.
Está bien, genial.
Ahora vamos al deslizador.
Llamémoslo el deslizador de salud.
Y si hacemos click en el fondo,
se puede ver que podemos cambiar la imagen fuente.
Entonces la imagen fuente que quiero tener este slider.
Entonces cuando lo agrego aquí, ahí tienes.
Se puede ver el deslizador ahora
mismo si lo configuro a tamaño nativo,
es un poco enorme.
A lo mejor lo haremos un poco más pequeño.
Pero el punto es que ahora tenemos este deslizador de fondo.
Y quiero asegurarme de que cuando
haga clic aquí y mantenga presionada Alt,
que llene toda la imagen del deslizador,
no solo sobre sí misma.
Por lo que tenemos el elemento slider de salud.
Si hacemos clic en las herramientas de rack,
se pueden ver los bordes de la misma.
Y antes de que tuviéramos eso,
se puede ver que los bordes son los bordes.
Ahí vamos. Estos cuatro puntos,
estos eran los bordes del deslizador de salud,
pero el fondo era mucho más grande.
Por lo que cuando hacemos clic,
mantenga presionada Alt y haga clic en el estiramiento,
llenamos todo el deslizador.
A continuación tenemos el área de Relleno.
Ahora actualmente cuando queremos llenar la zona,
verás que es una línea blanca muy fea.
Entonces lo que haremos es acceder al relleno.
Y se puede ver también podemos
cambiar este brillante y voy a
usar el deslizador rojo.
Entonces ahora podemos pinchar aquí y verás
que es mucho más bonito, ¿verdad?
No tan rápido porque también queremos
asegurarnos de que el área de relleno cuando hacemos clic aquí,
mantenga presionada Alt, haga que se estire
todo el camino alrededor del área de campo.
Y entonces el área de relleno también debe
estirar y a todo el fondo.
Pero porque estamos trabajando en segundo plano.
Y queremos ver el fondo.
O sea, vamos a hacerlo más pequeño
y así encaja exactamente en este fondo.
Eso se ve bastante bien.
Entonces lo voy a mover sólo un poquito arriba.
Y está bien, así que ahí vamos.
Podemos ver que podemos seleccionar el deslizador de salud y podemos
empezar desde 0 y aumentarlo hasta que se convierta en uno.
Ahora bien, ¿cómo vamos a estar cambiando
la salud en base a nuestra propia salud?
Ese será un video para más adelante.
Pero por ahora, como pueden ver,
hemos creado todo lo que necesitamos
para el deslizador de salud.
Voy a alejarme un poco.
Y tal vez en realidad voy a hacer
el slider un poco más grande.
Entonces aumentemos el tamaño.
Y como puedes ver,
porque todo está anclado a esos puntos,
crecen juntos sin problemas.
Hagámoslo un poco más grueso.
Obviamente esto necesitará un poco de cambio.
Y voy a mover el elemento de salud hacia abajo,
luego alejar el zoom, ver cómo se ve eso.
Entonces ahí vamos,
por aquí creo que es bueno.
O tal vez subirlo un poco o no,
vamos a mantenerlo aquí abajo.
Para, aquí abajo es bueno.
Vamos a acercar.
A lo mejor que sea un poco más largo.
Y por cierto, todas,
todas las cosas que estoy haciendo dependen de mí.
Entonces si quieres crear algo diferente,
por favor sé mi invitado.
Te recomiendo que intentes crear
tu propio tipo de deslizador.
Vamos a llenarlo sólo para que podamos
tener las dimensiones correctas.
Y ahí vamos,
la izquierda, en,
arriba y a la izquierda.
De acuerdo, entonces ahí vamos.
Esta es nuestra salud y se ve realmente bonito,
creo Así que si maximizo en juego y juego el juego,
veamos cómo se ve eso.
De acuerdo, entonces ahí vamos. Tenemos la salud,
tenemos el rifle.
Hay una cosa más que falta y es que
queremos representar también a la salud usando texto.
En primer lugar, esto es lo que nuestro juego de zombies,
y creo que se ve realmente bonito.
En segundo lugar, será una buena manera de saber cuánto
estamos cambiando en realidad
y aprender un par de cosas más.
Entonces sigamos adelante y agreguemos un texto aquí.
Pero esta vez porque vamos a añadir nuestra propia fuente,
vamos a añadir no sólo un texto,
sino que vamos a añadir un texto Mesh Pro.
Entonces si hago clic aquí,
puedes ver que necesitarás
importar un par de elementos esenciales.
Basta con dar click en el primero y esperar a que se importe.
Si esto lleva demasiado tiempo,
voy a reaparecer mágicamente.
De acuerdo, hizo eso.
Ahí vamos. Por lo que ahora tenemos
algo llamado el texto Mesh Pro.
Y voy a llamar a esto el texto de salud.
Hit Enter. Y vamos a moverlo un poco a la izquierda.
Entonces aquí, hagámoslo audaz.
Y se puede ver que actualmente la fuente utilizada en él
es el sentido de liberación o algo así.
Pero queremos usar la fuente que
te he proporcionado en los recursos, la
descargué de la font.com.
Oh Dios mío, eso de todas formas,
¿cómo vamos a convertir esto en una fuente?
Bueno, si vamos a algún lugar aquí en
el texto de windows Mesh Pro,
se puede ver que tenemos la opción para el
activo de fuente Creator.
Al hacer clic aquí, te pedirá el archivo fuente fuente.
Arrástrelo aquí.
Y sólo te dirá que crees aficionado Atlas.
Guardar.
Y te preguntará ¿dónde quieres guardarlo?
Lo guardaremos dentro de las fuentes aquí mismo.
O en el elemento UI.
Guarda eso.
Genial.
Entonces ahora si entramos en elementos de interfaz de usuario,
se puede ver que tenemos el spot aquí mismo.
Tiene un montón de propiedades en las que ni siquiera voy a intentar meterme
.
Por lo que los textos de salud sólo arrastran la fuente a su posición.
Y ahí tienes, Podemos ver que ahora mismo tenemos
una fuente diferente.
Ahora, recomiendo porque como he dicho varias veces,
soy muy malo dibujando cosas.
Y tengo un muy mal gusto cuando se trata
de colores y con ello se trata de texto
y todo lo que está relacionado con
hacer que algo se vea bonito.
Entonces, te recomiendo que
tal vez intentes encontrar un texto mejor que este.
Pero por ahora, intentemos crear
el tipo de sistema de salud y tal vez hacerlo de tamaño automático.
Tamaño automático significa que crecerá y
encogerá con el tamaño de este. Sí, ahí vamos.
Entonces voy a hacerlo más grande, hacerlo audaz.
Y lo genial de tener
text Mesh pro es que podemos cambiar
muchas cosas para que podamos agregar iluminación,
podemos agregar underlay,
podemos agregar algún tipo de
resplandor y puedes jugar con estos.
También podemos agregar un esquema.
Entonces si añado un poco de grosor,
notarás que tenemos el contorno,
podemos cambiar el offset,
el azulejo, la velocidad,
mucho, un montón de cosas increíbles.
Y voy a hacer un contorno blanco
sólo para que podamos ver todo con más claridad.
A lo mejor.
Ahí vamos, ciento cien.
Esta es la ayuda.
Podemos cambiar muchas cosas que el
color y así sucesivamente y así sucesivamente.
Y mientras estemos aquí,
voy a seguir adelante y te emitiré un reto.
Por lo que tu reto es configurar tu propia interfaz de usuario.
Así que haz un poco de investigación y encuentra
tus propios elementos de interfaz de usuario para usar para tu juego.
Usa esos elementos para configurar tu lienzo de interfaz de usuario para
el jugador y piensa
otras cosas que te gustaría mostrar en la pantalla.
Entonces, por ejemplo, quizá quieras tener nuestros ops.
Tendrás, quizá quieras tener
temporizadores de cuenta regresiva para la escopeta.
Es posible que quieras sólo la escopeta para el arma,
la puntería o lo que sea.
No sé qué más podrías querer.
Lo que quieras, piénsalo, trató de agregarlo.
Tú, aunque no sepas crear lo que
le gustaría simplemente ponerlo ahí y luego escribirlo.
A lo mejor te encuentres a través de las anotaciones a medida que avanzamos.
O tal vez por ti mismo,
encontrarías una solución para ello.
Y hay un reto extra.
Te recomendaré que sigas adelante y conviertas
el nombre de las armas que mostramos bajo la escopeta.
Pero sí tengo que advertirles que tomará un poco de
ajustes antes de que puedan realmente
cambiar el nombre de las armas.
Entonces eso es pausar el video ahora mismo
y ir al reto.
De acuerdo, bienvenido de nuevo.
Entonces este video ya es un poco demasiado largo,
así que no voy a seguir adelante
y cambiar el nombre por ello ahora.
Posteriormente, obviamente lo vamos a cambiar.
Voy a seguir adelante y aplicar
todos los cambios que hemos hecho en el lienzo de la interfaz de usuario.
Y ahora cuando corremos el juego,
y ahora podemos ver
que podemos cambiar a la pistola, correr por ahí.
Tenemos la salud, tenemos
la pistola y alguien se queda atascado en alguna parte.
Ah, así que morimos en el,
la luz exactamente en
este punto raro aquí mismo en el enemigo.
Por lo que hay un problema.
Obviamente, nos encargaremos de eso más adelante.
Por lo que espero que lo disfruten.
Espero que estés cometiendo tus cambios.
Y los veré en el siguiente video,
donde estaremos accediendo realmente a
los sprites de la UI y actualizándolos. Entonces nos vemos.
Oye Michael aquí desde el futuro,
¿pensaste que habías terminado conmigo?
No.
No lo estabas.
Entonces hay algo aquí dentro cuando vine a ir a
cometer mis cambios,
y esa es la malla de las pilas de ácido.
Y si entro aquí,
¿Dónde puedo encontrar eso en los activos,
se puede ver que hemos creado
este archivo de malla de texto y esta malla de texto.
Veamos las propiedades en él.
¿ Puedo ver la talla?
No, no puedo ver el tamaño,
así que creo que realmente no necesitamos
tenerlo guardado en nuestros commits.
Entonces lo que podemos hacer sólo para ahorrar un poco de espacio,
voy a hacer clic aquí.
Y vamos a ignorar todo
por debajo del activo texto Mesh PRO.
De acuerdo, ahí vamos. No necesitamos eso.
Etapa todo y llámalo agregaron
elementos de interfaz de usuario a Canvas para
representar la salud y creé mi propia tienda.
Entonces cometeré estos cambios
y te veré en el siguiente.
Te prometo que ya me he ido.