1
00:00:07,089 --> 00:00:11,609
Vamos ahora con otro elemento del User Interface muy habitual, que son los botones.

2
00:00:11,769 --> 00:00:14,589
Una de las funciones básicas de la interfaz de usuario es crear menús,

3
00:00:15,150 --> 00:00:20,250
en el que cuando cargamos el juego nos aparezcan botones, mensajes y, por supuesto, sean interactivos.

4
00:00:20,609 --> 00:00:22,750
Vamos a ver el más básico de todos, que es el botón.

5
00:00:23,570 --> 00:00:26,530
GameObject, User Interface, Button.

6
00:00:34,159 --> 00:00:38,820
Lo primero que nos tenemos que fijar es que el botón ha añadido dos elementos.

7
00:00:38,820 --> 00:00:43,159
El botón en sí y el texto.

8
00:00:43,899 --> 00:00:46,579
que tiene ese botón

9
00:00:46,579 --> 00:00:50,229
voy a hacer un poquito más grande

10
00:00:50,229 --> 00:00:55,530
y de hecho si pulsamos en el elemento texto que aparece como hijo

11
00:00:55,530 --> 00:00:58,409
lo que tenemos aquí a la derecha pues básicamente son las mismas

12
00:00:58,409 --> 00:01:01,890
funcionalidades que el texto que hemos visto antes

13
00:01:01,890 --> 00:01:05,129
donde podemos cambiar el texto por supuesto lo podemos hacer mediante

14
00:01:05,129 --> 00:01:07,310
script

15
00:01:07,310 --> 00:01:08,650
la tipografía

16
00:01:08,650 --> 00:01:09,650
por ejemplo

17
00:01:09,650 --> 00:01:13,230
voy a decirle al botón las funciones de alineación son las mismas le voy a decir

18
00:01:13,230 --> 00:01:17,829
que se alinee con respecto al punto de anclaje del centro y por supuesto que

19
00:01:17,829 --> 00:01:23,469
esté por delante de el fondo. Voy a seleccionar el elemento del botón

20
00:01:23,469 --> 00:01:27,629
y veremos las opciones que nos aparecen aquí en su inspector a la derecha. Aparte

21
00:01:27,629 --> 00:01:33,189
del punto de anclaje que hemos visto antes, aquí aparece su imagen. Está

22
00:01:33,189 --> 00:01:38,370
esperando una imagen para utilizarla de fondo. Podemos cambiarle el color pero lo

23
00:01:38,370 --> 00:01:44,310
realmente potente es poner fondos de imágenes nuestras así que en vez de

24
00:01:44,310 --> 00:01:53,189
cambiarle el color le voy a directamente dar una imagen por ejemplo está

25
00:01:53,189 --> 00:01:57,269
de hecho voy a cambiar el color del texto de nuevo siempre recuerdo la

26
00:01:57,269 --> 00:02:03,010
legibilidad le voy a quitar el bol que si no no hay quien lo lea ahí está

27
00:02:03,010 --> 00:02:06,989
vale hay tres cosas en las que quiero detenerme a la hora de hablar de los

28
00:02:06,989 --> 00:02:11,909
botones. Una, por supuesto, es una interactividad, es decir, qué ocurre

29
00:02:11,909 --> 00:02:17,870
cuando los pulsamos. Eso lo veremos al final. Dos, cómo indicamos qué botón está

30
00:02:17,870 --> 00:02:22,969
seleccionado, sobre qué botón hacemos un clic. Eso lo veremos mediante las

31
00:02:22,969 --> 00:02:27,250
transiciones. Y tres, que es lo primero que veremos, cómo es la navegación entre

32
00:02:27,250 --> 00:02:32,169
botones. Parece algo absurdo, pero que hagamos una buena navegación entre

33
00:02:32,169 --> 00:02:35,650
botones depende que la experiencia de usuario sea mucho mejor cuando está

34
00:02:35,650 --> 00:02:41,250
manejando un menú, sobre todo si es con un teclado. Vamos a empezar por ahí. Yo tengo aquí un botón

35
00:02:41,250 --> 00:02:47,889
creado y bien, si lo selecciono, no el texto sino el botón, veremos que aquí me aparecen varias

36
00:02:47,889 --> 00:02:52,110
opciones. Bueno, me aparece primero que sea interactivo, por supuesto, también existe la

37
00:02:52,110 --> 00:02:55,629
posibilidad de que añadamos botones solo para hacer bonito, pero en este caso me interesa que

38
00:02:55,629 --> 00:03:00,169
sea interactivo. La transición, que es el efecto que hará cuando pasemos por encima o lo cliquemos,

39
00:03:00,169 --> 00:03:02,110
o la navegación, que es lo que me interesa ahora mismo.

40
00:03:03,129 --> 00:03:07,550
Básicamente es decirle cómo se va a comportar cuando el usuario, por ejemplo,

41
00:03:07,650 --> 00:03:10,389
utilice las flechas del teclado para pasar de un botón a otro.

42
00:03:11,009 --> 00:03:13,949
Para ello, para ejemplificarlo, voy a crear un duplicado de este botón.

43
00:03:15,569 --> 00:03:24,860
De hecho, voy a crear dos duplicados y los voy a distribuir para que veamos ya un menú más normal.

44
00:03:34,439 --> 00:03:37,219
Si en el sistema de navegación veremos que tenemos varias opciones,

45
00:03:37,219 --> 00:03:44,120
Entonces, si seleccionamos el automático, el Dieter directamente decidirá cuál es la mejor forma y no tendremos nosotros que pensar.

46
00:03:44,259 --> 00:03:51,400
Si pulsamos el botón de visualizar, veremos aquí en nuestra escena, voy a hacer un poco de zoom,

47
00:03:53,740 --> 00:03:57,379
veremos que aparecen unas flechas que nos indican cómo se va a comportar el botón.

48
00:03:57,520 --> 00:04:00,460
Es decir, el usuario le da el botón hacia abajo, pues pasará aquí.

49
00:04:00,680 --> 00:04:04,460
Si aquí le da el botón hacia arriba, pues pasará de este botón a este.

50
00:04:04,599 --> 00:04:06,460
Y este es navegable desde este a este.

51
00:04:06,460 --> 00:04:10,060
bueno, en este caso es muy sencillo porque la distribución es fácil

52
00:04:10,060 --> 00:04:12,400
pero cuando la distribución es un poco compleja

53
00:04:12,400 --> 00:04:15,780
vemos que él ya empieza a hacerse un poco las cábalas

54
00:04:15,780 --> 00:04:18,220
diciendo, bueno, pues de aquí podemos pasar este botón

55
00:04:18,220 --> 00:04:21,019
pero si le doy hacia abajo pasa este botón

56
00:04:21,019 --> 00:04:23,839
y si yo en este botón le doy hacia abajo, pues pasa este botón

57
00:04:23,839 --> 00:04:24,959
y si yo aquí le doy hacia arriba

58
00:04:24,959 --> 00:04:29,480
en fin, que la navegación no siempre es tan sencilla como podría parecer

59
00:04:29,480 --> 00:04:33,339
y si por lo que sea el sistema automático no funciona como nos gustaría

60
00:04:33,339 --> 00:04:38,639
pues siempre podemos decirle que sea explícita

61
00:04:38,639 --> 00:04:42,180
es decir, que nosotros podamos determinarlo

62
00:04:42,180 --> 00:04:43,959
y desactivamos la opción de automático

63
00:04:43,959 --> 00:04:46,620
y entonces veremos que le decimos

64
00:04:46,620 --> 00:04:50,180
qué ocurre cuando el jugador le da hacia arriba

65
00:04:50,180 --> 00:04:51,439
qué ocurre cuando le da hacia abajo

66
00:04:51,439 --> 00:04:52,899
es decir, a qué botón tiene que ir

67
00:04:52,899 --> 00:04:57,100
y aquí es donde le decimos a qué botón va cuando da qué cursor

68
00:04:57,100 --> 00:05:00,060
explorar, probar y comprobar que efectivamente

69
00:05:00,060 --> 00:05:06,839
el usuario se siente cómodo manejándose por ese por ese menú no es algo fácil para eso están los

70
00:05:06,839 --> 00:05:12,740
diseñadores de interactividad vamos con otra función que es la de la transición es decir yo

71
00:05:12,740 --> 00:05:17,500
la gente cuando el usuario esté por encima o pasando por encima el cursor o seleccionando

72
00:05:17,500 --> 00:05:22,199
un botón quiero mostrarle que está seleccionando ese botón y cuando lo pulsa quiero también

73
00:05:22,199 --> 00:05:27,000
mostrarle que lo pulsa eso lo gente lo tenemos aquí en las transiciones tenemos varias opciones

74
00:05:27,579 --> 00:05:34,259
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é.

75
00:05:35,139 --> 00:05:37,660
Podemos cambiar la imagen de fondo.

76
00:05:37,800 --> 00:05:43,279
Si nosotros queremos que cuando le pulse la imagen que salga de fondo sea otra, lo podemos hacer.

77
00:05:43,660 --> 00:05:47,279
O incluso la más compleja de todas, que es la de crear animaciones para cada estado.

78
00:05:47,660 --> 00:05:49,980
Vamos a empezar con la básica, que es la del color tint.

79
00:05:50,319 --> 00:05:52,579
Por defecto el botón está sin cambiar de color.

80
00:05:52,579 --> 00:05:57,920
pero cuando esté pasando por encima quiero que el botón esté por ejemplo en

81
00:05:57,920 --> 00:06:05,180
un color tirando a verde y cuando lo presione quiero que se ponga en rojo si

82
00:06:05,180 --> 00:06:09,800
ahora mismo lanzó el juego al pasar por encima vemos que el botón

83
00:06:09,800 --> 00:06:17,230
cambia de color y si lo pulso se pone en rojo el nivel de tintado lo podemos

84
00:06:17,230 --> 00:06:22,269
controlar aquí de acuerdo e incluso la animación que hemos visto que el color

85
00:06:22,269 --> 00:06:26,189
no se ha aplicado de forma directa, sino que ha tardado un ratito, pues podemos ampliar

86
00:06:26,189 --> 00:06:28,970
aquí el tiempo de desanimación.

87
00:06:30,670 --> 00:06:36,199
Y vemos que ahí tarda más. En el método

88
00:06:36,199 --> 00:06:40,100
de sprite swap, es decir, cambiar la imagen, pues nada, es decirle en qué

89
00:06:40,100 --> 00:06:46,300
estado del botón, qué imagen quiero que aparezca. Por ejemplo, al

90
00:06:46,300 --> 00:06:49,500
seleccionarlo, que cambia una imagen de fondo

91
00:06:49,500 --> 00:06:55,470
y vemos que al pasar por encima, la imagen cambia.

92
00:06:55,470 --> 00:07:10,149
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.

93
00:07:10,149 --> 00:07:37,279
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.

94
00:07:37,439 --> 00:07:40,699
ya estás de

95
00:07:40,699 --> 00:07:42,579
de un panel de animation

96
00:07:42,579 --> 00:07:45,660
y por lo tanto ella nosotros podemos mediante una línea tiempo crear

97
00:07:45,660 --> 00:07:48,660
animaciones más complejas de forma que cuando pase por encima pues vibre o

98
00:07:48,660 --> 00:07:51,000
cuando pase por encima se escale un poquito

99
00:07:51,000 --> 00:07:53,259
y cuando salga se

100
00:07:53,259 --> 00:07:55,459
se vuelva a su estado original en fin