1
00:00:06,900 --> 00:00:13,980
Con este empezamos una pequeña serie de vídeos en las que vamos a tratar la herramienta de animación de Unity.

2
00:00:14,500 --> 00:00:19,699
Pero antes empezaremos a hablar de lo que es el Unity 2D para luego hablar de los sprites,

3
00:00:19,859 --> 00:00:25,539
que son la herramienta básica con la que trabajamos cuando hacemos un proyecto o un videojuego en dos dimensiones.

4
00:00:25,960 --> 00:00:31,460
Antes que nada nos habremos fijado que cuando creamos un nuevo proyecto en Unity nos pregunta cómo lo queremos

5
00:00:31,460 --> 00:00:34,560
y las diferencias básicas son si la queremos en 2D o en 3D.

6
00:00:34,560 --> 00:00:40,000
como luego explicaré las diferencias son mínimas y de hecho para este ejemplo

7
00:00:40,000 --> 00:00:43,479
y ya que luego en las animaciones vamos a crear animaciones con objetos 3D

8
00:00:43,479 --> 00:00:47,079
vamos a crear un proyecto en tres dimensiones

9
00:00:47,079 --> 00:00:49,960
¿Qué determina que elijamos una u otra opción?

10
00:00:50,200 --> 00:00:53,939
Pues básicamente tal como nos dice la documentación de Unity es

11
00:00:53,939 --> 00:00:56,939
si vamos a hacer un juego en 3D obviamente es un proyecto en 3D

12
00:00:56,939 --> 00:01:00,520
incluso cuando vamos a hacer un juego con vista ortográfica

13
00:01:00,520 --> 00:01:04,099
pero incluso cuando vamos a hacer un juego en 2D por ejemplo de plataformas

14
00:01:04,099 --> 00:01:08,920
pero con un entorno en tres dimensiones también tenemos que trabajar en un proyecto 3D.

15
00:01:09,560 --> 00:01:10,719
¿Y cuándo trabajamos en 2D?

16
00:01:10,920 --> 00:01:16,180
Pues principalmente cuando hacemos un proyecto, un videojuego, de dos dimensiones, no hay duda alguna,

17
00:01:16,980 --> 00:01:22,159
pero también cuando trabajamos en un proyecto en dos dimensiones en las que utilizamos las capas

18
00:01:22,159 --> 00:01:24,519
o la distancia a la cámara para crear profundidad.

19
00:01:25,260 --> 00:01:30,799
Ya sea utilizando una cámara ortográfica o ya sea utilizando una cámara en perspectiva,

20
00:01:30,799 --> 00:01:33,480
que sí que genera una perspectiva real.

21
00:01:34,099 --> 00:01:37,780
Pero bueno, eso lo iremos viendo a medida que avancen los vídeos y el curso.

22
00:01:38,340 --> 00:01:42,780
En cualquier caso, y ya que tengo aquí mi proyecto abierto, que sepamos que en el menú de Edit, en Project Settings,

23
00:01:43,200 --> 00:01:47,019
si nos vamos a la opción de Editor, veremos que aquí tenemos una opción que nos dice

24
00:01:47,019 --> 00:01:50,540
comportamiento básico o comportamiento por defecto está en tres dimensiones.

25
00:01:50,560 --> 00:01:52,920
Y aquí lo podemos cambiar a dos dimensiones si quisiésemos.

26
00:01:52,920 --> 00:01:57,420
¿En qué afecta? Que cuando importamos una imagen, por ejemplo, la interpreta automáticamente como un sprite si estamos en 2D

27
00:01:57,420 --> 00:02:01,219
o que nos restringe ciertos movimientos para evitar que si estamos haciendo un proyecto en 2D,

28
00:02:01,219 --> 00:02:03,739
pues nos movamos en el eje Z o rotemos en el eje

29
00:02:03,739 --> 00:02:05,840
también es bueno recordar que siempre podemos aquí

30
00:02:05,840 --> 00:02:07,879
cambiar a una visión en 2D

31
00:02:07,879 --> 00:02:09,800
de nuestra escena y en ese momento como podéis ver

32
00:02:09,800 --> 00:02:11,759
vemos nuestra escena como si fuese un juego

33
00:02:11,759 --> 00:02:14,199
2D, aunque yo haya abierto un proyecto en 3 dimensiones

34
00:02:14,199 --> 00:02:15,939
puedo hacer un juego en 2 dimensiones

35
00:02:15,939 --> 00:02:17,719
y ponerlo como en todo momento en 2 dimensiones

36
00:02:17,719 --> 00:02:19,939
igual que también es bueno recordar que la visión que tenemos

37
00:02:19,939 --> 00:02:22,000
en nuestra escena está en perspectiva pero la podemos cambiar en cualquier momento

38
00:02:22,000 --> 00:02:23,960
pinchando ahí, entonces lo veremos en ortográfica

39
00:02:23,960 --> 00:02:26,199
para ver un objeto o un juego en ortográfica

40
00:02:26,199 --> 00:02:27,879
o cuando pinchamos en la cámara

41
00:02:27,879 --> 00:02:30,060
si seleccionamos nuestra cámara siempre tenéis

42
00:02:30,060 --> 00:02:34,539
la opción aquí de cómo va a ver la cámara los objetos de la escena. Por defecto está

43
00:02:34,539 --> 00:02:39,099
en perspectiva, pero si la ponéis en ortográfica, pues automáticamente nuestra cámara verá

44
00:02:39,099 --> 00:02:42,560
igual los objetos que están en primer plano que los que están al mismo tamaño. Para

45
00:02:42,560 --> 00:02:45,520
hacer, por ejemplo, lo que hemos dicho antes, un juego 2D en la que usamos la distancia

46
00:02:45,520 --> 00:02:48,360
no para crear perspectiva, sino para poner unos objetos delante de otro.

47
00:02:48,699 --> 00:02:52,620
Bien, después de esta pequeña introducción al mundo del 2D en Unity, vamos a entrarnos

48
00:02:52,620 --> 00:02:56,139
en el mundo de los sprites, que es la herramienta básica cuando trabajamos en dos dimensiones

49
00:02:56,139 --> 00:02:59,259
en Unity. Realmente, en nuestro proyecto, en cualquier momento, podemos ir al menú

50
00:02:59,259 --> 00:03:01,379
de GameObject y decirle que

51
00:03:01,379 --> 00:03:03,379
inserte un GameObject de tipo dos dimensiones

52
00:03:03,379 --> 00:03:05,400
y ahí lo tenemos, un sprite. Y lo podemos insertar

53
00:03:05,400 --> 00:03:07,460
y automáticamente veremos que efectivamente nos aparece

54
00:03:07,460 --> 00:03:09,400
aquí un nuevo sprite y al que

55
00:03:09,400 --> 00:03:11,319
está esperando que le añadamos una imagen.

56
00:03:11,479 --> 00:03:13,360
Aquí no tiene. Un paréntesis, si

57
00:03:13,360 --> 00:03:15,259
no tenemos la imagen todavía pero queremos trabajar con un

58
00:03:15,259 --> 00:03:17,139
sprite, tenemos la opción de usar

59
00:03:17,139 --> 00:03:19,319
los ayudantes que trae Unity por defecto.

60
00:03:19,719 --> 00:03:21,379
Como podemos ver, aunque no tengamos

61
00:03:21,379 --> 00:03:23,199
ninguna imagen cargada, podemos crear esta especie

62
00:03:23,199 --> 00:03:25,319
de placeholders que son elementos, por ejemplo

63
00:03:25,319 --> 00:03:27,020
un new sprite que nos permite

64
00:03:27,020 --> 00:03:29,139
hacer visible, como podemos ver aquí, el

65
00:03:29,139 --> 00:03:31,360
sprite en nuestro juego. Incluso podemos

66
00:03:31,360 --> 00:03:33,180
escalarlo. Otro paréntesis dentro del paréntesis,

67
00:03:33,340 --> 00:03:35,000
también es bueno recordar que en Unity

68
00:03:35,000 --> 00:03:37,319
tenemos una herramienta para escalar en dos

69
00:03:37,319 --> 00:03:39,360
dimensiones, que es esta de aquí, una herramienta súper útil

70
00:03:39,360 --> 00:03:41,340
para modificar elementos 2D, especialmente

71
00:03:41,340 --> 00:03:43,280
cuando estamos trabajando en un entorno 3D, que nos

72
00:03:43,280 --> 00:03:45,240
permite modificar nuestro elemento,

73
00:03:45,500 --> 00:03:47,060
escalarlo fácilmente.

74
00:03:47,259 --> 00:03:49,219
Si ya tenemos las imágenes y queremos ya

75
00:03:49,219 --> 00:03:51,199
trabajar con ellas, pues es absurdo crear un

76
00:03:51,199 --> 00:03:53,360
sprite, sino lo suyo es importar las imágenes y a partir

77
00:03:53,360 --> 00:03:55,219
de ahí ya construir nuestros sprites. Para este vídeo

78
00:03:55,219 --> 00:03:57,120
voy a utilizar los elementos que vienen en el

79
00:03:57,120 --> 00:04:00,099
Asset que podemos encontrar en el Asset Store de Lendless Runner, que lo tenéis aquí.

80
00:04:00,479 --> 00:04:04,039
Entonces, me he descargado, yo ya lo he adquirido, lo he importado en mi proyecto.

81
00:04:04,180 --> 00:04:06,039
De hecho, he importado la carpeta de arte, sin más.

82
00:04:06,159 --> 00:04:08,300
Pues como podemos ver, son imágenes en formato PNG.

83
00:04:08,840 --> 00:04:11,139
Lo primero de todo, cuando importamos una imagen en Unity,

84
00:04:11,620 --> 00:04:14,599
si estamos trabajando en un proyecto 3D, la importa como una textura.

85
00:04:14,599 --> 00:04:18,120
De hecho, si nos vamos aquí a sus propiedades, aparece como Texture Type, Default.

86
00:04:18,319 --> 00:04:21,319
Si hemos creado un proyecto 2D, veremos que automáticamente nos lo reconoce como Sprite.

87
00:04:21,420 --> 00:04:23,839
Lógicamente, un entorno 2D no tiene texturas como tal.

88
00:04:24,540 --> 00:04:26,860
Pero como estamos en un entorno 3D, sí que lo ha reconocido como textura.

89
00:04:26,860 --> 00:04:37,800
Así que lo primero que tenemos que hacer es decirle, por ejemplo, a esta imagen que no es una textura, que es, y ahí desplegamos, ahí nos aparece la opción de un sprite que se utiliza para 2D o para las herramientas de User Interface.

90
00:04:38,160 --> 00:04:41,660
Y una vez que lo hemos seleccionado, veremos que nos cambian las opciones. Vamos a verlas un poquito por encima.

91
00:04:42,120 --> 00:04:52,180
Primero, la más importante de todas, el Sprite Mode, significa si es una imagen única, por ejemplo, las que usamos para un HUD que cubre toda la pantalla, entonces es una imagen sin más, o si es una imagen múltiple.

92
00:04:52,759 --> 00:04:55,560
Y en ese caso sería una hoja de sprites que luego veremos cuando veamos las animaciones.

93
00:04:55,560 --> 00:04:58,279
más cosas, la resolución de esa imagen

94
00:04:58,279 --> 00:05:00,180
cuántos píxeles componen

95
00:05:00,180 --> 00:05:02,220
una unidad de Unity, por ejemplo si le decimos que 100 píxeles

96
00:05:02,220 --> 00:05:04,199
por unidad, significa que si importamos una imagen

97
00:05:04,199 --> 00:05:06,379
de 100 por 100 píxeles, pues tendrá de tamaño

98
00:05:06,379 --> 00:05:08,300
cuando la traigamos a nuestra escena, de una unidad

99
00:05:08,300 --> 00:05:10,100
por una unidad, y poco más

100
00:05:10,100 --> 00:05:12,120
aquí nos aparece el pivot

101
00:05:12,120 --> 00:05:13,240
o el punto de pivote

102
00:05:13,240 --> 00:05:15,959
o el ancla, que le podemos indicar

103
00:05:15,959 --> 00:05:18,040
donde está, si arriba, abajo, a la derecha

104
00:05:18,040 --> 00:05:20,199
en la esquina superior izquierda, veremos que si eso lo cambiamos

105
00:05:20,199 --> 00:05:21,839
a una hoja de sprites en modo múltiple

106
00:05:21,839 --> 00:05:24,259
ya no nos deja seleccionar el punto de pivote

107
00:05:24,259 --> 00:05:26,319
básicamente porque eso lo haremos en cada recorte

108
00:05:26,319 --> 00:05:28,240
de esa hoja de sprites. Bueno, nos permite algunas

109
00:05:28,240 --> 00:05:30,360
opciones avanzadas para interpretar la imagen que hemos

110
00:05:30,360 --> 00:05:32,319
importado, pero bueno, tampoco me voy a detener en ello, pero si hay algo

111
00:05:32,319 --> 00:05:34,399
que sí que me interesa, y es que abajo del todo

112
00:05:34,399 --> 00:05:36,379
en el inspector de esta imagen

113
00:05:36,379 --> 00:05:38,240
veremos cómo se va a comportar esa imagen

114
00:05:38,240 --> 00:05:39,959
cuando exportemos, cuando compilemos el proyecto

115
00:05:39,959 --> 00:05:42,519
eso es algo importante porque lógicamente no queremos que pesen demasiado

116
00:05:42,519 --> 00:05:44,459
entonces, dependiendo de

117
00:05:44,459 --> 00:05:46,220
cuánta resolución va a tener

118
00:05:46,220 --> 00:05:48,379
nuestro juego, cómo va a verse en una pantalla grande o pequeña

119
00:05:48,379 --> 00:05:50,139
o cuánto queremos que pese esta imagen

120
00:05:50,139 --> 00:05:52,379
pues aquí le podemos determinar qué tamaño máximo

121
00:05:52,379 --> 00:05:54,399
va a tener cuando lo compilemos, que obviamente lo podemos cambiar

122
00:05:54,399 --> 00:05:56,459
a los tamaños típicos, cuando ya lo tenemos le damos a aplicar

123
00:05:56,459 --> 00:05:58,480
una cosa muy importante es que esto que acabo

124
00:05:58,480 --> 00:06:00,120
de hacer yo, lo podemos hacer

125
00:06:00,120 --> 00:06:02,360
exclusivamente para diferentes plataformas

126
00:06:02,360 --> 00:06:04,319
según lo vayamos a compilar, es decir, yo he puesto

127
00:06:04,319 --> 00:06:06,199
unos parámetros por defecto para la exportación

128
00:06:06,199 --> 00:06:07,759
pero si quiero que en PC

129
00:06:07,759 --> 00:06:10,019
por ejemplo, trabaje a más resolución

130
00:06:10,019 --> 00:06:12,079
pues le doy aquí a Overwrite, entonces en PC

131
00:06:12,079 --> 00:06:13,579
Mac o Linux o equipos

132
00:06:13,579 --> 00:06:15,939
de sobremesa, pues puedo poner que ocupe más

133
00:06:15,939 --> 00:06:17,939
y lo mismo, le puedo decir que en Android

134
00:06:17,939 --> 00:06:19,920
ocupe menos, porque quiero que en Android

135
00:06:19,920 --> 00:06:22,120
no necesito tanta resolución en la imagen, entonces la reduzco

136
00:06:22,120 --> 00:06:25,360
el tamaño cuando tenga que exportarlo, para optimizar el tamaño final de nuestro proyecto.

137
00:06:25,699 --> 00:06:28,920
Pues bien, ese sprite que yo ya he creado, puedo traerlo tranquilamente a la escena y

138
00:06:28,920 --> 00:06:31,379
ocupa lo que le hayamos dicho nosotros que ocupe según los píxeles por mil.

139
00:06:31,399 --> 00:06:35,579
Lo que hemos visto hasta ahora nos permite traer imágenes e interpretarlas como sprites

140
00:06:35,579 --> 00:06:41,160
y meterlas en la escena, pero cualquier persona que ha trabajado en entornos 3D con texturas

141
00:06:41,160 --> 00:06:45,459
sabe que al nivel de rendimiento es mucho mejor para la máquina, en vez de trabajar

142
00:06:45,459 --> 00:06:49,879
con muchos archivos individuales, trabajar con un solo archivo

143
00:06:49,879 --> 00:06:54,639
que incluye todos los archivos, normalmente con fondo transparente

144
00:06:54,639 --> 00:06:58,220
y que luego el programa los trocea para interpretarlo cada uno

145
00:06:58,220 --> 00:07:00,199
como si fuese un archivo o una imagen independiente.

146
00:07:00,540 --> 00:07:03,439
Es lo que se llama las hojas de sprites y es lo que vamos a ver ahora mismo

147
00:07:03,439 --> 00:07:06,079
y lo que luego nos permitirá llevarlo a una animación.

148
00:07:06,279 --> 00:07:10,199
El material que yo he descargado del Asset Store incluye varias hojas de sprites

149
00:07:10,199 --> 00:07:12,620
como podemos ver, esta por ejemplo para crear una animación de personaje

150
00:07:12,620 --> 00:07:16,120
o incluso hojas de sprites que incluyen varias animaciones de varios objetos

151
00:07:16,120 --> 00:07:20,800
o incluso hojas de sprites que incluyen lo que serían props o elementos de nuestro escenario.

152
00:07:21,399 --> 00:07:23,000
Pues bien, vamos a recortarlo. Empezaré con esta.

153
00:07:23,680 --> 00:07:27,160
Si me voy al archivo de imagen y, como hemos dicho antes,

154
00:07:27,279 --> 00:07:31,160
lo primero que le tengo que decir es que lo interprete como una sprite

155
00:07:31,160 --> 00:07:35,920
y, en este caso, en vez de decirle en sprite mode, en vez de que sea unitario,

156
00:07:35,920 --> 00:07:38,000
es decir, una imagen independiente, que sea múltiple.

157
00:07:38,720 --> 00:07:42,360
Y a partir de ese momento podemos activar el sprite editor, porque lo tenemos aquí,

158
00:07:42,620 --> 00:07:49,279
Muy importante, para poder usar el Sprite Editor tenemos que instalar el paquete de edición de Sprites.

159
00:07:49,540 --> 00:08:01,600
Siempre que tenemos que instalar un paquete nuevo nos tenemos que ir a la ventana de Windows, Package Manager, el gestor de paquetes, busco el paquete 2D Sprite, lo instalo y ahora ya sí podemos pinchar en el Sprite Editor.

160
00:08:01,600 --> 00:08:04,920
aquí tenemos el editor de sprites

161
00:08:04,920 --> 00:08:06,680
que viene con Unity, que acabamos de instalar

162
00:08:06,680 --> 00:08:08,920
donde además con la rueda del ratón

163
00:08:08,920 --> 00:08:11,480
podemos acercarnos

164
00:08:11,480 --> 00:08:13,339
incluso con la tecla Alt

165
00:08:13,339 --> 00:08:15,300
podemos desplazarnos

166
00:08:15,300 --> 00:08:17,100
por nuestra hoja de sprites para verla con más detalle

167
00:08:17,100 --> 00:08:18,779
lo primero que tenemos que entender

168
00:08:18,779 --> 00:08:20,540
es que tenemos que recortar cada una de estas imágenes

169
00:08:20,540 --> 00:08:22,660
para que la interprete como una imagen independiente

170
00:08:22,660 --> 00:08:23,540
eso lo podemos hacer a mano

171
00:08:23,540 --> 00:08:25,439
es decir, yo puedo pinchar con el ratón

172
00:08:25,439 --> 00:08:26,339
arrastrar

173
00:08:26,339 --> 00:08:28,899
entonces vemos que ahí ha creado un recorte

174
00:08:28,899 --> 00:08:31,279
lógicamente esta forma de hacerlo es bastante poco precisa

175
00:08:31,279 --> 00:08:33,200
pero vamos, podría ir una tras otra

176
00:08:33,200 --> 00:08:35,559
seleccionando y como podemos ver

177
00:08:35,559 --> 00:08:37,639
pues va creando recortes en las zonas

178
00:08:37,639 --> 00:08:39,799
que yo quiero, luego incluso puedo pincharle

179
00:08:39,799 --> 00:08:41,399
y pinchando sobre los bordes pues hacerlo

180
00:08:41,399 --> 00:08:43,639
mucho más preciso, podemos incluso, hay una herramienta

181
00:08:43,639 --> 00:08:45,500
bastante útil, que es esta que tenemos

182
00:08:45,500 --> 00:08:47,440
arriba a la izquierda, que se llama Trim, que una vez

183
00:08:47,440 --> 00:08:49,600
que hemos creado una ventana o una imagen, un recorte

184
00:08:49,600 --> 00:08:51,299
de nuestro sprite, le podemos dar a Trim

185
00:08:51,299 --> 00:08:53,399
y entonces lo que hace es eliminar

186
00:08:53,399 --> 00:08:55,379
las zonas transparentes y ajustarse

187
00:08:55,379 --> 00:08:57,399
a lo opaco, pero vamos, incluso aunque falle, podemos ir

188
00:08:57,399 --> 00:08:59,120
nosotros a nivel de píxel y hacerlo a mano

189
00:08:59,120 --> 00:09:19,059
Bien, eso es una forma. Podemos hacer una a una todas, pero insisto, no es la más rápida. Hay otra que es, si nos vamos aquí arriba, en Slice, veremos que hay varios métodos para recortar las imágenes. Uno que nos puede valer para ahora es el automático. Es decir, que él busque automáticamente las zonas que son transparentes y automáticamente va generando recortes.

190
00:09:19,059 --> 00:09:20,840
antes de hacerlo os recomiendo

191
00:09:20,840 --> 00:09:23,659
decidir dónde queremos que sea nuestro punto de pivote

192
00:09:23,659 --> 00:09:24,600
luego lo podemos cambiar

193
00:09:24,600 --> 00:09:27,600
pero si ahora mismo decimos que nuestro punto de pivote

194
00:09:27,600 --> 00:09:29,879
en estos sprites va a estar abajo en el centro

195
00:09:29,879 --> 00:09:30,899
pues lo podemos indicar ahora ya

196
00:09:30,899 --> 00:09:32,259
y decirle no, quiero que esté abajo

197
00:09:32,259 --> 00:09:35,720
podemos decirle que automáticamente borre todo lo que he hecho hasta ahora

198
00:09:35,720 --> 00:09:37,460
que es lo que le voy a decir porque lo que he hecho hasta ahora no vale

199
00:09:37,460 --> 00:09:39,519
o podríamos incluso decirle no, interpreta

200
00:09:39,519 --> 00:09:41,460
si yo ya he hecho un recorte en una zona, tú no lo borres

201
00:09:41,460 --> 00:09:43,220
o directamente digo no, no borres nada de lo que he hecho

202
00:09:43,220 --> 00:09:45,019
pero bueno, le voy a decir que borre todo lo que he hecho hasta ahora

203
00:09:45,019 --> 00:09:47,320
y cuando le damos a slice, a recortar

204
00:09:47,320 --> 00:09:52,940
veremos que automáticamente él ha creado recortes en todas las zonas que él ha interpretado que son.

205
00:09:53,419 --> 00:09:55,320
Puede haber fallos, como podemos ver aquí no ha sido muy preciso,

206
00:09:57,139 --> 00:09:59,759
y entonces tenemos que nosotros ir ajustando a mano.

207
00:10:01,240 --> 00:10:05,600
Incluso el punto de pivote que nosotros hemos puesto aquí lo podemos desplazar

208
00:10:05,600 --> 00:10:09,779
en caso de que una hoja de recorte o un recorte en concreto queramos que el punto de pivote no esté ahí sino aquí.

209
00:10:10,399 --> 00:10:15,399
Y veremos que todo lo que yo he hecho ahora mismo se corresponde con esta ventana que se nos abre

210
00:10:15,399 --> 00:10:17,019
donde podemos hacer lo mismo que yo he hecho

211
00:10:17,019 --> 00:10:17,980
pero de forma precisa

212
00:10:17,980 --> 00:10:20,320
indicándole dónde empieza el recorte

213
00:10:20,320 --> 00:10:22,940
sus coordenadas, cuánto tiene de ancho, cuánto de alto

214
00:10:22,940 --> 00:10:24,860
y dónde tiene su punto de pivote

215
00:10:24,860 --> 00:10:26,580
que como podemos ver, según lo he estado moviendo yo ahí

216
00:10:26,580 --> 00:10:27,779
pues van cambiando sus coordenadas

217
00:10:27,779 --> 00:10:30,059
y bueno, podemos darle un borde

218
00:10:30,059 --> 00:10:31,179
pero ahora mismo eso no me interesa

219
00:10:31,179 --> 00:10:33,240
porque tiene más interés cuando vayamos a hacer físicas

220
00:10:33,240 --> 00:10:37,379
vale, pues ya tendríamos los recortes hechos en nuestra hoja de sprite

221
00:10:37,379 --> 00:10:39,379
para poder usarlos tenemos que aplicarlos

222
00:10:39,379 --> 00:10:40,399
ahora mismo no hemos hecho nada

223
00:10:40,399 --> 00:10:43,080
y hasta que no le demos aquí arriba a aplicar

224
00:10:43,080 --> 00:10:44,379
no nos lo va a reconocer

225
00:10:44,379 --> 00:10:47,080
De hecho, incluso podemos darle a revertir, decirle borra todo lo que he hecho y empiezo de nuevo.

226
00:10:47,500 --> 00:10:52,960
Pero lo que voy a hacer es decirle aplicar y veremos que ahora, si cierro esta ventana del editor de sprites,

227
00:10:53,340 --> 00:10:57,279
en ese sprite que hemos importado nos aparece un triangulito que si lo desplegamos,

228
00:10:57,279 --> 00:11:04,440
lo que tenemos aquí son, voy a subir esta ventana aquí para que la veamos, en el inspector,

229
00:11:04,820 --> 00:11:08,419
y como podemos ver, cada una de ellas es como si fuese una imagen independiente.

230
00:11:08,539 --> 00:11:12,159
Veo que ha habido aquí errores, que ha detectado zonas opacas donde no había.

231
00:11:12,159 --> 00:11:17,759
Y cada uno de ellos ya ahora funcionará como un sprite, donde yo lo puedo importar a mi escena, como podemos ver.

232
00:11:18,360 --> 00:11:22,960
Pero lógicamente las hojas de sprites no solo sirven para traer elementos, sino también para crear animaciones.

233
00:11:23,139 --> 00:11:29,039
Y en ese sentido, pues tenemos aquí también una hoja que tiene un personaje animado con sus diferentes posiciones.

234
00:11:29,500 --> 00:11:34,080
Efectivamente, teníamos por ejemplo aquí una hoja de sprites, que es esta de aquí, y la tenemos que recortar.

235
00:11:34,440 --> 00:11:36,940
Para ello, pues lo mismo que hemos hecho antes, voy a seleccionar, bueno, esta es obra.

236
00:11:36,940 --> 00:11:39,899
voy a seleccionar esa hoja y le digo que sea

237
00:11:39,899 --> 00:11:42,039
Sprite2D y en vez de que sea

238
00:11:42,039 --> 00:11:43,500
única, pues que sea múltiple

239
00:11:43,500 --> 00:11:46,120
de nuevo, para que no me salte la alerta

240
00:11:46,120 --> 00:11:47,879
le voy a decir que lo aplique a

241
00:11:47,879 --> 00:11:49,759
2048, vale, me parece bien

242
00:11:49,759 --> 00:11:52,019
la resolución, aplicar, ya me reconoce

243
00:11:52,019 --> 00:11:54,019
el Sprite, y ahora sí le voy a dar

244
00:11:54,019 --> 00:11:55,919
a Sprite Editor, vamos a ver más

245
00:11:55,919 --> 00:11:57,879
métodos para recortar nuestro Sprite, antes hemos

246
00:11:57,879 --> 00:11:59,639
visto aquí en Slice, el método automático

247
00:11:59,639 --> 00:12:01,820
aquí podríamos hacerlo también, pero quiero que sea más preciso

248
00:12:01,820 --> 00:12:03,759
¿por qué? porque el que ha hecho la hoja de Sprite ya lo ha hecho

249
00:12:03,759 --> 00:12:05,320
pensando en que luego lo vamos a recortar, así que

250
00:12:05,320 --> 00:12:07,940
los cuadrados donde está

251
00:12:07,940 --> 00:12:09,740
cada imagen son regular

252
00:12:09,740 --> 00:12:11,080
entonces le podemos decir que sea por ejemplo

253
00:12:11,080 --> 00:12:13,759
por el tamaño de la celda, si nosotros ya sabemos

254
00:12:13,759 --> 00:12:15,820
cuánto ocupa cada celda de nuestro

255
00:12:15,820 --> 00:12:17,440
sprite, de nuestra hoja de sprites, pues se lo podemos decir

256
00:12:17,440 --> 00:12:19,840
por ejemplo si yo sé que cada celda de mi

257
00:12:19,840 --> 00:12:21,200
hoja de sprites ocupa

258
00:12:21,200 --> 00:12:23,360
512 de ancho y 512 de alto

259
00:12:23,360 --> 00:12:25,919
pues lo voy a aplicar y veremos que efectivamente

260
00:12:25,919 --> 00:12:28,100
ha hecho los recortes

261
00:12:28,100 --> 00:12:29,600
con una precisión perfecta e incluso

262
00:12:29,600 --> 00:12:31,720
él cuando detecta que ha hecho un recorte

263
00:12:31,720 --> 00:12:33,440
que no tiene nada opaco

264
00:12:33,440 --> 00:12:34,820
pues automáticamente no crea ningún recorte

265
00:12:34,820 --> 00:12:36,659
así que esa forma sirve

266
00:12:36,659 --> 00:12:38,759
siempre recuerdo que el punto de pivote

267
00:12:38,759 --> 00:12:40,600
lo decidáis aquí, no dejéis que lo decida

268
00:12:40,600 --> 00:12:42,480
por ejemplo un personaje no tiene sentido que su punto de pivote

269
00:12:42,480 --> 00:12:44,340
esté en el centro o arriba o en una esquina

270
00:12:44,340 --> 00:12:46,179
sino que aquí pues está interesante que esté abajo

271
00:12:46,179 --> 00:12:48,340
ya que estamos, otra forma de indicar

272
00:12:48,340 --> 00:12:50,519
por ejemplo, cómo quiero que recorte, pues no por el tamaño

273
00:12:50,519 --> 00:12:52,480
a lo mejor no me sé el tamaño exacto del archivo, pero sí sé

274
00:12:52,480 --> 00:12:54,639
por ejemplo, cuántas filas y cuántas

275
00:12:54,639 --> 00:12:56,580
columnas tiene, entonces podemos seleccionar

276
00:12:56,580 --> 00:12:58,659
aquí, create by cell count, entonces le decimos

277
00:12:58,659 --> 00:13:00,440
que de columnas tiene efectivamente 4

278
00:13:00,440 --> 00:13:02,860
y de filas, 1, 2, 3, 4

279
00:13:02,860 --> 00:13:03,840
también tiene 4 filas

280
00:13:03,840 --> 00:13:09,899
y si le damos Slice, pues veremos que también ha creado unos recortes precisos.

281
00:13:10,320 --> 00:13:12,720
Así que ya le puedo dar a aplicar, cierro la ventana

282
00:13:12,720 --> 00:13:16,539
y efectivamente, si nos fijamos, nuestro sprite ahora mismo se compone de

283
00:13:16,539 --> 00:13:20,460
todas estas hojas que ahora ya podemos ir a animar.

284
00:13:21,720 --> 00:13:26,240
Antes de ir a la herramienta de animación, en la que podremos ya crear un sprite animado,

285
00:13:26,700 --> 00:13:30,700
vamos a ver un concepto muy importante, no solo en sprites,

286
00:13:30,700 --> 00:13:35,820
sino en todo el trabajo en Unity, que es cómo organizamos los elementos por capas.

287
00:13:35,940 --> 00:13:41,559
Y es que cuando estamos trabajando en dos dimensiones le tenemos que decir qué elementos tapan unos a otros.

288
00:13:41,879 --> 00:13:48,639
Veremos que hay varias formas de hacerlo, pero mejor tenerlo pensado antes de ponernos a poner todos los elementos dentro de la escena.

289
00:13:49,059 --> 00:13:54,759
Si yo, por ejemplo, traigo mi personaje a la escena, lo voy a poner aquí, y si traigo otro elemento, por ejemplo, una palmera,

290
00:13:55,159 --> 00:13:56,840
¿cuál tapa una y cuál tapa otra? Pues hombre, es obvio.

291
00:13:56,840 --> 00:14:01,399
Ahí lo vemos. El que está delante de la otra, pues tapa una o a otra.

292
00:14:01,940 --> 00:14:09,379
Porque recuerdo que estamos trabajando en tres dimensiones, de forma que yo la palmera la puedo alejar y entonces mi cámara efectivamente está por detrás.

293
00:14:09,620 --> 00:14:19,220
Y es más, como he comentado antes, aquí vemos la palmera como se ha alejado, pero si seleccionamos nuestra cámara y le decimos que no en su proyección, que no sea en perspectiva, sino que sea en ortográfica,

294
00:14:19,720 --> 00:14:24,120
veremos que automáticamente para la cámara las distancias son irrelevantes y entonces lo ve todo al mismo tamaño.

295
00:14:24,120 --> 00:14:30,980
Ahora, esta forma de trabajar puede ser cómoda cuando tenemos pocos elementos, pero cuando tenemos un gran número de elementos en la escena empieza a resultar un poco incómodo.

296
00:14:31,200 --> 00:14:33,899
Y de hecho, cuando vamos a empezar a animar los elementos es mejor trabajar por capas.

297
00:14:34,000 --> 00:14:43,580
Antes que nada, y esto vale también para 3D, no está de más pasarse por la ventana de Edit, Project Settings, abrir el panel de Project Settings e irnos a la opción de Tags and Layers,

298
00:14:43,659 --> 00:14:50,779
donde tenemos aquí la opción de, aparte de las etiquetas, tenemos la opción de Sorting Layers, es decir, el orden de las capas en las que yo me voy a mover.

299
00:14:50,779 --> 00:14:54,519
y yo le puedo decir, por ejemplo, que voy a tener una capa que va a ser el foreground,

300
00:14:55,860 --> 00:14:59,220
es decir, los elementos que van a estar delante de mi personaje en primer término,

301
00:14:59,559 --> 00:15:00,500
otro que va a ser mi personaje,

302
00:15:03,000 --> 00:15:04,320
otro los elementos que van a estar en el fondo

303
00:15:04,320 --> 00:15:08,320
y a lo mejor otra que va a ser el paisaje que va a estar al final de todo.

304
00:15:11,139 --> 00:15:15,720
Eso sí, muy importante, aquí el orden que aparece en el panel es el contrario al que me indicaría la lógica,

305
00:15:15,720 --> 00:15:18,480
es decir, arriba se pondrán las capas que se van al fondo,

306
00:15:18,559 --> 00:15:20,759
es decir, por ejemplo, yo pondría arriba del todo el paisaje,

307
00:15:20,759 --> 00:15:23,100
a continuación el background

308
00:15:23,100 --> 00:15:25,879
luego mi personaje

309
00:15:25,879 --> 00:15:27,740
y ahora el foreground

310
00:15:27,740 --> 00:15:29,799
es decir, lo que esté en primer término

311
00:15:29,799 --> 00:15:31,559
indicando una especie de prioridad

312
00:15:31,559 --> 00:15:33,779
en la que las primeras capas serán

313
00:15:33,779 --> 00:15:35,919
las que se pongan al principio y las demás se irán poniendo

314
00:15:35,919 --> 00:15:37,740
delante. Y si nos fijamos, voy a cerrar ahora

315
00:15:37,740 --> 00:15:39,039
efectivamente

316
00:15:39,039 --> 00:15:43,480
si le digo a mi personaje que esté en la capa

317
00:15:43,480 --> 00:15:45,940
carácter, al árbol que le voy a cambiar

318
00:15:45,940 --> 00:15:47,259
el nombre, le voy a llamar árbol

319
00:15:47,259 --> 00:15:48,559
le digo que esté en el background

320
00:15:48,559 --> 00:15:52,740
y a la plataforma le digo que esté en el foreground

321
00:15:52,740 --> 00:15:54,639
si nos fijamos ahora

322
00:15:54,639 --> 00:15:55,899
sigue en el orden de las capas

323
00:15:55,899 --> 00:15:57,159
voy a desplazar el árbol para que lo veáis

324
00:15:57,159 --> 00:15:58,580
que efectivamente

325
00:15:58,580 --> 00:16:02,120
una capa está por encima de la otra

326
00:16:02,120 --> 00:16:04,279
siguiendo el orden que le hemos indicado en nuestras capas

327
00:16:04,279 --> 00:16:05,440
y si nos fijamos

328
00:16:05,440 --> 00:16:06,539
no sigue

329
00:16:06,539 --> 00:16:09,100
el orden del eje Z

330
00:16:09,100 --> 00:16:10,779
esto es muy importante cuando trabajamos en 2D

331
00:16:10,779 --> 00:16:12,379
porque en 2D debemos olvidarnos del eje Z

332
00:16:12,379 --> 00:16:13,500
el eje Z no va a existir

333
00:16:13,500 --> 00:16:16,080
con lo cual aunque yo aquí los he organizado en el eje Z

334
00:16:16,080 --> 00:16:18,059
y si fuese a usar una cámara con perspectiva

335
00:16:18,059 --> 00:16:19,940
a lo mejor me sería útil, pero si voy a

336
00:16:19,940 --> 00:16:21,860
moverme por entero en un entorno 2D

337
00:16:21,860 --> 00:16:23,700
no tiene sentido el eje Z, con lo cual yo

338
00:16:23,700 --> 00:16:25,799
los personajes, lo voy a seleccionar los tres, le voy a decir que

339
00:16:25,799 --> 00:16:27,919
el valor en Z es 0 y así están

340
00:16:27,919 --> 00:16:30,019
todos al mismo punto

341
00:16:30,019 --> 00:16:31,700
¿por qué? porque a lo mejor voy a trabajar en 2D

342
00:16:31,700 --> 00:16:33,940
y como podemos ver, cuando trabajamos

343
00:16:33,940 --> 00:16:35,899
en 2D nos olvidamos del eje Z y ya todo se

344
00:16:35,899 --> 00:16:37,980
mueve así, y efectivamente sigue

345
00:16:37,980 --> 00:16:39,399
el orden de las capas que yo le he indicado

346
00:16:39,399 --> 00:16:41,899
si yo por ejemplo trajese

347
00:16:41,899 --> 00:16:43,960
unas montañas, que en esta hoja de sprites lo voy a

348
00:16:43,960 --> 00:16:45,059
recortar, igual que hemos hecho antes

349
00:16:45,059 --> 00:16:50,629
tengo un fondo aquí

350
00:16:50,629 --> 00:16:52,490
si yo lo traigo a mi escena

351
00:16:52,490 --> 00:16:53,929
lo escalo

352
00:16:53,929 --> 00:16:57,250
con la herramienta de escalado

353
00:16:57,250 --> 00:16:58,730
en 2D que hemos visto antes

354
00:16:58,730 --> 00:17:00,950
y si nos fijamos

355
00:17:00,950 --> 00:17:02,490
su posición en Z es 0

356
00:17:02,490 --> 00:17:05,170
pero yo le puedo decir que en el sorting layer

357
00:17:05,170 --> 00:17:07,349
está en el paisaje

358
00:17:07,349 --> 00:17:08,950
y como podéis ver

359
00:17:08,950 --> 00:17:11,069
efectivamente, automáticamente ha pasado ahí al fondo

360
00:17:11,069 --> 00:17:12,910
también una opción

361
00:17:12,910 --> 00:17:14,670
que tenemos aquí, que es que dentro

362
00:17:14,670 --> 00:17:16,549
incluso de las mismas capas podemos hasta dar órdenes

363
00:17:16,549 --> 00:17:19,250
podemos ordenar los sprites

364
00:17:19,250 --> 00:17:21,549
donde los elementos más al fondo estarán en un número más bajo

365
00:17:21,549 --> 00:17:23,369
y los que están más delante estarán con un número alto

366
00:17:23,369 --> 00:17:26,930
entonces hasta dentro de una misma capa podemos crear también diferentes órdenes

367
00:17:26,930 --> 00:17:29,869
bien, con esto ya estamos preparados para adentrarnos en el siguiente capítulo

368
00:17:29,869 --> 00:17:31,410
que es el de las animaciones

369
00:17:31,410 --> 00:17:35,009
y las animaciones serán tanto animar sprites en dos dimensiones

370
00:17:35,009 --> 00:17:37,089
como animar elementos en 3D