Saltar navegación

Activa JavaScript para disfrutar de los vídeos de la Mediateca.

Primeros pasos en Unity: 2D parte 1 (Sprites) - Contenido educativo

Ajuste de pantalla

El ajuste de pantalla se aprecia al ver el vídeo en pantalla completa. Elige la presentación que más te guste:

Subido el 10 de noviembre de 2024 por Alvaro H.

107 visualizaciones

Con este se inicia una serie de vídeos dedicados a la creación de escenas 2D. Comenzamos aprendiendo a editar Sprites

Más información Transcripción

Descargar la transcripción

Con este empezamos una pequeña serie de vídeos en las que vamos a tratar la herramienta de animación de Unity. 00:00:06
Pero antes empezaremos a hablar de lo que es el Unity 2D para luego hablar de los sprites, 00:00:14
que son la herramienta básica con la que trabajamos cuando hacemos un proyecto o un videojuego en dos dimensiones. 00:00:19
Antes que nada nos habremos fijado que cuando creamos un nuevo proyecto en Unity nos pregunta cómo lo queremos 00:00:25
y las diferencias básicas son si la queremos en 2D o en 3D. 00:00:31
como luego explicaré las diferencias son mínimas y de hecho para este ejemplo 00:00:34
y ya que luego en las animaciones vamos a crear animaciones con objetos 3D 00:00:40
vamos a crear un proyecto en tres dimensiones 00:00:43
¿Qué determina que elijamos una u otra opción? 00:00:47
Pues básicamente tal como nos dice la documentación de Unity es 00:00:50
si vamos a hacer un juego en 3D obviamente es un proyecto en 3D 00:00:53
incluso cuando vamos a hacer un juego con vista ortográfica 00:00:56
pero incluso cuando vamos a hacer un juego en 2D por ejemplo de plataformas 00:01:00
pero con un entorno en tres dimensiones también tenemos que trabajar en un proyecto 3D. 00:01:04
¿Y cuándo trabajamos en 2D? 00:01:09
Pues principalmente cuando hacemos un proyecto, un videojuego, de dos dimensiones, no hay duda alguna, 00:01:10
pero también cuando trabajamos en un proyecto en dos dimensiones en las que utilizamos las capas 00:01:16
o la distancia a la cámara para crear profundidad. 00:01:22
Ya sea utilizando una cámara ortográfica o ya sea utilizando una cámara en perspectiva, 00:01:25
que sí que genera una perspectiva real. 00:01:30
Pero bueno, eso lo iremos viendo a medida que avancen los vídeos y el curso. 00:01:34
En cualquier caso, y ya que tengo aquí mi proyecto abierto, que sepamos que en el menú de Edit, en Project Settings, 00:01:38
si nos vamos a la opción de Editor, veremos que aquí tenemos una opción que nos dice 00:01:43
comportamiento básico o comportamiento por defecto está en tres dimensiones. 00:01:47
Y aquí lo podemos cambiar a dos dimensiones si quisiésemos. 00:01:50
¿En qué afecta? Que cuando importamos una imagen, por ejemplo, la interpreta automáticamente como un sprite si estamos en 2D 00:01:52
o que nos restringe ciertos movimientos para evitar que si estamos haciendo un proyecto en 2D, 00:01:57
pues nos movamos en el eje Z o rotemos en el eje 00:02:01
también es bueno recordar que siempre podemos aquí 00:02:03
cambiar a una visión en 2D 00:02:05
de nuestra escena y en ese momento como podéis ver 00:02:07
vemos nuestra escena como si fuese un juego 00:02:09
2D, aunque yo haya abierto un proyecto en 3 dimensiones 00:02:11
puedo hacer un juego en 2 dimensiones 00:02:14
y ponerlo como en todo momento en 2 dimensiones 00:02:15
igual que también es bueno recordar que la visión que tenemos 00:02:17
en nuestra escena está en perspectiva pero la podemos cambiar en cualquier momento 00:02:19
pinchando ahí, entonces lo veremos en ortográfica 00:02:22
para ver un objeto o un juego en ortográfica 00:02:23
o cuando pinchamos en la cámara 00:02:26
si seleccionamos nuestra cámara siempre tenéis 00:02:27
la opción aquí de cómo va a ver la cámara los objetos de la escena. Por defecto está 00:02:30
en perspectiva, pero si la ponéis en ortográfica, pues automáticamente nuestra cámara verá 00:02:34
igual los objetos que están en primer plano que los que están al mismo tamaño. Para 00:02:39
hacer, por ejemplo, lo que hemos dicho antes, un juego 2D en la que usamos la distancia 00:02:42
no para crear perspectiva, sino para poner unos objetos delante de otro. 00:02:45
Bien, después de esta pequeña introducción al mundo del 2D en Unity, vamos a entrarnos 00:02:48
en el mundo de los sprites, que es la herramienta básica cuando trabajamos en dos dimensiones 00:02:52
en Unity. Realmente, en nuestro proyecto, en cualquier momento, podemos ir al menú 00:02:56
de GameObject y decirle que 00:02:59
inserte un GameObject de tipo dos dimensiones 00:03:01
y ahí lo tenemos, un sprite. Y lo podemos insertar 00:03:03
y automáticamente veremos que efectivamente nos aparece 00:03:05
aquí un nuevo sprite y al que 00:03:07
está esperando que le añadamos una imagen. 00:03:09
Aquí no tiene. Un paréntesis, si 00:03:11
no tenemos la imagen todavía pero queremos trabajar con un 00:03:13
sprite, tenemos la opción de usar 00:03:15
los ayudantes que trae Unity por defecto. 00:03:17
Como podemos ver, aunque no tengamos 00:03:19
ninguna imagen cargada, podemos crear esta especie 00:03:21
de placeholders que son elementos, por ejemplo 00:03:23
un new sprite que nos permite 00:03:25
hacer visible, como podemos ver aquí, el 00:03:27
sprite en nuestro juego. Incluso podemos 00:03:29
escalarlo. Otro paréntesis dentro del paréntesis, 00:03:31
también es bueno recordar que en Unity 00:03:33
tenemos una herramienta para escalar en dos 00:03:35
dimensiones, que es esta de aquí, una herramienta súper útil 00:03:37
para modificar elementos 2D, especialmente 00:03:39
cuando estamos trabajando en un entorno 3D, que nos 00:03:41
permite modificar nuestro elemento, 00:03:43
escalarlo fácilmente. 00:03:45
Si ya tenemos las imágenes y queremos ya 00:03:47
trabajar con ellas, pues es absurdo crear un 00:03:49
sprite, sino lo suyo es importar las imágenes y a partir 00:03:51
de ahí ya construir nuestros sprites. Para este vídeo 00:03:53
voy a utilizar los elementos que vienen en el 00:03:55
Asset que podemos encontrar en el Asset Store de Lendless Runner, que lo tenéis aquí. 00:03:57
Entonces, me he descargado, yo ya lo he adquirido, lo he importado en mi proyecto. 00:04:00
De hecho, he importado la carpeta de arte, sin más. 00:04:04
Pues como podemos ver, son imágenes en formato PNG. 00:04:06
Lo primero de todo, cuando importamos una imagen en Unity, 00:04:08
si estamos trabajando en un proyecto 3D, la importa como una textura. 00:04:11
De hecho, si nos vamos aquí a sus propiedades, aparece como Texture Type, Default. 00:04:14
Si hemos creado un proyecto 2D, veremos que automáticamente nos lo reconoce como Sprite. 00:04:18
Lógicamente, un entorno 2D no tiene texturas como tal. 00:04:21
Pero como estamos en un entorno 3D, sí que lo ha reconocido como textura. 00:04:24
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. 00:04:26
Y una vez que lo hemos seleccionado, veremos que nos cambian las opciones. Vamos a verlas un poquito por encima. 00:04:38
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. 00:04:42
Y en ese caso sería una hoja de sprites que luego veremos cuando veamos las animaciones. 00:04:52
más cosas, la resolución de esa imagen 00:04:55
cuántos píxeles componen 00:04:58
una unidad de Unity, por ejemplo si le decimos que 100 píxeles 00:05:00
por unidad, significa que si importamos una imagen 00:05:02
de 100 por 100 píxeles, pues tendrá de tamaño 00:05:04
cuando la traigamos a nuestra escena, de una unidad 00:05:06
por una unidad, y poco más 00:05:08
aquí nos aparece el pivot 00:05:10
o el punto de pivote 00:05:12
o el ancla, que le podemos indicar 00:05:13
donde está, si arriba, abajo, a la derecha 00:05:15
en la esquina superior izquierda, veremos que si eso lo cambiamos 00:05:18
a una hoja de sprites en modo múltiple 00:05:20
ya no nos deja seleccionar el punto de pivote 00:05:21
básicamente porque eso lo haremos en cada recorte 00:05:24
de esa hoja de sprites. Bueno, nos permite algunas 00:05:26
opciones avanzadas para interpretar la imagen que hemos 00:05:28
importado, pero bueno, tampoco me voy a detener en ello, pero si hay algo 00:05:30
que sí que me interesa, y es que abajo del todo 00:05:32
en el inspector de esta imagen 00:05:34
veremos cómo se va a comportar esa imagen 00:05:36
cuando exportemos, cuando compilemos el proyecto 00:05:38
eso es algo importante porque lógicamente no queremos que pesen demasiado 00:05:39
entonces, dependiendo de 00:05:42
cuánta resolución va a tener 00:05:44
nuestro juego, cómo va a verse en una pantalla grande o pequeña 00:05:46
o cuánto queremos que pese esta imagen 00:05:48
pues aquí le podemos determinar qué tamaño máximo 00:05:50
va a tener cuando lo compilemos, que obviamente lo podemos cambiar 00:05:52
a los tamaños típicos, cuando ya lo tenemos le damos a aplicar 00:05:54
una cosa muy importante es que esto que acabo 00:05:56
de hacer yo, lo podemos hacer 00:05:58
exclusivamente para diferentes plataformas 00:06:00
según lo vayamos a compilar, es decir, yo he puesto 00:06:02
unos parámetros por defecto para la exportación 00:06:04
pero si quiero que en PC 00:06:06
por ejemplo, trabaje a más resolución 00:06:07
pues le doy aquí a Overwrite, entonces en PC 00:06:10
Mac o Linux o equipos 00:06:12
de sobremesa, pues puedo poner que ocupe más 00:06:13
y lo mismo, le puedo decir que en Android 00:06:15
ocupe menos, porque quiero que en Android 00:06:17
no necesito tanta resolución en la imagen, entonces la reduzco 00:06:19
el tamaño cuando tenga que exportarlo, para optimizar el tamaño final de nuestro proyecto. 00:06:22
Pues bien, ese sprite que yo ya he creado, puedo traerlo tranquilamente a la escena y 00:06:25
ocupa lo que le hayamos dicho nosotros que ocupe según los píxeles por mil. 00:06:28
Lo que hemos visto hasta ahora nos permite traer imágenes e interpretarlas como sprites 00:06:31
y meterlas en la escena, pero cualquier persona que ha trabajado en entornos 3D con texturas 00:06:35
sabe que al nivel de rendimiento es mucho mejor para la máquina, en vez de trabajar 00:06:41
con muchos archivos individuales, trabajar con un solo archivo 00:06:45
que incluye todos los archivos, normalmente con fondo transparente 00:06:49
y que luego el programa los trocea para interpretarlo cada uno 00:06:54
como si fuese un archivo o una imagen independiente. 00:06:58
Es lo que se llama las hojas de sprites y es lo que vamos a ver ahora mismo 00:07:00
y lo que luego nos permitirá llevarlo a una animación. 00:07:03
El material que yo he descargado del Asset Store incluye varias hojas de sprites 00:07:06
como podemos ver, esta por ejemplo para crear una animación de personaje 00:07:10
o incluso hojas de sprites que incluyen varias animaciones de varios objetos 00:07:12
o incluso hojas de sprites que incluyen lo que serían props o elementos de nuestro escenario. 00:07:16
Pues bien, vamos a recortarlo. Empezaré con esta. 00:07:21
Si me voy al archivo de imagen y, como hemos dicho antes, 00:07:23
lo primero que le tengo que decir es que lo interprete como una sprite 00:07:27
y, en este caso, en vez de decirle en sprite mode, en vez de que sea unitario, 00:07:31
es decir, una imagen independiente, que sea múltiple. 00:07:35
Y a partir de ese momento podemos activar el sprite editor, porque lo tenemos aquí, 00:07:38
Muy importante, para poder usar el Sprite Editor tenemos que instalar el paquete de edición de Sprites. 00:07:42
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. 00:07:49
aquí tenemos el editor de sprites 00:08:01
que viene con Unity, que acabamos de instalar 00:08:04
donde además con la rueda del ratón 00:08:06
podemos acercarnos 00:08:08
incluso con la tecla Alt 00:08:11
podemos desplazarnos 00:08:13
por nuestra hoja de sprites para verla con más detalle 00:08:15
lo primero que tenemos que entender 00:08:17
es que tenemos que recortar cada una de estas imágenes 00:08:18
para que la interprete como una imagen independiente 00:08:20
eso lo podemos hacer a mano 00:08:22
es decir, yo puedo pinchar con el ratón 00:08:23
arrastrar 00:08:25
entonces vemos que ahí ha creado un recorte 00:08:26
lógicamente esta forma de hacerlo es bastante poco precisa 00:08:28
pero vamos, podría ir una tras otra 00:08:31
seleccionando y como podemos ver 00:08:33
pues va creando recortes en las zonas 00:08:35
que yo quiero, luego incluso puedo pincharle 00:08:37
y pinchando sobre los bordes pues hacerlo 00:08:39
mucho más preciso, podemos incluso, hay una herramienta 00:08:41
bastante útil, que es esta que tenemos 00:08:43
arriba a la izquierda, que se llama Trim, que una vez 00:08:45
que hemos creado una ventana o una imagen, un recorte 00:08:47
de nuestro sprite, le podemos dar a Trim 00:08:49
y entonces lo que hace es eliminar 00:08:51
las zonas transparentes y ajustarse 00:08:53
a lo opaco, pero vamos, incluso aunque falle, podemos ir 00:08:55
nosotros a nivel de píxel y hacerlo a mano 00:08:57
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. 00:08:59
antes de hacerlo os recomiendo 00:09:19
decidir dónde queremos que sea nuestro punto de pivote 00:09:20
luego lo podemos cambiar 00:09:23
pero si ahora mismo decimos que nuestro punto de pivote 00:09:24
en estos sprites va a estar abajo en el centro 00:09:27
pues lo podemos indicar ahora ya 00:09:29
y decirle no, quiero que esté abajo 00:09:30
podemos decirle que automáticamente borre todo lo que he hecho hasta ahora 00:09:32
que es lo que le voy a decir porque lo que he hecho hasta ahora no vale 00:09:35
o podríamos incluso decirle no, interpreta 00:09:37
si yo ya he hecho un recorte en una zona, tú no lo borres 00:09:39
o directamente digo no, no borres nada de lo que he hecho 00:09:41
pero bueno, le voy a decir que borre todo lo que he hecho hasta ahora 00:09:43
y cuando le damos a slice, a recortar 00:09:45
veremos que automáticamente él ha creado recortes en todas las zonas que él ha interpretado que son. 00:09:47
Puede haber fallos, como podemos ver aquí no ha sido muy preciso, 00:09:53
y entonces tenemos que nosotros ir ajustando a mano. 00:09:57
Incluso el punto de pivote que nosotros hemos puesto aquí lo podemos desplazar 00:10:01
en caso de que una hoja de recorte o un recorte en concreto queramos que el punto de pivote no esté ahí sino aquí. 00:10:05
Y veremos que todo lo que yo he hecho ahora mismo se corresponde con esta ventana que se nos abre 00:10:10
donde podemos hacer lo mismo que yo he hecho 00:10:15
pero de forma precisa 00:10:17
indicándole dónde empieza el recorte 00:10:17
sus coordenadas, cuánto tiene de ancho, cuánto de alto 00:10:20
y dónde tiene su punto de pivote 00:10:22
que como podemos ver, según lo he estado moviendo yo ahí 00:10:24
pues van cambiando sus coordenadas 00:10:26
y bueno, podemos darle un borde 00:10:27
pero ahora mismo eso no me interesa 00:10:30
porque tiene más interés cuando vayamos a hacer físicas 00:10:31
vale, pues ya tendríamos los recortes hechos en nuestra hoja de sprite 00:10:33
para poder usarlos tenemos que aplicarlos 00:10:37
ahora mismo no hemos hecho nada 00:10:39
y hasta que no le demos aquí arriba a aplicar 00:10:40
no nos lo va a reconocer 00:10:43
De hecho, incluso podemos darle a revertir, decirle borra todo lo que he hecho y empiezo de nuevo. 00:10:44
Pero lo que voy a hacer es decirle aplicar y veremos que ahora, si cierro esta ventana del editor de sprites, 00:10:47
en ese sprite que hemos importado nos aparece un triangulito que si lo desplegamos, 00:10:53
lo que tenemos aquí son, voy a subir esta ventana aquí para que la veamos, en el inspector, 00:10:57
y como podemos ver, cada una de ellas es como si fuese una imagen independiente. 00:11:04
Veo que ha habido aquí errores, que ha detectado zonas opacas donde no había. 00:11:08
Y cada uno de ellos ya ahora funcionará como un sprite, donde yo lo puedo importar a mi escena, como podemos ver. 00:11:12
Pero lógicamente las hojas de sprites no solo sirven para traer elementos, sino también para crear animaciones. 00:11:18
Y en ese sentido, pues tenemos aquí también una hoja que tiene un personaje animado con sus diferentes posiciones. 00:11:23
Efectivamente, teníamos por ejemplo aquí una hoja de sprites, que es esta de aquí, y la tenemos que recortar. 00:11:29
Para ello, pues lo mismo que hemos hecho antes, voy a seleccionar, bueno, esta es obra. 00:11:34
voy a seleccionar esa hoja y le digo que sea 00:11:36
Sprite2D y en vez de que sea 00:11:39
única, pues que sea múltiple 00:11:42
de nuevo, para que no me salte la alerta 00:11:43
le voy a decir que lo aplique a 00:11:46
2048, vale, me parece bien 00:11:47
la resolución, aplicar, ya me reconoce 00:11:49
el Sprite, y ahora sí le voy a dar 00:11:52
a Sprite Editor, vamos a ver más 00:11:54
métodos para recortar nuestro Sprite, antes hemos 00:11:55
visto aquí en Slice, el método automático 00:11:57
aquí podríamos hacerlo también, pero quiero que sea más preciso 00:11:59
¿por qué? porque el que ha hecho la hoja de Sprite ya lo ha hecho 00:12:01
pensando en que luego lo vamos a recortar, así que 00:12:03
los cuadrados donde está 00:12:05
cada imagen son regular 00:12:07
entonces le podemos decir que sea por ejemplo 00:12:09
por el tamaño de la celda, si nosotros ya sabemos 00:12:11
cuánto ocupa cada celda de nuestro 00:12:13
sprite, de nuestra hoja de sprites, pues se lo podemos decir 00:12:15
por ejemplo si yo sé que cada celda de mi 00:12:17
hoja de sprites ocupa 00:12:19
512 de ancho y 512 de alto 00:12:21
pues lo voy a aplicar y veremos que efectivamente 00:12:23
ha hecho los recortes 00:12:25
con una precisión perfecta e incluso 00:12:28
él cuando detecta que ha hecho un recorte 00:12:29
que no tiene nada opaco 00:12:31
pues automáticamente no crea ningún recorte 00:12:33
así que esa forma sirve 00:12:34
siempre recuerdo que el punto de pivote 00:12:36
lo decidáis aquí, no dejéis que lo decida 00:12:38
por ejemplo un personaje no tiene sentido que su punto de pivote 00:12:40
esté en el centro o arriba o en una esquina 00:12:42
sino que aquí pues está interesante que esté abajo 00:12:44
ya que estamos, otra forma de indicar 00:12:46
por ejemplo, cómo quiero que recorte, pues no por el tamaño 00:12:48
a lo mejor no me sé el tamaño exacto del archivo, pero sí sé 00:12:50
por ejemplo, cuántas filas y cuántas 00:12:52
columnas tiene, entonces podemos seleccionar 00:12:54
aquí, create by cell count, entonces le decimos 00:12:56
que de columnas tiene efectivamente 4 00:12:58
y de filas, 1, 2, 3, 4 00:13:00
también tiene 4 filas 00:13:02
y si le damos Slice, pues veremos que también ha creado unos recortes precisos. 00:13:03
Así que ya le puedo dar a aplicar, cierro la ventana 00:13:10
y efectivamente, si nos fijamos, nuestro sprite ahora mismo se compone de 00:13:12
todas estas hojas que ahora ya podemos ir a animar. 00:13:16
Antes de ir a la herramienta de animación, en la que podremos ya crear un sprite animado, 00:13:21
vamos a ver un concepto muy importante, no solo en sprites, 00:13:26
sino en todo el trabajo en Unity, que es cómo organizamos los elementos por capas. 00:13:30
Y es que cuando estamos trabajando en dos dimensiones le tenemos que decir qué elementos tapan unos a otros. 00:13:35
Veremos que hay varias formas de hacerlo, pero mejor tenerlo pensado antes de ponernos a poner todos los elementos dentro de la escena. 00:13:41
Si yo, por ejemplo, traigo mi personaje a la escena, lo voy a poner aquí, y si traigo otro elemento, por ejemplo, una palmera, 00:13:49
¿cuál tapa una y cuál tapa otra? Pues hombre, es obvio. 00:13:55
Ahí lo vemos. El que está delante de la otra, pues tapa una o a otra. 00:13:56
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. 00:14:01
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, 00:14:09
veremos que automáticamente para la cámara las distancias son irrelevantes y entonces lo ve todo al mismo tamaño. 00:14:19
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. 00:14:24
Y de hecho, cuando vamos a empezar a animar los elementos es mejor trabajar por capas. 00:14:31
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, 00:14:34
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. 00:14:43
y yo le puedo decir, por ejemplo, que voy a tener una capa que va a ser el foreground, 00:14:50
es decir, los elementos que van a estar delante de mi personaje en primer término, 00:14:55
otro que va a ser mi personaje, 00:14:59
otro los elementos que van a estar en el fondo 00:15:03
y a lo mejor otra que va a ser el paisaje que va a estar al final de todo. 00:15:04
Eso sí, muy importante, aquí el orden que aparece en el panel es el contrario al que me indicaría la lógica, 00:15:11
es decir, arriba se pondrán las capas que se van al fondo, 00:15:15
es decir, por ejemplo, yo pondría arriba del todo el paisaje, 00:15:18
a continuación el background 00:15:20
luego mi personaje 00:15:23
y ahora el foreground 00:15:25
es decir, lo que esté en primer término 00:15:27
indicando una especie de prioridad 00:15:29
en la que las primeras capas serán 00:15:31
las que se pongan al principio y las demás se irán poniendo 00:15:33
delante. Y si nos fijamos, voy a cerrar ahora 00:15:35
efectivamente 00:15:37
si le digo a mi personaje que esté en la capa 00:15:39
carácter, al árbol que le voy a cambiar 00:15:43
el nombre, le voy a llamar árbol 00:15:45
le digo que esté en el background 00:15:47
y a la plataforma le digo que esté en el foreground 00:15:48
si nos fijamos ahora 00:15:52
sigue en el orden de las capas 00:15:54
voy a desplazar el árbol para que lo veáis 00:15:55
que efectivamente 00:15:57
una capa está por encima de la otra 00:15:58
siguiendo el orden que le hemos indicado en nuestras capas 00:16:02
y si nos fijamos 00:16:04
no sigue 00:16:05
el orden del eje Z 00:16:06
esto es muy importante cuando trabajamos en 2D 00:16:09
porque en 2D debemos olvidarnos del eje Z 00:16:10
el eje Z no va a existir 00:16:12
con lo cual aunque yo aquí los he organizado en el eje Z 00:16:13
y si fuese a usar una cámara con perspectiva 00:16:16
a lo mejor me sería útil, pero si voy a 00:16:18
moverme por entero en un entorno 2D 00:16:19
no tiene sentido el eje Z, con lo cual yo 00:16:21
los personajes, lo voy a seleccionar los tres, le voy a decir que 00:16:23
el valor en Z es 0 y así están 00:16:25
todos al mismo punto 00:16:27
¿por qué? porque a lo mejor voy a trabajar en 2D 00:16:30
y como podemos ver, cuando trabajamos 00:16:31
en 2D nos olvidamos del eje Z y ya todo se 00:16:33
mueve así, y efectivamente sigue 00:16:35
el orden de las capas que yo le he indicado 00:16:37
si yo por ejemplo trajese 00:16:39
unas montañas, que en esta hoja de sprites lo voy a 00:16:41
recortar, igual que hemos hecho antes 00:16:43
tengo un fondo aquí 00:16:45
si yo lo traigo a mi escena 00:16:50
lo escalo 00:16:52
con la herramienta de escalado 00:16:53
en 2D que hemos visto antes 00:16:57
y si nos fijamos 00:16:58
su posición en Z es 0 00:17:00
pero yo le puedo decir que en el sorting layer 00:17:02
está en el paisaje 00:17:05
y como podéis ver 00:17:07
efectivamente, automáticamente ha pasado ahí al fondo 00:17:08
también una opción 00:17:11
que tenemos aquí, que es que dentro 00:17:12
incluso de las mismas capas podemos hasta dar órdenes 00:17:14
podemos ordenar los sprites 00:17:16
donde los elementos más al fondo estarán en un número más bajo 00:17:19
y los que están más delante estarán con un número alto 00:17:21
entonces hasta dentro de una misma capa podemos crear también diferentes órdenes 00:17:23
bien, con esto ya estamos preparados para adentrarnos en el siguiente capítulo 00:17:26
que es el de las animaciones 00:17:29
y las animaciones serán tanto animar sprites en dos dimensiones 00:17:31
como animar elementos en 3D 00:17:35
Idioma/s:
es
Materias:
Informática, Imagen y Sonido
Niveles educativos:
▼ Mostrar / ocultar niveles
  • Formación Profesional
    • Ciclo formativo de grado superior
      • Primer Curso
      • Segundo Curso
Autor/es:
Álvaro Holguera
Subido por:
Alvaro H.
Licencia:
Reconocimiento - No comercial - Sin obra derivada
Visualizaciones:
107
Fecha:
10 de noviembre de 2024 - 21:21
Visibilidad:
Público
Centro:
CFP JOSÉ LUIS GARCI
Duración:
17′ 37″
Relación de aspecto:
1.78:1
Resolución:
1280x720 píxeles
Tamaño:
530.18 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid