Crea cualquier juego 2D Top Down en Unity: plantilla modular, capas, animaciones y cámara profesional

Crea cualquier juego 2D Top Down en Unity: plantilla modular, capas, animaciones y cámara profesional

Juan Gabriel Gomila Juan Gabriel Gomila
11 minutos

Leer el artículo
Audio generated by DropInBlog's Blog Voice AI™ may have slight pronunciation nuances. Learn more

Contenidos

Hay una diferencia brutal entre un juego que se queda en el cajón y un éxito que termina en Steam. No es el arte. No es ni siquiera la idea. La diferencia es la arquitectura… y cómo la ejecutas en Unity.

Si tu proyecto indie no tiene una base modular y escalable, llegará un punto en el que intentarás añadir inventario, guardado, minimapa, combate o cualquier otra función… y te vas a romper. No por falta de talento, sino por falta de estructura.

La buena noticia es que se puede empezar con una plantilla pensada para crecer. En este artículo te dejo el “esqueleto” de una plantilla 2D Top Down para Unity, con enfoque modular. Incluye: capas y etiquetas, estructura de carpetas, configuración pixel art, move con el New Input System, pintado de escenarios por capas con Tilemap y Tile Rules, animaciones en 8 direcciones con Blend Tree y cámara con Cinemachine confinada al mapa.

Vamos a construirlo paso a paso, pero con criterio profesional: para que esto sirva como motor base sobre el que puedas montar cualquier género.

1) La “DNA” de tu proyecto: etiquetas y capas (antes de escribir nada)

Antes de tocar sprites o scripts, prepara el terreno. En Unity, la base para un Top Down 2D escalable es crear un sistema de tags y sorting layers (capas de renderizado ordenadas) desde el minuto cero.

Etiquetas (Tags)

  • Evita duplicar “player”, porque Unity lo crea por defecto.
  • Crea tags para items, enemigos y todo lo que te aporte claridad.

Capas (Sorting Layers) para profundidad

En Top Down 2D necesitas simular “quién va delante y quién va detrás” del personaje. La idea es pintar elementos en capas ordenadas de fondo a cámara.

  • ground: el suelo (fondo).
  • walk behind: obstáculos por los que el jugador debe poder pasar por detrás.
  • walk in front: obstáculos por los que el jugador pasa por delante (normalmente los “de abajo” de una casa).
  • player: el protagonista.
  • decoration: decoraciones encima (por ejemplo un pajarito que cruza delante de todo).
  • collision: capa lógica para colisión 2D con Tilemap.

El truco es que puedas pintar el mismo objeto en dos zonas distintas: por ejemplo, una casa con la mitad “walk behind” (para que el jugador pase por detrás) y la mitad “collision” (para que chocaría con la parte sólida).

2) Carpeta y estructura modular: crea “un motor” y no un prototipo

Una plantilla nace de la estructura. En tu proyecto crea carpetas claras. Un ejemplo coherente:

  • Scripts: tu lógica. Aquí podrían vivir player.cs, inventory.cs, minimap.cs, etc.
  • Prefabs: player, NPCs, enemigos, etc.
  • Scenes y Configurations (Unity ya las trae).
  • Sprites y/o Assets para los gráficos.

Piensa en tu juego como un conjunto de sistemas que se activan o se desactivan según lo necesites. Así no caes en el “código espagueti”.

3) Pixel art sin arruinar el estilo: importa, recorta y configura

Si usas pixel art, hay un fallo que se repite: un ajuste mal hecho. Unity tiene que dejar el sprite exactamente como lo diseñó el artista.

Importación y carpeta

  • Crea una carpeta sprites (o la que prefieras).
  • Arrastra tu tileset, personajes, etc. Unity hará la importación.

Ajustes clave en Inspector

  • Texture Type: 2D (Sprite UI o 2D).
  • Pixels Per Unit: el número exacto según el diseño. Si tu sprite sheet está pensado para 16 píxeles por celda, configura 16.
  • Filter Mode: Point no filter.
  • Compression: None.
  • Y pulsa Apply.

Sprite mode “Multiple” y recorte en cuadrícula

Si tu hoja contiene muchas animaciones o tiles dentro, pon:

  • Sprite Mode: Multiple.
  • Abre Sprite Editor.
  • En vez de corte automático extraño, usa Slice con Grid by cell size.
  • Define el tamaño exacto, por ejemplo 16x16, sin margen.

Repite esta lógica para personajes y tiles de escenario.

4) Crear el personaje base y moverlo con el New Input System

Coloca tu sprite del personaje como objeto player, asigna el tag y la sorting layer a player.

Activar el New Input System

  • Ve a Project Settings > Player.
  • En Active Input Handling selecciona Input System Package (New).

Input Actions para movimiento continuo

Genera un asset Input Actions llamado por ejemplo player actions.

  • Define una acción move con tipo Value.
  • Tipo de valor: Vector2 (movimiento en X e Y).
  • Asocia:       
    • Joystick: Left Stick
    • Teclado: composición 2D para WASD (Up/Down/Left/Right).

PlayerInput + Player Controller

En el prefab/objeto player añade Player Input y selecciona el input action asset que creaste.

Luego programa un Player Controller (basado en MonoBehaviour) con:

  • OnMove para guardar el vector de entrada.
  • FixedUpdate para mover el Rigidbody 2D.
  • Un movimiento basado en velocidad.

Fijación importantísima: si usas movimiento físico, no va en Update, va en FixedUpdate.

Evitar que “se caiga”: gravity scale o cinemático

Al probar, el personaje puede caerse por gravedad. Solución: ajusta el gravity scale a 0 (mantienes colisiones sin gravedad) o marca el Rigidbody como cinemático. En el flujo recomendado, gravity scale a 0.

Constraints: congelar rotación

Cuando activas colisiones reales (más adelante con TilemapCollider2D), el rigidbody puede empezar a rotar o comportarse “raro”. Congela rotación en Rigidbody 2D para que no se vuelva loco.

5) Pintar el escenario bien: Tilemap por capas (Depth 2D)

Una tentación típica es colocar tiles “a mano”, como si fuera Lego. No: usa Tilemap con Tile Palette.

Crear Tilemap rectangular

  • En jerarquía: 2D Object > Tilemap > Rectangular.
  • Renombra por ejemplo a ground.

Tile Palette por cada tileset

Abre Window 2D > Tile Palette. Crea una nueva paleta por tileset, por ejemplo:

  • floor para suelo
  • house para casas
  • etc.

La paleta permite “pintar” con lógica: brocha, relleno tipo cubo y arrastre. Es mucho más rápido que colocar por clic.

Asigna cada Tilemap a su Sorting Layer

Cuando pintas un tile, lo importante es que el Tilemap esté configurado para la capa correcta (ground, walk behind, collision, decoration...). Si no, todo se desordena.

Ejemplo clave:

  • Pintas la parte “trasera” de la casa en walk behind.
  • Pintas la parte “sólida” en collision.

6) Colisiones con TilemapCollider2D: caminar por detrás, chocar por delante

Para que la capa collision sea colisionable, añade:

  • Un TilemapCollider2D sobre el Tilemap que representa la capa collision.
  • En el player: un BoxCollider2D y un Rigidbody2D (no 3D).

Además, el Rigidbody del player debe ser Dynamic pero con gravity scale = 0 para que no caiga.

Con esto consigues el comportamiento top down clásico: el jugador puede pasar por detrás de una casa, pero choca con la zona frontal.

7) Tile Rules: rellena regiones enormes con pocos clics

Cuando tus escenarios empiezan a crecer, pintar manualmente vuelve a doler. Unity tiene Rule Tile para automatizar el borde y el relleno.

Idea práctica

Creas una regla para tu tileset del suelo. Definirás:

  • qué tile va en el centro
  • qué tile va en los bordes superior, inferior, izquierda y derecha
  • qué pasa en las esquinas

Resultado

Al pintar un área grande, Unity coloca correctamente los bordes y el interior. Además puedes usar randomness para que el terreno no se vea “demasiado perfecto”.

Es una forma de crear mapas vastos rápidamente, sin depender de casilla a casilla.

8) Animaciones en 8 direcciones con Blend Tree 2D

Moviste el personaje. Ahora toca darle alma. Si no sincronizas animación con dirección, el movimiento “se desliza” de forma robótica.

Crear clips y un Animator Controller único

  • Extrae las animaciones del sprite sheet en clips: up, down, left y right (o las combinaciones que tengas).
  • Luego usa un único Animator para el player.

Blend Tree cartesiano (2 ejes)

En el Animator crea un Blend Tree en 2D con modo cartesiano y dos parámetros:

  • moveX
  • moveY

Asigna en el Blend Tree:

  • arriba: (0, 1)
  • abajo: (0, -1)
  • derecha: (1, 0)
  • izquierda: (-1, 0)

Con eso, diagonal y cambios suaves salen prácticamente solos a partir del vector de movimiento.

Transición con estado isMoving

Agrega un boolean isMoving. Cuando el vector de entrada sea distinto de cero, activas movimiento y el Animator elige el blend. Si es cero, vuelves a idle.

Tip clave: desactiva has exit time para que la animación no se quede “enganchada” y responda instantáneamente.

9) Cámara profesional: Cinemachine + Confiner para que el mapa “no se escape”

Sin cámara, el personaje desaparece fuera de pantalla. La solución pro es Cinemachine.

Instalar Cinemachine

  • Package Manager: instala Cinemachine.
  • En jerarquía: añade una cámara 2D, por ejemplo 2D Camera de Cinemachine Targeted.

Target tracking

En la cámara, arrastra tu player al campo Tracking Target. Automáticamente la cámara sigue al personaje.

Confinar con Camera Bounds (Confiner 2D)

Para evitar ver el abismo fuera del mapa:

  • Crea un objeto vacío CameraBounds.
  • Añade PolygonCollider2D y dibuja la zona visible.
  • Activa isTrigger.
  • En la virtual camera añade Cinemachine Confiner 2D y asigna el collider.

Con esto, la cámara se frena y se ajusta al área jugable.

Para seguir escalando: de motor base a juego completo

Con todo lo anterior ya tienes: un player funcional, control de dirección, escenario con profundidad y colisiones, herramientas para pintar mapas grandes y una cámara que no rompe la experiencia.

Ahora el salto real es montar mecánicas: combate, enemigos, inventario, minimapa, guardado… sin reventar la arquitectura.

Si tu foco está en Unity y desarrollo 2D, te puede encajar este catálogo:

Y si quieres una ruta más general de Unity:

Checklist rápida antes de seguir tu juego

  • Capas y etiquetas definidas desde el principio.
  • Tiles recortados en cuadrícula exacta (por ejemplo 16x16).
  • Movimiento con New Input System.
  • Animaciones con Blend Tree 2D y transición instantánea con isMoving.
  • Escenario por capas: ground, walk behind, player, walk in front, collision, decoration.
  • Cámara con Cinemachine y límites con Confiner.

Ese es el verdadero punto de partida. No estás “haciendo un prototipo”. Estás creando un motor reutilizable. Y eso es lo que separa un proyecto olvidado de un juego que llega a buen puerto.

Si quieres, en una siguiente iteración puedes añadir encima el siguiente bloque modular: inventario, guardado, minimapa y UI. Todo encajará mejor porque la base ya está hecha para escalar.

Para más recursos de aprendizaje y formación, puedes visitar el Blog de Frogames

Aprende Unity y 2D con rutas guiadas

Si quieres acelerar el aprendizaje y pasar de esta base modular a un proyecto completo, puedes seguir una ruta estructurada en Frogames Formación. Por ejemplo, este curso de Unity 2018 te ayuda a reforzar fundamentos de Unity y a montar funcionalidades típicas (como minimapa) con una guía paso a paso.

Así reduces la curva de prueba-error y mantienes una arquitectura limpia desde el inicio, tal y como planteamos en la plantilla Top Down 2D.

Preguntas Frecuentes

¿Por qué es tan importante la arquitectura en un juego indie?

Porque evita que el proyecto se rompa al crecer. Sin una base modular, añadir nuevas mecánicas se vuelve caótico y difícil de mantener.

¿Qué significa que una plantilla sea modular en Unity?

Que está organizada en sistemas independientes (movimiento, inventario, UI, etc.) que puedes añadir o quitar sin afectar al resto del proyecto.

¿Por qué usar Tilemap en lugar de colocar sprites manualmente?

Porque permite construir escenarios más rápido, mantener orden por capas y escalar mapas grandes sin errores ni desorganización.

¿Qué ventaja tiene usar Blend Tree para animaciones?

Permite transiciones suaves entre direcciones (incluidas diagonales) usando el vector de movimiento, sin crear lógica compleja.

¿Para qué sirve Cinemachine en un proyecto 2D?

Para crear una cámara profesional que siga al jugador y se mantenga dentro de los límites del mapa sin esfuerzo manual.

« Volver al Blog