[sticky]
Uruguay Gamer » Elaboración » ¿Cómo se hace un videojuego?
¿Cómo se hace un videojuego?
-
Aquí lo prometido...
Una breve reseña personal que consta de 7 partes. Espero que sea útil, comencemos por la parte 1:¿Cómo se hace un videojuego?
(extraído de http://blog.ronaldgames.com/?p=702 )Esta es una pregunta muy requerida por los lectores.
Podríamos decir que básicamente hay dos maneras de responderla. Por un lado, dar una respuesta superficial y por el otro, dar una respuesta en profundidad.
En el primer caso, una respuesta superficial sería: “para hacer un videojuego hay que estudiar un lenguaje de programación, diseñar gráficos, sonidos, y por último hacer un programa que maneje dichos elementos en función de las acciones del teclado/mouse/joystick”.
Es verdad, pero a todo eso le falta algo muy importante: conocer los videojuegos. Una persona puede tener mucho conocimiento de programación, hacer cursos de diseño y con eso, ser un buen programador o diseñador. Tal vez pueda hacer excelentes programas que manejen bases de datos, llevar la contabilidad de una empresa o ser arquitecto y hacer planos o dibujos de gran calidad. Pero, si nunca jugó un videojuego, difícilmente podrá hacer uno.
Tampoco basta solo con jugar juegos, sino comprender la lógica detrás de los juegos. Por ejemplo: si controlamos un personaje que avanza por un mapa y llega a cierta zona donde no puede avanzar más, ¿por qué no avanza?, ¿qué zona del personaje o que puntos del personaje son los que al contacto con el mapa no le permite seguir avanzando?, ¿qué sucede si el personaje realiza cierta acción y puede seguir avanzando?, ¿qué condiciones cumple?
Si estudiamos el comportamiento de los videojuegos y comprendemos su lógica, tendremos una base para comenzar a diseñar nuestros propios videojuegos.
Aquí es donde comienza la respuesta en profundidad.
La respuesta en profundidad no es única, ya que hay muchas maneras de explicar en detalle cómo se hace un videojuego. Esto varía según el lenguaje de programación utilizado y el tipo de juego que se desee hacer.
En este caso, voy a explicar cómo hacer un videojuego de plataformas.
Hay que comprender que para hacer un buen videojuego no existe un camino fácil. Se requieren ciertos conocimientos, capacitación en algunas áreas (programación, matemáticas, física, etc.) que permitirán que el desarrollo del videojuego tenga éxito. Y aunque algunos programas facilitan el desarrollo de videojuegos, estos no permiten un control total sobre lo que se hace y en general consumen recursos innecesarios.
Existen muchos lenguajes de programación, el que utilizaremos en este ejemplo será el C++. También, utilizaremos dos librerías que nos ayudarán en el manejo de gráficos: SDL y SDL_image.
Tal vez, parte de la información que voy a presentar pueda parecer obsoleta, pero el objetivo será brindar un conocimiento base para el desarrollo de videojuegos.
(fin de la parte 1)
-
(extraído de http://blog.ronaldgames.com/?p=711 )
Comencemos por explicar la parte gráfica del juego.
Como bien sabemos, toda imagen en computadora está compuesta de pixeles, pequeños puntos de diferentes colores que a cierta distancia del ojo humano generan la ilusión de estar viendo un determinado dibujo.
En C++, y con la librería SDL, los pixeles están ordenados de la siguiente manera: en la esquina superior izquierda de nuestra pantalla se encuentra el cero u origen numérico de los pixeles. Al desplazarnos a la derecha o a la parte inferior de la pantalla, se incrementan las coordenadas de los pixeles.
En este ejemplo, trabajaremos con un tamaño de resolución de pantalla de 320x240 pixeles. Es decir que, en horizontal las posiciones de un pixel van de 0 a 319, y en vertical van de 0 a 239, recordemos que el cero es una posición válida. En matemáticas, las coordenadas de un punto sobre una grafica se determinan mediante ejes. Al eje de coordenadas horizontales se le denomina con la letra “x” y al de coordenadas verticales con la letra “y”. Aquí usaremos las mismas notaciones. Estableciendo esto, se puede hacer referencia a la coordenada de un punto/pixel, por medio de un par de valores (x e y). Siendo así nuestra coordenada de origen, es decir, el pixel que se encuentra en el extremo superior izquierdo de nuestra pantalla, la coordenada (0, 0), y la coordenada del pixel que se encuentra en el extremo inferior derecho sería la (319, 239).
Ahora bien, al conocer las dimensiones de nuestro entorno ya podemos diseñar algún fondo para el juego.Una forma de hacerlo sería dibujando el fondo libremente. Sin embargo, en este ejemplo utilizaremos un sistema muy antiguo pero muy útil al momento de realizar nuestro primer proyecto, el sistema de tiles.
Dicho sistema consiste en descomponer el mapa en pequeñas áreas, pequeños cuadrados que al estar unos junto a los otros nos dan la sensación de estar viendo un paisaje, algo muy similar al efecto que sucede con los pixeles en la pantalla.
Esta técnica es muy útil, lo fue en particular en los inicios de la industria de los videojuegos, y actualmente se sigue usando, aunque en menor grado. Es un sistema que permite crear grandes fondos a partir de pocos elementos, por lo cual consume menos recursos y así es como muchos de los primeros juegos que fueron programados sobre un hardware limitado pudieron realizarse con éxito.
En nuestro ejemplo, utilizaremos los tiles siguientes:
(fin de la parte 2)
-
(extraído de http://blog.ronaldgames.com/?p=716 )
Una vez que tenemos nuestros tiles, procedemos a numerarlos.
0 1 2 3 4 5 6 7 8 9
¿Para qué nos sirve tener numerados nuestros tiles?
De esa manera podremos guardar de forma sencilla la información de cada elemento o tipo de tile que contiene nuestro mapa. Para ello utilizaremos una variable del tipo matriz, donde guardaremos la información del mapa. Comenzaremos por declarar una variable de 64x64 elementos.
Al igual que los pixeles, los tiles contarán con un par de coordenadas x e y, que estarán referidos a la variable del mapa. De manera que, por ejemplo, si queremos saber qué tipo de tile hay en la esquina superior izquierda del mapa, consultaremos la posición (0, 0) de la variable del mapa. Por otro lado, si quisiéramos saber el tipo de tile que se encuentra en la esquina inferior derecha, consultaremos la posición (63, 63) de la variable del mapa.
Ahora bien, ¿qué dimensiones tiene cada uno de nuestros tiles? En este caso, utilizaremos tiles de 16 pixeles de lado. Por lo tanto, nuestro mapa tendrá 64x16 = 1024 pixeles de lado. También, ahora sabemos que en pantalla caben 20 tiles de ancho por 15 tiles de alto.
¿Y cómo podemos determinar el tile sobre el cual se encuentra un pixel? Para esto, realizaremos le operación inversa, es decir, una conversión de coordenadas. La fórmula que aplicaremos es:
Por ejemplo, si el pixel se encuentra en la coordenada (300, 200), aplicamos la formula (300 / 16, 200 / 16), es decir (18.75, 12.5), lo que significa que el pixel se encuentra dentro del área del tile (18, 12).
Ahora ya estamos listos para diseñar nuestro fondo y luego, el protagonista de nuestro juego.
(fin de la parte 3)
-
(extraído de http://blog.ronaldgames.com/?p=729 )
Ya hemos diseñado el fondo para nuestro juego, ahora estamos listos para diseñar el personaje principal.Lo primero será definir su tamaño en pixeles. Para esto utilizaremos como base el tamaño de los tiles, en este caso será de aproximadamente 2 tiles de alto.
Algo a tener en cuenta a partir de ahora es lo que se conoce como frames o cuadros de animación. Nuestro personaje es animado y la animación se logra colocando un grafico a continuación de otro. Para esto contaremos con una hoja de sprites (sprite-sheet) donde podremos ver cada uno de los cuadros de animación agrupados en una especie de tabla.
A continuación definiremos lo que será nuestra línea de tiempo, es decir, qué sprite debe dibujarse en determinado instante de tiempo. Puede resultar confusa la numeración que daremos a cada elemento mencionado; por un lado tendremos el número del sprite de la hoja de sprites y por otro lado el número frame de la línea de tiempo. Para entenderlo veamos la siguiente ilustración:
En este caso, nuestro juego transcurre a 35.7 cuadros por segundo. Como observamos en la figura, la cantidad de sprites no es suficiente para que en cada fracción de segundo haya un sprite diferente, entonces se repite muchas veces el mismo sprite durante cierto intervalo de tiempo. Por lo que podemos pensar que los datos de la animación se manejaran algo así como muestra la siguiente tabla:
(Ejemplo para la animación de caminar):
Segundos | Frame | Sprite
0.028 | 25 | 2
0.056 | 26 | 2
0.084 | 27 | 2
0.112 | 28 | 2
0.140 | 29 | 3
0.168 | 30 | 3
0.196 | 31 | 3
0.224 | 32 | 3
0.252 | 33 | 4
0.280 | 34 | 4
0.308 | 35 | 4
0.336 | 36 | 4
0.364 | 37 | 5
0.392 | 38 | 5
0.420 | 39 | 5
0.448 | 40 | 5
0.476 | 41 | 6
0.504 | 42 | 6
0.532 | 43 | 6
0.560 | 44 | 6
0.588 | 45 | 7
0.616 | 46 | 7
0.644 | 47 | 7
0.672 | 48 | 7La información de esta tabla quedaría guardada en una variable de tipo matriz, que representa nuestra línea de tiempo. Le llamaremos frames. Por ejemplo: si quisiéramos saber el número de sprite de la frame 31, consultaremos el valor frames[31], que nos devolverá el número de sprite 3.
(fin de la parte 4)
-
(extraído de http://blog.ronaldgames.com/?p=733 )
Ahora que ya hemos definido la animación de las acciones del personaje, ya estamos listos para programar sus movimientos.
Anteriormente habíamos definido las coordenadas del personaje en la pantalla por medio de un par de variables x e y. Entonces, para darle movimiento al personaje lo haremos modificando los valores de dichas variables.
En la física los movimientos de los cuerpos se pueden descomponer de la siguiente manera:
Posición = Posición + Velocidad
Velocidad = Velocidad + AceleraciónAsí que, utilizaremos variables de velocidad y aceleración para cada eje.
Nota: en este juego omitiremos la aceleración en el eje x, ya que el movimiento de desplazamiento del personaje en dicho eje, es lineal.
La variable de aceleración en el eje y la definiremos con el nombre de gravedad, ya que es la que hará caer al personaje.
Para entender cómo funcionan las variables en el transcurso del juego, veamos el siguiente ejemplo:
Supongamos que el personaje se encuentra en la coordenada (300, 200).
La variable de velocidad en el eje y (llamada vy) del personaje al momento de efectuar un salto, toma el valor -7 y la variable de aceleración (gravedad) es 0.5.
Así que, cuando transcurren 0.028 segundos, la posición en el eje y se suma a la variable de velocidad, es decir que se le restan 7 pixeles (posición = 200 + (-7)) y a la velocidad se le suma la aceleración (gravedad), es decir se le suman 0.5 pixeles (velocidad = -7 + 0.5). El resultado es que la posición cambia a 193 y la velocidad a -6.5. Esto sucede sucesivamente tal como lo muestra la siguiente imagen:
Los valores que presenta la imagen son enteros, ya que los pixeles no se pueden dividirse en números racionales. Por eso, los valores reales que toman las variables son los de la siguiente tabla:
Segundos | Posición Y | Velocidad Y
0.028 | 200,0 | -7
0.056 | 193,0 | -6,5
0.084 | 186,5 | -6
0.112 | 180,5 | -5,5
0.140 | 175,0 | -5
0.168 | 170,0 | -4,5
0.196 | 165,5 | -4
0.224 | 161,5 | -3,5
0.252 | 158,0 | -3
0.280 | 155,0 | -2,5
0.308 | 152,5 | -2
0.336 | 150,5 | -1,5
0.364 | 149,0 | -1
0.392 | 148,0 | -0,5
0.420 | 147,5 | 0
0.448 | 147,5 | 0,5
0.476 | 148,0 | 1
0.504 | 149,0 | 1,5
0.532 | 150,5 | 2
0.560 | 152,5 | 2,5
0.588 | 155,0 | 3
0.616 | 158,0 | 3,5
0.644 | 161,5 | 4
0.672 | 165,5 | 4,5
0.700 | 170,0 | 5
0.728 | 175,0 | 5,5
0.756 | 180,5 | 6
0.784 | 186,5 | 6,5
0.812 | 193,0 | 7
0.840 | 200,0 | 7,5Si quisiéramos ver la trayectoria del personaje, podríamos graficar los valores de la tabla de la siguiente manera:
Ahora, nos resta determinar cuándo debe detenerse el desplazamiento. Para eso, debemos detectar la colisión del personaje con los elementos del mapa.
(fin de la parte 5)
-
(extraído de http://blog.ronaldgames.com/?p=739 )
Como ya mencionamos anteriormente, el personaje tiene variables de posición x e y.
Pero, ¿en qué parte del sprite se aplica la coordenada?
Se aplica en el punto que normalmente es llamado hot spot. En este caso sería el punto que nos muestra la siguiente imagen:
Es un punto que (para este juego) determina que el sprite se imprime 12 pixeles a la izquierda y 31 arriba de la coordenada dada. Es decir que si el sprite se encuentra en la coordenada (0,0) se vería en la siguiente posición:
Ahora bien, ¿cómo sabemos dónde puede pararse el personaje o hasta donde puede desplazarse?Por medio de las colisiones. Se verifican puntos arbitrarios del personaje y se comparan con los datos del mapa. Recordemos que nuestro mapa se compone de tiles, y que los tiles distintos de cero (tile color cielo), son tiles rellenos que no pueden ser atravesados. Aunque esto se definió para este ejemplo, puede expandirse y definirse otros tiles que puedan ser atravesados.
Los puntos que se verifican en este caso son los siguientes:
AS: Apoyo superior.
LDA: Apoyo Lateral-Derecho-Alto
LIA: Apoyo Lateral-Izquierdo-Alto
LDB: Apoyo Lateral-Derecho-Bajo
LIB: Apoyo Lateral-Izquierdo-Bajo
AD: Apoyo Derecho
AI: Apoyo Izquierdo
H: Hot Spot, o sea punto de referencia del sprite (x, y).El punto AS es verificado cuando va hacia arriba, si el punto se encuentra dentro de un tile relleno, se limita el movimiento del personaje.
Los puntos LIA y LDA son verificados cuando va a la izquierda o derecha, e impiden que el personaje continúe si se encuentra con un tile relleno "a la altura de la cabeza" (es decir, en el área superior del personaje).
Los puntos LIB y LDB son verificados cuando va a la izquierda o derecha, e impiden que el personaje continúe si se encuentra con un tile relleno "a la altura de las piernas" (es decir, en el área inferior del personaje).
Los puntos AI y AD son verificados para determinar cuándo el personaje debe caer. Si ambos puntos se encuentran en áreas vacías, entonces el personaje deberá caer.En cada caso lo que se hace es convertir la coordenada del punto a verificar, en coordenada de tile. Luego, se consulta (en la variable de mapa) el tipo de tile que existe en esa coordenada convertida.
Para este ejemplo se utilizaron estos puntos de verificación, pero dichos puntos pueden variar según el tipo de juego, dimensiones y características de cada personaje.
(fin de la parte 6)
-
(extraído de http://blog.ronaldgames.com/?p=743 )
Ahora que nuestro personaje se mueve por el mapa es necesario no perderlo de vista. Para esto tenemos que establecer lo que se llama movimiento de scroll.
Inicialmente es algo sencillo establecer un movimiento de scroll o seguimiento de cámara. Lo difícil puede ser generar el fondo a partir de los tiles dentro del área visible del screen.
La posición del scroll la guardaremos en un par de coordenadas x e y, lo que determinará que cada objeto (incluido el mapa entero) estará sujeto a dichas coordenadas. Para entenderlo, veamos el siguiente caso:
Como vemos en la imagen, el mapa (y personaje) tuvo que ser desplazado 43 pixeles a la izquierda y 32 pixeles hacia arriba (del área visible) para poder seguir al personaje. Esa diferencia de pixeles es la que se registra en las variables del scroll.El desplazamiento del scroll se puede hacer de varias maneras según el tipo de juego, por ejemplo, se puede hacer que suavemente vayan cambiando los valores hasta acercarse al personaje.
En este videojuego, se impone que el scroll esté desplazado 159 pixeles a la izquierda de las coordenadas del personaje y 159 pixeles por encima. Cada vez que colocamos el personaje, el mapa o cualquier objeto del entorno, debemos sumarle las variables de diferencia de scroll. Los únicos elementos no sujetos al scroll son aquellos que deben permanecer fijos en cierta sección del screen, como por ejemplo: número de vidas, puntaje, tiempo, etc.
Finalmente, al momento de generar el mapa a partir de los tiles se puede hacer de dos maneras. Una forma es generar todo el mapa completo, lo cual gasta recursos innecesarios, ya que no todo el mapa es visible dentro del screen. Otra manera es determinar cuáles son los tiles que caben dentro del área visible del screen, y solo presentar esos.
En el ejemplo de la imagen anterior notamos que, los tiles visibles surgen a partir de la 3er fila y 3er columna. Sabemos que el tamaño visible del screen es de 20x15 tiles. Así que, generamos los tiles comprendidos entre la 3er fila y 3er columna en adelante hasta completar los 20x15 tiles. Pero, debemos tomar en cuenta la diferencia del tile con el screen (marcada en la imagen anterior).
Conclusión
Hasta aquí he presentado las bases para comenzar con el diseño de un videojuego de plataformas. Posiblemente más adelante aborde otros temas puntuales y más profundos del desarrollo de videojuegos, pero considero que con la información presentada, el lector será capaz de darle los elementos faltantes a este ejemplo (enemigos, ítems, movimientos, etc.).(final de la reseña)
Reply
You must log in to post.