1
00:00:06,639 --> 00:00:12,740
Vamos a desarrollar algunos de los elementos básicos que se usan en el User Interface y sobre todo para ver las posibilidades que ofrecen.

2
00:00:13,039 --> 00:00:18,300
Voy a tomar uno de los ejercicios que hemos hecho en clase, que no es más que un juego bastante sencillito,

3
00:00:19,480 --> 00:00:25,320
en el que básicamente tenemos que mover un tablero hasta introducirlo por un agujero, utilizando para ello físicas.

4
00:00:25,320 --> 00:00:33,439
En fin, el juego es lo de menos. Lo que quiero ahora es que veamos, por ejemplo, cómo podemos utilizar las imágenes dentro de nuestro User Interface

5
00:00:33,439 --> 00:00:37,820
para, por ejemplo, poner el número de vidas que tenemos en nuestro juego

6
00:00:37,820 --> 00:00:40,380
y a medida que la pelota va cayendo al vacío

7
00:00:40,380 --> 00:00:43,960
se van reduciendo hasta que llega a cero y nos morimos.

8
00:00:44,060 --> 00:00:47,659
Para ello vamos a usar uno de los elementos básicos del User Interface

9
00:00:47,659 --> 00:00:49,380
que son las imágenes.

10
00:00:50,259 --> 00:00:52,240
Si nos vamos aquí al menú de GameObject

11
00:00:52,240 --> 00:00:55,939
encontraremos, como hemos visto anteriormente, el apartado de UI

12
00:00:55,939 --> 00:00:58,079
y entre ellos, por supuesto, está la imagen.

13
00:01:05,500 --> 00:01:09,819
Vemos que nos ha creado un canvas y nos ha creado una imagen de prueba.

14
00:01:09,819 --> 00:01:12,420
Lo que se llama un placeholder. Lo ha puesto aquí.

15
00:01:12,780 --> 00:01:15,260
Si nosotros, lógicamente, queremos cambiar eso por un sprite,

16
00:01:15,480 --> 00:01:18,260
pues lo haremos aquí en el inspector, seleccionando nuestra imagen.

17
00:01:19,500 --> 00:01:22,959
Y si nos vamos al inspector, veremos que uno de sus atributos, por supuesto,

18
00:01:23,159 --> 00:01:25,420
es la imagen de origen, es decir, la imagen que está usando.

19
00:01:25,939 --> 00:01:27,099
Y tiene que ser un sprite.

20
00:01:27,359 --> 00:01:31,700
Antes de seguir, voy a comentar algo que no hemos visto y que veremos más adelante

21
00:01:31,700 --> 00:01:35,700
cuando hablemos de los juegos en 2D, que es el concepto de sprite.

22
00:01:35,700 --> 00:01:45,819
Si introducimos una imagen en Unity, por defecto él las va a considerar texturas, pero lo que queremos para un User Interface no es una textura, es una imagen, o lo que él llama Sprites.

23
00:01:46,120 --> 00:01:55,879
Pues bien, aprenderemos, insisto, cuando veamos sobre todo 2D, que es mucho más eficiente trabajar con una sola imagen que con muchas imágenes, aunque esa imagen sola contenga todas las imágenes.

24
00:01:56,000 --> 00:02:00,920
Es como los mapas UV cuando estamos texturizando un objeto, que metemos todas las texturas en una imagen.

25
00:02:00,920 --> 00:02:05,599
Por eso vamos a introducir el concepto de hoja de Sprites, aunque insisto, esto es adelantarnos un poco al 2D.

26
00:02:05,700 --> 00:02:13,400
Yo he creado una carpeta donde voy a traer mis sprites y en ella yo he incorporado un archivo, que es un png con fondo transparente, que es este de aquí.

27
00:02:13,759 --> 00:02:17,159
Donde, como podemos ver, se incorporan las tres imágenes que voy a usar.

28
00:02:17,259 --> 00:02:19,699
Cuando tengo tres vidas, cuando tengo dos y cuando tengo una.

29
00:02:20,400 --> 00:02:25,539
Pues bien, esa imagen al traerla a Unity, si nos fijamos, él la interpreta como textura.

30
00:02:25,979 --> 00:02:30,120
Antes de empezar a editarla, tenemos que decirle a Unity que no es una textura, que es un sprite.

31
00:02:30,259 --> 00:02:35,639
¿Cómo? Pues seleccionándola en nuestro proyecto y aquí en Texture Type.

32
00:02:35,699 --> 00:02:42,780
Decirle que es un elemento sprite, que es para 2D y para User Interface.

33
00:02:42,919 --> 00:02:46,620
Esto ya lo veremos más adelante, todo lo que significa lo que viene a continuación.

34
00:02:46,979 --> 00:02:54,159
Pero sí me interesa una cosa muy importante, que es decirle, no solo es un sprite, sino que es que además esta imagen contiene múltiples imágenes.

35
00:02:54,159 --> 00:03:00,300
Con lo cual, en el otro apartado que pone aquí, Sprite Mode, le tenemos que decir que esta imagen es múltiple.

36
00:03:01,659 --> 00:03:02,199
Ahí la tenemos.

37
00:03:02,599 --> 00:03:05,599
Y antes de salir, tenemos que aplicar estos cambios.

38
00:03:05,699 --> 00:03:13,960
Si nos vamos aquí al scroll hacia abajo, veremos que nos permite aplicar los cambios y efectivamente vemos que ya interpreta el fondo transparente y la apariencia ha cambiado.

39
00:03:14,780 --> 00:03:20,560
Vale, lo único que ahora tenemos que editar es Sprite para que él entienda que aquí hay tres imágenes, no solo una.

40
00:03:20,560 --> 00:03:24,780
Pues bien, eso se hace aquí con el botón que pone Sprite Editor.

41
00:03:24,780 --> 00:03:47,879
Si nos sale un aviso diciendo que no puede editarlo porque necesita un paquete especial para editarlo, que sepamos que tenemos que ir a la ventana del gestor de paquetes, que es Window Package Manager, y allí en el registro de Unity, es decir, donde se guardan los paquetes que Unity tiene disponibles para descarga, tendremos que buscar el paquete que se conoce como 2D Sprite.

42
00:03:47,879 --> 00:03:50,340
Pues bien, yo ya lo tengo instalado en mi proyecto

43
00:03:50,340 --> 00:03:52,639
Lo puedo ver porque aquí me aparece Remove

44
00:03:52,639 --> 00:03:54,699
Si no lo tenemos instalado nos aparecerá Install

45
00:03:54,699 --> 00:03:58,620
Lo instalamos y a partir de ese momento sí que podemos editar los sprites

46
00:03:58,620 --> 00:04:01,719
Y por eso yo al darle al botón de Sprite Editor

47
00:04:01,719 --> 00:04:04,860
Efectivamente se aparece el editor de sprites

48
00:04:04,860 --> 00:04:07,020
No me voy a detener mucho en esta herramienta

49
00:04:07,020 --> 00:04:08,120
Primero porque es muy intuitiva

50
00:04:08,120 --> 00:04:11,500
Y segundo porque la veremos más adelante cuando hagamos juegos en 2D

51
00:04:11,500 --> 00:04:14,800
Donde sí que manejaremos hojas de sprites más complejas

52
00:04:14,800 --> 00:04:21,699
pero vamos, básicamente que sepamos que aquí tenemos la opción que nos permite recortar esta imagen y convertirla en varias

53
00:04:21,699 --> 00:04:28,180
si aparece desactivada asegurémonos que tenemos seleccionada la opción de múltiple para nuestro sprite

54
00:04:28,180 --> 00:04:32,339
y al desplegarlo veremos que nos permite varias formas para recortar la imagen

55
00:04:32,339 --> 00:04:36,720
automática la veremos más adelante en la que él mismo detecta que zonas hay transparentes

56
00:04:36,720 --> 00:04:39,800
y en ese sentido crea los recortes en base a ellos

57
00:04:40,220 --> 00:04:44,720
También, en caso de que yo, por ejemplo, mi imagen sea una imagen, vamos a suponer, de 100x100

58
00:04:44,720 --> 00:04:49,759
y tengo 10 imágenes de ancho y 10 imágenes de alto,

59
00:04:49,920 --> 00:04:52,240
pues sé perfectamente que cada celda ocupa 10x10.

60
00:04:52,680 --> 00:04:53,560
Entonces se lo podría decir.

61
00:04:53,759 --> 00:04:57,019
Decir, pues recórtame por tamaño de celda.

62
00:04:57,259 --> 00:04:58,579
En mi caso no voy a hacer cálculos.

63
00:04:58,720 --> 00:05:00,160
Podría hacer cálculos, pero no lo necesito.

64
00:05:00,240 --> 00:05:00,459
¿Por qué?

65
00:05:00,660 --> 00:05:04,560
Porque, y esto es muy habitual, mi imagen se compone de tres imágenes.

66
00:05:05,319 --> 00:05:07,680
Una, dos y tres.

67
00:05:07,680 --> 00:05:11,759
Es decir, que tiene una columna y tres filas.

68
00:05:11,899 --> 00:05:20,620
Puedo decir que el modo de recortar que sea por número de columnas, aquí en la C, y número de filas, que en mi caso es tres filas.

69
00:05:20,879 --> 00:05:31,519
El offset y el padding y demás lo veremos más adelante, pero sí que me gusta adelantar el concepto del punto de pivote porque veremos que es muy importante decirle cuál va a ser el punto de pivote de nuestra imagen.

70
00:05:31,519 --> 00:05:35,480
en este caso no me importa demasiado pero si descubriremos que por ejemplo cuando recortamos

71
00:05:35,480 --> 00:05:40,300
hoja de sprites de personajes si es muy importante decirle cuál es su punto de pivote y una vez que

72
00:05:40,300 --> 00:05:47,750
ya lo hemos elegido le damos slice y veremos que efectivamente nos lo ha partido en tres imágenes

73
00:05:47,750 --> 00:05:55,189
una dos y tres una vez que ya hemos recortado nuestra hoja de sprites nos venimos aquí a aplicar

74
00:05:55,189 --> 00:06:03,589
y cerramos esta ventana y si nos fijamos ahora en el proyecto esa imagen se ha convertido en

75
00:06:03,589 --> 00:06:08,389
realidad efectivamente en tres imágenes independientes esta está y está ahora ya

76
00:06:08,389 --> 00:06:16,970
puedo si incorporarlas efectivamente si le digo la imagen que tiene que utilizar es una de estas

77
00:06:16,970 --> 00:06:25,029
pues efectivamente lo vemos ahí ahora lógicamente está deformada porque le había puesto el tamaño

78
00:06:25,029 --> 00:06:28,829
el tamaño del placeholder, de 100%.

79
00:06:28,829 --> 00:06:31,689
Si yo me sé los tamaños de mi imagen, pues se lo podría poner,

80
00:06:31,810 --> 00:06:33,370
pero vamos, es más rápido decirle aquí abajo

81
00:06:33,370 --> 00:06:39,250
que set native size, es decir, vuelve a su tamaño original.