PROGRAMACION DE VIDEOJUEGOS

PROGRAMACION DE VIDEOJUEGOS

1. Introducción a la programación de video-juegos

Planteamiento de la idea

Cuando abordamos la idea de programar un video-juego, casi siempre comenzaremos con una chispa que se encenderá en la mente que nos diga; "¡Oye, esto sería un gran proyecto!". Imágenes impactantes, sonidos, música... La idea de un nuevo juego siempre es un aliciente que debe despertar en nosotros una motivación para plasmar en el ordenador nuestras habilidades en programación, en ilustraciones, en la búsqueda de nuevos trucos, rutinas y sobre todo.... aprender pasando un buen rato.

Cuando tenemos una idea para un nuevo juego, lo mejor es recurrir al viejo papel y lápiz para crearnos un esquema o bosquejo de la idea en general, que iremos puliendo poco a poco. Si empiezas en la programación, NUNCA te pongas directamente en el ordenador a programar sin tener claro un esquema u objetivo del programa. Sólo conseguirás perder el tiempo y la paciencia. Tampoco intentes comenzar a programar directamente el DOOM III o el Rebelt Assault IV. Comienza siempre a estudiar detenidamente la sintaxis del lenguaje de programación que vayas a utilizar, escribe rutinas sencillas, haz pruebas, pruebas y más pruebas, y, cuando hayas perdido horas y horas y "algo" de paciencia... ¡sigue haciendo más pruebas!. Ten en cuenta que en el aprendizaje de la programación de video-juegos existe un gran vacío a nivel de libros o cursos. Muchos grandes programadores han aprendido estudiando las rutinas de otros programadores. Intenta también acceder a listados de programas sencillos a través de revistas o internet para desgranar los códigos.

Así pues, utiliza dibujos, bosquejos, haz un story board de las pantallas, define el comportamiento de los objetos del juego, etc, etc. Al final, habrás generado un plan de acción que se volverá la guía de producción.

Definir los objetivos

Cuando abordes la idea de un proyecto de video-juego, piensa por un momento en las siguientes preguntas:

¿Qué tipo de juego quiero hacer? (Arcade, Plataformas, Aventura, 3D...)

¿Qué elementos software necesito?
¿De qué equipo dispongo?
¿Puedo hacerlo solo? ¿Quién puede ayudarme?
¿Cómo distribuiré el proyecto final?

Recursos necesarios

Es importante planificar los recursos de los que disponemos para crear el juego:

Lenguajes de desarrollo

Podemos utilizar diversos lenguajes de programación como el C, C++, Visual Basic, Pascal, Ensamblador o en nuestro caso, DIV.

Herramientas de desarrollo
- Existen numeros y conocidos programas en el mercado para crear las imágenes (Fractal Design Painter, 3D Studio, Paintbrush, Photoshop, Corel Draw....) que necesitamos. Podemos crear los fondos y objetos con el propio DIV, o echar mano de alguno de esos programas.
Equipo de desarrollo
- Si te planteas la idea de formar un grupo homogéneo de programadores de video-juegos, estos podrían ser los integrantes del equipo:
  
  Programadores. Pueden ser los programadores principales, o de apoyo específico de un tema, como una rutina concreta, conocimiento de las direcciones de memoria, rutinas de efectos especiales, etc...
  Infografistas y dibujantes. Pueden ser diseñadores del boceto o Story Board del proyecto, dibujando los decorados y personajes básicos, sus posiciones, movimientos, etc... Pueden ser también dibujantes de escenarios fijos, animadores 2D o 3D, modeladores de objetos tridimensionales, etc.
  Técnicos en sonido. Tienen vital importancia, existiendo verdaderos expertos en producir música en varios formatos de sonido a base de sintetizadores, samples, efectos de sonido, y mezclarlo con un resultado final de gran calidad.

2. Primer programa en DIV. Preparación del entorno

Vamos a realizar un pequeño programa que servirá para comenzar a programar en DIV. Explicaremos paso a paso como se crea un fondo, un objeto, y comenzaremos a comprender las rutinas principales de movimiento de objetos. Evitaremos explicar el funcionamiento del entorno del programa, así como el programa de dibujo y las opciones de los menús. Para ello teneis abundante documentación en el libro que acompaña al CD-ROM de DIV.

Crear un fondo y un objeto

Comenzaremos nuestro primer dibujo creando con el propio programa de dibujo de DIV, un fondo y un objeto que nos servirá como fondo del primer programa a comentar. Para ello debemos crear dos mapas. Un mapa es un dibujo o una colección de dibujos que nos servirá tanto para crear un objeto individual como para crear una librería (colección) de objetos o fondos. Para ello, y suponiendo que estás en la pantalla principal de DIV donde visualizarás el menú principal, sigue estos pasos:

Crea un primer mapa desde la opción MENU - Mapas - Nuevo Escoge un tamaño de 320x 200 y acepta.

Crea un segundo mapa, ahora de 100 x 10

Pulsando un doble click sobre el primer mapa, dibuja un rectángulo a modo de suelo.

Una vez dibujado, puedes salir con la tecla Esc. Observa que se ha creado una pequeña ventana con el mismo dibujo.
En el mapa de 100 x 100, pulsa un doble click y dibuja un semicírculo de color verde fosforito con un ojillo rojo. Puedes ampliar la zona de dibujo con la herramenta lupa para dibujarlo mejor. Le llamaremos yigu.

Crear los ficheros FPG y PRG

Ahora crearemos dos ficheros: Ejemplo1.fpg y Ejemplo1.prg. Los ficheros FPG guardan la colección de objetos y gráficos necesarios para el juego. Además, se les asigna un nombre y un código a cada uno. Los ficheros PRG guardan lo que será el listado del código del programa.

Accede a MENÚ - Ficheros - Nuevo. DIV te pedirá un nombre para el fichero. Ponle Eejmplo1 y acepta. Te aparecerá una pequeña ventana con el nombre.

Accede a MENÚ - Programas - Nuevo. Escribe como nombre Ejemplo1 y acepta. Te aparecerá otra pequeña ventana para escribir el código del programa.

Ahora, vamos a colocar los dos gráficos dentro de la ventana Ejemplo1.FPG. Selecciona primero el horrible muñeco yigu y arrástralo dentro de la ventana Ejemplo1.FPG. Te aparecerá un cuadro de diálogo. Coloca como código el número 1 y como nombre: YIGU.

Haz lo propio con el gráfico de fondo, colocando como código el número 2 y como nombre... yo que sé.... FONDILLO, por ejemplo.

Pulsa un click dentro de la ventana Ejemplo1.PRG y...... ¡a programar!

3. Comenzar a programar

Objetivos del programa

Colocar el fondo y el objeto

Hacer aparecer en pantalla el objeto

Hacer que se mueva el objeto de diferentes formas

Bien, todo a punto. Tenemos los dos ficheros PRG y FPG preparados, y los dos gráficos a punto. El objetivo de la primera rutina será el de hacer que se visualizen un fondo y un gráfico (yigu) en pantalla. Necesitaremos:

Cargar los gráficos

Colocar el gráfico número 2 como fondo de pantalla

Colocar en una coordenada determinada de la pantalla el gráfico número 1

Hacer que se visualizen los dos

Hacer que se mueva el gráfico 1 por la pantalla de distintas formas

Diseñar la estructura

Pseudocódigo frente a código

Todo aquel que ha empezado a programar, habrá creado algún diagrama de flujo o pseudocódigo del comportamiento de un programa. Estos diagramas sirven para esquematizar las ideas previas al código del programa, o bien pueden ser un guión definitivo del comportamiento del propio programa. El pseudocódigo, es un lenguaje imaginario que simula el comportamiento de una rutina en lenguaje "de estar por casa". Observa la estructura del siguiente pseudocódigo (izquierda) y compárala con el primer programa (derecha):

Se inicia el programa

Proceso principal

Carga el fichero de gráficos
Coloca el gráfico 2 como fondo

Se crea el proceso del objeto principal

Proceso del comportamiento del objeto

Seleccionar el objeto y una coordenada de la pantalla para colocarlo.

Hacer que se visualize el objeto

PROGRAM Ejemplo1;

BEGIN
   load_fpg("ejemplo1.fpg");
   put_screen (0,2);
   yigu()
END

PROCESS yigu()
    graph=1;x=40;y=150
        LOOP
           FRAME
        END

Observa las tres partes bien diferenciadas del código. Las órdenes que acabamos de ver son las siguientes:

PROGRAM Ejemplo1;

Orden de cabecera del programa. Todos los programas deben comenzar con esta orden, seguida del nombre del programa y un punto y coma.

BEGIN

load_fpg("ejemplo1.fpg"); put_screen (0,2);
yigu()

END

BEGIN Código principal del programa. Controla los gráficos y sonidos que se cargan, los bucles de opciones, etc. En nuestro ejemplo se realizan tres acciones;

load_fpg("Ejemplo1.fpg"); orden para cargar un fichero que contiene los gráficos necesarios para presentar en pantalla. El nombre del fichero se coloca entre paréntesis y la orden finaliza con punto y coma.

put_screen(0,2); orden para colocar el gráfico de fondo. El cero es el número de fichero FPG y el 2 el número que hemos asignado al gráfico de fondo.

yigu(); esta línea crea un proceso llamado yigu. Un proceso es un objeto con un comportamiento determinado, como un objeto, un disparo, etc

END orden de final del proceso principal

PROCESS yigu()

Aquí se define el comportamiento del objeto yigu. En nuestro caso, colocamos la orden PROCESS y seguidamente el nombre del proceso. A continuación viene la madre del cordero.

En nuestro caso, pretendemos colocar un gráfico en una coordenada determinada de la pantalla. Recuerda que hemos definido el tamaño de pantalla en 320 x 200 puntos. La orden graph=1 define el número de gráfico que vamos a utilizar, que en nuestro caso es el número 1. A continuación hay que decirle al programa dónde colocar el gráfico, es decir, la coordenada en la pantalla. Esto lo hacemos utilizando las variables x e y que se utilizarán para nombrar las coordenadas horizontal y vertical respectivamente. Las coordenadas de nuestra pantalla de 320 x 200 puntos se miden de arriba a abajo y de izquierda a derecha. Por ejemplo, la esquina superior izquierda corresponde con la coordenada 0,0 (x=0, y=0), la esquina inferior izquierda sería la coordenada 0,320, etc.

Hemos calculado la posición de nuestro yigu más o menos sobre la plataforma azul, que será la coordenada x=40, y=157. De todas formas, cuando ejecutemos el programa, podemos ir variando y ajustando la posición.

La orden para seleccionar el gráfico y colocarlo sobre esa coordenada de la pantalla será:

graph=1
x=40
y=157

o dicho de forma abreviada: graph=1;x=40;y=157;

2. Tipos de bucles

Por último, una vez seleccionado y colocado en pantalla el gráfico, debemos indicarle que nos lo enseñe. Esto lo conseguimos con la orden FRAME. Esta orden nos muestra el gráfico del proceso en el que está el programa. El problema es que si escribimos la orden FRAME sola, nos mostrará el gráfico sólo una vez, y el programa terminará tan pancho. De forma que debemos decirle que nos muestre una y otra vez el gráfico. Esto se consigue con un bucle. Un bucle no es más que una orden especial que hace que se repitan una serie de órdenes unas veces determinadas, o ifinitamente. Imagina que tenemos que decirle al programa que nos muestre infinitas veces el dibujo. ¿Te imaginas escribir la palabre FRAME chorrocientas mil veces? Un bucle nos sacará del apuro.

LOOP

FRAME

END

Comienza el bucle

Se muestra la imagen

Fin del bucle y vuelta a comenzar

Seguimos con el estudio de los bucles para crear movimiento. Ahora vamos a hacer que el muñeco yigu se mueva horizontalmente. Lo que haremos será mover la coordeanda x del muñeco horizontalmente hacia la derecha, hasta la coordenada x=185. Esto lo conseguimos con un bucle controlado. Existen varios tipos de bucles que iremos viendo a lo largo de las lecciones, pero en este caso utilizaremos un bucle del tipo WHILE - END. En nuestro ejemplo, hay que sustituir el bucle LOOP - END por las siguientes líneas:

PROCESS yigu()

graph=1;x=40;y=150

WHILE (x<185)
FRAME;

x=x+1;

END

WHILE orden que crea un bucle cuyas órdenes desde WHILE hasta END se van repitiendo hasta que se cumpla la condición que sigue a la palabra WHILE, es decir, hasta que la coordenada x llegue al punto 185.

x=x+1 en cada vuelta del bucle, la coordenada x se incrementa en uno. En la primera vuelta, x vale 41, en la segunda, 42, y así sucesivamente hasta 185.

Finalmente, el bucle termina. Si quieres que yigu vaya más rápido, sólo tienes que cambiar el incremento de puntos. Por ejemplo: x=x+5

¿Serías capaz de adivinar el comportamiento de los siguientes bucles?
PROCESS yigu()
    graph=1;x=40;y=150
        WHILE (x<185)
            FRAME;
                x=x+1;
            END
        WHILE (X>40)
                x=x-5;
            FRAME;
        END
END

Estos ejemplos que estamos comentando puedes probarlos directamente en DIV (si quieres practicar) o bien bajártelos desde la sección Descarga al final de la página.Desde esta sección podrás bajarte los ficheros de ejemplo del curso así como otros ejemplos interesantes. Vamos a ver ahora el comportamiento y movimiento de un objeto utilizando el teclado. Para ello utilizaremos dos funciones. IF y KEY. La función SI comprueba si se cumple una condición. En caso afirmativo, se ejecutan una serie de órdenes. En caso negativo, no se ejecutan, o se ejecutan otras diferentes. Por ejemplo, si queremos que el muñeco se pare antes de salir de la pantalla, (coordenada 310 aprox), podríamos hacer un bucle WHILE - END como el anterior: WHILE (x<310) o hacerlo de la siguiente forma: IF (x=310).... Observa la sintaxis de la función IF y el pseudocódigo explicativo:

IF (<condicion>)

sentencias y órdenes

END

Si se cumple tal condición

ejecuta las sentencias que sean

Fin de la orden

Un ejemplo: si quisiéramos saber si una variable llamada k vale 0 y que pasara algo, podríamos decir:

IF (k=0)

k=k+1

END

Si k vale 0

suma uno al valor de k

Fin de la orden

Observa el siguiente código que varía nuestro programa:

PROCESS yigu()
BEGIN
graph=1;x=40;y=150
        LOOP
                x=x+1;
                 IF (x>185)
                     x=185;
                 END
            FRAME
       END
END

El contador de la coordenada x avanzará igual que antes, pero cuando x sea mayor que 185, (condición del IF), x seguirá valiendo 185 y el gráfico no avanzará más.

Bien, ahora vamos a ver cómo se controla el muñeco. Para ello utilizaremos la orden KEY(<código de tecla>). Esta orden comprueba si una tecla está pulsada o no. En caso afirmativo, ejecuta alguna orden concreta. Cada tecla del teclado posee un nombre que la identifica. En la ayuda de DIV tienes todos los códigos y nombres asignados a cada tecla. De momento sólo utilizaremos las teclas de dirección izquierda (_left) y derecha (_right). Para comprobar en un programa si se ha pulsado una tecla, se utiliza la siguiente línea:
IF (key(_tecla)

órdenes

END

Los siguientes ejemplos son variaciones sobre el mismo programa. Estudia las rutinas y sus comentarios. Estos ejemplos los puedes encontrar en la sección de descarga.

PROGRAM Ejemplo4;
    BEGIN
        load_fpg("ejemplo1.fpg");
        put_screen (0,2);
        yigu()
END

PROCESS yigu()

graph=1;x=40;y=150

BEGIN
    LOOP
        IF (key(_right))
            x=x+2;
        END

        IF (key(_left))
            x=x-2;
        END

        IF (x>310)
            x=300;
        END

        IF (x<20)
            x=20;
        END
        FRAME;
    END
END

Se crea un bucle infinito en espera de la pulsación de teclas.
Si se pulsa la tecla derecha, avanza dos unidades.

Si se pulsa la tecla izquierda, retrocede dos unidades.

Si se llega a la coordenada 310 (parte derecha de la pantalla), el muñeco se para porque el valor de x no valdrá más de 300 (hasta que se pulse de nuevo la tecla de desplazamiento a la izquierda).

Si se llega a la coordenada 20 (parte izquierda de la pantalla), el muñeco se para porque el valor de x no valdrá menos de 20 (hasta que se pulse de nuevo la tecla de desplazamiento a la derecha).

PROGRAM Ejemplo5;
    BEGIN
        load_fpg("ejemplo1.fpg");
        put_screen (0,2);
        yigu()
END

PROCESS yigu()

graph=1;x=40;y=150

PRIVATE
aceleracion=0

BEGIN
    LOOP
        IF (key(_right)) AND aceleración<6)
aceleracion=aceleracion+2;
            ELSE
                IF (aceleracion>0) aceleracion=aceleracion-1;END
        END

        IF (key(_left)) AND aceleración>-6)
aceleracion=aceleracion-2;
        ELSE
            IF (aceleracion<0) aceleracion=aceleracion+1;END
        END

x=x+aceleracion;

        IF (x>310)
             x=300;
             aceleracion=0;
        END

        IF (x<20)
             x=20;
             aceleracion=0;
        END

        FRAME;
    END
END

En esta rutina creamos una variable privada llamada aceleracion con un valor inicial de cero. Esta variable se crea con la orden PRIVATE, el nombre de la variable y el valor inicial.

Es una variable privada porque sólo afectará a este proceso.

En cada vuelta del bucle infinito, se incrementa en uno el valor de la variable hasta valer 6 como máximo.

Si se pulsa la tecla de desplazamiento a la derecha, la coordenada y en nuestro caso el muñeco, avanzan tomando el valor en todo momento de la variable el cual se va incrementando y decrementando si pulsamos una u otra tecla de desplazamiento.

Prueba esta rutina para observar un movimiento fuido del objeto, y a la vez una suave frenada cuando pulsamos una u otra tecla de dirección.

Prueba también a cambiar los valores de la variable aceleración de las líneas de los IF y del incremento de x.

No tengas miedo en cambiar valores y comprobar el resultado.