Programación 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):

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

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 variablesx 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á:

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.

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 tipoWHILE - END. En nuestro ejemplo, hay que sustituir el bucle LOOP - END por las siguientes líneas:

¿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:

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

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

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.