Versión: 0.44, de 20-Ago-2010


2. Entrando a modo gráfico y dibujando. 

Contenido de este apartado:


2.1. Pautas generales.


Los pasos básicos serán prácticamente los mismos, usemos el lenguaje que usemos:
Por otra parte, las órdenes más habituales que usaremos serán las siguientes:
En este apartado comentaremos cómo se entra a modo gráfico y como se dibujan los elementos habituales (líneas, rectángulos, círculos, puntos, etc) con las herramientas que hemos escogido.

En primer lugar, utilizaremos el modo gráfico más estándar, que encontraremos en cualquier tarjeta gráfica VGA o superior (cualquier PC posterior al 1992 debería tenerla): 320x200 puntos, en 256 colores. Más adelante veremos cómo cambiar a otros modos que nos permitan obtener imágenes de mayor calidad.


Puedes leer todo el apartado o centrarte en un lenguaje:


2.2 Cómo hacerlo en el caso del lenguaje C y la biblioteca Allegro.

Los pasos básicos con C y Allegro son:

Vamos a verlo un ejemplo "que funcione", que dibuje una diagonal en pantalla: 
 


/*----------------------------*/
/* Intro a la programac de    */
/* juegos, por Nacho Cabanes  */
/*                            */
/*  ipj01c.c                  */
/*                            */
/* Primer ejemplo: entra a    */
/* modo grafico y dibuja una  */
/* linea diagonal en la pan-  */
/* talla.                     */
/*                            */
/*  Comprobado con:           */
/*  - Dev-C++ 4.9.9.2         */
/*    y Allegro 4.2.1         */
/*----------------------------*/
 
#include <allegro.h> 
 
int main() {
  allegro_init();
  install_keyboard();
 
  if (set_gfx_mode(GFX_SAFE, 320, 200, 0, 0) != 0) {
    set_gfx_mode(GFX_TEXT, 0, 0, 0, 0);
    allegro_message(
      "Incapaz de entrar a modo grafico\n%s\n",
      allegro_error);
    return 1;
  }
 
  line(screen, 20, 10, 310, 175, palette_color[15]);
  readkey();
 
  return 0;
}
 
END_OF_MAIN();
 


Sólo hay dos cosas "nuevas" frente a lo que habíamos preparado:


El resultado será simplemente este (recuerda que en el apartado 1 tienes la forma de teclear y compilar este fuente):

 

Demos un repaso rápido a las posibilidades más básicas de esta biblioteca, en lo que se refiere a modo gráfico.

(Como hemos comentado antes, el primer parámetro "BITMAP *bmp" especifica dónde se dibujará cada una de esas figuras; para nosotros lo habitual por ahora será indicar "screen" -la pantalla-).

También podemos rellenar una cierta zona de la pantalla con


O leer el color de un punto con 


Para elegir modo de pantalla se usa la rutina que ya hemos visto: 

int set_gfx_mode(int card, int w, int h, int v_w, int v_h); 

El parámetro "card" (tarjeta) normalmente debería ser GFX_AUTODETECT (autodetección); w y h son la anchura (width) y altura (height) en puntos, y v_w y v_h son la anchura y altura de la pantalla "virtual", más grande que la visible, que podríamos utilizar para hacer algún tipo de scroll, y que nosotros no usaremos por ahora. 

Pero... ¿y el número de colores? Se indica con 

Donde "depth" es la "profundidad" de color en bits. El valor por defecto es 8 (8 bits = 256 colores), y otros valores posibles son 15, 16 (65.536 colores), 24 y 32 bits ("color verdadero"). 
 

Ahora vamos a ver un ejemplo algo más completo: 
  

/*----------------------------*/
/*  Intro a la programac de   */
/*  juegos, por Nacho Cabanes */
/*                            */
/*    ipj02c.c                */
/*                            */
/*  Segundo ejemplo:          */
/*  Figuras basicas en modo   */
/*  640x480 puntos, 64k color */
/*                            */
/*  Comprobado con:           */
/*  - Dev-C++ 4.9.9.2         */
/*    y Allegro 4.2.1         */
/*----------------------------*/
 
#include <allegro.h>
 
int main()
{
  allegro_init();
  install_keyboard();
 
  set_color_depth(16);
  if (set_gfx_mode(GFX_SAFE,640,480,0,0)!=0){
    set_gfx_mode(GFX_TEXT,0,0,0,0);
    allegro_message(
      "Incapaz de entrar a modo grafico\n%s\n",
      allegro_error);
    return 1;
  }
 
  line(screen,20,10,310,175, palette_color[15]);
  line(screen,639,0,0,479, palette_color[14]);
 
  rectfill(screen,30,30,300,200, palette_color[3]);
 
  ellipse (screen,320,200,50,100, palette_color[11]);
 
  readkey();
}
 
END_OF_MAIN();
 

El resultado de este programa sería algo como

IPJ - Tema 2

Hay muchas más posibilidades, pero las iremos viendo según las vayamos necesitando...

2.3. Cómo hacerlo en el caso de Free Pascal.

En Free Pascal sería:

Vamos a verlo en la práctica:
  

(*----------------------------*)
(*  Intro a la programac de   *)
(*  juegos, por Nacho Cabanes *)
(*                            *)
(*    IPJ01P.PAS              *)
(*                            *)
(*  Primer ejemplo: entra a   *)
(*  modo grafico y dibuja una *)
(*  linea diagonal en la pan- *)
(*  talla.                    *)
(*                            *)
(*  Comprobado con:           *)
(* - FreePascal 2.0.4 (WinXp) *)
(*----------------------------*)
 
uses graph, wincrt;
 
var
  gd,gm, error : integer;
 
 
begin
  gd := D8bit;
  gm := m640x480;
  initgraph(gd, gm, '');
 
  error := graphResult;
  if error <> grOk then
    begin
    writeLn('No se pudo entrar a modo grafico');
    writeLn('Error encontrado: '+ graphErrorMsg(error) );
    halt(1);
    end;
 
  setColor(15);
  line (20,10, 310,175);
 
  readkey;
  closeGraph;
end.
 

(Recuerda que en el apartado 1 tienes cómo teclearlo y probarlo).

Es posible que obtengamos el error "Invalid graphics mode". Sería porque nuestro ordenador no permite el modo gráfico que hemos elegido. Ante la duda, podemos hacer que lo detecte, usando gd:=0; gm:=0;

Igual que en el ejemplo en C, hay cosas que aparecen en este fuente y que no habíamos comentado aún:

Las posibilidades más básicas de la biblioteca gráfica de Free Pascal son: 


Para elegir modo de pantalla se usa la rutina que ya hemos visto: 

int initgraph( driver,  modo, situacDrivers); 

En su uso más sencillo, tenemos:


Un ejemplo un poco más completo es: 
 

(*----------------------------*)
(* Intro a la programac de    *)
(* juegos, por Nacho Cabanes  *)
(*                            *)
(* IPJ02P.PAS                 *)
(*                            *)
(* Segundo ejemplo:           *)
(* Figuras basicas en modo    *)
(* 640x480 puntos,256 colores *)
(*                            *)
(* Comprobado con:            *)
(* - FreePascal 2.0.4 (WinXp) *)
(*----------------------------*)
uses wincrt, graph;
 
var
gd,gm, error : integer;
 
 
begin
  gd := D8bit;
  gm := m640x480;
  initgraph(gd, gm, '');
 
  error := graphResult;
  if error <> grOk then
    begin
    writeLn('No se pudo entrar a modo grafico');
    writeLn('Error encontrado: '+ graphErrorMsg(error));
    halt(1);
    end;
 
  setColor(15);
  line (20,10,310,175);
 
  setColor(14);
  line (639,0,0, 479);
 
  setFillStyle( SolidFill,3);
  bar(30,30,300,200);
 
  setColor(11);
  ellipse (320,200,0,360,50,100);
 
  readkey;
  closeGraph;
end.
 

El resultado de este programa, si compilamos para Windows, es el siguiente:
 

IPJ - Tema 2, Pascal


2.4. Cómo hacerlo en el caso de Java.

En el lenguaje Java las cosas cambian ligeramente. La sintaxis recuerda mucho a la de C, pero muchas de las ideas base son distintas:

El ejemplo de cómo cambiar a modo gráfico y dibujar una diagonal en un Applet sería:  

/*----------------------------*/ 
/*  Intro a la programac de   */ 
/*  juegos, por Nacho Cabanes */ 
/*                            */
/*    ipj01j.java             */ 
/*                            */ 
/*  Primer ejemplo: entra a   */
/*  modo grafico y dibuja una */ 
/*  linea diagonal en la pan- */ 
/*  talla.                    */ 
/*                            */ 
/*  Comprobado con:           */ 
/*  - JDK 1.5.0               */ 
/*----------------------------*/ 
 
 
import java.awt.*;
 
public class ipj01j extends java.applet.Applet {
 
    public void paint(Graphics g) {
        g.setColor( Color.yellow );
        g.drawLine( 20, 10,  310, 175 );
    }
 
}
 


(Recuerda que en el apartado 1 tienes cómo teclearlo y probarlo).


Como es un Applet, está diseñado para ser usado desde una página Web. Por tanto, tendremos que crear esa página Web. Bastaría con teclear lo siguiente desde cualquier editor de texto:

<html> 
 <head> 
     <title>IPJ - Ejemplo 1</title> 
 </head> 
 <body> 
     <h1>IPJ - Ejemplo 1</h1> 
     <hr> 
     <applet code=ipj01j.class width=320 height=200> 
       alt=El navegador no esta mostrando el APPLET 
      </applet> 
  </body> 
</html> 
 


Guardamos este fichero y hacemos doble clic para probarlo desde nuestro navegador. Si nuestro navegador no reconoce el lenguaje Java, veríamos el aviso "El navegador no está mostrando el APPLET", pero si todo ha ido bien, debería aparecer algo como

IPJ - Tema 2, Java


Las posibilidades más básicas de las rutinas gráficas de Java son muy similares a las que hemos visto con Allegro y con Free Pascal, con alguna diferencia. Por ejemplo, en los rectángulos no se indican las coordenadas de las dos esquinas, sino una esquina, la anchura y la altura. De igual modo, en las elipses no se indican el centro y los dos radios, sino como el rectángulo que las rodea. Detallando un poco más: 

  // Escribir texto: mensaje, coordenada x (horizontal) e y (vertical)
  g.drawString( "Hola Mundo!", 100, 50 ); 
 
  // Color: existen nombres predefinidos
  g.setColor( Color.black );
 
  // Linea: Coordenadas x e y de los extremos
  g.drawLine( x1, y1, x2, y2 );
 
  // Rectangulo: Origen, anchura y altura
  g.drawRect( x1, y1, ancho, alto );
 
  // Rectangulo relleno: identico
  g.fillRect( x1, y1, ancho, alto );
 
  // Rectangulo redondeado: similar + dos redondeos
  g.drawRoundRect( x1, y1, x2, y2, rnd1, rnd2 ); 
 
  // Rectangulo redondeado relleno: igual
  g.fillRoundRect( x1, y1, x2, y2, rnd1, rnd2 );
 
  // Ovalo (elipse): Como rectangulo que lo rodea
  g.drawOval( x1, y1, ancho, alto );
 
  // Ovalo relleno: identico
  g.fillOval( x1, y1, ancho, alto );

  

/*----------------------------*/ 
/*  Intro a la programac de   */ 
/*  juegos, por Nacho Cabanes */ 
/*                            */
/*    ipj02j.java             */ 
/*                            */ 
/*  Segundo ejemplo:          */
/*  Figuras basicas en modo   */
/*  640x480 puntos            */
/*                            */ 
/*  Comprobado con:           */ 
/*  - JDK 1.4.2_01            */ 
/*----------------------------*/ 
 
import java.awt.*;
 
public class ipj02j extends java.applet.Applet {
 
    public void paint(Graphics g) {
        // Primero borro el fondo en negro
        g.setColor( Color.black );
        g.fillRect( 0, 0, 639, 479 );
        // Y ahora dibujo las figuras del ejemplo
        g.setColor( Color.white );
        g.drawLine( 20, 10,  310, 175 );
        g.setColor( Color.yellow );
        g.drawLine( 639, 0,    0, 479);
        g.setColor( Color.blue );
        g.fillRect( 30, 30, 270, 170 );
        g.setColor( Color.cyan );
        g.drawOval( 270, 100, 100, 200 );
    }
 
}   
 

La página Web encargada de mostrar este Applet no tendría grandes cambios si comparamos con la anterior. Poco más que el nombre de la clase, los "cartelitos" y el tamaño:

<html> 
 <head> 
     <title>IPJ - Ejemplo 2</title> 
 </head> 
 <body> 
     <h1>IPJ - Ejemplo 2</h1> 
     <hr> 
     <applet code=ipj02j.class width=640 height=480> 
       alt=El navegador no esta mostrando el APPLET 
      </applet> 
  </body> 
</html> 
 

Y el resultado sería este:

IPJ - Tema 2b. Java

Hay muchas más posibilidades, pero las iremos viendo según las vayamos necesitando...

Anterior Siguiente