1
00:00:00,880 --> 00:00:08,720
Vale, pues una vez introducido el canvas, lo que vamos a hacer es ver diferentes GainObject de la UI.

2
00:00:09,380 --> 00:00:16,239
Para empezar a trabajar con esto, vamos a empezar con los objetos, con los GainObject.

3
00:00:17,399 --> 00:00:23,679
Recordad que en Unity no existen los objetos, existen los GainObject, que es lo mismo.

4
00:00:27,320 --> 00:00:29,820
Vamos a empezar a trabajar con los paneles.

5
00:00:29,820 --> 00:00:56,159
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.

6
00:00:56,159 --> 00:00:59,700
Pero por ahora, para ir cogiendo la idea

7
00:00:59,700 --> 00:01:01,359
Y ir trabajando con el editor

8
00:01:01,359 --> 00:01:03,740
Pues sí que vamos a ir

9
00:01:03,740 --> 00:01:05,879
Yendo desde

10
00:01:05,879 --> 00:01:07,719
A lo mejor, desde lo más

11
00:01:07,719 --> 00:01:10,040
Antiguo

12
00:01:10,040 --> 00:01:11,319
Desde las versiones más antiguas

13
00:01:11,319 --> 00:01:12,760
Hasta llegar a lo actual

14
00:01:12,760 --> 00:01:14,340
Entonces

15
00:01:14,340 --> 00:01:17,379
Una vez que estoy en el canvas

16
00:01:17,379 --> 00:01:20,019
Sacamos el menú

17
00:01:20,019 --> 00:01:21,599
Contextual y voy a

18
00:01:21,599 --> 00:01:23,700
Uy, yo aquí tengo

19
00:01:23,700 --> 00:01:25,640
¿Veis? Tengo un

20
00:01:25,640 --> 00:01:31,180
Un GainObject de tipo Image, un GainObject de tipo Text, el RawImage, el Panel, ¿vale?

21
00:01:31,180 --> 00:01:41,939
Hay diferentes GainObject que usaremos y tenéis los heredados, el Legacy, que es el Text, el Button, el DropDown y el InputFile.

22
00:01:42,459 --> 00:01:47,359
Si os fijáis, también tengo aquí esos tres, pero con la coletilla del TestMesh Pro.

23
00:01:47,780 --> 00:01:55,379
Estos son mejores, ¿vale? Y nos dan mucha más calidad, además de permitirnos programar incluso en HTML diferentes opciones.

24
00:01:55,379 --> 00:02:16,939
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?

25
00:02:16,939 --> 00:02:45,199
¿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.

26
00:02:45,199 --> 00:03:14,199
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.

27
00:03:14,199 --> 00:03:34,360
¿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.

28
00:03:34,360 --> 00:03:42,060
Esto es para mover el gain object que siempre esté seleccionado, para rotarlo, para escalarlo, ¿vale?

29
00:03:42,319 --> 00:03:47,280
Este también es para escalarlo y este sería un compendio ahí de todo, ¿no?

30
00:03:47,719 --> 00:03:57,539
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?

31
00:03:57,919 --> 00:04:02,319
Como tengo panel 1, este gain object, seleccionado, veo sus componentes.

32
00:04:02,319 --> 00:04:19,079
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.

33
00:04:19,639 --> 00:04:26,839
Podríamos darle desde estas opciones, desde estos parámetros, un valor exacto al que estamos buscando.

34
00:04:26,839 --> 00:04:30,540
¿Vale? Bueno, vemos que tiene un canvas render

35
00:04:30,540 --> 00:04:36,639
Que esto es, bueno, pues para decirle como quiero que me lo renderice, ¿vale?

36
00:04:37,899 --> 00:04:44,379
Tengo el componente image, tengo, ya está, solo tengo estos

37
00:04:44,379 --> 00:04:50,699
¿Vale? Entonces, este game object, con lo que yo voy a trabajar más es con este componente image

38
00:04:50,699 --> 00:04:53,920
Entonces veo que tiene una imagen fuente, ¿vale?

39
00:04:53,920 --> 00:05:15,899
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.

40
00:05:15,899 --> 00:05:35,279
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.

41
00:05:35,279 --> 00:05:37,019
al material hay que meterle

42
00:05:37,019 --> 00:05:39,519
una serie de mapas

43
00:05:39,519 --> 00:05:41,459
y nosotros todavía en principio

44
00:05:41,459 --> 00:05:43,180
no sabemos que son los mapas

45
00:05:43,180 --> 00:05:45,500
vale, tenemos el tipo de

46
00:05:45,500 --> 00:05:47,160
imagen, entonces te dice el slide

47
00:05:47,160 --> 00:05:49,360
el tile, el fill, bueno, esto

48
00:05:49,360 --> 00:05:51,379
también es interesante, pero todavía

49
00:05:51,379 --> 00:05:53,259
no lo hemos visto en clase, pero para

50
00:05:53,259 --> 00:05:55,240
la hora de hacer

51
00:05:55,240 --> 00:05:56,639
unas ciertas animaciones

52
00:05:56,639 --> 00:05:59,259
es interesante, si por ejemplo lo pongo en fill

53
00:05:59,259 --> 00:06:00,100
y

54
00:06:00,100 --> 00:06:05,279
vamos a ver

55
00:06:05,279 --> 00:06:05,879
aquí

56
00:06:05,879 --> 00:06:08,639
fijaros como

57
00:06:08,639 --> 00:06:09,639
si

58
00:06:09,639 --> 00:06:12,360
quiero darle esa animación

59
00:06:12,360 --> 00:06:14,560
de, pues en este caso

60
00:06:14,560 --> 00:06:15,939
de 360 grados

61
00:06:15,939 --> 00:06:18,879
vale, aquí lo puedo

62
00:06:18,879 --> 00:06:20,220
lo podríamos hacer

63
00:06:20,220 --> 00:06:22,819
vale, o tendría también

64
00:06:22,819 --> 00:06:24,000
por ejemplo el

65
00:06:24,000 --> 00:06:25,600
y aquí

66
00:06:25,600 --> 00:06:30,540
podríamos coger

67
00:06:30,540 --> 00:06:34,990
es más

68
00:06:34,990 --> 00:06:37,069
el tileado es más

69
00:06:37,069 --> 00:06:38,589
como las losetas, ¿no?

70
00:06:38,629 --> 00:06:40,930
para rellenar varios componentes

71
00:06:40,930 --> 00:06:42,689
vale, a ver un momento

72
00:06:42,689 --> 00:06:50,279
bueno, esto lo iremos

73
00:06:50,279 --> 00:06:52,279
viendo, ¿vale? por ahora en clase no lo hemos visto

74
00:06:52,279 --> 00:06:53,420
lo único que he visto ha sido

75
00:06:53,420 --> 00:06:56,300
meterse a casa una imagen, meter un color

76
00:06:56,300 --> 00:06:58,040
y

77
00:06:58,040 --> 00:07:00,060
nada más, ¿vale?

78
00:07:01,399 --> 00:07:02,040
esto del

79
00:07:02,040 --> 00:07:03,560
raycast no sabemos lo que es

80
00:07:03,560 --> 00:07:06,279
bueno, vamos a dejar

81
00:07:06,279 --> 00:07:17,240
esto entonces como estaba, que es en simple, en simple no, slide, así, vale, y ya tendríamos

82
00:07:17,240 --> 00:07:23,779
nuestro panel, vale, dentro de este panel es lo que os decía que podemos coger y empezar

83
00:07:23,779 --> 00:07:31,560
a meter gain object e ir agrupándolos, entonces teniendo el panel seleccionado, voy a darle

84
00:07:31,560 --> 00:07:37,660
al botón derecho, le voy a dar, vamos a venir a UI y ahí le vamos a meter, por ejemplo,

85
00:07:37,740 --> 00:07:45,860
el text. Vale, el text es un gain object de tipo una caja de texto, ¿vale? En la que,

86
00:07:47,079 --> 00:07:53,860
como siempre, tiene los diferentes componentes. Uno de esos componentes es el text, que es

87
00:07:53,860 --> 00:08:00,579
con el que hemos estado trabajando más quizás, en el que yo puedo meter el texto que quiera,

88
00:08:00,579 --> 00:08:21,250
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?

89
00:08:21,250 --> 00:08:45,059
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.

90
00:08:45,059 --> 00:08:56,860
¿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.

91
00:08:56,860 --> 00:09:18,860
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.

92
00:09:18,860 --> 00:09:26,960
El text no es más que, es igual que este text que hemos metido el segundo de DAM, ¿vale?

93
00:09:26,960 --> 00:09:36,200
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?

94
00:09:36,299 --> 00:09:42,299
Si yo fuera a meter una imagen o cosas así, ese text lo quitaría de ese botón, ¿vale?

95
00:09:42,340 --> 00:09:45,159
No me haría falta para nada o a lo mejor lo deshabilito.

96
00:09:45,159 --> 00:09:54,480
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.

97
00:09:55,820 --> 00:10:10,620
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.

98
00:10:10,620 --> 00:10:27,480
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.

99
00:10:27,480 --> 00:10:45,480
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.

100
00:10:45,480 --> 00:10:47,759
Ese, pues tiene ahí

101
00:10:47,759 --> 00:10:49,820
Varias opciones, como que sea interactuable

102
00:10:49,820 --> 00:10:51,419
O sea, que funcione, ¿no?

103
00:10:51,419 --> 00:10:53,059
Que no se quede deshabilitado

104
00:10:53,059 --> 00:10:54,960
Tiene

105
00:10:54,960 --> 00:10:57,379
Bueno, aquí, esto es para

106
00:10:57,379 --> 00:10:59,460
Controlar el que pasas por encima

107
00:10:59,460 --> 00:11:01,139
El que cambia de color, el hover

108
00:11:01,139 --> 00:11:03,320
Cuando está presionado, cuando

109
00:11:03,320 --> 00:11:05,659
¿Vale? Diferentes efectos

110
00:11:05,659 --> 00:11:07,820
Incluso podríamos coger y meter

111
00:11:07,820 --> 00:11:08,740
Diferentes

112
00:11:08,740 --> 00:11:11,279
Pues eso, el spray swap

113
00:11:11,279 --> 00:11:13,399
Meter animaciones, bueno

114
00:11:13,399 --> 00:11:15,460
Todo eso lo veremos, ¿vale? Ahora mismo

115
00:11:15,460 --> 00:11:22,220
me da un poco lo mismo y tengo el onclick que es donde vamos a asociar esa función que vamos

116
00:11:22,220 --> 00:11:34,740
a programar desde césar vale en este caso pues vamos a meter un vamos a cambiar la forma del

117
00:11:34,740 --> 00:11:45,559
botón y vamos a meter un emoticono por ejemplo entonces en lo que busco uno voy a parar la

118
00:11:45,559 --> 00:11:55,700
grabación vale entonces yo lo que quiero ahora es meter una imagen dentro del botón

119
00:11:56,879 --> 00:12:08,149
el texto recordar que si lo que quisiera es por ejemplo poner aquí pulsar vale iría igual que

120
00:12:08,149 --> 00:12:19,169
antes marcaría el best fit le pondría aquí el tamaño otra vez 200 vale y así le lo adecuó al

121
00:12:19,169 --> 00:12:27,289
tamaño que le he puesto a ese botón vale entonces tendríamos el púlsame vale yo le doy al play para

122
00:12:27,289 --> 00:12:33,690
ver cómo quedaría quedaría así vale y podría pulsar el botón ahora mismo no hace nada porque

123
00:12:33,690 --> 00:12:41,409
no le hemos asociado ninguna función vale yo lo que quiero ahora es meterle una imagen entonces

124
00:12:41,409 --> 00:12:46,529
como quiero meterle una imagen esta parte del texto ya no me hace falta así que la puedo coger

125
00:12:46,529 --> 00:12:54,629
y la puedo borrar tranquilamente yo sigo teniendo el botón sin texto pero sigue respondiendo al

126
00:12:54,629 --> 00:13:02,409
hacer el clic vale y lo que quiero meter ahora es un es una imagen entonces me tengo que acordar de

127
00:13:02,409 --> 00:13:13,610
que tengo el source image vale vamos a crearnos una carpeta que es image y dentro de image vamos

128
00:13:13,610 --> 00:13:26,500
a meter una imagen que en este caso va a ser la de esta que me he descargado. Meto esta

129
00:13:26,500 --> 00:13:31,919
y esta. Lo primero que tengo que hacer cuando meto una imagen, esta es un JPG, es convertirla

130
00:13:31,919 --> 00:13:38,440
a sprite. Como os decía Unity puede trabajar con cualquier formato pero por ahora nosotros

131
00:13:38,440 --> 00:13:43,860
lo que vamos a hacer es convertirlos a sprite. Entonces selecciono la imagen, me va a salir

132
00:13:43,860 --> 00:13:50,500
esta información en la ventana inspector que es muy interesante por el tema de optimizarlo

133
00:13:50,500 --> 00:13:56,679
para diferentes plataformas, el tipo de textura que queremos, si queremos que se repita o

134
00:13:56,679 --> 00:14:03,840
no. Entonces aquí hay opciones que son interesantes y las iremos viendo. Según vayamos necesitando

135
00:14:03,840 --> 00:14:09,360
yo las voy a ir diciendo. ¿Qué es lo que tengo que hacer básicamente con una imagen

136
00:14:09,360 --> 00:14:14,480
de estas es en el tipo de textura en la primera opción le tengo que decir que lo que quiero es

137
00:14:14,480 --> 00:14:22,019
trabajar con un spray 2d y uy vale esto me va a convertir esta imagen cuando le dais a aplicar

138
00:14:22,019 --> 00:14:32,139
en un spray sé que lo ha convertido por qué me sale este círculo con este triángulo negro vale

139
00:14:32,139 --> 00:14:38,360
que si lo desplegamos pues en este caso sólo vais a ver la misma imagen si lo hubiera puesto como

140
00:14:39,360 --> 00:14:46,500
en vez de single lo hubiera puesto como múltiple pues aparecerían aquí diferentes imágenes bueno

141
00:14:46,500 --> 00:14:52,379
ya tengo mi spray vuelvo a seleccionar el botón y ahora en el source image lo que voy a hacer es

142
00:14:52,379 --> 00:15:00,299
meter ese spray entonces yo ahora tengo esa imagen en el botón voy a meter esa imagen si la hubiera

143
00:15:00,299 --> 00:15:05,360
bajado en vez de con esto en blanco con el fondo en blanco le hubiera puesto transparente pues

144
00:15:05,360 --> 00:15:09,500
hubiera quedado mejor vale pero para hacer el vídeo pues pues bueno pues éste

145
00:15:09,500 --> 00:15:14,139
me vale qué más cosillas vale esto me lo ha

146
00:15:14,139 --> 00:15:21,500
deformado entonces aquí lo suyo es poner ese botón

147
00:15:21,919 --> 00:15:28,080
en ancho y en alto el mismo tamaño pues por ejemplo si son 215

148
00:15:28,080 --> 00:15:35,080
aquí pues que sean 215 vale hacerlo cuadrado y unity le gusta trabajar con

149
00:15:35,080 --> 00:15:52,779
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.

150
00:15:52,779 --> 00:16:02,159
Esto hace que la imagen se ajuste a su aspecto, aunque tenga que dejar espacios del tamaño del botón sin rellenar.

151
00:16:02,519 --> 00:16:09,200
Que luego recordad que se puede poner que esa imagen se repita o cosas así y entonces sí que lo rellena todo.

152
00:16:10,440 --> 00:16:13,759
Otra cosa importante es el tema del color cuando meto una imagen.

153
00:16:13,940 --> 00:16:21,960
Ahora está en blanco y por eso me lo coge bien, pero fijaros que si yo modifico el color, me lo va modificando todo.

154
00:16:21,960 --> 00:16:27,679
¿Vale? Eso es porque este color lo va multiplicando píxel a píxel por el de la imagen

155
00:16:27,679 --> 00:16:31,220
¿Vale? Entonces hay que tener cuidado y poner el neutro que es el blanco

156
00:16:31,220 --> 00:16:35,360
¿Vale? Y ya tendría mi botón con una imagen

157
00:16:35,360 --> 00:16:38,100
¿Vale? O con el texto como os he dicho antes

158
00:16:38,100 --> 00:16:41,759
En este caso he borrado el texto, he dejado solo la imagen