CURSO DE PROGRAMACION DE VIDEO JUEGOS: TEXTO #8.
---------------------------------------------------
Hola, ya estoy de vuelta. Me estoy demorando un poco en sacar los
capitulos porque he tenido un lote de cosas que hacer: los estudios,
mi juego, el skate, etc...
Por fin estamos listos para entrar al modo grafico, lo que siempre
habian estado esperando por fin a llegado, el maravilloso capitulo
8 de nuestro tutorial, como los veo ansiosos y desesperados vamos
a comenzar.
1.- Descripcion del modo grafico.
El primer modo grafico que vamos a estudiar es tal vez el mas largo
y feo, pero nos servira mucho para programar nuestros primeros
juegos. Si quieren una idea del modo en que vamos a trabajar pueden
bajar los juegos Archon, Spy o HBall de mi sitio, estos estan hechos
con las herramientas que vamos a estudiar.
Para describir un modo grafico debemos conocer primero algunos
conceptos basicos:
- Pixel: es un punto en la pantalla.
- Resolucion: cantidad de pixeles que caben en una pantalla.
Bueno el modo que estudiaremos tiene una resolucion de 640x480.
Pero ¨que demonios significa esto?, facil, en una pantalla caben
640 pixeles a lo largo y 480 pixeles a lo alto. Ademas nuestros
pixeles pueden ser elegidos entre 16 colores distintos.
-- o --
2.- Entrando al modo grafico.
Para cargar un modo grafico el Turbo Pascal nos entrega una serie
de archivos que nos permite instalar el modo de video, estos archivos
tienen extension BGI y representan el modo de video con el que se va
a trabajar (CGA, HERCULES, EGA). Lamentablemente como estos programas
son un poco antiguos no incluyen archivos BGI para los modos VGA ni
SUPER VGA pero este es un problema que superaremos mas adelante.
El archivo con el que vamos a trabajar se llama EGAVGA.BGI y deberia
estar en un subdirectorio llamado BGI del Turbo Pascal (si su Pascal
no esta completo pidanme el archivo BGI y yo se los mando).
Es importante que recuerden siempre lo siguiente: EL ARCHIVO BGI DEBE
ESTAR SIEMPRE EN EL MISMO DIRECTORIO DEL PROGRAMA QUE ESTEMOS HACIENDO
Esto es fuente de muchos errores cuando hagamos nuestros programas,
ya que siempre se olvida copiar este archivo al directorio correspon-
diente (a mi por lo menos me pasaba).
El procedimiento que nos permite entrar al modo grafico se llama
INITGRAPH y necesita la unidad GRAPH (Uses GRAPH; en la primera linea
de nuestro programa). Veamos como funciona:
Sintaxis: INITGRAPH( numdriver, modvideo, path );
Como ven el procedimiento necesita 3 parametros, los 2 primeros son de
tipo integer y el segundo es un string. Veamos que significan:
- numdriver: es una variable que contiene el modo de video que vamos
a cargar. Nosotros vamos a ocupar el 3 (EGAVGA.BGI).
- modvideo: nunca he sabido para que sirve pero no es muy necesaria.
De todas le debemos pasar una variable de tipo integer.
- path: es para especificar el directorio donde se encuentra el
archivo BGI. Yo no considero muy conveniente ocupar esto
ya que si queremos copiar nuestro programa a otro computa-
dor o ejecutarlo sin tener el Pascal de todas maneras
necesitamos este archivo. Nosotros solo vamos a pasar un
string vacio y copiar el archivo BGI a nuestro directorio
de trabajo.
-- o --
Bueno, se que no se entiende mucho con explicaciones y que con unos
ejemplitos quedarian mucho mejor a si que vamos a ver como cerrar
el modo grafico para luego ver un ejemplo.
Para cerrar el modo grafico se ocupa el procedimiento CLOSEGRAPH, que
tambien necesita la unidad GRAPH. Este procedimiento no necesita
parametros ya que solo cierra el modo grafico.
Veamos un ejemplo del uso de estos dos procedimientos:
------------------------------------------------------------------------------
Uses GRAPH;
const ModoEGA = 3;
var drv, modo: integer;
begin
drv := ModoEGA;
INITGRAPH( drv, modo, ' ' );
readln;
CLOSEGRAPH;
end.
------------------------------------------------------------------------------
Bien, que les parece, ya entramos al modo grafico. Si no les resulto
recuerden que deben copiar el archivo EGAVGA.BGI al directorio donde
ejecutan el programa.
Creo que no hay mucho que explicar en el programa.
Como el modo grafico es distinto al modo de texto, las funciones y
procedimientos "bonitos" para modo texto (asi como TEXTCOLOR, WRITELN,
etc..) no funcionan en modo grafico, para esto existen otras funciones
que hacen cosas similares.
¨Les parece si las vemos en el proximo capitulo?. Ok, ok, era broma,
despues de todo no los puedo dejar con el modo grafico en las manos
sin que puedan hacer nada mas.
-- o --
3.- Los primeros pixeles.
Uno de los procedimientos mas basicos del modo texto es el que nos
permite poner un pixel en la pantalla, este se llama PUTPIXEL y se
utiliza de la siguiente manera:
Sintaxis: PUTPIXEL( x, y, color );
Los parametros son muy sencillos: los tres son de tipo integer,
veamoslos con mas detalle:
- x: posicion del pixel a lo largo de la pantalla. Como la resolucion
de nuestra pantalla es de 640x480, el valor del parametro x
debe estar entre 0 y 639.
- y: posicion del pixel a lo alto de la pantalla. Por lo mismo que
en el parametro x, debe estar entre 0 y 479.
- color: como su nombre lo indica es el color del pixel que queremos
colocar en la pantalla. Como el modo EGA tiene solo 16
colores, este parametro debe estar entre 0 y 15.
Para esta ultima variable veamos una lista de los colores del modo
EGA:
Obscuros Brillantes
- Negro = 0 - Gris = 8
- Azul = 1 - Azul = 9
- Verde = 2 - Verde = 10
- Cyan = 3 - Cyan = 11
- Rojo = 4 - Rojo = 12
- Magenta = 5 - Magenta = 13
- Cafe = 6 - Amarillo = 14
- Gris = 7 - Blanco = 15
Veamos un ejemplo con el procedimiento PUTPIXEL:
------------------------------------------------------------------------------
Uses graph;
var c, f: integer;
drv, modo: integer;
begin
drv:=3;
InitGraph( drv, modo, ' ' );
for c:=0 to 15 do
for f:=10 to 50 do
PUTPIXEL( 50+c, f, c );
readln;
closegraph;
end.
------------------------------------------------------------------------------
Bien, hay tienen una barra de colores.
-- o --
Veamos ahora otros procedimientos para hacer dibujos:
4.- Procedimientos para dibujar primitivas.
Primitivas se les llama comunmente a los graficos simples como
circulos, lineas, rectangulos, etc... Veamos una serie de procedimientos
para hacer este tipo de graficos:
* Nombre: LINE.
* Descripcion: Para dibujar lineas en modo grafico.
* Sintaxis: LINE( x1, y1, x2, y2 );
* Parametros: Los cuatro son integer e indican dos puntos en la
pantalla, los cuales seran unidos por la linea.
* Nombre: RECTANGLE.
* Descripcion: Dibuja un rectangulo en la pantalla.
* Sintaxis: RECTANGLE( x1, y1, x2, y2 );
* Parametros: Los cuatro son integer e indican los puntos que
formaran los vertices superior izquierdo e inferior
derecho del rectangulo.
* Nombre: CIRCLE.
* Descripcion: Dibuja un circulo en la pantalla.
* Sintaxis: CIRCLE( x, y, r );
* Parametros: Los tres son integer. x e y indican el punto que sera
el centro del circulo y r indica el radio.
-- o --
Como se habran dado cuenta, en ninguna de las figuras se especifica
el color con que se va a dibujar. Veamos algunos procedimientos para
cambiar los colores.
5.- Cambiar colores.
Nombre: SETCOLOR.
Descripcion: Cambiar el color de dibujo.
Sintaxis: SETCOLOR( color );
Parametro: El parametro color indica el numero del color deseado
los valores que puede tomar son los mismos descritos
en PUTPIXEL mas arriba.
Nombre: SETBKCOLOR.
Descripcion: Cambiar el color de fondo.
Sintaxis: SETBKCOLOR( color );
Parametro: Igual que arriba.
Otro procedimiento de utilidad es el CLEARDEVICE, que no lleva
parametros y se utiliza para borrar la pantalla (como clrscr pero
para modo grafico).
-- o --
6.- Ejemplo del uso de estos procedimientos.
------------------------------------------------------------------------------
uses crt, graph;
procedure InitModo;
var drv, modo: integer;
begin
drv:=3;
modo:=2;
initgraph( drv, modo, ' ' );
end;
function Salir: boolean;
begin
Salir:=false;
if keypressed then
if Ord(ReadKey)=27 then Salir:=true;
end;
procedure Line_Demo;
var x1, y1, x2, y2, c: integer;
begin
CLEARDEVICE;
while not(Salir) do
begin
c:=random(16);
x1:=random(639);
x2:=random(639);
y1:=random(479);
y2:=random(479);
SETCOLOR( c );
LINE( x1, y1, x2, y2 );
delay(100);
end;
end;
procedure Circle_Demo;
var x, y, r, c: integer;
begin
CLEARDEVICE;
while not(Salir) do
begin
c:=random(16);
r:=random( 200 );
SETCOLOR( c );
CIRCLE( 320, 240, r );
delay( 100 );
SETCOLOR( 0 );
CIRCLE( 320, 240, r );
end;
end;
procedure Rect_Demo;
var x1, y1, x2, y2, c: integer;
begin
CLEARDEVICE;
while not(Salir) do
begin
c:=random(16);
x1:=random(639);
x2:=random(639);
y1:=random(479);
y2:=random(479);
SETCOLOR( c );
RECTANGLE( x1, y1, x2, y2 );
delay(100);
end;
end;
begin
randomize;
InitModo;
Circle_Demo;
Line_Demo;
Rect_Demo;
CloseGraph;
end.
------------------------------------------------------------------------------
-- o --
Bueno, eso ha sido todo por este capitulo. En el proximo veremos
algo mas de graficos, como rellenar la primitivas o pintar otras
figuras de distintas formas y colores, ademas caracteres y fonts
en modo grafico.
Practiquen con lo que vimos hoy, y si algo no quedo claro no duden
en escribir. CHAO.
JPLL
pc-jlopez@entelchile.net
www.geocities.com/SiliconValley/Bridge/1910
-- o --
(
geocities.com/siliconvalley/bridge) (
geocities.com/siliconvalley)