Importar y configurar sprites UI en Unity

Curso de Creación de Interfaces de Usuario con Unity

Contenido del curso

Introducción y configuración inicial

El sistema de UI de Unity

Haciendo interfaces para el juego

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:005:36

Importar y configurar sprites UI en Unity

Curso de Creación de Interfaces de Usuario con Unity

Clase 15 de 29

Clase 15 / 29

Recursos

Organizar los assets desde el inicio te ahorra horas de caos visual. Aquí aprendes a importar, clasificar y configurar los sprites de interfaz en Unity para tu juego Match 3, aplicando pixel perfect y nine slicing para que tus botones se vean nítidos y escalables.

Cómo organizo los sprites en carpetas dentro de Unity

Lo primero es darle estructura al proyecto. Si dejas todos los sprites sueltos, vas a perder tiempo buscando cada vez que necesites uno.

Dentro de la carpeta Assets > Sprites, crea dos subcarpetas con clic derecho:

Pieces: para los sprites de las piezas del tablero.
UI: para todo lo relacionado con interfaces de usuario.

Arrastra cada sprite a su carpeta correspondiente. El elemento Start, por ejemplo, va dentro de UI porque hace parte de la interfaz [00:35]. Luego, con clic derecho e Import New Asset, importa el resto de elementos gráficos desde el archivo comprimido .zip que encuentras en los recursos de la clase.

Por qué configurar pixels per unit y filter mode en point

Una vez importados, selecciona los assets que vas a usar para botones e iconos: el botón azul, el gris, el amarillo, la estrella, el wrench, el de pause y el de play. En el inspector cambia dos propiedades clave.

Pixels per unit: pasa de 100 a 16.
Filter mode: cambia a point (no filter).

Esto evita el anti-aliasing, ese efecto que mezcla píxeles para suavizar la imagen. En un juego con estética pixel art tú quieres lo contrario: píxeles grandes y crujientes.

¿Qué es pixel perfect en Unity? Es una configuración que muestra cada píxel del sprite sin suavizado, manteniendo la estética original del pixel art. Se logra ajustando filter mode a point y definiendo bien los pixels per unit.

Dale clic en Apply y la configuración se replica en todos los elementos seleccionados.

Cómo aplicar nine slicing a botones en Unity

Los botones necesitan estirarse sin deformar sus esquinas. Para eso existe el nine slicing, una técnica que divide la imagen en nueve secciones: cuatro esquinas fijas, cuatro bordes que se estiran en una dirección y un centro que se estira en ambas.

Pasos para configurar el Sprite Editor

Selecciona el botón azul y abre el Sprite Editor. Mueve el bounding box para marcar las cuatro divisiones justo por debajo de las esquinas:

Línea superior debajo de la esquina de arriba.
Línea inferior por encima de la esquina de abajo.
Línea izquierda al borde de la esquina izquierda.
Línea derecha al borde de la esquina derecha.

Aplica los cambios y repite el proceso con el botón gris y el amarillo. Cuando crees una imagen tipo Image dentro del UI y le asignes uno de estos botones, podrás estirarlo a cualquier tamaño y los bordes se mantendrán intactos [02:30].

¿Para qué sirve el nine slicing? Permite que un botón o panel se escale a distintos tamaños sin que sus esquinas se deformen. Es esencial cuando tu UI debe adaptarse a diferentes resoluciones.

Cómo usar imágenes de referencia dentro del editor de Unity

Trabajar a ojo es un error común. Tener tus diseños de referencia visibles mientras construyes la interfaz acelera el proceso y reduce errores.

Ve a la carpeta principal de Assets y crea un nuevo folder llamado UI Reference. Dentro, importa todas las imágenes de las pantallas que vas a construir, también disponibles en el archivo comprimido de los recursos.

Abre la primera referencia, la Start Screen, en el Sprite Editor. Luego arrastra esa ventana del Sprite Editor y acóplala al lado de tu Game View. Así, mientras trabajas en la Scene View, tendrás siempre a la vista la imagen objetivo para comparar tu progreso con el diseño final [03:35].

Este flujo de trabajo, comparar en tiempo real diseño contra implementación, es una práctica común entre desarrolladores de juegos y diseñadores de UI.

Conceptos clave que aplicaste en esta preparación

Antes de seguir con la pantalla de título, estos son los términos técnicos que ya forman parte de tu flujo:

Sprite: imagen 2D usada en motores como Unity para representar elementos visuales.
Pixels per unit: relación entre píxeles del sprite y unidades del mundo en Unity. A menor valor, más grande se ve cada píxel [01:25].
Filter mode point: opción que desactiva el suavizado entre píxeles [01:35].
Nine slicing: técnica de división en 9 secciones para escalar imágenes sin deformar bordes [02:00].
Sprite Editor: herramienta de Unity para editar propiedades visuales y áreas de corte de un sprite.

¿Ya tienes tus carpetas organizadas y los botones listos para estirarse? Cuéntame en los comentarios qué asset te dio más trabajo configurar.

Resumen

Cómo organizo los sprites en carpetas dentro de Unity

Lo primero es darle estructura al proyecto. Si dejas todos los sprites sueltos, vas a perder tiempo buscando cada vez que necesites uno.

Dentro de la carpeta Assets > Sprites, crea dos subcarpetas con clic derecho:

Pieces: para los sprites de las piezas del tablero.
UI: para todo lo relacionado con interfaces de usuario.

Por qué configurar pixels per unit y filter mode en point

Pixels per unit: pasa de 100 a 16.
Filter mode: cambia a point (no filter).

Esto evita el anti-aliasing, ese efecto que mezcla píxeles para suavizar la imagen. En un juego con estética pixel art tú quieres lo contrario: píxeles grandes y crujientes.

¿Qué es pixel perfect en Unity? Es una configuración que muestra cada píxel del sprite sin suavizado, manteniendo la estética original del pixel art. Se logra ajustando filter mode a point y definiendo bien los pixels per unit.

Dale clic en Apply y la configuración se replica en todos los elementos seleccionados.

Cómo aplicar nine slicing a botones en Unity

Pasos para configurar el Sprite Editor

Selecciona el botón azul y abre el Sprite Editor. Mueve el bounding box para marcar las cuatro divisiones justo por debajo de las esquinas:

Línea superior debajo de la esquina de arriba.
Línea inferior por encima de la esquina de abajo.
Línea izquierda al borde de la esquina izquierda.
Línea derecha al borde de la esquina derecha.

¿Para qué sirve el nine slicing? Permite que un botón o panel se escale a distintos tamaños sin que sus esquinas se deformen. Es esencial cuando tu UI debe adaptarse a diferentes resoluciones.

Cómo usar imágenes de referencia dentro del editor de Unity

Trabajar a ojo es un error común. Tener tus diseños de referencia visibles mientras construyes la interfaz acelera el proceso y reduce errores.

Este flujo de trabajo, comparar en tiempo real diseño contra implementación, es una práctica común entre desarrolladores de juegos y diseñadores de UI.

Conceptos clave que aplicaste en esta preparación

Antes de seguir con la pantalla de título, estos son los términos técnicos que ya forman parte de tu flujo:

Sprite: imagen 2D usada en motores como Unity para representar elementos visuales.
Pixels per unit: relación entre píxeles del sprite y unidades del mundo en Unity. A menor valor, más grande se ve cada píxel [01:25].
Filter mode point: opción que desactiva el suavizado entre píxeles [01:35].
Nine slicing: técnica de división en 9 secciones para escalar imágenes sin deformar bordes [02:00].
Sprite Editor: herramienta de Unity para editar propiedades visuales y áreas de corte de un sprite.

¿Ya tienes tus carpetas organizadas y los botones listos para estirarse? Cuéntame en los comentarios qué asset te dio más trabajo configurar.

Introducción y configuración inicial

Transforma la UI de tu juego Match 3 en Unity

Cargando el proyecto

Unity UI vs UI Toolkit: cuál usar en 2022

El sistema de UI de Unity

Canvas y sus modos de renderizado en Unity

El Rect Transform

Componente de imagen

Máscaras y efectos

Texto en Unity con Text Mesh Pro

Creando botones en nuestra interfaz

Otros elementos de UI

Auto layout

Scroll views

Controla grupos de UI con Canvas Group

Haciendo interfaces para el juego

Pantallas de UI para Safari Match en Unity

Importar y configurar sprites UI en Unity

Construye la Start Screen en Unity

Animando el fondo con shader graph

Agregando lógica a la pantalla de título

Scroll view de selección de niveles en Unity

Genera lista de niveles con prefabs en Unity

Corrige bugs de UI antes de añadir más features

Contador de puntos y pausa en Unity HUD

Anima iconos con DOTween en Unity

Pantalla de pausa en Unity con Layout Group

Pantalla de pausa con reseteo de escena en Unity

Rediseño visual de la pantalla Game Over en Unity

Pantalla de opciones con layouts en Unity

Implementación de la pantalla de configuración

Interfaces de Unity que parecen juegos profesionales

Importar y configurar sprites UI en Unity

Progreso del curso

Introducción y configuración inicial

El sistema de UI de Unity

Haciendo interfaces para el juego

Recursos

Recursos