DirectDraw utilizando el control ASprite
volver a la página de tutoriales

Requerimientos

Si desea realizar este tutorial necesitará descargar e instalar los siguientes archivos:

Aunque la mayoría de las personas piensen que Visual Basic es lento en gráficos, aquí les ofrezco algo para que les demuestre a esas personas que estan equivocadas. Este ejemplo está enfocado para los usuarios de nivel medio-experto en Visual Basic. Asumiré que se tiene conocimiento básico del API de Windows. Para efectos de este ejemplo utilizaré el control gratuito ASprite desarrollado por Andy Beaulieu, ya que utilizar DirectX directamente se sale de los propósitos del tutorial. Si usted definitivamente necesita saber como utilizar DirectX directamente puede visitar la página oficial de DirectX (en inglés) el cual le proporcionará toda la ayuda que necesita, eso si, le recomiendo comprar un CD porque una descarga de 128 Mb del SDK a través de un modem sobrepasa fácilmente 20 horas de conexión seguida.


¿Qué es DirectX?

DirectX es la respuesta de Microsoft a los juegos de MS-DOS. Es un API (del inglés interface de programación de aplicación) para acceder directamente al hardware de la tarjeta de video, sonido, joysticks y comunicaciones desde Windows. DirectX se divide en:

  • DirectDraw - Operaciones gráficas en 2D
  • Direct3D - Operaciones gráficas 3D
  • DirectInput - Acceso a los dispositivos de entrada (teclado, mouse, joysticks, volantes, etc.)
  • DirectPlay - Comunicaciones de puerto serial, modems, etc.
  • DirectSound - Operaciones de sonido

De estos componentes explicaré DirectDraw y DirectSound


Inicializando DirectDraw (utilizando controles ActiveX)

Asegúrese de tener el control ASprite instalado en su computadora. Ejecute Visual Basic y cree un nuevo proyecto. En el menú Proyecto, haga click en Componentes y active la casilla de Asprite ActiveX Control Module.

Antes que nada, sitúese en la subrutina Form_Load. Luego defina las variables y cambie el directorio activo al directorio del programa que es donde está la imagen que vamos a usar.
Código:
Dim direcTecla As Integer, Continuar As Boolean
Dim a As Integer
chDir App.Path

Para comenzar a utilizar DirectDraw debemos hacerle saber al control que ventana va a usar. La propiedad hWnd devuelve el número que Windows le asignó a nuestro formulario. Si quiere usar otro Formulario en vez del actual, coloque el nombre del formulario en vez de la palabra reservada Me. Por ejemplo Form2.hWnd.
Código:
ASprite1.hWnd = Me.hWnd

Luego inicialice DirectDraw con la instrucción Asprite1.DrawInit. Al inicializarse se deben pasar varios parametros: la resolución a usarse, cuantos bits por pixel (8 para 256 colores, 16 para 65536 colores y así sucesivamente) y cuanta memoria se va a usar. Por lo pronto usaremos resolución de 640 x 480 con 256 colores y 0 de memoria, ya que dejaremos que el control reúna toda la memoria que requiera.
La instrucción quedaría así:
Asprite1.DrawInit 640, 480, 8, 0

Para crear las animaciones en el programa se necesita una secuencia de imágenes en formato BMP y cada cuadro de animación del MISMO TAMAÑO con un color de fondo que pase a ser transparente; esto es conocido como sprites. Para que tenga una idea de como trabaja un sprite, imagine una imagen de un avión sobre otra imagen que representa el cielo. Si no se establece un color transparente, el avión aparecerá dentro de un rectángulo que no dejara pasar el fondo a través ciertas zonas y no creará la ilusión para la animación (Véase gráfico 1).

    Gráfico 1

Por tanto, se necesita fijar que color se va a utilizar como el color transparente (en este caso el azul), así como también cuantos cuadros de animación tiene. Al escribir los valores en orden, quedaría el nombre del archivo primero, luego los cuadros de animación y por último el número del color en la paleta de colores de la imagen. Muchos editores de imágenes le dejan ver la tabla de colores para imágenes de 256 colores, simplemente cuente en que posición esta el color transparente y listo. La cuenta comienza en 0 y termina en 255 (por si acaso).
El código sería:
Asprite1.SpriteLoad "onda.bmp", 18, 0

A continuación defina los cuadros(frames) de animación que se van a usar y la posición que tienen. En el gráfico 2 se ve una imagen de 10 cuadros de animación repartidos en 2 filas de 5 cuadros cada una.

    Gráfico 2

La imagen que se va a usar (una versión del gráfico 2 ampliada) tiene 99 pixeles de alto por 99 pixeles de ancho para cada cuadro de animación. Como se quieren varios sprites del mismo tipo se cambia únicamente el primer valor.
Asi que el código para esta imagen quedaría:
Asprite1.SpriteDefine ASprite1.SpriteDefine 0, 0, 0, 0, 0, 99, 99, 10, 5, 0, 0
Asprite1.SpriteDefine ASprite1.SpriteDefine 1, 0, 0, 0, 0, 99, 99, 10, 5, 0, 0
Asprite1.SpriteDefine ASprite1.SpriteDefine 2, 0, 0, 0, 0, 99, 99, 10, 5, 0, 0
Asprite1.SpriteDefine ASprite1.SpriteDefine 3, 0, 0, 0, 0, 99, 99, 10, 5, 0, 0
Asprite1.SpriteDefine ASprite1.SpriteDefine 4, 0, 0, 0, 0, 99, 99, 10, 5, 0, 0

Ahora configure las propiedades del texto.
El código sería:
ASprite1.TextSetAttributes 400, 50, "Arial", 16, QBColor(15), QBColor(0)

El siguiente paso es opcional. Sirve para ocultar el cursor utilizando un llamado al API.
Código:
ShowCursor (False)

Establezca la variable que va a definir la duración del ciclo. Le colocamos True para que comience.
Código:
Continuar = True

Inicio de ciclo.
Código:
While Continuar

Se verifica si el usuario presiona Esc para salir y de ser así terminar el programa.
Código:
If ASprite1.InputIsKeyPressed(27) Then Continuar = False

Guardamos en una variable la dirección que el usuario presiona en las teclas de dirección. Aún no sé porque se cuelga el control si se trata de usar sin variable.
Código:
direcTecla = ASprite1.InputKeyArrowDirection

Se mueven los sprites del 0 al 4 con distintas velocidades.
Código:
ASprite1.SpriteMove 0, direcTecla, 6
ASprite1.SpriteMove 1, direcTecla, 5
ASprite1.SpriteMove 2, direcTecla, 4
ASprite1.SpriteMove 3, direcTecla, 3
ASprite1.SpriteMove 4, direcTecla, 2

Se llena la pantalla de color negro en cada ciclo elimine lo que se habia dibujado anteriormente.
Código:
ASprite1.DrawFloodFill 0

En el siguiente trozo de código se iniciará un ciclo para mostrar y cambiar y los sprites. La instrucción SpriteSetNextFrame hace que se utilice el siguiente cuadro de animación del sprite. Puede probar quitándole esta propiedad si necesita que el gráfico sea estático. También se podrá dar cuenta que hay un proceso aleatorio a la hora de fijar el próximo cuadro de animación, esto se hace con la finalidad de que la animación tenga diferentes velocidades entre los distintos sprites.
Código:
For a = 0 To 4
ASprite1.SpriteDisplay a
If Int(Rnd * 3) = 1 Then ASprite1.SpriteSetNextFrame a
Next a

Colocamos el texto de instrucciones.
Código:
ASprite1.TextDisplay "Utilice las teclas de dirección para mover las esferas.", 50, 400
ASprite1.TextDisplay "Presione Esc para salir.", 50, 420

Dibujamos lo que hay en memoria en la pantalla.
Código:
ASprite1.DrawFlipBackBuffer

Devolvemos el control a Windows para ejecutar las tareas pendientes.
Código:
DoEvents

Fin del ciclo.
Código:
Wend

Estas intrucciones que quedan se ejecutan al finalizar el ciclo, lo cual ocurre al presionar Esc, por tanto hay que dejar todo como estaba.
Código:
ShowCursor (True)
ASprite1.DrawDisable
Unload Me

Lo único que queda es declarar la función del llamado al API y la palabra clave Option Explicit para forzar la declaración de variables. Esto se hace en la sección de declaraciones generales (General Declarations, al principio del código).
Código:
Private Declare Function ShowCursor Lib "User32" (ByVal bShow As Integer) As Integer
Option Explicit

Puede descargar el código fuente para este tutorial.

Volver a la página de tutoriales.


Copyright 1998-2000 Andrés Castillo.
1