Saltar navegación

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

Primeros pasos en Unity. UI parte 4a: botones - 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 27 de octubre de 2025 por Alvaro H.

47 visualizaciones

Añadamos botones a nuestra User Interface y gestionemos la navegación entre ellos

Más información Transcripción

Descargar la transcripción

Vamos ahora con otro elemento del User Interface muy habitual, que son los botones. 00:00:07
Una de las funciones básicas de la interfaz de usuario es crear menús, 00:00:11
en el que cuando cargamos el juego nos aparezcan botones, mensajes y, por supuesto, sean interactivos. 00:00:15
Vamos a ver el más básico de todos, que es el botón. 00:00:20
GameObject, User Interface, Button. 00:00:23
Lo primero que nos tenemos que fijar es que el botón ha añadido dos elementos. 00:00:34
El botón en sí y el texto. 00:00:38
que tiene ese botón 00:00:43
voy a hacer un poquito más grande 00:00:46
y de hecho si pulsamos en el elemento texto que aparece como hijo 00:00:50
lo que tenemos aquí a la derecha pues básicamente son las mismas 00:00:55
funcionalidades que el texto que hemos visto antes 00:00:58
donde podemos cambiar el texto por supuesto lo podemos hacer mediante 00:01:01
script 00:01:05
la tipografía 00:01:07
por ejemplo 00:01:08
voy a decirle al botón las funciones de alineación son las mismas le voy a decir 00:01:09
que se alinee con respecto al punto de anclaje del centro y por supuesto que 00:01:13
esté por delante de el fondo. Voy a seleccionar el elemento del botón 00:01:17
y veremos las opciones que nos aparecen aquí en su inspector a la derecha. Aparte 00:01:23
del punto de anclaje que hemos visto antes, aquí aparece su imagen. Está 00:01:27
esperando una imagen para utilizarla de fondo. Podemos cambiarle el color pero lo 00:01:33
realmente potente es poner fondos de imágenes nuestras así que en vez de 00:01:38
cambiarle el color le voy a directamente dar una imagen por ejemplo está 00:01:44
de hecho voy a cambiar el color del texto de nuevo siempre recuerdo la 00:01:53
legibilidad le voy a quitar el bol que si no no hay quien lo lea ahí está 00:01:57
vale hay tres cosas en las que quiero detenerme a la hora de hablar de los 00:02:03
botones. Una, por supuesto, es una interactividad, es decir, qué ocurre 00:02:06
cuando los pulsamos. Eso lo veremos al final. Dos, cómo indicamos qué botón está 00:02:11
seleccionado, sobre qué botón hacemos un clic. Eso lo veremos mediante las 00:02:17
transiciones. Y tres, que es lo primero que veremos, cómo es la navegación entre 00:02:22
botones. Parece algo absurdo, pero que hagamos una buena navegación entre 00:02:27
botones depende que la experiencia de usuario sea mucho mejor cuando está 00:02:32
manejando un menú, sobre todo si es con un teclado. Vamos a empezar por ahí. Yo tengo aquí un botón 00:02:35
creado y bien, si lo selecciono, no el texto sino el botón, veremos que aquí me aparecen varias 00:02:41
opciones. Bueno, me aparece primero que sea interactivo, por supuesto, también existe la 00:02:47
posibilidad de que añadamos botones solo para hacer bonito, pero en este caso me interesa que 00:02:52
sea interactivo. La transición, que es el efecto que hará cuando pasemos por encima o lo cliquemos, 00:02:55
o la navegación, que es lo que me interesa ahora mismo. 00:03:00
Básicamente es decirle cómo se va a comportar cuando el usuario, por ejemplo, 00:03:03
utilice las flechas del teclado para pasar de un botón a otro. 00:03:07
Para ello, para ejemplificarlo, voy a crear un duplicado de este botón. 00:03:11
De hecho, voy a crear dos duplicados y los voy a distribuir para que veamos ya un menú más normal. 00:03:15
Si en el sistema de navegación veremos que tenemos varias opciones, 00:03:34
Entonces, si seleccionamos el automático, el Dieter directamente decidirá cuál es la mejor forma y no tendremos nosotros que pensar. 00:03:37
Si pulsamos el botón de visualizar, veremos aquí en nuestra escena, voy a hacer un poco de zoom, 00:03:44
veremos que aparecen unas flechas que nos indican cómo se va a comportar el botón. 00:03:53
Es decir, el usuario le da el botón hacia abajo, pues pasará aquí. 00:03:57
Si aquí le da el botón hacia arriba, pues pasará de este botón a este. 00:04:00
Y este es navegable desde este a este. 00:04:04
bueno, en este caso es muy sencillo porque la distribución es fácil 00:04:06
pero cuando la distribución es un poco compleja 00:04:10
vemos que él ya empieza a hacerse un poco las cábalas 00:04:12
diciendo, bueno, pues de aquí podemos pasar este botón 00:04:15
pero si le doy hacia abajo pasa este botón 00:04:18
y si yo en este botón le doy hacia abajo, pues pasa este botón 00:04:21
y si yo aquí le doy hacia arriba 00:04:23
en fin, que la navegación no siempre es tan sencilla como podría parecer 00:04:24
y si por lo que sea el sistema automático no funciona como nos gustaría 00:04:29
pues siempre podemos decirle que sea explícita 00:04:33
es decir, que nosotros podamos determinarlo 00:04:38
y desactivamos la opción de automático 00:04:42
y entonces veremos que le decimos 00:04:43
qué ocurre cuando el jugador le da hacia arriba 00:04:46
qué ocurre cuando le da hacia abajo 00:04:50
es decir, a qué botón tiene que ir 00:04:51
y aquí es donde le decimos a qué botón va cuando da qué cursor 00:04:52
explorar, probar y comprobar que efectivamente 00:04:57
el usuario se siente cómodo manejándose por ese por ese menú no es algo fácil para eso están los 00:05:00
diseñadores de interactividad vamos con otra función que es la de la transición es decir yo 00:05:06
la gente cuando el usuario esté por encima o pasando por encima el cursor o seleccionando 00:05:12
un botón quiero mostrarle que está seleccionando ese botón y cuando lo pulsa quiero también 00:05:17
mostrarle que lo pulsa eso lo gente lo tenemos aquí en las transiciones tenemos varias opciones 00:05:22
Podemos tintar el botón, que es lo más sencillo de todos, con el color que nosotros elijamos, dependiendo del estado en el que esté. 00:05:27
Podemos cambiar la imagen de fondo. 00:05:35
Si nosotros queremos que cuando le pulse la imagen que salga de fondo sea otra, lo podemos hacer. 00:05:37
O incluso la más compleja de todas, que es la de crear animaciones para cada estado. 00:05:43
Vamos a empezar con la básica, que es la del color tint. 00:05:47
Por defecto el botón está sin cambiar de color. 00:05:50
pero cuando esté pasando por encima quiero que el botón esté por ejemplo en 00:05:52
un color tirando a verde y cuando lo presione quiero que se ponga en rojo si 00:05:57
ahora mismo lanzó el juego al pasar por encima vemos que el botón 00:06:05
cambia de color y si lo pulso se pone en rojo el nivel de tintado lo podemos 00:06:09
controlar aquí de acuerdo e incluso la animación que hemos visto que el color 00:06:17
no se ha aplicado de forma directa, sino que ha tardado un ratito, pues podemos ampliar 00:06:22
aquí el tiempo de desanimación. 00:06:26
Y vemos que ahí tarda más. En el método 00:06:30
de sprite swap, es decir, cambiar la imagen, pues nada, es decirle en qué 00:06:36
estado del botón, qué imagen quiero que aparezca. Por ejemplo, al 00:06:40
seleccionarlo, que cambia una imagen de fondo 00:06:46
y vemos que al pasar por encima, la imagen cambia. 00:06:49
Y el más complejo de todos, y por lo tanto no me voy a detener mucho en ello, es el de crear una animación, donde nos va a permitir mediante el panel de animation de Unity crear una animación específica para cada botón, o sea, para cada estado del botón. 00:06:55
Si le damos aquí a autogenerar animación, nos preguntará dónde queremos guardarlo y veremos que añade un componente animator donde tenemos los estados del botón vinculados también a animaciones. 00:07:10
ya estás de 00:07:37
de un panel de animation 00:07:40
y por lo tanto ella nosotros podemos mediante una línea tiempo crear 00:07:42
animaciones más complejas de forma que cuando pase por encima pues vibre o 00:07:45
cuando pase por encima se escale un poquito 00:07:48
y cuando salga se 00:07:51
se vuelva a su estado original en fin 00:07:53
Idioma/s:
es
Materias:
Informática, Imagen y Sonido
Niveles educativos:
▼ Mostrar / ocultar niveles
  • Formación Profesional
    • Ciclo formativo de grado superior
      • Primer Curso
      • Segundo Curso
Autor/es:
Alvaro Holguera Gozalo
Subido por:
Alvaro H.
Licencia:
Reconocimiento - No comercial - Compartir igual
Visualizaciones:
47
Fecha:
27 de octubre de 2025 - 10:31
Visibilidad:
Público
Centro:
CFP JOSÉ LUIS GARCI
Duración:
07′ 55″
Relación de aspecto:
1.78:1
Resolución:
1280x720 píxeles
Tamaño:
146.44 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid