Saltar navegación

Activa JavaScript para disfrutar de los vídeos de la Mediateca.

Curso Unity - Vídeo 3 - Botones - Text - Sprites - Contenido educativo

Ajuste de pantalla

El ajuste de pantalla se aprecia al ver el vídeo en pantalla completa. Elige la presentación que más te guste:

Subido el 3 de diciembre de 2024 por Mario S.

11 visualizaciones

Más información Transcripción

Descargar la transcripción

Vale, pues una vez introducido el canvas, lo que vamos a hacer es ver diferentes GainObject de la UI. 00:00:00
Para empezar a trabajar con esto, vamos a empezar con los objetos, con los GainObject. 00:00:09
Recordad que en Unity no existen los objetos, existen los GainObject, que es lo mismo. 00:00:17
Vamos a empezar a trabajar con los paneles. 00:00:27
Y voy a utilizar todos los Dinojet que vienen heredados, o sea, de los que vienen de versiones anteriores y luego ya vamos a ir cogiendo todos los componentes que serían los que tienen el apellido este del TESMES PRO, que nos dan mucha más calidad y nos dan muchas más funcionalidades y son bastante mejores. 00:00:29
Pero por ahora, para ir cogiendo la idea 00:00:56
Y ir trabajando con el editor 00:00:59
Pues sí que vamos a ir 00:01:01
Yendo desde 00:01:03
A lo mejor, desde lo más 00:01:05
Antiguo 00:01:07
Desde las versiones más antiguas 00:01:10
Hasta llegar a lo actual 00:01:11
Entonces 00:01:12
Una vez que estoy en el canvas 00:01:14
Sacamos el menú 00:01:17
Contextual y voy a 00:01:20
Uy, yo aquí tengo 00:01:21
¿Veis? Tengo un 00:01:23
Un GainObject de tipo Image, un GainObject de tipo Text, el RawImage, el Panel, ¿vale? 00:01:25
Hay diferentes GainObject que usaremos y tenéis los heredados, el Legacy, que es el Text, el Button, el DropDown y el InputFile. 00:01:31
Si os fijáis, también tengo aquí esos tres, pero con la coletilla del TestMesh Pro. 00:01:42
Estos son mejores, ¿vale? Y nos dan mucha más calidad, además de permitirnos programar incluso en HTML diferentes opciones. 00:01:47
Son muy interesantes, ¿vale? Pero por ahora el que uso es este. Entonces, lo primero que voy a hacer es meter un panel. Un panel no es más que un contenedor. Con lo que hemos visto de el backend y el from, sería una especie del bloque, del div, ¿vale? 00:01:55
¿Para qué me puede servir eso? Porque puedo agrupar diferentes GameObjects y luego trabajar con el GameObject Panel, ¿vale? Como padre. De tal forma que si, por ejemplo, quiero ocultar o visualizar, pues eso, un botón, un texto, varios componentes, los puedo agrupar a través del panel y lo único que tengo que activar o desactivar sería ese panel. 00:02:16
Entonces, yo suelo jugar mucho con paneles. Voy a meter un panel, le voy a llamar panel 1. Este panel, cuando lo añadimos, vemos que coge el mismo tamaño que tiene el canvas. 00:02:45
¿Vale? Bueno, si os fijáis en la ventana de trabajo, ¿no? En la escena, en la ventana de escena, tenemos estas herramientas que son para moverlo. Bueno, la mano es para panear la cámara, ¿vale? Para hacer un movimiento con la cámara. 00:03:14
Esto es para mover el gain object que siempre esté seleccionado, para rotarlo, para escalarlo, ¿vale? 00:03:34
Este también es para escalarlo y este sería un compendio ahí de todo, ¿no? 00:03:42
Yo voy a seleccionar esta herramienta, que es la típica con los tiradores, y me hago el panel más pequeño que el canvas, por ejemplo así, ¿vale? 00:03:47
Como tengo panel 1, este gain object, seleccionado, veo sus componentes. 00:03:57
Entonces veo que tengo el RectTransform, como ahora le he modificado, tirando de esos puntos azules, le he modificado el ancho, el alto, todo esto, aquí se refleja. 00:04:02
Podríamos darle desde estas opciones, desde estos parámetros, un valor exacto al que estamos buscando. 00:04:19
¿Vale? Bueno, vemos que tiene un canvas render 00:04:26
Que esto es, bueno, pues para decirle como quiero que me lo renderice, ¿vale? 00:04:30
Tengo el componente image, tengo, ya está, solo tengo estos 00:04:37
¿Vale? Entonces, este game object, con lo que yo voy a trabajar más es con este componente image 00:04:44
Entonces veo que tiene una imagen fuente, ¿vale? 00:04:50
Que es por si quisiera meterle una imagen a este panel en vez de un color sólido. Tiene el color sólido, si hacéis un clic podéis meterle el color que queráis, ¿vale? Y recordad que también tiene el tema del alfa, la transparencia, ¿vale? Le podéis dar más o menos transparencia. 00:04:53
Entonces yo se la voy a quitar entera y lo voy a dejar en verde, ¿vale? Tiene un material, un material es porque le podemos dar un material, le podemos dar una textura a este panel, ¿vale? Esto por ahora yo lo voy a dejar porque el material es un poco más complejo. 00:05:15
al material hay que meterle 00:05:35
una serie de mapas 00:05:37
y nosotros todavía en principio 00:05:39
no sabemos que son los mapas 00:05:41
vale, tenemos el tipo de 00:05:43
imagen, entonces te dice el slide 00:05:45
el tile, el fill, bueno, esto 00:05:47
también es interesante, pero todavía 00:05:49
no lo hemos visto en clase, pero para 00:05:51
la hora de hacer 00:05:53
unas ciertas animaciones 00:05:55
es interesante, si por ejemplo lo pongo en fill 00:05:56
vamos a ver 00:06:00
aquí 00:06:05
fijaros como 00:06:05
quiero darle esa animación 00:06:09
de, pues en este caso 00:06:12
de 360 grados 00:06:14
vale, aquí lo puedo 00:06:15
lo podríamos hacer 00:06:18
vale, o tendría también 00:06:20
por ejemplo el 00:06:22
y aquí 00:06:24
podríamos coger 00:06:25
es más 00:06:30
el tileado es más 00:06:34
como las losetas, ¿no? 00:06:37
para rellenar varios componentes 00:06:38
vale, a ver un momento 00:06:40
bueno, esto lo iremos 00:06:42
viendo, ¿vale? por ahora en clase no lo hemos visto 00:06:50
lo único que he visto ha sido 00:06:52
meterse a casa una imagen, meter un color 00:06:53
nada más, ¿vale? 00:06:58
esto del 00:07:01
raycast no sabemos lo que es 00:07:02
bueno, vamos a dejar 00:07:03
esto entonces como estaba, que es en simple, en simple no, slide, así, vale, y ya tendríamos 00:07:06
nuestro panel, vale, dentro de este panel es lo que os decía que podemos coger y empezar 00:07:17
a meter gain object e ir agrupándolos, entonces teniendo el panel seleccionado, voy a darle 00:07:23
al botón derecho, le voy a dar, vamos a venir a UI y ahí le vamos a meter, por ejemplo, 00:07:31
el text. Vale, el text es un gain object de tipo una caja de texto, ¿vale? En la que, 00:07:37
como siempre, tiene los diferentes componentes. Uno de esos componentes es el text, que es 00:07:47
con el que hemos estado trabajando más quizás, en el que yo puedo meter el texto que quiera, 00:07:53
Por ejemplo, segundo DAM, podemos cambiarle la fuente, el estilo, el tamaño, bueno, con lo del tamaño acordaros que está lo del best fit, que yo esto siempre lo activo por defecto, le pongo mínimo 10, el máximo 200, ¿vale? 00:08:00
Para que en el momento en el que yo le cambio el tamaño, me lo coja bien. O sea, me lo coja bien, se adecue bien el texto a ese espacio que le estoy dejando. 00:08:21
¿Vale? Entonces, ahora esto lo colocáis donde queráis, por ejemplo aquí y ya está. ¿Vale? Y le vamos a meter también un botón. 00:08:45
Entonces, el botón es un GameObject que es complejo, quiero decir, el botón ya tiene como padre el button y como hijo tiene otro GameObject que es el text. 00:08:56
El text no es más que, es igual que este text que hemos metido el segundo de DAM, ¿vale? 00:09:18
Pero es el que está relacionado con el botón y es el que me muestra esa información, ese texto encima del botón, ¿vale? 00:09:26
Si yo fuera a meter una imagen o cosas así, ese text lo quitaría de ese botón, ¿vale? 00:09:36
No me haría falta para nada o a lo mejor lo deshabilito. 00:09:42
Acordaros que para deshabilitar o habilitar es siempre este check, ¿vale? Fijaros cómo se habilita y se deshabilita, que luego lo podemos hacer también desde código. 00:09:45
Vale, y entonces tenemos el botón, vale, vamos a hacer ese botón más grande, a ver, vamos a coger, le vamos con el botón seleccionado. 00:09:55
Cuidado con esto, tiene que estar el botón seleccionado. Si no está el botón y selecciono el texto, entonces lo que amplio es la superficie del texto. Cuando amplio el botón, aquí se me amplía todo, porque al final es el padre. 00:10:10
Entonces, fijaros que si yo amplio el botón, el botón tiene aquí sus diferentes propiedades, ¿vale? Tiene el image, que es el mismo que hemos visto antes, y tiene el button, que este es un componente que es específico del botón. 00:10:27
Ese, pues tiene ahí 00:10:45
Varias opciones, como que sea interactuable 00:10:47
O sea, que funcione, ¿no? 00:10:49
Que no se quede deshabilitado 00:10:51
Tiene 00:10:53
Bueno, aquí, esto es para 00:10:54
Controlar el que pasas por encima 00:10:57
El que cambia de color, el hover 00:10:59
Cuando está presionado, cuando 00:11:01
¿Vale? Diferentes efectos 00:11:03
Incluso podríamos coger y meter 00:11:05
Diferentes 00:11:07
Pues eso, el spray swap 00:11:08
Meter animaciones, bueno 00:11:11
Todo eso lo veremos, ¿vale? Ahora mismo 00:11:13
me da un poco lo mismo y tengo el onclick que es donde vamos a asociar esa función que vamos 00:11:15
a programar desde césar vale en este caso pues vamos a meter un vamos a cambiar la forma del 00:11:22
botón y vamos a meter un emoticono por ejemplo entonces en lo que busco uno voy a parar la 00:11:34
grabación vale entonces yo lo que quiero ahora es meter una imagen dentro del botón 00:11:45
el texto recordar que si lo que quisiera es por ejemplo poner aquí pulsar vale iría igual que 00:11:56
antes marcaría el best fit le pondría aquí el tamaño otra vez 200 vale y así le lo adecuó al 00:12:08
tamaño que le he puesto a ese botón vale entonces tendríamos el púlsame vale yo le doy al play para 00:12:19
ver cómo quedaría quedaría así vale y podría pulsar el botón ahora mismo no hace nada porque 00:12:27
no le hemos asociado ninguna función vale yo lo que quiero ahora es meterle una imagen entonces 00:12:33
como quiero meterle una imagen esta parte del texto ya no me hace falta así que la puedo coger 00:12:41
y la puedo borrar tranquilamente yo sigo teniendo el botón sin texto pero sigue respondiendo al 00:12:46
hacer el clic vale y lo que quiero meter ahora es un es una imagen entonces me tengo que acordar de 00:12:54
que tengo el source image vale vamos a crearnos una carpeta que es image y dentro de image vamos 00:13:02
a meter una imagen que en este caso va a ser la de esta que me he descargado. Meto esta 00:13:13
y esta. Lo primero que tengo que hacer cuando meto una imagen, esta es un JPG, es convertirla 00:13:26
a sprite. Como os decía Unity puede trabajar con cualquier formato pero por ahora nosotros 00:13:31
lo que vamos a hacer es convertirlos a sprite. Entonces selecciono la imagen, me va a salir 00:13:38
esta información en la ventana inspector que es muy interesante por el tema de optimizarlo 00:13:43
para diferentes plataformas, el tipo de textura que queremos, si queremos que se repita o 00:13:50
no. Entonces aquí hay opciones que son interesantes y las iremos viendo. Según vayamos necesitando 00:13:56
yo las voy a ir diciendo. ¿Qué es lo que tengo que hacer básicamente con una imagen 00:14:03
de estas es en el tipo de textura en la primera opción le tengo que decir que lo que quiero es 00:14:09
trabajar con un spray 2d y uy vale esto me va a convertir esta imagen cuando le dais a aplicar 00:14:14
en un spray sé que lo ha convertido por qué me sale este círculo con este triángulo negro vale 00:14:22
que si lo desplegamos pues en este caso sólo vais a ver la misma imagen si lo hubiera puesto como 00:14:32
en vez de single lo hubiera puesto como múltiple pues aparecerían aquí diferentes imágenes bueno 00:14:39
ya tengo mi spray vuelvo a seleccionar el botón y ahora en el source image lo que voy a hacer es 00:14:46
meter ese spray entonces yo ahora tengo esa imagen en el botón voy a meter esa imagen si la hubiera 00:14:52
bajado en vez de con esto en blanco con el fondo en blanco le hubiera puesto transparente pues 00:15:00
hubiera quedado mejor vale pero para hacer el vídeo pues pues bueno pues éste 00:15:05
me vale qué más cosillas vale esto me lo ha 00:15:09
deformado entonces aquí lo suyo es poner ese botón 00:15:14
en ancho y en alto el mismo tamaño pues por ejemplo si son 215 00:15:21
aquí pues que sean 215 vale hacerlo cuadrado y unity le gusta trabajar con 00:15:28
con imágenes que son cuadradas, que la resolución es cuadrada. Una vez que he metido esa imagen, si os venís al componente Image, tenéis una opción que dice Preservar el aspecto. 00:15:35
Esto hace que la imagen se ajuste a su aspecto, aunque tenga que dejar espacios del tamaño del botón sin rellenar. 00:15:52
Que luego recordad que se puede poner que esa imagen se repita o cosas así y entonces sí que lo rellena todo. 00:16:02
Otra cosa importante es el tema del color cuando meto una imagen. 00:16:10
Ahora está en blanco y por eso me lo coge bien, pero fijaros que si yo modifico el color, me lo va modificando todo. 00:16:13
¿Vale? Eso es porque este color lo va multiplicando píxel a píxel por el de la imagen 00:16:21
¿Vale? Entonces hay que tener cuidado y poner el neutro que es el blanco 00:16:27
¿Vale? Y ya tendría mi botón con una imagen 00:16:31
¿Vale? O con el texto como os he dicho antes 00:16:35
En este caso he borrado el texto, he dejado solo la imagen 00:16:38
Idioma/s:
es
Materias:
Programación
Niveles educativos:
▼ Mostrar / ocultar niveles
  • Formación Profesional
    • Ciclo formativo de grado básico
      • Primer Curso
      • Segundo Curso
    • Ciclo formativo de grado medio
      • Primer Curso
      • Segundo Curso
    • Ciclo formativo de grado superior
      • Primer Curso
      • Segundo Curso
Autor/es:
Mario S.
Subido por:
Mario S.
Licencia:
Dominio público
Visualizaciones:
11
Fecha:
3 de diciembre de 2024 - 11:20
Visibilidad:
Público
Centro:
IES VILLABLANCA
Duración:
00′ 05″
Relación de aspecto:
1.78:1
Resolución:
1920x1080 píxeles
Tamaño:
43.91 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid