Configuración de slice por tamaño en Unity

Clase 10 de 31Curso de Desarrollo de Videojuegos para Móviles con Unity

Resumen

Para lograr gráficos nítidos y listos para producción móvil, el corte de sprites en Unity exige precisión: cambiar el sprite mode, definir los píxeles por unidad, y configurar el slice por tamaño de celda con offset y padding exactos. Aquí verás cómo evitar errores del corte automático y preparar los assets de caramelos con una base sólida para animación y optimización.

¿Cómo preparar los sprites para un corte preciso en Unity?

Antes de cortar, asegúrate de configurar el material correctamente. La coherencia en ajustes como píxeles por unidad es clave para que el tamaño final sea consistente.

  • Abre la carpeta de los sprites. Hay seis gráficos; edita el sexto.
  • Cambia el sprite mode de single a multiple.
  • Ajusta los píxeles por unidad: 250 por 250, igual que en el gráfico anterior.
  • Pulsa Aplicar antes de abrir el editor de sprites.
  • Revisa el mapa de sprites: se ven un sol, un barquito, olas, una sandía, una caracola y un pez.

Cada columna representa una fase del proceso de destrucción del caramelo. Será una animación que se trabajará más adelante, pero ya puedes preparar los cortes para que queden uniformes y centrados.

¿Por qué no usar el slice automático?

El corte automático no reconoce que cada fase pertenece a un mismo cuadrado y genera piezas irregulares.

  • Primeras celdas correctas y las siguientes más pequeñas.
  • Fragmentos sueltos cuando el gráfico pierde forma cuadrada.
  • Resultado inconsistente para animación y alineación.

Conclusión práctica: en estos assets, el automático no es fiable; usa tamaño de celda fijo.

¿Cómo hacer el slice con tamaño de celda, offset y padding?

Define los tamaños exactos para que todas las piezas encajen, queden centradas y mantengan la misma escala que el resto del proyecto.

  • En el desplegable de slice, elige por tamaño de celda.
  • Tamaño de cada celda: 193 × 193 píxeles.
  • Offset: 50 px en horizontal y vertical.
  • Padding: 50 px en horizontal y vertical.
  • Pivote: siempre en el centro para alinear correctamente.
  • Pulsa Slice y verifica que todas las celdas son cuadradas y del tamaño correcto.

¿Cómo comprobar el tamaño y la alineación en escena?

Valida visualmente que el recorte es consistente con tus referencias.

  • Arrastra, por ejemplo, el “sol” a la escena junto al cuadrado de referencia.
  • Verifica que el tamaño coincide y el centro está alineado.
  • Ajusta el order in layer para asegurar que el caramelo quede al frente o detrás según lo necesites.

¿Cómo nombrar y organizar los sprites resultantes?

Mantén orden para animaciones y pruebas rápidas.

  • Renombra por filas: sol1, sol2, …, barco1, ola1, etc.
  • Aplica los cambios para generar todos los sprites en el proyecto.
  • Comprueba en el editor que cada imagen quedó definida y centrada.

¿Qué optimización y ejercicios aplicar con las animaciones?

En el proyecto propuesto se tomarán seis imágenes por caramelo, pero se usará solo la primera para enfocarse en optimización para móvil. Aun así, puedes llevarlo más lejos.

  • Ejercicio recomendado: donde haya un caramelo estático, reemplázalo por la animación con las diferentes fases.
  • Beneficio: tendrás un juego único y listo para mostrar al final.
  • Reglas clave para repetir: sprite mode en multiple, 250 por 250 píxeles por unidad, celdas de 193 × 193, offset y padding de 50, pivote centrado.

¿Te quedó alguna duda sobre el troceado, el centrado del pivote o el uso de order in layer? Cuéntalo en comentarios y comparte tu resultado con los nombres de celdas que elegiste.