certmundo.
es‑mx

6 min de lectura

¿Cómo funciona la pantalla y el espacio en un videojuego 2D?

En un videojuego 2D, la pantalla es una cuadrícula invisible de puntos donde tú decides exactamente dónde va cada cosa.

¿Alguna vez te preguntaste cómo sabe el juego que el personaje está "a la izquierda" o "arriba"? La respuesta es más sencilla de lo que imaginas. Todo funciona con números.

El espacio 2D: un mapa con coordenadas

Imagina que la pantalla de tu juego es como un mapa de ciudad. Cada calle tiene un nombre y un número. En un juego 2D, usamos dos números para ubicar cualquier objeto: X e Y.

  • X indica qué tan a la derecha o a la izquierda está algo.
  • Y indica qué tan arriba o abajo está.

Eso es todo. Con solo dos números puedes colocar un personaje, una moneda o un enemigo en cualquier lugar de la pantalla.

Jorge tiene 19 años y vive en Monterrey. Empezó a hacer su primer juego en Unity hace tres semanas. El primer día se confundió porque su personaje aparecía en lugares raros. Cuando aprendió que X=0, Y=0 es el centro de la pantalla, todo tuvo sentido. Ahora coloca sus personajes con precisión total.

¿Qué significa el punto (0, 0)?

En Unity 2D, el punto X=0, Y=0 es el centro del mundo del juego. No es la esquina de la pantalla. Es el centro exacto.

Si mueves un objeto a X=3, se va hacia la derecha. Si lo mueves a X=-3, se va hacia la izquierda. Si lo mueves a Y=2, sube. Si lo mueves a Y=-2, baja.

Piensa en esto como la cuadrícula de un mapa de Google Maps. El cero es tu punto de partida. Los números positivos y negativos te dicen hacia dónde vas.

Un ejemplo concreto

Supón que tienes un juego con una tienda estilo Liverpool. El letrero de la entrada está en X=0, Y=3. La puerta está en X=0, Y=0. El estacionamiento está en X=5, Y=-2. Cada objeto tiene su propio lugar. Ninguno se encima con otro porque cada uno tiene coordenadas únicas.

¿Qué son los píxeles y las unidades?

Unity no trabaja directamente con píxeles. Trabaja con unidades. Una unidad equivale, por defecto, a 100 píxeles en pantalla.

Esto importa cuando importas imágenes. Si tu imagen de personaje mide 64x64 píxeles y la configuras como "100 píxeles por unidad", el personaje ocupará 0.64 unidades en el juego. Si la configuras a 32 píxeles por unidad, ocupará 2 unidades y se verá más grande.

Al principio puede sonar confuso. Pero en la práctica solo necesitas recordar una regla: mantén el mismo valor de píxeles por unidad en todas tus imágenes. Así todo se ve proporcional.

Claudia trabaja en Guadalajara como diseñadora gráfica. Empezó a hacer juegos como pasatiempo. Su primer error fue importar imágenes con distintas configuraciones de píxeles. Su personaje medía lo mismo que un edificio. Cuando unificó todo a 32 píxeles por unidad, su juego se vio exactamente como lo planeó.

Las capas: ¿quién va enfrente y quién va atrás?

Aquí viene algo que mucha gente no espera: en un juego 2D, los objetos también tienen un orden de profundidad. No es profundidad real como en 3D, pero sí hay un orden visual.

Imagina que estás acomodando recortes de papel sobre una mesa. Si pones el cielo primero, luego los edificios y al final el personaje, cada capa tapa a la anterior. Eso es exactamente lo que pasa en un juego 2D.

En Unity, esto se controla con la propiedad Order in Layer (orden en capa). Un objeto con Order in Layer = 0 aparece detrás. Un objeto con Order in Layer = 1 aparece frente a él. Y así sucesivamente.

Ejemplo de capas en un juego de aventura

Supón que estás haciendo un juego de aventura ambientado en el mercado de Jamaica en la Ciudad de México. Necesitas tres capas:

  1. Fondo (cielo y edificios): Order in Layer = 0
  2. Puestos del mercado: Order in Layer = 1
  3. Personaje del jugador: Order in Layer = 2

Si pones el personaje en Order in Layer = 0, quedaría detrás de los puestos y no lo verías. Con el valor correcto, todo se muestra en el orden que tú quieres.

La cámara: los ojos del jugador

¿Qué es la cámara en un juego 2D? Es el "ojo" que decide qué parte del mundo ve el jugador en pantalla.

En Unity 2D, hay un objeto llamado Main Camera. Todo lo que entra dentro de su vista aparece en la pantalla final del juego. Lo que queda fuera, no se ve.

Al principio, la cámara está fija. Muestra solo un área del mundo. Pero en muchos juegos, la cámara sigue al personaje. Así el jugador puede moverse por un mundo más grande que la pantalla.

Roberto tiene 24 años y vive en Puebla. Está desarrollando un juego donde un repartidor de FEMSA recorre distintas colonias. Cuando fijó la cámara, el mundo se veía pequeño. Cuando la programó para que siguiera al personaje, de repente su juego se sintió como una aventura real.

¿Cómo mover la cámara con el personaje en Unity?

La forma más sencilla para principiantes es hacer que la cámara sea hija del personaje en la jerarquía de Unity. Arrastra el objeto "Main Camera" encima del objeto de tu personaje en el panel Hierarchy. Listo: la cámara se moverá a donde vaya el personaje.

Más adelante puedes usar scripts para un movimiento más suave. Pero para empezar, este truco funciona perfecto.

Resolución de pantalla: ¿a qué tamaño diseñas?

Una pregunta muy común es: ¿qué tan grande diseño mi juego? La respuesta depende de a quién le apunta tu juego.

Para juegos móviles en México (Android), la resolución más común es 1080x1920 píxeles (vertical) o 1920x1080 (horizontal). Para juegos de escritorio o web, 1280x720 es un buen punto de partida.

En Unity puedes configurar esto en File > Build Settings y luego en Player Settings. También puedes previsualizar distintas resoluciones en el panel Game con el menú desplegable de resoluciones.

No te obsesiones con la resolución al principio. Diseña en 1280x720 y ajusta después. Lo importante ahora es entender cómo se organiza el espacio, no volverlo perfecto desde el día uno.

Errores comunes al trabajar con espacio y pantalla

Estos errores los comete casi todo principiante. Conócelos ahora y ahórrate horas de frustración.

Error 1: Confundir el centro con la esquina. Muchos piensan que (0, 0) es la esquina superior izquierda. En Unity 2D, es el centro. Si tu personaje aparece en lugares extraños, revisa sus coordenadas primero.

Error 2: Mezclar píxeles por unidad. Si importas una imagen a 100 píxeles por unidad y otra a 32, los tamaños no van a coincidir. Define un estándar desde el inicio y úsalo en todas tus imágenes.

Error 3: Olvidar el Order in Layer. Si un objeto tapa a otro sin que lo quieras, revisa el orden de capas. Es el error más fácil de resolver y el que más confunde al principio.

Error 4: Cámara desalineada. A veces la cámara está en Z=0 cuando debe estar en Z=-10 para ver los objetos correctamente en 2D. Si tu pantalla aparece en negro aunque tengas objetos en la escena, revisa la posición Z de la cámara.

Lo que aprendiste hoy

Hoy diste un paso enorme. Ahora entiendes el lenguaje visual de los videojuegos 2D. Coordenadas, capas, cámara y resolución son las herramientas que usan todos los desarrolladores, desde estudios independientes en la colonia Roma hasta equipos grandes que crean apps para FEMSA o Mercado Libre.

La próxima vez que juegues cualquier juego en tu celular, piensa: ¿en qué coordenadas estará ese personaje? ¿Qué Order in Layer tendrá ese fondo? Ya sabes ver el juego como lo ve quien lo construyó.

Puntos clave

  • En un juego 2D, cada objeto tiene una posición definida por dos números: X (horizontal) e Y (vertical). El punto (0, 0) es el centro del mundo en Unity, no la esquina de la pantalla.
  • Las capas (Order in Layer) deciden quién aparece frente a quién. Un valor más alto significa que el objeto se ve encima de los que tienen un valor menor.
  • La cámara es el "ojo" del jugador. Para empezar, puedes hacer que siga al personaje simplemente arrastrándola como hija del personaje en el panel Hierarchy.
  • Mantén el mismo valor de píxeles por unidad en todas tus imágenes. Si mezclas valores distintos, los tamaños de tus objetos no van a coincidir y el juego se verá desproporcionado.
  • Si tu pantalla aparece en negro aunque tengas objetos en la escena, revisa que la posición Z de tu cámara sea -10. Es uno de los errores más comunes en Unity 2D.

Comparte esta lección: