Sprites, Sprite Renderer y Sorting Layers

Qué es un sprite#

Un sprite es una imagen 2D que se dibuja en la escena: el personaje, un enemigo, el suelo, un icono. En Unity, una textura importada como Sprite se coloca en un GameObject mediante el componente Sprite Renderer.

Importar bien un sprite#

Cuando arrastras un PNG a Assets, selecciónalo y ajusta el Import Settings. Los que más importan:

• Texture Type: Sprite (2D and UI) — obligatorio para usarlo en 2D.
• Pixels Per Unit (PPU): cuántos píxeles de la imagen equivalen a 1 unidad de mundo. Con PPU 100, un sprite de 100×100 px mide 1×1 en la escena. Es la escala de todo tu juego 2D: fija un valor y sé coherente.
• Sprite Mode: Single (una imagen) o Multiple (una hoja con varios; se recorta en el Sprite Editor).

El Sprite Renderer#

Es el componente que dibuja el sprite. Sus campos clave:

• Sprite: qué imagen mostrar.
• Color: tinte y transparencia (baja el alpha para desvanecer).
• Flip X / Y: voltear sin rotar (para que el personaje mire al otro lado).
• Sorting Layer y Order in Layer: el orden de dibujado (lo vemos ahora).

using UnityEngine;

public class Parpadeo : MonoBehaviour
{
    private SpriteRenderer sr;
    void Awake() => sr = GetComponent<SpriteRenderer>();

    // Poner el sprite rojo un instante al recibir daño
    public void Golpe()
    {
        sr.color = Color.red;
        Invoke(nameof(Restaurar), 0.1f);
    }
    void Restaurar() => sr.color = Color.white;
}

El orden de dibujado: Sorting Layers#

En 2D, ¿qué se dibuja delante? No es la posición Z como en 3D, sino dos ajustes:

1. Sorting Layer: capas con nombre y orden (Edit → Project Settings → Tags and Layers). Ejemplo de abajo a arriba: Fondo, Suelo, Personajes, Efectos, UI. Lo de una capa superior tapa a lo de una inferior.
2. Order in Layer: dentro de una misma capa, el número mayor se dibuja encima.

Cambiar el orden por código:

sr.sortingLayerName = "Personajes";
sr.sortingOrder = 5;   // Order in Layer

El Sprite Editor: recortar hojas#

Si un PNG contiene varios frames (una sprite sheet), ponlo en Sprite Mode: Multiple y abre el Sprite Editor → Slice para recortarlos automáticamente. Cada recorte es un sprite usable, base de la animación 2D.

Errores frecuentes#

• Pixel art borroso: falta Filter Mode: Point y Compression: None.
• Mezclar Pixels Per Unit distintos entre assets → todo descuadrado de tamaño.
• Intentar ordenar sprites moviéndolos en Z en vez de con Sorting Layer / Order in Layer.
• Olvidar crear las Sorting Layers y dejar todo en Default (nada se ordena bien).

Ponte a prueba#

Resumen#

El 2D se dibuja con sprites en un Sprite Renderer. Impórtalos como Sprite (2D and UI), cuida los Pixels Per Unit (la escala del juego) y, para pixel art, Point + sin compresión. El orden de dibujado no lo da la Z sino los Sorting Layers (capas ordenadas) y el Order in Layer (dentro de la capa). Con esto montas el fondo, los personajes y los efectos en el orden correcto. Sigue con el Tilemap para construir niveles y la física 2D.