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:

1. Línea superior debajo de la esquina de arriba.
2. Línea inferior por encima de la esquina de abajo.
3. Línea izquierda al borde de la esquina izquierda.
4. 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.