Tutorial Juegos 2D en dx_lib32

La finalidad de esta gua es aprender lo importante para saber crear juegos 2D, y dichos conocimientos
combinarlos con la librera dx_lib32. La misma la pueden decargar aqui:

http://dxlib32.se32.com/downloads.html

Una vez descargada deben leer su documentacin, ver los ejemplos, practicar, etc, es muy simple
y no les llevar mucho tiempo si tienen conocimientos en VB6.
Si lo nico que quieren es aprender los conceptos entonces salteen el trabajo con dx_lib32, pero no se los
recomiento porque esta librera es prcticamente la nica para crear juegos en 2D que existe para Visual
Basic (y que obviamente es muy maleable y permite realizar juegos interesantes ms all del ahorcado o
el ta-ta-ti).

Antes de comenzar quiero aclarar/disculpar tres cosas:
1. Notarn que est escrito medio como "a los
apurones", es porque probablemente no lo lea
nadie; prefiero que si alguien est interesado, y
lo lee y tiene alguna duda lo pregunte en vez de
perder mucho tiempo en detalles. Adems lo
hice a las 5 de la maana sin nimos de hacer
algo elaborado;
2. Si van a leerlo y tienen ms conocimientos en
otros lenguajes, les recomiendo que lo dejen y
busquen tutoriales para esos lenguajes. Est no
es la mejor herramienta. Si por otro lado vienen
para adquirir un poco de conocimientos o
simplemente quieren aprender entonces
adelante;
3. Se ruega que por ms feo que el Manual sea, en
su reproduccin se respete al autor.

Tratar principalmente Teora fuera de Visual Basic, a lo que me refiero es que vamos a ver cosas
bsicas, no necesariamente que son propias de visual basic sino en general y que deben saber. El uso de
la parte de visual basic (dx_lib32) se supone que ya lo deben saber antes de continuar. Es muy fcil de
aprender, si lo necesitan hago otro apartado sobre dx_lib32.

PARTE 1

Requerimientos: Conocimientos bsicos sobre VB6 por supuesto y si es posible Matemtica, cuanto ms
mejor.

Sprites
Para hacerlo simple, un sprite es una imagen, que ser renderizada (mostrada) en pantalla. Conforman lo
principal de un juego en 2D, y cuanto mejor los manipulemos ms calidad visual tendr el juego y ser
ms atractivo a la vista del Usuario.
Un sprite puede ser una sola imagen, o pueden ser varias que juntas conforman una "animacin", de esa
forma procesndolas podemos ir mostrando las imgenes que conforman la animacin de a una en una
para crear el efecto de una animacin, por ejemplo el movimiento de un personaje.
Por supuesto que si pueden crearse sus propios sprites mejor, ya que los pueden hacer a su gusto, pero
si no se les da mucho hay cientos de "bancos de sprites" en internet en los que pueden conseguir sprites
a su medida (no se olviden de respetar los crditos de sus autores).

Como les dije, como mejor manipulen varios sprites en pantalla ms actractivo ser a la vista. No es lo
mismo un juego simple con dos rectngulos blancos, un crculo y un fondo verde, que dos arcos con
"gradientes" bien dibujados, una pelota, y un fondo de pasto; adems de que esas esas tres cosas sern
manipuladas al mismo tiempo porque la computadora puede, mientras que el usuario talvez solo pueda
seguir a su jugador.

En Visual Basic, existen algunas libreras para manipular sprites pero son bastantes obsoletas. La nica
que sigue en pie se puede decir que es Direct X, pero tienen demasiadas funciones. La solucin es
dxlib32, una librera que permite un uso ms simplificado de Direct X con una finalidad para juegos 2D, sin
necesidad de tener que aprenderse toda la documentacin de DX (que si tienen ganas de hacerlo no est
para nada de ms, lo nico es que, en primer lugar si deseamos eso es para hacer juegos 3D, pero eso
ah si que no es para Visual Basic).

Ejemplo de un sprite simple:


Ejemplo de un sprite "animacin":


Recordemos que lo bueno de que sea 2D, es que podemos tener sprites muy lindos y luego manipularlos
mediante cdigo, no es necesario realizar animaciones de cada cosa!. Luego vuelvo con sprites, primero
quiero explicarles una cosita simple para comenzar a programar con dx_lib32.

Frames per Second
Frames per second (FPS) quiere decir cuadros por segundo, quiere decir que se trata de la medida de
cuntos cuadros mostrar nuestro juego por segundo.
De esta forma trabaja dx_lib32, "un cuadro" aqu, se trata en realizar los clculos necesarios, dibujar en
pantalla, borrar y continuar el bucle, para que nuevamente se dibuje otro cuadro. Obviamente este
borrado no lo notaremos si por ejemplo se muestran 50 cuadros por segundo, puesto que nuestro ojo
capta hasta 12. Es decir que dx_lib32 (y la mayora de los juegos) trabajan as:
Cdigo: [Seleccionar]
Crear los sprites
Iniciar el bucle
[[
Realiza los clculos
Dibuja los sprites
Borra todo lo dibujado
]]--Contina el bucle
--hasta que termina el bucle

Claro est que donde dice dibuja los sprites, adems la librera permite dibujar no solo sprites (MAPS)
sino tambin texto, y reproducir sonidos.

Comenzar con dx_lib32
dx_lib32 tiene su propia documentacin, por lo que no voy a profundizar del todo en ella. Pueden leerla al
descargrsela.
Para bajarla:
Tiene ejemplos muy simples que van a comprender, si no la entienden o son muy vagos para leer la
documentacin (o no la encuentran) pregunten.


Continen solo si estn comprendiendo la librera, como inicializar las clases y como crear el bucle
principal

Veamos un ejemplo bsico:
Cdigo: [Seleccionar]
Option Explicit
Public cGfx As dx_GFX_Class declaramos la clase dx_GFX_Class
(grficos)
Private Render As Boolean 'Esta booleana determinar que el bucle
contine mientras sea true, es decir que si la convertimos en false se
termina el bucle. Esto claramente debemos hacerlo para cerrar el juego


Private Sub Form_Load()
Set cGfx = New dx_GFX_Class 'inicializamos la clase
Render = cGfx.Init(Me.hWnd, 640, 480, 32, True)
Do While Render 'comienza el bucle
'AQUI SE REALIZARN LOS CLCULOS
'Y LUEGO EL DIBUJADO
Call cGfx.Frame(0, 50) 'limita los frames a 50 por segundo
Loop
End Sub

Donde dice "Y luego el dibujado", ser donde utilicemos la funcin (Que si hicieron como les dije sabrn
que la funcin principal para esto son: DRAW_Map y DRAW_AdvMap).

Deben comprender entonces que cada tipo de sprite deber tener su propia clase (por supuesto
dependiendo de la importancia del sprite compartirn la misma clase, por ejemplo el personaje principal
que manejar el usuario tendr su clase, mientras que el resto de los NPC compartirn la clase "NPC" por
ejemplo). Esto se muestra en los ejemplos de la librera. Si no lo comprendieron, no avancen, pregunten
de qu se trata.

Primeros clculos

*Coordenadas rectangulares

Una escena se conformar de un plano, con dos ejes, el X y el Y. As se forman las dos propiedades
principales del sprite, su posicin vertical (TOP, Y) y su posicin horizontal (LEFT, X). Estas propiedades
quedan determinadas segn la distancia ortogonal que hay entre la misma y el eje cartesiano (abcisa el
de X y ordenada el de Y).

Sabiendo esto podemos realizar la primera manipulacin sobre los sprites, el efecto de movimiento.
Supongamos que queremos mover a nuestro personaje principal, la clase se llama c_Player.

Por ejemplo, una posicin del sprite puede ser 10 de X y 5 de Y, o -3 de X y 10 de Y. Lgicamente, como
ya se imaginarn, en la parte que dice "Aqu se realizarn los clculos", podemos colocar un if que utilice
la funcin Key_Hit() para comprobar si hay una tecla presionada, y as llamar a una funcin dentro del
sprite que modifique la posicin del sprite.

Ejemplo del if:
Cdigo: [Seleccionar]
If Key_Hit(Key_W) Then Call c_Player.Subir
Y en la clase sprite, se encontrara el siguiente procedimiento:
Cdigo: [Seleccionar]
Public Sub Subir()
X = X - 1
End Sub

*Coordenadas polares
Los coordenadas polares son un poco ms complejas que las rectangulares, pero permiten un
movimiento ms amplio. Las coordenadas polares, permiten ubicar un punto, y desplazarlo, como vimos
en el ejemplo anterior, solo que ac necesitamos un ngulo y una distancia.
Quiere decir que en vez de mover a nuestro personaje de arriba, abajo, izquierda, derecha u
oblicuamente, lo podemos hacer de 0 a 360 grados, mucho ms amplio no?
Si todava se preguntan cul es la utilidad, imaginmosnos un auto visto de arriba, quedara bastante feo
que el sprite est mirando hacia la derecha, y si apretamos la flecha izquierda se voltee repentinamente
hacia la derecha, o no?

Entonces, en las coordenadas rectangulares, un punto se ubicara mediante su distancia x e y, mientras
que en las polares, un punto se ubica mediante su distancia y su ngulo, es decir:

Polares => [distancia,ngulo]
Rectangulares => [X,Y]


Hasta aqu la parte 1, en cuanto pueda pongo la 2 y mejoro la 1.
ltima modificacin: 27 Diciembre 2011, 02:37:31 pm por MatU_MalO
En lnea

NaSH
Yo vivo en CPH


Mensajes: 874
Puntos: +0/-0
Sexo:
--[[ ]]

o

o

o

Re:[Tutorial] Juegos 2D en dx_lib32
Respuesta #1 en: 27 Diciembre 2011, 02:30:09 pm
Citar

PARTE 2

De polar a rectangular
Luego vamos a ver al inverso (de rect. a pol.), pero primero esto (son los dos muy simples, pero MUY
tiles).
Para transformar coordenadas polares en rectangulares, debemos recordar las funciones
trigonomtricas, e imaginarnos el punto polar como un tringulo:



Como ven, el tringulo imaginario queda conformado con las lneas celestes, que sern X e Y. A su vez X
e Y son los segmenteos adyacente (X) y opuesto (Y) del ngulo A. El ngulo A es el ngulo del punto
verde (30,50px), cuya distancia coincide con la hipotenusa del tringulo imaginario.
Como les dije, espero que recuerden las funciones trigonomtricas. Es decir, para obtener la posicin X,Y
del punto polar (30,50px), debemos utilizarlas...
Ya les marqu bien el lado adyacente y opuesto del ngulo 30, que efectivamente, obteniendo su largo
sabremos la posicin X,Y.
para obtener el largo de X, simplemente debamos utilizar la funcin coseno (abreviada cos), que es
Cos(angulo) = adyacente / hipotenusa.
Pueden notar que les dije que el adyacente era X (fjense que es el que forma el ngulo junto con la
hipotenusa), es por eso que utilizamos la funcin cos. En cambio, para obtener Y,
utilizaremos seno (abreviado sen, o sin en ingls), puesto que su frmula es Sin(angulo) =
opuesto/hipotenusa.

Ahora es cuestin de reemplazar y resolver la ecuacin, como les mostr en el grfico. Para obtener la
coordenada X:

Sen(angulo:30) = adyacente:X / hipotenusa:50px (los pixeles sern la medida bsica que usaremos en
visual basic)
X = 50px * sen(30)

Para finalizar despejando X debemos resolver el seno de 30 mediante una calculadora o nuestra cabeza,
pero eso no es tarea nuestra, con tener este clculo, del resto se encarga la computadora (debido a que
probablemente el ngulo sea variable, entones es mejor dejar la funcin prearmada)


Obtener la distancia de dos puntos en el plano
Para obtener la distancia entre dos puntos en un plano, y el ngulo que se forma entre ellos, simplemente
debemos recordar aPitgoras y un poco de funciones trigonomtricas nuevamente. Esto les servir para
varias cosas que irn notando a medida que armen cosas, una de ellas por ejemplo son las colisiones.
Supongamos que tenemos dos puntos:


Si nos imaginamos nuevamente el tringulo imaginario entre ambos, quedara as:



Como ven, nuevamente nos queda formada una hipotenusa, que como podrn notar es la distancia entre
ambos puntos. Para obtenerla no tenemos ms que aplicarle el Teorema de Pitgoras, que si recordarn
dice as:

El cuadrado de la hipotenusa, es igual a la suma de los catetos al cuadrado, o:

hipotenusa al cuadrado = cateto1 al cuadrado + cateto2 al cuadrado

Los que ven en el grfico en celeste son el cateto mayor y el menor, no tenemos su largo, pero al tener la
posicin de ambos puntos podemos obtenerlos:

El cateto de base, el mayor (solo por ser el ms largo, puede quedar al revez), el paralelo al eje X, lo
obtenemos restndole el valor X del primer punto, al valor de X del segundo punto. Observen bien el
grfico, y se van a dar cuenta porque...
Lo mismo haremos con el paralelo al eje Y, restarle el valor Y del primero al del segundo.
Lo de restarle el primero al segundo y no al revez se debe a que tanto los valor X e Y del segundo (el rojo)
son mayores que los del primero (el verde). En el cdigo, previamente podemos ver cual es ms grande y
colocar la resta de esa forma, o simplemente
obteniendo el valor absoluto del resultado (sin importar si se resta el primero al segundo o viceversa).

Despus vamos a llamar a la hipotenusa H, porque es el valor que queremos obtener y el nico que
desconocemos. Al punto uno vamos a llamarlo P1, y al 2 P2:
H
2
= (P2.Y - P1.Y)
2
+ (P2.X - P1.X)
2

H
2
= (4 - 1)
2
+ (4 - 1)
2

H
2
= (3)
2
+ (3)
2

H
2
= 9 + 9
H
2
= 18
H = Raz(18)

La hipotenusa al cuadrado en este caso vale 18, quiere decir que los puntos 1 y 2, estn distanciados la
raiz de 18 pixeles.

Obtener el ngulo entre dos puntos
Para obtener el ngulo entre dos puntos, vamos a tomar el mismo caso que el anterior, solo que esta vez
en vez de tomar la distancia, obtendremos el ngulo que forman (como van viendo notarn que hablamos
de distancia y ngulo, algo de lo que ya hable en coordenadas polares).



Como les dije, necesitaremos nuevamente un poco de funciones trigonomtricas, especficamente
tangente y arcotangente.
La frmula para obtener la tangente es:
TAN(ngulo) = cateto opuesto / cateto adyacente

En este caso, el adyacente del ngulo que queremos obtener es el paralelo a X, y el opuesto el Y, as
que, en definitiva, para obtener nuestro ngulo al que llamaremos A, debemos hacer:

Tan(A) = X / Y

Si se fijan el punto anterior, el largo del cateto mayor era el valor X del segundo punto menos el del
primero, y lo mismo con X. Entonces, si me comprendieron bien hasta ac, se darn cuenta al instante
que hay que hacer:
Tan(A) = (P2.X - P1.X) / (P2.Y - P1.Y)
Tan(A) = (4 - 1) / (4 - 1)
Tan(A) = 3 / 3
Tan(A) = 1
A = Atan(1) --> Arcotangente

Como vern al final invertimos la ecuacin, es decir, obtenemos la arcotangente.

La funcin final sera A = Atan([P2.X - P1.X] / [P2.Y - P1.Y])

Este clculo les servir mucho al igual que obtener la distancia entre los puntos. A continuacin vern un
ejemplo comn para que se den una idea.
Ac concluye la Parte 2

ltima modificacin: 29 Diciembre 2011, 01:39:25 am por MatU_MalO
En lnea

alexmanycool
Me das tu IP?


Mensajes: 56
Puntos: +0/-0

o

o

Re:[Tutorial] Juegos 2D en dx_lib32
Respuesta #2 en: 28 Diciembre 2011, 06:14:30 pm
Citar
no es muy complicado dxlib32 no lo haba visto a esto, quiz me sirva.

saludos!