1
00:00:06,960 --> 00:00:18,420
Ahora que ya sabemos cómo controlar las escenas mediante código, pues vamos a adentrarnos por fin en el User Interface y veremos los elementos básicos de interacción.

2
00:00:18,420 --> 00:00:25,699
Lo primero que tenemos que saber es que todos los elementos del User Interface se circunscriben en un canvas, que es un lienzo, literalmente.

3
00:00:25,960 --> 00:00:33,420
Aunque cada vez que nosotros añadimos un nuevo elemento del User Interface, aquí en GameObject, User Interface, se va a crear por defecto un canvas.

4
00:00:33,420 --> 00:00:37,219
Pero yo lo voy a crear desde cero. Aquí abajo tenemos crear un canvas.

5
00:00:43,829 --> 00:00:52,390
Es un elemento que en principio parece invisible, pero que es donde se van a meter todos nuestros elementos del User Interface.

6
00:00:52,729 --> 00:00:56,530
Y de hecho, me voy a detener un momentito en los componentes del canvas.

7
00:00:56,789 --> 00:01:04,530
Para empezar, cómo se distribuye ese canvas dentro del espacio, la opción que viene por defecto es Screen Space Overlay.

8
00:01:04,530 --> 00:01:09,189
Que básicamente es, ocupa todo lo que se vea en pantalla.

9
00:01:09,209 --> 00:01:14,189
va a estar siempre encima de todo lo que vemos si queremos ya ajustar el cómo se

10
00:01:14,189 --> 00:01:19,109
ve con respecto a una cámara tenemos la screen space cámara que entonces nos

11
00:01:19,109 --> 00:01:24,670
pide que le demos a qué cámara queremos que se superponga de forma que le

12
00:01:24,670 --> 00:01:29,269
tenemos que arrastrar una cámara y ahora si veremos que esta cámara que

13
00:01:29,269 --> 00:01:35,489
está aquí ahí está mi cámara y si nos fijamos el canvas

14
00:01:35,489 --> 00:01:42,629
circunscribe a la cámara de hecho si me voy a las opciones aquí tenemos una

15
00:01:42,629 --> 00:01:48,629
opción que es a qué distancia se coloca el plano con respecto a la cámara y

16
00:01:48,629 --> 00:01:53,370
veremos que si la desplegamos pues se pondrá más cerca o más lejos

17
00:01:53,370 --> 00:01:58,709
esto nos viene muy bien cuando cuando queremos crear efectos de perspectiva

18
00:01:58,709 --> 00:02:02,430
con nuestro user interface es decir el user interface o el canvas se pondrá en

19
00:02:02,430 --> 00:02:07,689
en la línea de visión de la cámara, pero sus elementos se distribuirán en forma de perspectiva.

20
00:02:08,050 --> 00:02:10,889
Y tenemos una última opción que es el World Space,

21
00:02:11,389 --> 00:02:15,330
que realmente sirve para poner un User Interface como si fuese un GameObjectMatch.

22
00:02:15,330 --> 00:02:20,310
Si lo distribuimos, si lo colocamos, si lo rotamos y si pasamos con un personaje al lado de él,

23
00:02:20,389 --> 00:02:25,469
pues lo verá como si fuese un panel que hay allí más.

24
00:02:25,870 --> 00:02:32,189
Y muy importante es el Canvas Scaler, que significa los elementos que ponemos dentro de nuestro Canvas

25
00:02:32,189 --> 00:02:35,050
¿qué ocurre si nuestra pantalla cambia de tamaño?

26
00:02:35,349 --> 00:02:37,330
Entonces le podemos decir que no se escalen.

27
00:02:37,569 --> 00:02:41,349
Si yo pongo una imagen de 100% se quedará igual de tamaño

28
00:02:41,349 --> 00:02:44,270
que significa que si hago pantalla grande la imagen se quedará pequeña.

29
00:02:45,270 --> 00:02:48,849
A veces eso no nos interesa y nos interesa que se escale con la pantalla.

30
00:02:48,990 --> 00:02:52,689
De forma que cuando yo paso de pantalla pequeña a pantalla grande

31
00:02:52,689 --> 00:02:55,689
pues ese elemento se escale con ella.

32
00:03:06,120 --> 00:03:08,419
Y tenemos una tercera opción que esto es un poco más delicado

33
00:03:08,419 --> 00:03:12,800
que es en vez de utilizar el tamaño de los píxeles para determinar qué tamaño

34
00:03:12,800 --> 00:03:18,919
tiene la los elementos pues que utilice conceptos como las resoluciones entonces

35
00:03:18,919 --> 00:03:22,280
ya entramos en púxeles píxeles por pulgada puntos para los textos en fin

36
00:03:22,280 --> 00:03:26,000
pero bueno es un poco más delicado hablar de ello bien pues empecemos a

37
00:03:26,000 --> 00:03:30,080
añadir elementos a nuestro canvas el elemento más básico que hay por supuesto

38
00:03:30,080 --> 00:03:46,810
es el texto vemos aquí que se ha añadido ese texto y nosotros una vez que estamos

39
00:03:46,810 --> 00:03:54,789
ahí pues lo podemos desplazar pero recomiendo normalmente utilizar el método rectul que es

40
00:03:54,789 --> 00:04:03,569
para escalar elementos en 2d si nos fijamos ese es el texto pero está circunscrito a una caja que

41
00:04:03,569 --> 00:04:11,310
es la que el contenedor de ese texto que de hecho lo podemos modificar aquí es decir fijos porque

42
00:04:11,310 --> 00:04:15,849
realmente lo que es el tamaño del texto viene determinado por el tamaño de su

43
00:04:15,849 --> 00:04:19,750
fuente que lo tenemos aquí abajo y en donde tenemos todas las opciones del

44
00:04:19,750 --> 00:04:23,910
fuente de la fuente que son pueden ser las tipografías podemos cargar

45
00:04:23,910 --> 00:04:36,180
tipografías en nuestro proyecto si la queremos negrita en tamaño el espaciado

46
00:04:36,180 --> 00:04:39,899
entre líneas si queremos que sea un texto enriquecido esto es muy

47
00:04:39,899 --> 00:04:44,420
interesante porque eso nos permitirá luego mediante código añadir negrita o

48
00:04:44,420 --> 00:04:48,480
o cursivas o incluso colores a través del texto enriquecido.

49
00:04:48,639 --> 00:04:53,399
Cómo funciona el párrafo, qué hacer cuando el texto se sale del párrafo,

50
00:04:53,920 --> 00:04:56,560
es decir, si ese texto se sale del párrafo, ¿qué hago con ello?

51
00:04:57,199 --> 00:05:02,379
Pues lo puedo truncar o overflow, que entonces si le ponemos un overflow se sale de él,

52
00:05:02,839 --> 00:05:09,259
o darle best fit y entonces el texto se ajustará siempre al tamaño de la caja.

53
00:05:09,259 --> 00:05:13,060
Por supuesto el color o darle un material si queremos.

54
00:05:13,060 --> 00:05:17,920
no hace falta que lo diga pero todos estos parámetros los podemos modificar por código

55
00:05:17,920 --> 00:05:19,519
luego veremos alguno muy sencillito

56
00:05:19,519 --> 00:05:23,319
y es un buen momento para recordar lo que vimos

57
00:05:23,319 --> 00:05:24,740
voy a seleccionar un momentito el canvas

58
00:05:24,740 --> 00:05:28,079
y recordamos lo que habíamos dicho aquí en el canvas scaler

59
00:05:28,079 --> 00:05:32,319
que le hemos dicho que el tamaño de píxeles sea constante

60
00:05:32,319 --> 00:05:35,120
es decir que si ese texto ocupa x píxeles

61
00:05:35,120 --> 00:05:41,639
y yo de repente maximizo la pantalla de juego

62
00:05:41,639 --> 00:05:44,060
vemos que de repente ese texto es muy pequeño

63
00:05:44,060 --> 00:05:47,439
y si hago la pantalla muy pequeña

64
00:05:47,439 --> 00:05:50,779
ese texto es enorme, es más, se sale

65
00:05:50,779 --> 00:05:54,259
esto pensemos en un juego en el que vamos a dar la opción

66
00:05:54,259 --> 00:05:56,680
al jugador de redimensionar la pantalla

67
00:05:56,680 --> 00:05:59,519
en ese caso no nos interesa que de repente el texto

68
00:05:59,519 --> 00:06:02,220
cambie de posición o de tamaño

69
00:06:02,220 --> 00:06:05,939
en ese caso podemos decirle que

70
00:06:05,939 --> 00:06:11,339
el Canvas Scaler se escale con la pantalla del juego

71
00:06:11,339 --> 00:06:22,139
De forma que ahora mismo este texto está con este tamaño, pero si yo escalo la pantalla, veremos que se seguirá viendo al mismo tamaño relativo.

72
00:06:24,439 --> 00:06:29,240
Y eso con todos los elementos, no solo con el texto, sino con imágenes o con cualquier otro elemento que hayamos metido en nuestro canvas.

73
00:06:30,500 --> 00:06:37,160
Bien, y antes de seguir vamos a ver otro de los elementos básicos, que es cómo se ubica dentro de ese lienzo.

74
00:06:37,920 --> 00:06:42,319
Tenemos aquí un iconito, un gizmo, que indica nuestro punto de anclaje. ¿Por qué?

75
00:06:43,120 --> 00:06:49,439
Porque la posición que nosotros le hemos dado a ese elemento es siempre relativa a ese punto de anclaje.

76
00:06:49,540 --> 00:06:52,800
Es decir, que si yo ese texto, que por cierto lo voy a poner en centrado,

77
00:06:52,920 --> 00:06:59,199
si yo le digo que su posición va a ser en 0 en X y 0 en Y, en Z, ahora mismo no me interesa moverlo,

78
00:06:59,199 --> 00:07:03,800
esa posición 0, 0, 0 es relativa a ese punto de anclaje.

79
00:07:04,339 --> 00:07:11,800
Ahora, ¿y si yo quiero que este texto siempre esté en relación a la esquina superior izquierda?

80
00:07:11,800 --> 00:07:24,699
Pues bien, para eso tenemos esta herramienta que si pinchamos en esta ventanita se nos abrirán los presets de anclaje donde le podemos decir cómo queremos que se oriente tanto en la vertical como en la horizontal.

81
00:07:25,379 --> 00:07:32,540
Y entonces le puedo decir, pues mira, este texto quiero que esté siempre con relación a la esquina superior izquierda.

82
00:07:32,540 --> 00:07:41,579
De forma que si yo ahora mismo le digo que la posición es 0, 0, 0, veremos que efectivamente se pone con relación a esa esquina.

83
00:07:47,600 --> 00:07:53,720
Entonces, si yo le digo que siempre esté, pues a lo mejor, moviéndose a 100 de distancia de X y a menos 50 de Y,

84
00:07:55,639 --> 00:07:57,560
pues entonces este texto siempre va a estar ahí.

85
00:07:57,779 --> 00:08:03,300
En este caso sí lo voy a orientar a la izquierda, de forma que en este texto hará...

86
00:08:03,300 --> 00:08:05,600
Hola mundo, ¿qué tal?

87
00:08:05,920 --> 00:08:07,079
Le voy a quitar el best fit.

88
00:08:07,620 --> 00:08:09,360
Lo podemos mover y lo podemos desplazar.

89
00:08:10,980 --> 00:08:14,399
Pinchando en el centro del punto de anclaje podemos desplazarlo y ponerlo donde queramos.

90
00:08:14,399 --> 00:08:19,779
y ahora que tengo el punto de anclaje en un sitio a medida

91
00:08:19,779 --> 00:08:26,639
puedo incluso cambiar a modo de control de pivot

92
00:08:26,639 --> 00:08:28,660
también punto de pivoteo del texto

93
00:08:28,660 --> 00:08:32,340
llevarlo a mi posición superior izquierda

94
00:08:32,340 --> 00:08:35,559
y eso significa que ahora mismo mi texto

95
00:08:35,559 --> 00:08:38,539
si está en la posición 0 en X y 0 en Y

96
00:08:38,539 --> 00:08:42,100
pues efectivamente siempre va a estar arriba a la izquierda