Videojuegos

El patio de juegos

Imaginá un patio de juegos. Tiene un lugar (el patio), cosas adentro (hamacas, árboles, chicos jugando), reglas (la gravedad, cuándo se prenden las luces) y está en algún lugar del mundo. Un videojuego tiene exactamente esas mismas cuatro partes.

Cada sección se apoya en uno de los videos de la carpeta y suma demos para tocar. No hace falta saber programar.

Un poco de historia

Muchas de las ideas de esta guía son más viejas que los videojuegos. Esta línea de tiempo te sirve de mapa; cada hito vuelve a aparecer más adelante.

1. 1878Eadweard Muybridge fotografía un caballo al galope con 12 cámaras. Pasadas rápido, las fotos parecen moverse.
2. 1927Llega el cine sonoro y los 24 fotogramas por segundo se vuelven el estándar del cine.
3. 1972Sale Pong: dos paletas y una pelota hechas de cuadraditos.
4. 1975Martin Newell modela la tetera de Utah, el objeto de prueba más famoso de los gráficos 3D.
5. 1985Super Mario Bros. en la NES, programado casi todo a mano y sin motor.
6. 1992Nace OpenGL, un idioma común para pedirle dibujos a la placa de video. DirectX llega en 1995.
7. 1999Nvidia lanza la GeForce 256 y la presenta como “la primera GPU”.
8. 2014Godot se libera como motor gratuito y de código abierto.
9. 2015Unreal Engine 4 y Unity 5 pasan a tener versiones gratis. Hacer juegos queda al alcance de cualquiera.
10. 2022Sale Unreal Engine 5, pensado para escenas con miles de millones de triángulos.

Un juego por dentro

Video de Flow Studio, en inglés (12 min): Game Development for Noobs

Todo juego, de Mario a Call of Duty, se puede dividir en cuatro piezas. Volviendo al patio de juegos:

La escena y la cámara

La escena es el patio: el mundo donde pasa todo. La cámara es lo que vos ves de ese mundo.

Los assets

Todo lo que hay en el patio: personajes, árboles, barriles, armas, sonidos.

El código

El cerebro y las leyes del patio: la gravedad, cómo se mueve el jugador, qué pasa cuando tocás la bandera.

La plataforma

En qué país está el patio: una consola, una PC, un celular. Cambia lo que se puede hacer.

La escena y la cámara

En un juego 2D como Mario, el nivel entero ya existe, de punta a punta. La cámara es un rectángulo que se mueve por encima y muestra solo una parte. En un juego 3D la idea es la misma, pero la cámara está “en los ojos” del personaje y ve con perspectiva: lo lejano se ve más chico. Eso hace que el 3D sea bastante más trabajo para la computadora.

Encima de la cámara casi todos los juegos ponen efectos, que funcionan como anteojos de sol: cambian cómo ves todo sin cambiar el mundo. La pantalla que se pone roja cuando te queda poca vida, la mira borrosa de un francotirador o el tono de color de una película. Cuando en las opciones gráficas de un juego ves motion blur, depth of field o ambient occlusion, son eso: distintos anteojos.

Los assets se arman como bloques

En la mayoría de los motores, cada cosa del juego empieza siendo lo mismo: un punto en el espacio, con una posición. Después se le van sumando piezas (los programadores las llaman componentes) según lo que tenga que hacer.

Un árbol se queda quieto: le alcanza con posición, malla y material. El jugador arranca igual, pero además lleva física, código y una cámara pegada. Son dos cosas muy distintas armadas con los mismos bloques.

El código y los archivos

Mientras jugás conviven dos mundos: lo que está vivo en la escena y los archivos guardados en tu disco. El código los conecta todo el tiempo. Por ejemplo, al empezar un nivel, el código se fija en los archivos qué arma tenés equipada, busca el modelo de esa arma y se la pone al jugador. Cuando tocás la bandera del final, el código descarga ese nivel y carga el siguiente.

La plataforma lo cambia todo

No es lo mismo un celular que una consola. Cambian la memoria, el espacio y, sobre todo, los controles: pantalla táctil, sensor de movimiento, micrófono y cámara en el celular; joystick, sensores de movimiento y auriculares en la consola. El mismo árbol puede ser distinto en cada uno. En el celular quizás pierde la física y lleva texturas más livianas; en la consola puede tener más detalle y hasta moverse con el viento.

El motor de juego

Video de TheHappieCat, en inglés (8 min): How Game Engines Work!

Un motor de juego es un programa que ya trae resuelto lo que todos los juegos necesitan: dibujar, sonar y seguir las reglas. Así cada juego nuevo no arranca desde cero.

Los tres grandes trabajos de cualquier motor son los gráficos, el audio y la lógica. Los motores modernos suman mucho más: física, inteligencia artificial para los enemigos, juego en red y herramientas para que todo ande rápido.

Cómo se hacía Mario sin motor

Pensá en el primer nivel de Super Mario Bros. en la NES. Hay piso, caños, Goombas, bloques y monedas. Los programadores tenían que pedirle a la consola cada dibujo, uno por uno, y ubicarlo en su lugar. Y como la memoria era chiquita, al pasar a la zona siguiente tenían que borrar a mano cada Goomba, cada moneda y cada bloque para hacer lugar.

Sería mucho más cómodo tener un sistema que lleve la cuenta de todos los objetos y los borre solo al cambiar de nivel. Ese sistema ocupa memoria, pero ahorra muchísimo tiempo. Y si se arma de manera que sirva para cualquier juego (Mario, Mega Man o Zelda), ya no hay que volver a escribirlo. Eso es un motor.

En los juegos viejos la memoria era tan escasa que no podían darse ese lujo. Los motores comprados a terceros se volvieron comunes recién con los juegos 3D, cuando la tecnología se complicó tanto que hacer todo desde cero dejó de tener sentido.

Cómo se empieza a armar un nivel

En el video de Vox, Brett Bibby, que dirigía la ingeniería de Unity, cuenta cómo arrancaría un pueblo del Lejano Oeste: con cajas blancas para el salón, el banco y la calle principal. Primero se busca que el tamaño y el espacio se sientan bien, como jugando con Lego. Los detalles vienen después.

Tres motores, tres estilos

¿Un motor mejor hace un juego mejor? No necesariamente. Como Unity es fácil y gratis, se hicieron muchísimos juegos con él, y es lógico que una parte no sean buenos: es probabilidad, no culpa del motor. Al revés, juegos hechos con herramientas simples, como Undertale, muestran que la creatividad pesa más que la tecnología.

Un mundo hecho de triángulos

Video de Vox, en inglés (5 min): Why video games are made of tiny triangles

Tu pantalla está hecha de cuadraditos de un solo color, los píxeles. Pero los mundos 3D de los juegos se arman con triángulos: miles, a veces millones, pegados entre sí. Personas, autos, montañas: todo son triángulos.

Desde Pong, que era literalmente un puñado de cuadrados, la potencia de las computadoras creció muchísimo. Pero los creadores siempre la llenan con más detalle. Por eso una de las tareas de un motor es lograr que cada detalle cueste la menor cantidad de cálculos posible, y ahí entran los triángulos.

Unir los puntos

Para la computadora, un objeto 3D es una lista de puntos, los vértices, como en un juego de unir los puntos, pero en tres dimensiones. Lo más fácil de dibujar entre esos puntos son superficies planas, porque no hay que calcular curvas ni abolladuras. Y la única figura que es plana siempre, pongas sus puntos donde los pongas, es el triángulo.

Por eso, aunque los artistas a veces modelan con cuadriláteros (en inglés, quads), antes de dibujarlos la computadora los parte en dos triángulos. Cuatro puntos pueden describir algo más complejo, como una pirámide, y eso pide más cálculos para saber de qué color va cada píxel.

Más triángulos, más detalle, más trabajo

Cómo se ve un objeto 3D por dentro

Un archivo de un modelo 3D, despojado de todo, es una lista de vértices (cada uno con su largo, alto y profundidad: X, Y, Z) y una lista de caras que dicen qué vértices unir:

v  0.0  1.0  0.0     ← vértice 1
v -1.0  0.0  0.0     ← vértice 2
v  1.0  0.0  0.0     ← vértice 3
f  1 2 3             ← un triángulo con los vértices 1, 2 y 3

Tranquilidad: nadie escribe esos números a mano. Los artistas modelan con programas visuales como Blender, y el archivo se genera solo.

El viaje de un fotograma

Video de TheHappieCat, en inglés (6 min): How Rendering Graphics Works in Games!

Tu pantalla es plana. Cada imagen que ves en un juego 3D es un dibujo plano que la computadora calcula desde cero, decenas de veces por segundo. Ese proceso se llama renderizar, y estos son sus pasos.

• Las matrices son grillas de números. Para mover un objeto, girarlo o pasarlo del “mundo” a la “cámara”, la computadora multiplica sus coordenadas por estas grillas. No hace falta saber cómo; alcanza con saber que cada paso es una de esas multiplicaciones.
• Los juegos 3D no son 3D. Lo que ves siempre es una imagen plana que cambia muchas veces por segundo según lo que hacés. Esa sucesión de imágenes crea la ilusión de un mundo con profundidad.
• El último ajuste es al tamaño de tu pantalla. La imagen se adapta a la ventana y a la zona visible del juego. Por eso el mismo juego funciona en un monitor chico, en un televisor enorme o en modo ventana.
• Son muchísimas cuentas, aun para el objeto más simple, y se repiten en cada fotograma. Hasta el peor juego del mundo corre sobre una tecnología impresionante.

La CPU y la GPU

Video de Udacity, en inglés (2 min): The CPU, the GPU, and OpenGL

La CPU es como un chef experto: puede cocinar cualquier cosa, pero tiene pocas manos. La GPU es un ejército de ayudantes que solo saben hacer una cosa, todos a la vez: pintar píxeles.

La CPU es el procesador principal de tu computadora o tu celular. Tiene pocos núcleos (cada núcleo es una “cabeza” que trabaja por su cuenta), pero cada uno puede hacer casi cualquier tarea. La GPU, o placa de video, tiene miles de núcleos mucho más simples que trabajan en equipo: en cada instante, todos ejecutan la misma instrucción. Es menos flexible, pero para pintar millones de píxeles no tiene rival.

Un idioma para hablarse

El reparto de tareas es así: el código que corre en la CPU decide qué hay que dibujar y le manda las instrucciones a la GPU, que calcula el color de cada píxel y le pasa la imagen terminada a la pantalla. Para entenderse necesitan un idioma común. El más conocido es OpenGL. Los celulares usan una versión reducida, OpenGL ES (ES viene de “sistemas embebidos”), y en el mundo de Microsoft se usa DirectX, que cumple la misma función.

Dato extra: las GPU sirven para mucho más que pintar píxeles. Cualquier tarea que se pueda partir en miles de cuentas iguales corre rapidísimo en ellas, y gastando poca energía por cuenta. Por eso hoy son la base de la inteligencia artificial.

La ilusión del movimiento

Video de Fredega Producciones, en español (5 min): ¿Qué son los FPS?

Nada se mueve en una pantalla. Lo que ves son fotos quietas pasadas muy rápido, y tu cerebro completa el movimiento. Cuántas fotos se muestran por segundo es lo que se llama FPS: frames per second, o fotogramas por segundo.

Un caballo y doce cámaras

En la década de 1870 no existía el video, y para sacar una foto el modelo tenía que quedarse quieto un buen rato. El fotógrafo británico Eadweard Muybridge quería capturar a un caballo al galope. En 1878 puso 12 cámaras en fila a lo largo de la pista, cada una con la velocidad de disparo más rápida de su época, y consiguió una foto de cada momento del galope. Pasadas rápido, una tras otra, las fotos se movían. Muybridge había hecho, en la práctica, uno de los primeros videos.

De ahí viene la idea de fotograma por segundo. En un rollo de película se ven los cuadritos, cada uno una foto. Proyectados a toda velocidad, el ojo y el cerebro los funden en un movimiento continuo. Desde fines de los años 20, el cine usa 24 fotos por segundo. Las cámaras lentas hacen lo contrario: capturan cientos o miles de fotos por segundo y después las muestran despacio. Y la animación funciona igual: se dibuja cuadro por cuadro.

Y en los juegos, ¿qué cambia?

Un juego no reproduce fotos ya sacadas: dibuja cada fotograma en el momento, con todo el proceso de «El viaje de un fotograma». Si la computadora llega a dibujar 60 por segundo, el juego va a 60 FPS. Si se le complica, baja a 30, o a 20, y empieza a verse “a los saltos”. La pantalla también tiene su propio límite, la frecuencia de refresco, que se mide en hercios (Hz): un monitor de 60 Hz muestra hasta 60 imágenes por segundo, y uno de 144 Hz, hasta 144.

El reloj del juego

Video de The Cherno, en inglés (28 min): Timesteps and Delta Time

Si cada computadora dibuja una cantidad distinta de fotogramas por segundo, ¿cómo hace un juego para que el personaje corra a la misma velocidad en todas? Midiendo el tiempo. A eso se le llama delta time.

La vuelta del juego

Todo juego es una vuelta que se repite sin parar, llamada game loop: leer los controles, actualizar el mundo, dibujar el fotograma, y de nuevo. Cada vuelta es un fotograma. A 60 FPS, el juego da 60 vueltas por segundo.

El problema

Supongamos que el juego mueve al personaje 0,1 pasos en cada vuelta. Suena razonable, pero:

• A 60 FPS se mueve 0,1 × 60 = 6 pasos por segundo.
• En una computadora potente, sin límite de FPS, puede dar 4.000 vueltas por segundo y moverse 400 pasos por segundo. Sale disparado.
• Si el juego se traba y baja a 10 FPS, el personaje se mueve en cámara lenta.

La velocidad del juego quedó atada a la potencia de la computadora, y eso no es lo que queremos. Queremos que un segundo de juego dure un segundo real, en cualquier máquina.

La solución

En cada vuelta, el juego mide cuánto tiempo pasó desde la vuelta anterior. Esa medida es el delta time (“delta” significa diferencia). Después multiplica la velocidad por ese tiempo:

distancia de esta vuelta = velocidad × delta time

• A 60 FPS, cada vuelta dura 0,016 segundos: el personaje da pasitos cortos y frecuentes.
• A 30 FPS, cada vuelta dura 0,033 segundos, el doble: el personaje da pasos el doble de largos, la mitad de veces.
• Al final del segundo, los dos llegaron al mismo lugar. Con menos FPS se ve menos fluido, pero nunca más lento.

Son apenas unas líneas de código, y gracias a ellas un juego anda bien en un monitor de 60 Hz, en uno de 144 o en uno de 240. En los motores ya viene resuelto: en Unity se llama Time.deltaTime y en Godot llega como delta en cada vuelta. Lo único que tenés que acordarte es de multiplicar.