La cosa mas dificil de hacer (bien) en un plataformas 2D: La camara

Publicado:
Escrito entre el 14/2/2026 - 22/2/2026

    Mini Intro

    Estoy desarrollando un videojuego llamado Luna Flyta, un plataformas 2D en el que tienes que completar niveles lo mas rapido posible, porque tienes un tiempo limite para llegar al final.

    El personaje cuadradito que se mueve se llama Squari. Eso es todo lo que necesitas saber para poder entender este post. Ahora que esto esta explicado, vamos al tema principal... Las camaras.

    El problema

    Squari puede alcanzar velocidades altisimas en muy poco tiempo. El problema es que este juego es un juego que requiere que el jugador actue a tiempo con lo que se encuentra por delante suya, y ademas tiene que hacerlo rápidamente.

    Si la camara se quedase centrada en Squari cuando este va muy rápido, no se podria ver lo que tiene enfrente suya a tiempo.

    Entonces, el problema con ir muy rapido en un videojuego 2D es la visibilidad.

    Sorprendentemente, encontrar la solución a este problema NO fue tan sencillo como ver como lo hacian otros juegos similares y copiarlo. Cualquiera pensaria, logicamente, que echar un vistazo a lo que hacen los Sonic 2D seria una buena idea.

    Peeeroooo... resulta que no. Segun he leido en internet de las opiniones del fandom de Sonic, y preguntado a un amigo; a menos que te sepas el nivel de primeras, lo vas a pasar mal intentando ir deprisa la primera vez que pases por un nivel. No vas a poder ser guay y esquivar todos los obstaculos con estilo la primera vez.

    Pulsa aqui para ver a Sonic en 1991
    Diseño antiguo de Sonic para su pelicula. (El diseño del que todo el mundo se rio) Sonic en sus buenos tiempos.
    Nota: No he tenido una buena experiencia con los juegos de Sonic

    El unico juego de Sonic qué jugue fue el primero, y lo deje en los primeros niveles del juego por la frustración de estamparme cada dos por tres con unos pinchos que ni me veia venir por la velocidad que llevaba. Asi que me importa bastante evitar que pueda pasar eso con mi juego.

    ¿Como solucionamos esto?

    Se me ocurren tres formas de solucionar este problema (pero seguramente existan mas soluciones):

    1. Mostrar mas del nivel en pantalla ("zoom out")
      Basicamente, es como si estuvieses viendo un cuadro muy de cerca y decides alejarte para poder ver todo el cuadro (nivel) de una.
        Desventajas
      • La camara no podra dar ninguna "sensación de velocidad" porque se movera mas despacio.
      • El jugador se tendra que ver obligatoriamente pequeño en relación a la pantalla.
        Ventajas
      • Muy sencillo de programar.
      • Permite ver gran parte del nivel
    2. Video

      NOTA: Sin querer inclui en el video un metodo mas de movimiento de camara sin darme cuenta... Ups >.<

    3. Mover la camara hacia donde se mueve el personaje
      Esto puede parecer la mejor opción de primeras, pero acarrea bastantes desventajas a tener en cuenta.
        Desventajas
      • Puede marear/liar si la camara se mueve bruscamente de un lado a otro.
      • Puede ser que sea incluso mas dificil para el jugador ajustar los saltos, porque el personaje no siempre estara en el centro si no que podria estar o en la derecha o en la izquierda de la pantalla
      • Es considerablemente mas complicado de programar para que quede bien que otras opciones.
        Ventajas
      • Es la mas util porque permite al jugador ver con lo que se va a encontrar.
      • Se ve guay.
    4. Video
    5. Enseñarte primero el nivel, despues dejarte correr
      ¿Te sorprende? Secretamente, pero no tan secretamente, es lo que hacen muchisimos juegos que quieren hacerte creer que vas rapido y que eres super guay por haberte visto venir todos esos saltos con un tiempo de reacción sobrehumano.

      Pizza Tower es el mejor ejemplo que se me viene a la cabeza.

      Los niveles de este juego consisten en ponerte primero en el nivel y dejarte completarlo a tu ritmo, y una vez llegas al final de este, te exige volver al inicio del nivel pero con un tiempo limite añadido. Si no consigues llegar a tiempo: pierdes.

      Captura de pantalla de gameplay de Pizza Tower. Pepino (el personaje) esta corriendo porque tiene un cronometro metiendole prisa.
      El as en la manga de este juego: Primero, te hace pasar por un nivel bien diseñado y divertido, hecho de forma que puedes tomarte tu tiempo cometiendo todos los errores que quieras. Pero, en cuanto llegas al final, te hace volver por donde has venido (a veces incluso por rutas nuevas), y como ya lo has pasado una vez sabes que esperarte. Por lo que es muchisimo mas probable que puedas hacer mas o menos bien el nivel a toda prisa en reverso.
      Extra: Otras cosas que Pizza Tower hace para que se sienta bien ir rapido

      Estamparse a toda velocidad contra un muro en este juego es totalmente inevitable; y precisamente por eso es una mecanica. Cuando vas deprisa y te estampas contra una pared lo que ocurre es que empiezas a escalarla; Si en vez de ocurrir eso, te castigasen, seria muy frustrante que el juego te metiese prisa cuando en tu subconsciente piensas "Si intento ir rapido, corro el riesgo (guiño guiño) de que el juego me castigue, asi que mejor no lo hago"

      Otra cosa que Pizza Tower hace, y muchos otros juegos similares también, es simplificar el nivel cuando te exigen que vayas rapido. Aunque Pizza Tower es de los que menos lo hace, gracias a que te ha enseñado el nivel antes.


    Al final, todas estas decisiones dependen muchisimo del tipo de juego que se quiera hacer, por lo que lo que he puesto aqui no es para nada la solución definitiva a todas las camaras 2D del mundo (ni mucho menos...).

    La camara de Luna Flyta

    Ahhhhh, ¡Por fin...! ¡Por fin ha llegado la parte en la que nerdeo sobre mi camara...! ...ajem.

    Mi solución consiste en hacer una pequeña mezcla entre hacer "zoom out" y mover la camara en la dirección a la que te mueves, de forma que puedas ver un poco mas de lo que tienes delante.



    Al final, escribiendo este post y probando cosas, me he dado cuenta de que es muy dificil tener una sola camara que funcione para todas las situaciones que quiero poner.


    ¿La solución?


    <----------------- Parametrizar absolutamente toda la camara!!



    Es decir, que puedo cambiar el funcionamiento de la camara en medio de un nivel solo cambiando estos valores.

    Es muy comodo hacerlo asi porque ademas puedo probar nuevas configuraciones de camara rapidamente. Evidentemente tengo el mismo "sistema" hecho en el jugador y puedo, esencialmente, cambiar mucho del movimiento sin necesitar meterme en el código.

    (Este es un buen momento para decir que estoy usando Godot y que puedo hacer esto gracias a las funciones que tiene el inspector de Godot)

    El juego aun esta en desarrollo, por lo que cualquier cosa que enseñe aqui puede cambiar y probablemente cambiara. La camara es uno de los apartados que siento que no voy a dejar de refinar hasta que de el proyecto por terminado, por lo que nada es 100% definitivo.

    Ok, pues, ¿Como funciona?

    Si el jugador se mueve despacio, la camara solo se mueve muuuuuy ligeramente a la dirección a la que se mueva.

    Si el jugador se mueve rapido, la camara se mueve proporcionalmente a la velocidad en la dirección deseada. Suena mas complejo de lo que realmente es. Lo explico mejor a continuación.

    Sencillamente quiere decir que, si te mueves rapido a la derecha, la camara se movera a la derecha; si te mueves MUY rapido a la derecha, la camara se movera MUCHO a la derecha. A esto le juntas que hace un ligero "zoom out" cuando vas muy rapido.

    Para evitar cambios bruscos de la camara, todo esta suavizado para que se vea mucho mejor y no sea rígido. (Para los nerds: Uso exponential decay.)

    Otro detallito de mi camara: Cuando detecta que hay una pared cerca empieza a centrar progresivamente a Squari hasta el centro de la pantalla. Todavia me falta un poco de playtesting para ver si esta implementación realmente es util para el jugador, pero por si solo viendolo en un video queda guay.

    (Si, fallo unas cuantas veces en el video, lol)

    Al final, a lo que quiero llegar con todo esto es que no apreciamos lo suficiente las BUENAS camaras.
    Son de esas cosas de los videojuegos que, si esta bien hecha, nadie la nota, pero si esta terriblemente hecha, TODO el mundo se da cuenta de ello.
    Recuerda recordarle a tu desarrollador de videojuegos de confianza que lo esta haciendo muy bien y que se esfuerza mucho ;)

    Mi camara tiene unos cuantos trucos mas bajo la manga, pero siento que no tiene mucho sentido usar mi tiempo explicando todos los detalles. Seria mucho mejor dejarte jugar y que tu mismo notes como funciona (Plus, este post ya es suficientemente largo).

    En el futuro seguramente volvere a hablar de esto, cuando el juego este sacado. Si te ha parecido interesante este post, me alegro porque es el primero que escribo y todavia le estoy cogiendo el truco. Espero seguir hablando de esta y mas cosas interesantes en el futuro c:

    Hasta entonces; chau!!

    Detalles técnicos (aka, mates)

    "¿Y ya esta? ¡¿No quieres explicarme tu secreto para mover la camara proporcionalmente a la velocidad del personaje?!"

    Vale, vale, estaria un poco feo hacer eso. Pues, uso una formula para normalizar el valor de velocidad a un nuevo valor que representa el mismo valor de velocidad pero desde 0 hasta 1, o dicho de otra forma, desde 0% (min) hasta 100% (max).

    Con un ejemplo puedo explicarlo mejor: Imaginate que, como maximo, puedes correr a 1000km/h; y, como minimo, a 0km/h.

    Si ahora mismo estas corriendo a 500km/h, ¿Cuanto valdria tu velocidad "normalizada" en un rango [0,1]?

    La respuesta es 0.5.

    Normalizar(minimoVelocidad=0, maximoVelocidad=1000, velocidadActual=500) = 0.5 (50%)

    Normalizar(minimoVelocidad=0, maximoVelocidad=1000, velocidadActual=390) = 0.39 (39%)

    Normalizar(minimoVelocidad=0, maximoVelocidad=1000, velocidadActual=1206) = 1.206 (120.6%)

    Normalizar(minimoVelocidad=0, maximoVelocidad=700, velocidadActual=500) = 0.714 (71.4%)


    Entonces, para utilizar esto en nuestra camara (o lo que queramos, por cierto), solo tenemos que multiplicarlo por el valor que queremos cambiar proporcionalmente.

    Todo esto para decir que quiero el 50% de algun valor.

    "Pues... pues no he entendido absolutamente nada."
    No pasa nada!!!
    Para quien quiera la formula, la formula esta en esta pagina sin traducir de Wikipedia que me acabo de encontrar. La formula es la primera que aparece en la pagina. Puedes meterle los valores que te den la gana y ver como reacciona la formula. Es la mejor forma de entender como funciona.

    Personalmente, ¡¡¡Es mi formula favorita por lo increiblemente util que es!!! <3


    Oh yeah, y escribiendo esto me he acordado de un video de youtube que me vi hace tiempo que es el motivo por el que uso exponential decay para suavizar. Es un video muy interesante y esta explicado por alguien que sabe mucho mas que yo de este tema (y de mates en general), asi que aqui esta para quien le interese.