Saltar navegación

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

Primeros pasos en Unity. UI parte 3a: Imágenes - 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 27 de octubre de 2025 por Alvaro H.

54 visualizaciones

Aprendamos a añadir imágenes (sprites) a nuestro lienzo del User Interface

Más información Transcripción

Descargar la transcripción

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. 00:00:06
Voy a tomar uno de los ejercicios que hemos hecho en clase, que no es más que un juego bastante sencillito, 00:00:13
en el que básicamente tenemos que mover un tablero hasta introducirlo por un agujero, utilizando para ello físicas. 00:00:19
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 00:00:25
para, por ejemplo, poner el número de vidas que tenemos en nuestro juego 00:00:33
y a medida que la pelota va cayendo al vacío 00:00:37
se van reduciendo hasta que llega a cero y nos morimos. 00:00:40
Para ello vamos a usar uno de los elementos básicos del User Interface 00:00:44
que son las imágenes. 00:00:47
Si nos vamos aquí al menú de GameObject 00:00:50
encontraremos, como hemos visto anteriormente, el apartado de UI 00:00:52
y entre ellos, por supuesto, está la imagen. 00:00:55
Vemos que nos ha creado un canvas y nos ha creado una imagen de prueba. 00:01:05
Lo que se llama un placeholder. Lo ha puesto aquí. 00:01:09
Si nosotros, lógicamente, queremos cambiar eso por un sprite, 00:01:12
pues lo haremos aquí en el inspector, seleccionando nuestra imagen. 00:01:15
Y si nos vamos al inspector, veremos que uno de sus atributos, por supuesto, 00:01:19
es la imagen de origen, es decir, la imagen que está usando. 00:01:23
Y tiene que ser un sprite. 00:01:25
Antes de seguir, voy a comentar algo que no hemos visto y que veremos más adelante 00:01:27
cuando hablemos de los juegos en 2D, que es el concepto de sprite. 00:01:31
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. 00:01:35
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. 00:01:46
Es como los mapas UV cuando estamos texturizando un objeto, que metemos todas las texturas en una imagen. 00:01:56
Por eso vamos a introducir el concepto de hoja de Sprites, aunque insisto, esto es adelantarnos un poco al 2D. 00:02:00
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í. 00:02:05
Donde, como podemos ver, se incorporan las tres imágenes que voy a usar. 00:02:13
Cuando tengo tres vidas, cuando tengo dos y cuando tengo una. 00:02:17
Pues bien, esa imagen al traerla a Unity, si nos fijamos, él la interpreta como textura. 00:02:20
Antes de empezar a editarla, tenemos que decirle a Unity que no es una textura, que es un sprite. 00:02:25
¿Cómo? Pues seleccionándola en nuestro proyecto y aquí en Texture Type. 00:02:30
Decirle que es un elemento sprite, que es para 2D y para User Interface. 00:02:35
Esto ya lo veremos más adelante, todo lo que significa lo que viene a continuación. 00:02:42
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. 00:02:46
Con lo cual, en el otro apartado que pone aquí, Sprite Mode, le tenemos que decir que esta imagen es múltiple. 00:02:54
Ahí la tenemos. 00:03:01
Y antes de salir, tenemos que aplicar estos cambios. 00:03:02
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. 00:03:05
Vale, lo único que ahora tenemos que editar es Sprite para que él entienda que aquí hay tres imágenes, no solo una. 00:03:14
Pues bien, eso se hace aquí con el botón que pone Sprite Editor. 00:03:20
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. 00:03:24
Pues bien, yo ya lo tengo instalado en mi proyecto 00:03:47
Lo puedo ver porque aquí me aparece Remove 00:03:50
Si no lo tenemos instalado nos aparecerá Install 00:03:52
Lo instalamos y a partir de ese momento sí que podemos editar los sprites 00:03:54
Y por eso yo al darle al botón de Sprite Editor 00:03:58
Efectivamente se aparece el editor de sprites 00:04:01
No me voy a detener mucho en esta herramienta 00:04:04
Primero porque es muy intuitiva 00:04:07
Y segundo porque la veremos más adelante cuando hagamos juegos en 2D 00:04:08
Donde sí que manejaremos hojas de sprites más complejas 00:04:11
pero vamos, básicamente que sepamos que aquí tenemos la opción que nos permite recortar esta imagen y convertirla en varias 00:04:14
si aparece desactivada asegurémonos que tenemos seleccionada la opción de múltiple para nuestro sprite 00:04:21
y al desplegarlo veremos que nos permite varias formas para recortar la imagen 00:04:28
automática la veremos más adelante en la que él mismo detecta que zonas hay transparentes 00:04:32
y en ese sentido crea los recortes en base a ellos 00:04:36
También, en caso de que yo, por ejemplo, mi imagen sea una imagen, vamos a suponer, de 100x100 00:04:40
y tengo 10 imágenes de ancho y 10 imágenes de alto, 00:04:44
pues sé perfectamente que cada celda ocupa 10x10. 00:04:49
Entonces se lo podría decir. 00:04:52
Decir, pues recórtame por tamaño de celda. 00:04:53
En mi caso no voy a hacer cálculos. 00:04:57
Podría hacer cálculos, pero no lo necesito. 00:04:58
¿Por qué? 00:05:00
Porque, y esto es muy habitual, mi imagen se compone de tres imágenes. 00:05:00
Una, dos y tres. 00:05:05
Es decir, que tiene una columna y tres filas. 00:05:07
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. 00:05:11
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. 00:05:20
en este caso no me importa demasiado pero si descubriremos que por ejemplo cuando recortamos 00:05:31
hoja de sprites de personajes si es muy importante decirle cuál es su punto de pivote y una vez que 00:05:35
ya lo hemos elegido le damos slice y veremos que efectivamente nos lo ha partido en tres imágenes 00:05:40
una dos y tres una vez que ya hemos recortado nuestra hoja de sprites nos venimos aquí a aplicar 00:05:47
y cerramos esta ventana y si nos fijamos ahora en el proyecto esa imagen se ha convertido en 00:05:55
realidad efectivamente en tres imágenes independientes esta está y está ahora ya 00:06:03
puedo si incorporarlas efectivamente si le digo la imagen que tiene que utilizar es una de estas 00:06:08
pues efectivamente lo vemos ahí ahora lógicamente está deformada porque le había puesto el tamaño 00:06:16
el tamaño del placeholder, de 100%. 00:06:25
Si yo me sé los tamaños de mi imagen, pues se lo podría poner, 00:06:28
pero vamos, es más rápido decirle aquí abajo 00:06:31
que set native size, es decir, vuelve a su tamaño original. 00:06:33
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:
Alvaro Holguera Gozalo
Subido por:
Alvaro H.
Licencia:
Reconocimiento - No comercial - Compartir igual
Visualizaciones:
54
Fecha:
27 de octubre de 2025 - 10:23
Visibilidad:
Público
Centro:
CFP JOSÉ LUIS GARCI
Duración:
06′ 44″
Relación de aspecto:
1.78:1
Resolución:
1920x1080 píxeles
Tamaño:
183.24 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid