Castillo Fantasma

Deslizador de Portadas

2012-01-18T23:26:00.000-08:00

Mi objetivo por aprender SDL y OpenGL es combinarlos para programar juegos. Pues bien aun no termino de desarollar un nuevo juego que tengo en mente. Pero por el momento le dejo un Demo que programe en hora y media aunque con muchas distracciones.

El demo trata de un simple deslizador de portadas hecho con las librerías de SDL y OpenGL, aunque no es muy espectacular, pero aplica los principios básicos de combinar estas dos librerías.

OpenGL Lección 04 - Luces

2011-12-13T13:22:00.000-08:00

Vamos a hablar un poco sobre la luz en OpenGL. Supongo que para mucho esto resultara muy atractivo a la vista y en verdad lo es. La luz y los materiales van de la mano. Anteriormente hemos estado dibujando figuras y dando color a los vértices, pero los materiales nos brinda la oportunidad de darle mas realismo a nuestro objeto necesitamos a la luz para que el incida sobre el objeto y lo ilumine asi que comenzaremos con ello.

Retomare el código de la lección 03 y sobre ella trabajare. Este código lo he compilado en Linux y Windows. La única diferencia en Windows seria cambiar las cabeceras por "glut.h". (Esta es la primera revisión, así que esta sujeta a correcciones de código, pero sobre todo gramática :p). Abajo dejo un enlace para descarar el ejemplo completo.

Primero veamos algo de sencilla teoría.

Luces

Para usar la luz en OpengGL es necesario activarla.

glEnable(GL_LIGHTING); //Activa la luz

glDisable(GL_LIGHTING); //Desactiva la luz

Ademas de ello OpenGL estable poder usar ocho luces y hay que activar la que vayamos a usar.

glEnable(GL_LIGHT0) //Activa la primera luz

glEnable(GL_LIGHT7) //Activa octava luz

Pero ademas luz cuenta con distintas propiedades. Hablemos un poco acerca la luz y sus tres componentes que son: ambiental, difusa y especular. En OpenGL estas cuentan con tres componentes de color (RGB) y un valor alpha (trasparencias)

Luz Ambiental

Esta luz no proviene de ningún punto en especifico, si no que incide y rebota desde varios puntos.

Luz Difusa

Es la luz que ilumina al objeto y rebota en todas direcciones

Luz Especular

Esta es el brillo o reflejo que produce el objeto al ser visto por una persona desde el punto de refracción.

Ademas de los componentes de la luz también existen tres formas en que los rayos de luz se emiten.

Direccional: Los rayos de la luz son paralelos entre si , no existe atenuación con al distancia. El sol es único capas de hacer esto.

Puntual o posicional

La luz se emite desde un punto en todas direcciones, ejemplo una fogata.

Focal

La luz sale desde un punto y crea una cono de iluminación, esta puede necesitar algunos parámetros extra como: un angulo y una distancia de atenuación. Ejemplo una lampara de mano.

La funcion encargada de definir la luces es:

glLightFv(GLenum luz, GLenum, Parametros, GLfloat Color[4]);

Luz: Desde GL_LIGHT0 hasta GL_LIGHT7

Parametros:

GL_AMBIENT //Color del ambiente

GL_DIFUSSE //Color de la luz reflejada

GL_SPECULAR //Color del brillo

GL_POSITION //Posición de la luz, puede ser de dos tipos

-w = 0.0f //Luz Direccional

-w = 1.0f //Luz Puntual o focal

GL_SPOT_CUTOFF //Angulo de abertura desde 0 hasta 90 grados

GL_SPOT_EXPONENT //Perdida de intensidad al centro desde 0 hasta 128

GL_CONSTANTA_ATTENUATION //Por defecto 1. (0.0 - 1.0)

GL_LINEAR_ATTENUATION //Por defecto 1. (0.0 - 1.0)

GL_QUADRATIC_ATTENUATION //Por defecto 1. (0.0 - 1.0)

Retomare el código de la lección 03. Vamos a agregar una luz direccional. No cambia mucho con respecto a la puntual o focal. Primero agregar algunas variables que servirán para incrementar los parámetros de la luz y mover la posición de esta.

//Definimos algunas variables
GLfloat ambiente = 0.7f;

GLfloat difusa = 0.7f;

GLfloat especular = 1.0f;

GLfloat luzPos_x = 1.0f;
GLfloat luzPos_y = 1.0f;

GLfloat luzPos_z = 1.0f;

//Inicia los Valores de OPengl

void iniciar(){

glClearColor(0.0f, 0.0f, 0.0f, 0.0f);

//Activar parametor del Buffer de Profundidad

glClearDepth(1.0);

glDepthFunc(GL_LEQUAL);

glEnable(GL_DEPTH_TEST);

//Activar cortado de caras

glFrontFace(GL_CW);

glCullFace(GL_BACK);

glEnable(GL_CULL_FACE);

//Activamos la luz

glEnable(GL_LIGHTING);

glEnable(GL_LIGHT0);

//Tipo de Sombredo

glShadeModel(GL_SMOOTH);

}

En la funcion iniciar() lo unico que hacemos es activar el modo de iluminación y la luz 1.

//Se encarga de dibuja las primitivas y volcar el buffer

void dibuja(){

//Limpia los buffers de color y profundidad

glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);

glLoadIdentity();

gluLookAt(0.0, 3.0, 10.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0);

//Definimos los parametro de la luz

GLfloat luzDifusa[4] = {difusa, difusa, difusa, 1.0f};

GLfloat luzAmbiental[4] = {ambiente, ambiente, ambiente, 1.0f};

GLfloat luzEspecular[4] = {especular, especular, especular, 1.0f};

GLfloat luzPosicion[4] = {luzPos_x, luzPos_y, luzPos_z, 0.0f};

//Luz numero 0

glLightfv(GL_LIGHT0, GL_AMBIENT, luzAmbiental);

glLightfv(GL_LIGHT0, GL_DIFFUSE, luzDifusa);

glLightfv(GL_LIGHT0, GL_SPECULAR, luzEspecular);

glLightfv(GL_LIGHT0, GL_POSITION, luzPosicion);

//Guardamos la matriz

glPushMatrix();

glTranslatef(0.0f, 0.0f, 0.0f);

glutSolidTeapot(1.0f); //Dibujamos la tetera solida

glTranslatef(-3.0f, 0.0f, 0.0f);

glPopMatrix();

//Intercambiamos los buffers

glutSwapBuffers();

}

Por el momento dentro de dibuja() definiré el arreglo que contendrá las variables para las tres propiedades de la luz y una arreglo para la posición de la luz. Notar que el ultimo parámetro de la posición de la luz es 0.0f. Luz direccional.

Luego hay que asignar los arreglos a cada una las distintas propiedades de la luz 0 y la posición de esta.

Por ultimo agregare algunas teteras que serviran de modelo, hay que notar que ahora tiene caras con glutSolidTeapot en vez de glutWireTeapot.

void mostrarValores(){

printf("Luz Ambiental: %f\n", ambiente);

printf("Luz Difusa: %f\n", difusa);

printf("Luz Especular: %f\n\n", especular);

}

void posicionLuzValores(){

printf("Luz Posicion en x: %f\n", luzPos_x);

printf("Luz Posicion en y: %f\n", luzPos_y);

printf("Luz Posicion en z: %f\n\n", luzPos_z);

}

Luego tenemos estas dos funciones que lo único que haces es mostrar los valores actuales de la luz y su posición.

Igual que la vez anterior agregamos algunos eventos de teclado para cambiar los valores de la luz y su posición.

//Incrementa y drecementa los valores para hacer transformacion al presionar las teclas

void teclado(unsigned char tecla, int x, int y){

//Luz ambiente

if(tecla == 'q' || tecla == 'Q'){

ambiente += 0.1f;

mostrarValores();

glutPostRedisplay();

}

else if(tecla == 'w' || tecla == 'W'){

ambiente -= 0.1f;

mostrarValores();

glutPostRedisplay();

}

Eso seria todos los cambios dentro del código para esta lección.

(Ejemplo de una luz puntual)

Ahora bien aun falta agregar los materiales al objeto para poder ver los reflejos, pero eso sera el siguiente paso.

Teclas:
q/w: Luz Ambiente
a/s: Lus Difusa
z/x: Luz Especular
e/r: Mover la luz en x
d/f: Mover la luz en y
c/v: Mover la luz en z

Descarga Código Fuente: leccion_04

OpenGL Lección 03 - Transformaciones

2011-12-08T22:43:00.001-08:00

En este breve tutorial explicar como se realizan la traslación, rotación y escaldo de una figura. Retomare el código de la lección 02 y sobre ella trabajare. Este código lo he compilado en Linux y Windows. La única diferencia en Windows seria cambiar las cabeceras por "glut.h". (Esta es la primera revisión, así que esta sujeta a correcciones de código, pero sobre todo gramática :p). Abajo dejo un enlace para descarar el ejemplo completo.

Trasladar Rotar y Escalar

La tres formas básicas de transforma un objeto son: Trasladar, rotar y escalar. La forma de aplicarlas es muy sencilla es mediante el llamado de estas funciones.

//Trasladar la figura por eje con respecto al parámetro indicado

glTranslatef(GL_float x, GL_float y, GL_float z);

//Rota la figura en grados, entorno al eje normalmente de magnitud = 1

glRotatef(GL_float grados, GL_float x, GL_float y, GL_float z);

//Escala la figura con respecto al parámetro indicado

glScalef(GL_float x, GL_float y, GL_float z);

Como ven las trasformaciones son muy sencillas. Pero ahora bien estas deben de seguir este orden descrito: Primero Trasladar, luego rotar y por ultimosEscalar, esto es debido a que OpenGL apila las trasformaciones y si primero rotamos y luego trasladamos a lo largo del eje "x" nos daremos cuenta de mueve en una dirección diferente a la prevista.

Retomando el codigo de la leccion_02 lo primero que haré sera agregar tres variables globales que se encargaran de increnmentar y desincremntar el valor de traslado, rotado y escalado.

GLfloat transladar = 0.0f;

GLfloat rotar = 0.0f;

GLfloat escalar = 1.0f;

Ahora pasemos a la funcion de dibujo() que ya sabemos que hace.

//Se encarga de dibuja las primitivas y volcar el buffer

void dibuja(){

glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);

glLoadIdentity(); //Restablecemos la ubicacion

gluLookAt(0.0, 3.0, 10.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0);

glPushMatrix();

glTranslatef(-3.0f, 0.0f, 0.0f);

glutWireTeapot(1.0f);

glPopMatrix();

glPushMatrix();

//Transfomaciones

glTranslatef(transladar, 0.0f, 0.0f); //Transalada la figura en el eje x

glRotatef(rotar, 0.0f, 1.0f, 0.0f); //Rotar la figura entorno al eje y

glScalef(escalar, escalar, escalar); //Escalar la figura en todos sus ejes

glutWireTeapot(1.0f);

glPopMatrix();

glutSwapBuffers();

}

Dibujare dos teteras. La primera servirá como referencia y a la segunda le aplicare las trasformaciones. Con glTranslatef() movere la figura a lo lago del eje "x" con el valor de la varible global que declare al principio. glRotatef(), rotara con los grados indicados en torno al eje y. Por ultimo escalaremos la figura en todos sus ejes con glScalef().

Para hacerlo mas interactivo agregaremos eventos de teclado que permitan interactuar con las trasformaciones pudiendo cambiar los valores para moverlo, girarlo o cambiar de tamaño .

//Incrementa y drecementa los valores para hacer transformacion al presionar las teclas

void teclado(unsigned char tecla, int x, int y){

//Traslación

if(tecla == 'q' || tecla == 'Q'){

transladar += 0.2f;

glutPostRedisplay();

}

else if(tecla == 'a' || tecla == 'A'){

transladar -= 0.2f;

glutPostRedisplay();

}

La función teclado recibe tres parametros, el primero de ellos es el teclado, los otros dos hacen referencia a mouse, solo tomaremos los del teclado. La funcion que realiza es muy sencilla. Si la tecla indicada entre comillas simples es presionada este efectuara el incremento o desincremento del valor de la variable indicada, en este caso transladar. La funcion glutPostRedisplay(), redibuja la escena cada vez que esto ocurre. Igual aplicaremos para las demás trasformaciones.

Por ultimo en el main agregamos los evento con glutKeyboardFunc() que llama a nuestra función teclado

.
.
.
glutDisplayFunc(dibuja);

glutReshapeFunc(redimensionar);
glutKeyboardFunc(teclado);
glutMainLoop();
.

.
.

Por ultimo he de decir que pruebes cambiando el orden las trasformaciones para ver el efecto que estas tiene sobre el objeto.

Teclas usadas para las transformaciones:
q/a: Traslada el objeto
w/s: Rota el objeto
e/d: Escala el objeto

Descarga Código Fuente: leccion_03

OpenGL Lección 02 - Dibujar Figuras Parte II

2011-12-07T23:01:00.001-08:00

Es momento de empezar a dibujar algunas figuras sencillas con la primitivas de OpenGL, ademas de usar el buffer de profundidad y corte de caras. Retomare el código de la lección 01 y sobre el trabajare. Pondre todo el código y luego explicare los cambios hechos. Este código lo he compilado en Linux y Windows. La única diferencia en Windows seria cambiar las cabeceras por "glut.h". (Esta es la primera revisión, así que esta sujeta a correcciones de código, pero sobre todo gramática :p). Abajo dejo un enlace para descarar el ejemplo completo.

Si uno quiere dibujar figuras muy complejas indicando manualmente vértice por vertice a la larga resulta muy tedioso. Pero si entendemos la forma básica en que se crean figuras en OpenGL entonces cabe la posibilidad de que podemos crear un sencillo y básico modelador de objetos o en todo caso exportar modelos.

Si leíste la primer parte de este tutorial seguramente casi inmediatamente sabras que hacen las nuevas funciones con solo verlas. Como ya explique como crear una venta con GLUT y el modelo de visualización dejare fuera esas partes.

//Librerias que se usaran, cambian de acuerodo a sistema

#include "GL/gl.h"

#include "GL/glu.h"

#include "GL/glut.h"

//Inicia los Parámetros de OPengl
void iniciar(){

glClearColor(0.0f, 0.0f, 0.0f, 0.0f);
glClearDepth(1.0);
glDepthFunc(GL_LEQUAL);
glEnable(GL_DEPTH_TEST);
glFrontFace(GL_CW);
glCullFace(GL_BACK);
glEnable(GL_CULL_FACE);
glShadeModel(GL_SMOOTH);
}

//Dibuja figuras de OpenGL por medio de primitivas
void dibuja(){
glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
glLoadIdentity();
gluLookAt(0.0, 0.0, 6.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0);
glPushMatrix();
glTranslatef(1.5f, 0.0f, 0.0f);
glBegin(GL_TRIANGLES);
glColor3f(1.0f, 1.0f, 1.0f);
glVertex3f(0.0f, 1.0f, 0.0f);
glVertex3f(1.0f, -1.0f, 0.0f);
glVertex3f(-1.0f, -1.0f, 0.0f);
glEnd();
glPopMatrix();
glPushMatrix();
glTranslatef(-1.5f, 0.0f, 0.0f);
glBegin(GL_QUADS);
glColor3f(1.0f, 0.0f, 0.0f);
glVertex3f(-1.0f, 1.0f, 0.0f);
glColor3f(0.0f, 1.0f, 0.0f);
glVertex3f(1.0f, 1.0f, 0.0f);
glColor3f(0.0f, 0.0f, 1.0f);
glVertex3f(1.0f, -1.0f, 0.0f);
glColor3f(1.0f, 0.0f, 1.0f);
glVertex3f(-1.0f, -1.0f, 0.0f);
glEnd();
glPopMatrix();
glutSwapBuffers();
}

//Mantiene la relación de aspecto en las figuras
void redimensionar(GLint ancho, GLint alto){
glViewport(0, 0, ancho, alto);
glMatrixMode(GL_PROJECTION);
glLoadIdentity();
gluPerspective(45.0f, (GLfloat)ancho/(GLfloat)alto, 0.1f, 100.0f);
glMatrixMode(GL_MODELVIEW);
}

//Main de nuestro programa
int main(int argc, char **argv){
glutInit(&argc, argv);
glutInitDisplayMode(GLUT_RGBA | GLUT_DOUBLE | GLUT_DEPTH);
glutInitWindowSize(320,240);
glutInitWindowPosition(120,120);
glutCreateWindow("leccion_02 OpenGL");
iniciar();
glutDisplayFunc(dibuja);
glutReshapeFunc(redimensionar);
glutMainLoop();
return 0;
}

Ok primero vayamos a la funcion main(), aqui lo unico que cambia es que le indicamos a glut el uso del parametro GLUT_DEPTH para la profundidad.

//Inicia los Parámetros de GLUT

int main(int argc, char **argv){

glutInit(&argc, argv);

glutInitDisplayMode(GLUT_RGBA | GLUT_DOUBLE | GLUT_DEPTH);

glutInitWindowSize(320,240);

glutInitWindowPosition(120,120);

glutCreateWindow("leccion_02 OpenGL");

iniciar();

glutDisplayFunc(dibuja);

glutReshapeFunc(redimensionar);

glutMainLoop();

return 0;

}

Ahora movámonos a la funcion init(). Aqui hay varias cosas nuevas que le indicamos usar a OpenGL.

//Inicia los Parámetros de OPenGL
void iniciar(){
//Establece el color de limpiado
glClearColor(0.0f, 0.0f, 0.0f, 0.0f);
//Activar parametor del Buffer de Profundidad
glClearDepth(1.0);
glDepthFunc(GL_LEQUAL);
glEnable(GL_DEPTH_TEST);
//Activar cortado de caras
glFrontFace(GL_CW);
glCullFace(GL_BACK);
glEnable(GL_CULL_FACE);
//Tipo de Sombredo suavidado
glShadeModel(GL_SMOOTH);
}

Las primeras tres lineas en rojo indica el valor de limpiado del buffer de profundidad "z". luego el tipo de limpiado GL_LEQUAL indica que no dibuja todo aquello <= Z. Por ultimo activamos el buffer de profundidad.

Las otras tres lineas rojas hacen referencia a activar el corte de caras. La primera indica el sentido de los vertices para dibujar las caras GL_CW sigifica sentido horario, la segunda linea, glCullFace(GL_BACK) indica que no se calculan la caras traseras y la ultima linea indica a OpenGL activar el corte de caras.

Ahora pasemos a la función que dibuja las figuras.

//Dibuja figuras de OpenGL por medio de primitivas

void dibuja(){

glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);

glLoadIdentity();

gluLookAt(0.0, 0.0, 6.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0);

glPushMatrix();

glTranslatef(1.5f, 0.0f, 0.0f);

glBegin(GL_TRIANGLES);

glColor3f(1.0f, 1.0f, 1.0f);

glVertex3f(0.0f, 1.0f, 0.0f);

glVertex3f(1.0f, -1.0f, 0.0f);

glVertex3f(-1.0f, -1.0f, 0.0f);

glEnd();

glPopMatrix();
.
.
.

glutSwapBuffers();

}

Primero en la funcion glClear() debemos indicarle a OpenGL que cada vez que dibuja la escena este debe de limpiar el buffer de profundidad.

La función gluLookAt() estable el punto que nos situamos para observar la escena.

Antes de dibujar nuestra figura podemos ver una función llama glPushMatrix(), esta se encarga de guardar la matriz para realizar cálculos.

Ahora lo que hacemos es mover un poco hacia la derecha nuestra figura a través del eje x con glTranslatef(), después explicare esta función.

Es momento de comenzar a dibujar la figura de un triangulo con glBegin(), dentro de ella le indicamos la forma en que queremos que interprete la figura (GL_TRIANGLES). En el siguiente renglón le indicamos el color que tomaran los vertices, todo los vértices tendrán el mismo color hasta que indiquemos alguno diferente. Luego comenzamos a dibujar la figura indicando los vértices en sentido horario como indicamos con glFrontFace(). El primer vértice esta ubicado en la parte superior, el segundo es la parte inferior derecha y el ultimo en la parte inferior izquierda. Finalizamos indicando que son todos los vértices de la figura con glEnd() y por ultimo restablecemos la matriz con glPopMatrix().

La forma en que dibujamos el cuadrado es muy similar salvo que usamos glBegin(GL_QUADS); para indicarle que seran cuatro vertices para forma una cara. De hecho podemos dibujar un cuadrado con dos triangulos y muchas de las figuras mas complejas son dibujadas usandos solo triángulos.

Aun falta mas cosas por cubrir como array de vértices o listas compiladas.

Descarga Codigo Fuente: leccion_02.cpp

OpenGL Lección 02 - Dibujar Figuras Parte I

2011-12-07T00:44:00.001-08:00

Supongo que estamos ansiosos por empezar a dibujar figuras en OpenGL. Pero primero tomaremos una breve explicación de como se crean figuras en Opengl.

I - Vértices

La forma en que OpenGL crea figuras es muy sencilla y es por medio de vertices. Un vértices esta representado por coordenadas en el espacio tridimensional que permite ubicar su posición.

glVertex3f(1.0f, 0.0f, 1.0f); //Vértices con valor Real

Pero con cuatro o cinco vértices se pueden dibujar muchas cosas, como puntos, lineas, triángulos, cuadrados, polígonos. Es por ello que le tenemos que indica a OpenGL la forma en que se utilizaran los vértices.

II - Crear Figuras a Través de Vértices.

OpenGL nos brinda 10 formas de poder de como poder manejar vértices.

Para indicarla la forma en que se interpretara un grupo de vertices para dibuja la primitiva se utiliza la funcion glBegin() y glEnd(). Todos los vertices contenidos entre estas dos funciones serán dibujados de la forma que se le indico con glBegin();.

glBegin(GLenum Parametros); //Le indicamos el tipo de Parámetro

III - Colores en los Vértices

La forma en que OpenGL representa los colores es mediante RGBA. Rojo, verde, azul y en veces Alpha.

void glColor3f(1.0, 0.0, 0.0); //Ejemplo de color con 3 valor Real.

void glColor4f(1.0, 0.0, 0.0, 0.5); //Ejemplo de color con 4 valor Real.

Con valores de tipo Real el valor del color oscila entre 0.0 y 1.0.

IV - El Orden de los vértices

Es importante saber que se debe tener en cuenta el orden en que se indican los vértices al momento de dibujar la primitivas. Por ejemplo si dibujamos un triangulo este tendrá dos caras; frontal y trasera.

Para indicar el orden de lo vertices y saber cual sera la cara frontal se utiliza:

glFrontFace(GLenum Parámetros);

//Posibles Parametros

GL_CC //Sentido horario del reloj

GL_CCW //Sentido Anti-horario del reloj

Existirán casos en los que nunca veamos la cara trasera de esta, entonces no es necesario calcularla para ello se utiliza la función.

glCullFace(GLenum Parámetros); //Indicamos la cara que no calcula

//Posibles Parametros

GL_FRONT //No calcula la cara de enfrente

GL_BACK //No calcula la cara de atrás

Para activar el corte de caras es necesario indicarselo a OpenGL mediante la función glEnable() y para desactivarlo con glDisable().

glEnable(GL_CULL_FACE); //Activa el corte de caras

glDisable(GL_CULL_FACE); //Desactiva el corte de caras

V - La cámara

Para determinar la matriz de proyección es necesario establecer un punto de vista y mediante la funcion glLookAt() podemos lograr esto.

//Posicion de la camara
glLookAt(GLdouble Posicion_X, GLdouble Posicion_Y, GLdouble Posicion_Z,
GLdouble enfocar_X,  GLdouble enfocar_Y,  GLdouble enfocar_Z,
GLdouble Inc_X,    GLdouble Inc_Y,    GLdouble Inc_Z);

glLookAt recibe tres triadas de parámetros, lo primeros tres indican la posición de la cámara le segunda triada indica hacia que punto se esta viendo y la ultima triada indica cual es el eje que apunta hacia arriba.

VI - Buffer de Profundidad

Cuando se dibujan objetos tridimensional es necesario comprobar si se dibujan por delante o por detrás de otro objeto. Para saber esto OpenGL almacena en un buffer el eje Z y después comprueba su distancia de profundidad para evitar dibujar por encima de otro que este mas cercano hacia nosotros.

glEnable(GL_DEPTH_TEST); //Activa el buffer de Profundidad
glDisable(GL_DEPTH_TEST); //Desactiva el buffer de Profundidad
glClearDepth (GLfloat z); //Define el valor de limpiado

Primero hay que activar el buffer de profundidad y después le indicamos la el valor para limpiar el eje z, por ultimo debemos de decirle como compara la distancia.

glDepthFunc(GLenum Parametro); //Compara la distancia

GL_NEVER //Siempre false
GL_LESS //true si z referencia < z profundidad
GL_EQUAL //true si z referencia = z profundidad
GL_LEQUAL //true si z referencia <= profundidad
GL_GREATER //true si z referencia > z profundidad
GL_NOTEQUAL //true si z referencia != z profundidad
GL_GEQUAL     //true si z referencia >= z profundidad
GL_ALWAY   //Siempre true

Al igual que con buffer de color también hay que limpiar el buffer de profundidad.

glClear(GL_DEPTH_BUFFER_BIT);     //Limpia el buffer de Profundidad

OpenGL Lección 01 - Inicializar una Ventana con Glut

2011-12-04T00:02:00.001-08:00

Vamos a comenzar con nuestro primer ejemplo sencillo con OpenGL y glut. Lo que vamos a hacer es crear una ventana con glut, inicializar unas variables de OpenGL y dibujar una objeto en pantalla. Este código lo probado en Windows y Linux sin modificar código principal lo único que cambia son los include de las librerías. (Esta es la primera revisión, asi que esta sujeta a correciones, sobre todo gramática :p). Abajo dejo un enlace para descarar el ejemplo completo.

Supongo que usted tiene alguna idea básica de álgebra.

Por comodidad trabajare en entorno linux, asi que los include serán:

#include "GL/gl.h"
#include "GL/glu.h"
#include "GL/glut.h"

Mientras que para Windows como explique anteriormente solo bastara con usar:

#include "glut.h"

Bueno comencemos con este sencillo ejemplo, voy a pegar el código completo y luego abajo iré explicando mas detalladamente.

#include "GL/gl.h"

#include "GL/glu.h"

#include "GL/glut.h"

void iniciar(){

glClearColor(0.0f, 0.0f, 0.0f, 0.0f);

}

void dibuja(){

glClear(GL_COLOR_BUFFER_BIT);

glLoadIdentity();

glTranslatef(0.0f, 0.0f, -10.0f);

glutWireTeapot(3.0f);

glutSwapBuffers();

}

void redimensionar(GLint ancho, GLint alto){

glViewport(0, 0, ancho, alto);

glMatrixMode(GL_PROJECTION);

glLoadIdentity();

gluPerspective(45.0f, (GLfloat)ancho/(GLfloat)alto, 0.1f, 100.0f);

glMatrixMode(GL_MODELVIEW);

}

int main(int argc, char **argv){

glutInit(&argc, argv);

glutInitDisplayMode(GLUT_RGBA | GLUT_DOUBLE);

glutInitWindowSize(320,240);

glutInitWindowPosition(120,120);

glutCreateWindow("leccion_01 OpenGL");

iniciar();

glutDisplayFunc(dibuja);

glutReshapeFunc(redimensionar);

glutMainLoop();

return 0;

}

Lo primero en que nos fijaremos sera en la funcion main() , notaras que la funciones de "glut" comienza con su propio nombre. Lo primero es pasar los argumentos que usa glutInit() para inicializarlo(duh!).

glutInit(&argc, argv);

glutInitDisplayMode(GLUT_RGBA | GLUT_DOUBLE);

glutInitWindowSize(320,240);

glutInitWindowPosition(120,120);

glutCreateWindow("leccion_01 OpenGL");

iniciar();

glutDisplayFunc(dibuja);

glutReshapeFunc(redimensionar);

glutMainLoop();

Con glutInitDisplayMode() lo que hacemos es pasar los parametros que utilizaremos, GL_RGBA se encarga de manejar los colores: rojo(R), verde(G), azul(B) y el valor alfa(A) que es el que se maneja las transparencias y junto con ellas iniciamos el doble buffer de glut que se encarga de dibujar en segundo plano la imagen que aparecerá para parpadeo de imagenes mientras se dibujan.

Las dos siguientes lineas establecen el tamaño de la venta y la posición donde aparece nuestra ventana.

Entonces aparece la función iniciar(), aquí es donde empezaremos a establecer todos lo parametros iniciales de OpenGL que deseamos. En ella puedes ver la función glClearColor(), se encarga establecer el color de fondo con que la pantalla sera limpiada (color negro), como ven le pasamos cuatro parámetros que son los colores RGBA y que van de entre 0.0 a 1.0.

void iniciar(){
glClearColor(0.0f, 0.0f, 0.0f, 0.0f);
}

Regresando al main la siguente función que sigue es glutDisplayFunc(), se encarga de dibujar en pantalla la imagen y para ello tiene un puntero que tiene que llamar a la funcione que lo hara, en este caso dibuja().

Regresamos nuevamente arriba a dibuja(). Aquí es donde empezamos a redenrizar nuestra escena. Primero limpiamos el buffer con el color que le indicamos anteriormente y después cargamos la matriz identidad que lo único que haces es ubicarnos en el centro del nuestro de nuestro mapa de coordenadas. Ahora si dibujamos algo es posible que no lo veamos o que estemos dentro de nuestro objeto que dibujemos, es por ello que hay que alejarlo un poco de nosotros para verlo mejor, trasladamos nuestros coordenadas por el eje z con glTranslatef(0.0f, 0.0f, -10.0f), y dibujamos nuestro objeto.

void dibuja(){

glClear(GL_COLOR_BUFFER_BIT);

glLoadIdentity();

glTranslatef(0.0f, 0.0f, -10.0f);

glutWireTeapot(3.0f);

glutSwapBuffers();

}

GLUT incluye una tetera y otros modelos como ejemplos para comenzar rápido, así que bastara con solo llamar glutWireTeapot(3.0f), el valor que tiene indica el tamaño que deseamos por ultimo solo queda llamar a glutSwapBuffers() que es el que se encarga de volcar el doble buffer que llamamos previamente.

Regresamos nuevamente al main para ver la que la función glutReshapeFunc() llama a redimencionar. Lo que glutReshapeFunc() es llamada cuando la ventana sufre cambios en su apecto o sea redimencionar parar ello tiene dos parámetros.

La función de redimencionar(), se encarga de que cuando nuestra ventana sea modifica esta mantenga el aspecto de la figura que dibuja. Los dos parámetros que tiene son los que le pasa glutReshapeFunc().

void redimensionar(GLint ancho, GLint alto){
glViewport(0, 0, ancho, alto);
glMatrixMode(GL_PROJECTION);
glLoadIdentity();
gluPerspective(45.0f, (GLfloat)ancho/(GLfloat)alto, 0.1f, 100.0f);
glMatrixMode(GL_MODELVIEW);
}

Ahora hay que establecer el tamaño y la posición de la venta donde esta se proyectara con glViewPort, Luego hay que cargar las matrices de proyección para calcular la posición del objeto en el espacio, restablecemos la matriz identidad y establecemos la vista que deseamos, en este caso en perspectiva.

gluPerspective(45.0f, (GLfloat)ancho/(GLfloat)alto, 0.1f, 100.0f);

El primer parámetro estable el angulo de apertura como si fuera una camara, el segundo estable la relación de aspecto entre el ancho/alto, veran que hacemos un "cast" con (GLfloat) para calcular el aspecto en caso de que este no se un valor entero, los dos últimos dos parámetros establencen la cercanía y la distancia del eje Z que podemos visualizar, todo aquello que queda fuera de este rango no sera dibujado.

Al final llamamos al modelo vista que se en carga de dibujar en dos dimensiones la imagen calculada en la proyección.

La ultima vez que regresamos al main es para llamar a glutMainLoop() que lo unico que hacer es mantener un ciclo para la funciones hasta que salgamos.

glutMainLoop();
return 0;

}

Si acaso queremos dibujar ortograficamente bastaría con cambiar

gluPerspective(45.0f, (GLfloat)ancho/(GLfloat)alto, 0.1f, 100.0f);

por:

glOrtho((GLfloat)-ancho, (GLfloat)ancho, (GLfloat)-alto, (GLfloat)alto, -10.0, 10.0);

Los valores serian estos:

glOrtho(izquierda, derecha, arriba, abajo, cerca, lejos);

Ahora bien al hacer esto es posible que veamos a nuestro objeto muy pequeño, el caso es que glOrtho tomo los valores 1.0 como si estos fueran iguales a un pixel, aunque no siempre es el caso. Es por ello que hay que dibujar nuestra tetera mas grande o en todo caso disminuir los valores de glOrtho.

Para compilar en linux con gcc desde consola escribir:

g++ leccion_01.cpp -lglut -lGL -lGLU -o leccion_01

Donde:

g++: Es el compilador a usar para archivos archivos.cpp y gcc para archivos.c

leccion_01.cpp: Es el archivo a compilar.

-lGL -lGLU -lglut: Son las librerias a utilizar para poder compilar.

-o leccion_01: Es el nombre del archivo ejecutable.

Descargar el Código Fuente: Leccion_01

OpenGL Lección 00 - Instalación e Introducción

2011-12-01T18:54:00.001-08:00

¿Que es OPenGL?

OPenGL es una librería que permite dibuja objetos en 3D y 2D en tiempo real y que puede ser representado visualmente de manera Ortográficas o en Perspectiva.

Como dije OpenGl solo dibuja gráficos, asi que es incapaz de crear ventanas, cargar imágenes, gestionar eventos de ratón o teclado, tampoco puede manejar sonidos, para ello es necesario programar o apoyarse de otras librerías como SDL.

Tipos de datos en OpenGL

OpenGL posee su propia definición de datos que permite que se portable hacia diferentes sistemas, por lo que es preferentemente y muy común utilizar este tipos de datos en lugar de los que conocemos en lenguaje C.

Sistema de Coordenadas

El sistemas de coodenadas 3D en OPenGL es el ya conocido Cartesiano, donde el punto (0.0.0), esta ubicado en el centro de la pantalla. El eje X corre de Izquierda(negativo) a derecha(positivos). El eje y va de abajo(negativo) hacia arriba(positivos). Por ultimo el eje Z se adentra hacia la pantalla conviertiendose en números negativos.

Vista Ortográfica y en Perspectiva

La vista ortográfica sencillamente es aquella en la que los rayos corren paralelas entre si. En otras palabras si se dibuja un objeto no importa la distancia siempre tendrá en mismo tamaño.

La vista modo de perpectiva, es la forma en que nosotros percibimos nuestro mundo, los rayos convergen en un mismo punto llamado "punto de fuga", esta tiene un angulo o campo determinado de visión. Entonces dependiendo la distancia a que nos encontremos del objeto cambiara de tamaño y nosotros percibimos una sensación espacio y volumen, pero el monitor sigue siendo en dos dimensiones (por el momento) entonces dibujamos en un "plano proyección" la imagen compuesta como si tuviera profundidad.

Librerías de OPenGL: GL, GLU y glut

Las librerías de OpenGL estas conformadas por:

gl: Es la librería principal de OpenGL

glu: Es una extensión de OpenGL que contiene mas funciones comúnmente utilizadas

glut: Esta libreria no forma tanto parte de OpenGL si no que mas bien se encarga de crear y gestionar ventanas ademas de manejar evento en OpenGL, etc.

Instalación de OPenGL en Linux

Primero es necesario tener un compilador instalado, en este caso usare gcc, para instarlo escribe en consola como superusuario:

apt-get install build-essential

Y ahora las librerías de OpenGL, posiblemente este mejor dicho instalación de GLUT en linux, ya que al instalar estar esta se instalan las demas. Basta con teclear en una terminal y como supersuario.

apt-get install freeglut3-dev

Esta se encarga de instalar las librerías faltantes de OpenGL, pero si quieres buscarlas aparte una por una entoces estas son las librerías que usa: freeglut3, freeglut3-dev, libgl1-mesa-dev, libglu1-mesa-dev, libxext-dev, libxt-dev. Me parece son todas.

Instalación de OPenGL en Window

Utilizare Visual C++ 2010 Express como IDE para trabajar con OpenGL y glut.

Una vez mas Windows dispone de su propia implentacion de la librerías de OpenGL, siendo estas opengl32.dll y glu32.dll y que se encuentran ubicadas en C:\Windows\System32, asi que solo vamos a instalar las libreria GLUT. Para ello la pueden descargar de este enlace que le voy a dejar o desde su pagina de OpenGL.

Descargar: glut-3.7.6-bin

Pagina Oficial: http://www.opengl.org/

Una vez descargado lo descomprimiré en mi carpeta de documentos, igual puede guardarla donde quieras. La carpeta glut-3.7.6-bin contendra 5 archivos. El archivo llamado glut32.dll tienes que copiarlo y pegarlo dentro de C:\Windows\System32, ahora pasemos a incluirlo en nuestro proyecto.

Comenzaremos creando un proyecto nuevo vació y lo nombraremos como queramos. Nada fuera de lo normal. (Click para ampliar las imagenes).

Una vez creado seleccionamos en el menú Proyecto->Propiedades y aparecera algo así:

Seleccionamos VC++ Directorios y luego picamos en Include Directories o "Archivos de Inclusion", aparece una pequeña flecha en la izquierda picamos en ella y se desplegara un pequeño menu con la opción <Edit>, picamos en ella y aparece un nueva ventana.

Ahora clickeamos en la icono de la carpeta para agregar un archivo de inclusión y abajo aparece un pequeño boton con tres punto suspensivos lo seleccionamos y en la nueva ventana que aparece seleccionamos la carpeta donde tenemos nuestra carpeta glut-3.7.6-bin.

Ahora hay que agregar la libreria de glut, seleccionamos "Library Directories" y el procedimiento es el mismo que el anterior.

Solo nos falta linkear las librerías para poder compilarlo, en la misma venta de propiedades seleccionamos del menú izquierdo la opción de "Linker" y luego en la lista que aparecerá a la derecha clickeamos en "Additional Dependecies".

En la nueva venta que aparecerá hay que agregar las librerías de OpenGL y GLUT escribiendo:

opengl32.lib
glu32.lib
glut32.lib

Para finalizar solo hay darle aceptar a todo así terminamos de agregar y linkear las librerías necesaria para comenzar a programar con OpenGL y C\C++.

Ahora solo queda crear un nuevo archivo y solo bastaría con incluir la biblioteca "glut.h", en el siguiente post explicare un primer ejemplo de OpenGL.

Magic Ball

2011-11-30T00:28:00.001-08:00

Seguramente conocen las clásicas "Magic ball" a las que les formulas una pregunta y esta te da una respuesta, bueno les dejo una programe como applet disfrútenla, también la pueden descargar abajo dejo los enlaces.

Problems

Esta versión es para poder ejecutarse directamente en el navegador como una applet. A diferencia de la versión descargable, aun falta cosas por hacer.

Poner la pantalla de presentación.
Falta agregar el sonido.
La transparencias al aparecer.
Mantenerse la Magic Ball dentro de pantalla.

Descarga: Magic Ball 0.1 - Windows

Descarga: Magic Ball 0.1 - Linux

Desarollo de Personaje de un Videojuego.

2011-11-01T00:22:00.000-07:00

Hace unas semanas asistí una convención de videojuegos en la cual se expusieron varios temas relacionados al mundo de los videojuegos, entre ellos se presento como desarrollar personajes e historias, me pareció sencillas e intersantes, el nombre del expositor lo he olvidado, es una lastima. Por el momento describiré una forma de como desarrollar personajes.

Desarrollo de Personajes

No hace mucho un cuate japones se invento un método para desarrollar personajes fácil y rápidamente para videojuegos el cual consiste en tres pasos básico.

1- Matrices de Personajes.

Si ustedes estudian ingeniería posiblemente sepan que es una matriz, para los que no tengan ni idea simplemente es una cuadricula. Este método es muy utilizado para los RPG, véase Pokemon. De un lado de la cuadricula renglones simplemente apuntamos atributos, razas, lineamentos o cualquier que se les ocurra, igual del lado la columnas empezamos a anotar cosas pertenecientes a un genero. Entonces una vez terminado hay que empezar a realizar posible combinaciones que puedan resultar buenas.

Como ven en la parte de arriba ya he empezado a realizar mi propia matriz de personajes y marcado los que me parecen pueden funcionar, se puede empezar a desvariar y conseguir muy raras combinaciones, no todas funcionan. Por ejemplo Hombre + Bombón = Hombre de Malvavisco de los Cazafantasma. Pero... Vampiro + Bombón... mmm, yo que se. Incluso se puede combinar con mas matrices para agregar mas cosas a nuestro personaje.

2- Apariencia del Persona

Después de haber hecho una posible combinacion ahora es el momento de definir el cuerpo. Este cuate japones también se dio cuenta que el cuerpo se puede dividir en cinco partes principales: Cabeza, brazo izquierdo, brazo derecho, torso y piernas. Siendo la cabeza mas importante por el rostro al que también se le pueden añadir rasgos. Aquí voy a empezar a exagerar y desvariar un poco con mi personaje solo como ejemplo.

3- Virtudes y Desventajas

Bueno llegamos a la parte que hace que nuestro héroe o villano se entrañable. Como personaje tiene un motivo que lo mueve a hacer lo que hace, pondré un ejemplo sencillo y claro. Superman lucha por la justicia, pff que nono. Además de que es super fuerte... pff que chafa, nadie le gana. Si no fuera por la Criptonita o Luisa Lane Superman seria un personaje muy plano y nos aburría (A mi me aburre de todas maneras). Para ello nuestro personaje debe poseer virtudes y desvirtudes, Atributos y Debilidades. Para ello creamos un simple dibujo donde ponemos por cada ventaja y de lado contrario una desventaja. Si tienes poderes de fuego entonces es débil contra el agua. O por ejemplo si tiene virtudes como que es buen padre, pero su desvirtud es que traiciona a su esposa, etc.

Como vemos este método es muy sencillo pero te puede ayudar bastante, tampoco tiene que ser así siempre esto solo es una idea de como puedes desarrollar un personaje. Claro tu puedes pulirlo mas a fondo.

Muerte Escalofriante - Demo 0.1

2011-10-15T11:42:00.000-07:00

Muerte Escalofriante es una demo que programe para participar el evento de "Temporada de patos 8". Soy nostálgico del snes así que conserva ese estilo. Abajo dejo un link para descargar el compilado.

Recién me acabo de enterar gane en "Mejor Presentación" en el concurso de desarrollo de videojuegos en "Temporada de Patos 8". :O Me siento tan honrado ToT.

Les dejo un vídeo con el demo del juego, tuve problemas con el audio así que no pude grabarlo, pero el archivo del juego contiene la música y sonido.

Por el momento solo tengo compilado en Linux, mas adelante lo pondré también compilado para Windows. También me he dado cuenta de dos Bugs en el juego pero por cuestiones de tiempo de entrega del proyecto no alcance a corregirlos y así los deje :p.

Los controles son:

Flecha Izquierda: Moverse a la izquierda.
Flecha Derecha: Moverse a la Derecha.
Z: Disparo.
X: Brinco.
Enter: Continuar.

Descarga el Demo:

Linux: Muerte Escalofriante 0.1

También dejo el código fuente. Es el primer juego que hago así que el código no es muy bueno, pero tal vez les sirva para aprender.

Código Fuente: Muerte Escalofriante 0.1

Midis en Linux y Windows

2011-10-11T01:16:00.000-07:00

Los midis (.mid) son aquellos pequeños archivos de música que permiten ser escuchados mediante un sintetizador en la computadora, mucho lo usan para aprenderse la música de sus videojuegos o grupos favoritos y aquí les presento dos programas gratuitos una para Windows y el otro para Linux.

VanBasco's Karaoke Player

Ya algo viejo pero uno de mis favorito es vanBasco, aunque solo esta para windows xp, no se si funcione en Windows 7. Posee una gran interfaz muy intuitiva, puede mostrar karaoke si el midi lo incluye, ademas de mostrar varios canales de reproducción y un teclado.

Pagina Oficial http://www.vanbasco.com/

Timidity

En linux se encuentra timidity que permite reproducir sonido midi. Aunque a decir verdad le falta reproducir algunos instrumentos, para ello es necesario instalar un fuentes de sonido extras algo pesadas de descargar, pero después de eso funciona a las mil maravillas.

Para instalar timidy y fuentes de sonido extras teclea en consola como superusuario:

apt-get install timidity fluid-soundfont-gm fluid-soundfont-gs

Una vez instalado tenemos que configurar algo muy simple para poder verlos, hay que seleccionar cualquier archivo midi que tenga y con el botón derecho dale click, selecciona "propiedades", una vez abierta las propiedades busca la pestaña "abrir con", presiona añadir, en la nueva ventana que se abrirá escribe en "añadir un comando personalizado":

timidity -iat

Y presionas añadir, listo cada vez que les des click a algún archivo tipo .mid se abrirá la interfaz de timidity junto con la visualización de teclado.

Lo único que falta es editar el archivo que esta en /etc/timity/timidity.cfg y quitar las almohadillas forma que quede así:

# By default, try to use the instrument patches from freepats:
#source /etc/timidity/freepats.cfg

# alternatively, you can use the fluid-soundfont:
source /etc/timidity/fluidr3_gm.cfg
source /etc/timidity/fluidr3_gs.cfg

Algunas opciones de interfaces con el teclado:

P: Reproducir.
F: Adelantar 10 seg.
B: Atrasar 10 seg.
<: Disminuyes Tiempo
>: Aumentas Tiempo
+: Subir Volumen
-: Bajar Volumen
Barra Espaciadora: Pausa y reproduces

SDL Lección 06 - Música y Sonido

2011-10-03T03:51:00.000-07:00

Bienvenido a este sexto tutorial sobre SDL, en este breve post tratare sobre como reproducir audio en el videojuego, para ello re-tomare el ejemplo anterior a la que simplemente he agregado algunos archivos de sonido para reproducirlos. Este código lo he compilado en Linux y Windows y funciona perfectamente. La única diferencia en Windows seria cambiar las cabeceras "SDL/SDL.h" por "SDL.h" etc. (Esta es la primera revisión, asi que esta sujeta a correcciones de código, pero sobre todo gramática :p). Abajo dejo un enlace para descarar el ejemplo completo.

El código que agregare se encuentra dentro del archivo leccion_06.cpp y solo resaltare los cambios con rojo.

SDL es capaz de manejar su propio audio pero existe una libreria llama SDL_mixer.h que no facilita mas las cosas a la hora de agregar audio. Así que lo primero que hay que hacer es mandar a llamar esa libreria. Verán que el proceso es muy similar al de cargar imágenes. No olvides que ahora también tendras que enlazar la librería nueva (Si esta en linux o windows y compilas tendrás que indicarselo agregando -lSDL_mixer).

//Archivo leccion_06.cpp
#include "SDL/SDL.h"

#include "SDL/SDL_image.h"
#include "SDL/SDL_mixer.h"
#include "tiempo.h"
#include "colision.h"
#include "personaje.h"

Tiempo Tiempo;
Personaje Personaje;

SDL_Event evento;
SDL_Surface *pantalla = NULL;
SDL_Surface *imagen = NULL;

Luego al igual que las imágenes hay que crear una apuntador a la nueva variable que se encarga de manejar música y sonido. Una cosa importante es que la música es llamada por medio de Mix_Music y el sonido, por ejemplo un golpe o un disparo se llama mediante Mix_Chunk.

//Creamos nuestras variables apuntadas para la música y el sonido
Mix_Music *musica;
Mix_Chunk *choque_pared;

SDL_Rect caja1;
SDL_Rect caja2;

void choques(){

caja1.x = 240;
caja1.y = 90;
caja1.w = 30;
caja1.h = 30;

caja2.x = 90;
caja2.y = 180;
caja2.w = 60;
caja2.h = 60;

if(colision(Personaje.caja(), caja1)){
if(Personaje.direccion == PERS_DER){
Personaje.x_persPos -= PERS_AVANZA;
Personaje.tecla[SDLK_RIGHT] = 0;
}
else if(Personaje.direccion == PERS_IZQ){
Personaje.x_persPos += PERS_AVANZA;
Personaje.tecla[SDLK_LEFT] = 0;
}
else if(Personaje.direccion == PERS_ARR){
Personaje.y_persPos += PERS_AVANZA;
Personaje.tecla[SDLK_UP] = 0;
}
else if(Personaje.direccion == PERS_ABA){
Personaje.y_persPos -= PERS_AVANZA;
Personaje.tecla[SDLK_DOWN] = 0;
}
Mix_PlayChannel(-1, choque_pared, 0);
printf("El personaje colisiono\n");
}

Cuando ocurra una colison mandare a llamar el sonido a reproducir, la forma es mediante la función Mix_PlayChannel(), el primer valor indica el numero de canales a usar, con el valor -1 SDL se encarga de seleccionar los canales a reproducir, luego esta el nombre de la variable que queremos reproducir, y por ultimo el valor 0 que indica que el sonido se reproducida una sola vez, igual hacemos para la segunda caja. Tal vez se una buena idea incluir algunos mensajes con printf() para saber lo que esta ocurriendo y ver si se lleva a acabo la acción.

//Archivo leccion_06.cpp
int main(int arc, char* args[]){

SDL_Init(SDL_INIT_EVERYTHING);
pantalla = SDL_SetVideoMode(360, 240, 32, SDL_SWSURFACE | SDL_DOUBLEBUF);

//Iniciar los parametros del audio
Mix_OpenAudio(22050, MIX_DEFAULT_FORMAT, 2, 4096);

SDL_WM_SetCaption("Leccion 06 - Sonido",NULL);
imagen = IMG_Load ("mapa.png");
Personaje.clips();

En el main se tiene que mandar a llamar a la funcion Mix_OpenAudio para poder reproducir audio, es importante recordar antes haber activado SDL_INIT_AUDIO en toda caso ya lo hicimos con SDL_INIT_EVERYTHIG, los parámetros de Mix_OpenAudio(frecuencia, formato, canales, chunksize ), la frecuencia puede ser 11025, 22050, 44100, sobre el formato existen varios, pero si no quieren complicarse déjenlo en MIX_DEFAULT_FORMAT, el canal; si es valor 1 es sonido mono y 2 es sonido estereo, y el chunkside habitualmente lo dejan en 4096.

//Cargar archivos de audio para la Música y el Sonido
musica = Mix_LoadMUS("musica.mp3");
choque_pared = Mix_LoadWAV("choque.wav");

Igual que con las imágenes le indicamos a las variables que archivos hay que cargar, como dije antes Mix_LoadMUS se encargara de carga la música, y MixLoadWAV los archivos que se usaran como samples para los sonidos.

//Control de Eventos
while(1){

Tiempo.inicio_Ticks();

if(Mix_PlayingMusic() == 0 ){
if(Mix_PlayMusic(musica, -1) == -1){
return 1;
}
}

Para reproducir la música se utiliza Mix_PlayMusic() , lo primero que hacemos es comprobar si se esta reproduciendo música, en caso que no entonces Mix_PlayMusic() comenzara a reproducirla, los parámetros son el nombre de la variable en este caso música y el valor -1 indica que se reproducirá indefinidamente.

while(SDL_PollEvent(&evento)){
if(evento.type == SDL_QUIT){
return 0;
}
}

Personaje.eventos();
choques();
Personaje.animacion();
SDL_BlitSurface(imagen, NULL, pantalla, NULL);
Personaje.dibuja();

if(Tiempo.transc_Ticks() < MILISEGUNDOS){
SDL_Delay(MILISEGUNDOS - Tiempo.transc_Ticks());
}
SDL_Flip(pantalla);

} //Fin del control de Eventos

Personaje.limpiar();
SDL_FreeSurface(imagen);
SDL_FreeSurface(pantalla);

//Libera los archivos de audio
Mix_FreeMusic(musica);
Mix_FreeChunk(choque_pared);

//Cierra el audio
Mix_CloseAudio();

return 0;
}

Ya por ultimo hay que liberar los archivos de sonido y cerrar la librería de SDL_mixer.h

Anexo:

En linux si compilas usando el compilador gcc es necesario indicarle todos los archivos y librerías a utilizar, creando un makefile simplificaria las cosas, pero por el momento simplemente lo compilare desde consola.

Primero creare los módulos con:

g++ -c leccion_06.cpp personaje.cpp tiempo.cpp colision.cpp

Y luego enlazare los modulos con:

g++ -o leccion_06 -lSDL -lSDL_image -lSDL_mixer leccion_06.o personaje.o tiempo.o colision.o

Y para ejecutarlo solo basta darle doble click al ejecutable o escribir en consola:

./leccion_06

Descargar el código fuente: Leccion_06

SDL Lección 05 - Colisiones

2011-09-17T00:44:00.000-07:00

Bienvenido a este quinto tutorial sobre SDL, en este breve post tratare sobre las colisiones entre personajes y algunos objetos del videojuego, para ello re-tomare el ejemplo anterior a la que agregue una función que se encargara de las colisiones, pero esta vez solo trabaje con la clase personaje y parte del main. Este código lo he compilado en Linux y Windows y funciona perfectamente. La única diferencia en Windows seria cambiar las cabeceras "SDL/SDL.h" por "SDL.h" etc. (Esta es la primera revisión, asi que esta sujeta a correcciones de código, pero sobre todo gramática :p). Abajo dejo un enlace para descarar el ejemplo completo.

Irónicamente el fantasma deberia atravesar paredes, pero como tengo flojera de dibuja otra cosa simplemente lo utilizare para mostrar como se lleva a cabo una colisión.

Comenzare por definir el archivo de cabecera para la función colisión.

//Archivo de Cabecera colision.h
#ifndef _COLISION_H_
#define _COLISION_H_
#include "SDL/SDL.h"

bool colision(SDL_Rect, SDL_Rect);

#endif

Como ven la función bool colision(SDL_Rect, SDL_Rect); simplemente se encarga de recibir dos parámetros, para verificar colisones entre dos "cajas", han de recordar que SDL_Rect es una estructura que maneja puede manejar cuatro miembros: posición en x, posición en y, ancho y alto.

Ahora pasemos al método de la función colisión.

//Archivo colision.cpp
#include "colision.h"

bool colision(SDL_Rect a, SDL_Rect b){

//Rectangulo a

int izq_a = a.x;

int der_a = a.x + a.w;

int arr_a = a.y;

int aba_a = a.y + a.h;

//Rectangulo b

int izq_b = b.x;

int der_b = b.x + b.w;

int arr_b = b.y;

int aba_b = b.y + b.h;

if(aba_a <= arr_b || arr_a >= aba_b || der_a <= izq_b || izq_a >= der_b){

return false;

}

else{

return true;

}

Como pueden ver declaramos cuatro variables para cada una de los parámetros pasados. Por ejemplo: el lado izquierdo de la primera caja es igual a su misma posición en x, entonces para obtener el ancho de la caja hay que tomar su posición en x y simplemente sumarle el ancho que tiene.

Después de haberle asignado lo valores hay que comprobar si cada lado de las dos cajas no chocan, por ejemplo si el lado derecho de la caja "a" es menor al lado izquierdo de "b" significa que no existe colisión, entones devuelve un falso, de los contrario devolverá un valor verdadero.

Ahora es necesario definir las cajas del personaje y de los obstáculos utilizando los archivos que ya tengo de los ejemplos anteriores. También he agregado mas teclas de movimiento para que el personaje se pueda desplazar hacia arriba y hacia abajo, no lo explico pero no tiene mayor complicación que moverse de izquierda a derecha como mostre anteriormente. Ademas de también re-utilize los mismo clips de izquierda y derecha para no tener que dibujar los clip de van hacia arriba y hacia abajo.

Dentro del la definición personaje simplemente he hecho tres cosas: agregar una estructura SDL_Rect pers_caja, que sera la encargada de contener la caja, una función SDL_Rect caja() se encarga de devolver el valor SDL_Rect y por ultimo simplemente moví a la clase publica Uint8 *tecla, que estaba ubicado en la función eventos();

//personaje.h

class Personaje{

private:

SDL_Surface *personaje;

SDL_Rect persIzqClip[4];

SDL_Rect persDerClip[4];

SDL_Rect pers_caja;

int frame;

bool animar;

public:

Personaje();

int x_persPos, y_persPos;

int direccion;

Uint8 *tecla;

SDL_Rect caja();

void clips();

void eventos();

A continuación muestro la nueva funcion caja(), como pueden ver para ubicar la caja de colisión es necesario toma el valor de la posicion de personaje "x_persPos" y se la asignarla a la caja pers_caja.x y haci continuamos con los cuatro parámetros. Si quieres crear una caja mas pequeña o ubicarla en alguna parte distinta bastaría con solo sumar o restar con respecto a su posición o anchura del personaje.

//personaje.cpp

SDL_Rect Personaje::caja(){

pers_caja.x = x_persPos;

pers_caja.y = y_persPos;

pers_caja.w = PERS_ANCHO;

pers_caja.h = PERS_ALTO;

return pers_caja;

}

Para las colisiones que definí es necesario tener al menos tener dos cajas para compáralas, una tiene que ser del personaje y otra puede ser un enemigo, en este caso pondre dos obstáculos con los cuales chocara. Los definiré dentro del archivo leccion_05.cpp para evitar que tener hacer otro archivo, pero tal vez lo mas conveniente sea separarlo.

Agrego el nuevo archivo de cabecera para las colisione y mas abajo declaro dos variables del tipo SDL_Rect los cuales serán los obstáculos y de acuerdo a su ubicación en el dibujo que tengo hecho y les asigno los valores para sus dimensiones. La función choques() contendra el llamado a las cajas a comparar para la colisiones.

//leccion_05.cpp archivo del main

#include "tiempo.h"

#include "colision.h"

#include "personaje.h"

SDL_Rect caja1;

SDL_Rect caja2;

void choques(){

caja1.x = 240;

caja1.y = 90;

caja1.w = 30;

caja1.h = 30;

caja2.x = 90;

caja2.y = 180;

caja2.w = 60;

caja2.h = 60;

if(colision(Personaje.caja(), caja1)){

if(Personaje.direccion == PERS_DER){

Personaje.x_persPos -= PERS_AVANZA;

Personaje.tecla[SDLK_RIGHT] = 0;

}

if(Personaje.direccion == PERS_IZQ){

Personaje.x_persPos += PERS_AVANZA;

Personaje.tecla[SDLK_LEFT] = 0;

}

En el código de arriba pueden observar que llamo a la nueva función colisión() y llamo a una de las dos cajas y que quiero que compare, en este caso Personaje.caja() y caja1. (Recordar que Personaje.caja() retorna un valor de tipo SDL_Rect). Después de ello hay que indicarle que es lo que queremos que haga cuando ocurra la colisión, en este caso contrarresta el avanze, desincrementado el valor o incrementado el valor de la posición según sea el caso, ya por ultimo hago que el valor de presionar la tecla sea falso, todo esto depende de lo que queramos hacer dentro de nuestra condicion de colisión.

Por ultimo agrego la función choques() dentro del bucle del juego.

.
Personaje.eventos();

//Llamamos a las colisiones dentro del bucle
choques();
SDL_BlitSurface(imagen, NULL, pantalla, NULL);
Personaje.dibuja();

Básicamente esta es una manera de como se pueden llevar a cabo las colisiones entre un personaje y algún objeto como una pared o enemigo etc.

Anexo:

En linux si compilas usando el compilador gcc es necesario indicarle todos los archivos y librerías a utilizar, creando un makefile simplificaría las cosas pero por el momento simplemente lo compilare desde consola.

Primero creare los modulos con:

g++ -c leccion_05.cpp personaje.cpp tiempo.cpp colision.cpp

Y luego enlazare los modulos con:

g++ -o leccion_05 -lSDL -lSDL_image leccion_05.o personaje.o tiempo.o colision.o

Y para ejecutarlo solo basta darle doble click al ejecutable o escribir en consola:

./leccion_05

Descargar el codigo fuente: Leccion_05

SDL Lección 04 - Animación

2011-09-06T10:54:00.000-07:00

Bienvenido a este cuarto tutorial sobre SDL, en este breve post sobre la animación de los personajes del videojuego, la animación sera sencilla solo para mostrar, ustedes pueden agregar tantos sprites como quieran para hacer el efecto de movimiento. Para ello re-tomare el ejemplo anterior a la que agregue la clase Tiempo, pero esta vez solo trabaje con la clase personaje. Este código lo he compilado en Linux y Windows y funciona perfectamente. La única diferencia en Windows seria cambiar las cabeceras "SDL/SDL.h" por "SDL.h" etc. (Esta es la primera revisión, asi que esta sujeta a correcciones de código, pero sobre todo gramática :p). Abajo dejo un enlace para descarar el ejemplo completo.

A continuación solo remarcare los cambios realizados dentro de la clase personaje. Los otros archivos completos para su compilación estan dentro el archivo descargable puesto abajo. Marco con rojo los cambios o agregados

//Archivo de Cabecera, Definicion de la clase Personaje.h

#ifndef _PERSONAJE_H_

#define _PERSONAJE_H_

#include "SDL/SDL.h"

#include "SDL/SDL_image.h"

extern SDL_Surface *pantalla; //Definida arriba del Main

const int PERS_ANCHO = 60;

const int PERS_ALTO = 60;

const int PERS_IZQ = 1;

const int PERS_DER = 2;

const int PERS_AVANZA = 6;

class Personaje{

private:

SDL_Surface *personaje;

SDL_Rect persIzqClip[4];

SDL_Rect persDerClip[4];

int direccion;

int frame;

bool animar;

public:

Personaje();

int x_persPos, y_persPos;

void clips();

void eventos();

void animacion();

void dibuja();

void limpiar();

};

#endif

Bien dentro de los miembros privados de la clase personaje e agregado arreglos de 4 dentro de persIzqClip[4] y persDerClip[4], estos arrays se encargaran de contener el numero total de imágenes a mostrar y que recortaremos de nuestro SheetSprites. Frames servirá como un contador para ir incrementando y remplazando las imágenes, el valor boleano animar se encarga de valorar si la animacion se realiza o no. Por ultimo en la clase publica tenemos una función llamada animacion() que se encargara de incrementar o detener los frames para la animación.

//Definicion de los metodos de la clase personaje.cpp

#include "personaje.h"

Personaje::Personaje(){

x_persPos = 0;

y_persPos = 100;

frame = 0;

animar = false;

direccion = PERS_DER;

personaje = IMG_Load ("fantasma.png");

}

Dentro del constructor solo defino los valores nuevos.

//De los arreglos que declaramos empezamos a asignarle una zona para recortar de nuestra imagen fantasma.png

void Personaje::clips(){

persIzqClip[0].x = 0;

persIzqClip[0].y = 0;

persIzqClip[0].w = PERS_ANCHO;

persIzqClip[0].h = PERS_ALTO;

persIzqClip[1].x = 60;

persIzqClip[1].y = 0;

persIzqClip[1].w = PERS_ANCHO;

persIzqClip[1].h = PERS_ALTO;

. etc...

persDerClip[0].x = 0;

persDerClip[0].y = 60;

persDerClip[0].w = PERS_ANCHO;

persDerClip[0].h = PERS_ALTO;

. etc...

}

La función Personaje::clips() se encarga de recortar por coordenadas un cuadro de la imagen para ser pegadas, cada cuadro del arreglo tiene que ser indicado. Como ven cada indice del arreglo tiene que asignarsele cuatro valores que representa los cuatro vértices del cuadro a recortar. (Tal vez seria mejor crear una función que facilite su manejo, por el momento lo dejare así).

void Personaje::eventos(){

Uint8 *tecla;

tecla = SDL_GetKeyState(NULL);

if(tecla[SDLK_RIGHT] == 0){

animar = false;

}

if(tecla[SDLK_LEFT] == 0){

animar = false;

}

if(tecla[SDLK_RIGHT] == 1 and x_persPos < 360 - PERS_ANCHO){

x_persPos += PERS_AVANZA;

direccion = PERS_DER;

animar = true;

}

if(tecla[SDLK_LEFT] == 1 and x_persPos > 0){

x_persPos += -(PERS_AVANZA);

direccion = PERS_IZQ;

animar = true;

}

Dentro de Personaje::eventos() como pueden ver he agregue una condición extra para cada tecla, simplemente si SDLK_RIGHT == 0 quiere decir que la tecla no esta presionada en cambio el valor 1 significa que esta presionada, dentro de ellas he agredo una simple validación de animación, es fácil de entender que cuando la tecla esta sin presionar la animación sea falsa y no se llevara a cabo y viceversa.

void Personaje::animacion(){

if (animar == true){

frame++;

if(frame >= 4){

frame = 0;

}

if (animar == false){

frame =0;

}

Personaje::animacion(), esta función nueva se encarga de que si la animación es verdadera el contador de los frames se ira incrementando para remplazar el numero de la imagen y si esta supera el numero máximo de frames se vuelva a comenzar desde el primer cuadro.

Por el contrario si la animación es falsa o mas bien se no hay un boton presionado entonces esta volvera al primer cuadro.

void Personaje::dibuja(){

SDL_Rect posicion;

posicion.x = x_persPos;

posicion.y = y_persPos;

if (direccion == PERS_DER){

SDL_BlitSurface(personaje, &persDerClip[frame], pantalla, &posicion);

}

if (direccion == PERS_IZQ){

SDL_BlitSurface(personaje, &persIzqClip[frame], pantalla, &posicion);

}

Personaje::dibuja() Aquí el cambio es sencillo, simpleme le indicamos el cuadro del array correspondiente a dibujar cuando se incrementa el frame.

Ya por ultimo quedaría agregar la función animacion dentro del bucle del juego que esta dentro del main en el archivo leccion_04.cpp
.
.
.
SDL_Flip(pantalla);
Personaje.animacion();
} //Fin del control de Eventos

Personaje.limpiar();
SDL_FreeSurface(imagen);
.
.
.

Anexo:

Primero creare los módulos con:

g++ -c leccion_04.cpp personaje.cpp tiempo.cpp

Y luego enlazare los modulos con:

g++ -o leccion_04 -lSDL -lSDL_image leccion_04.o personaje.o tiempo.o

Y para ejecutarlo solo basta darle doble click al ejecutable o escribir en consola:

./leccion_04

Descagar el codigo fuente: Leccion_04

Berenice

2011-08-26T04:45:00.000-07:00

Se que este vídeo nada tiene que ver con los videojuegos, pero hace rato que lo hice con Synfig Studio y quiero mostrarselos.

SDL Lección 03 - Tiempo

2011-08-26T03:59:00.000-07:00

Bienvenido a este tercer tutorial sobre SDL, en este breve post sobre el manejo de tiempo y velocidad del videojuego, para ello tomare el ejemplo anterior y solo le agregare la clase Tiempo. Este código lo he compilado en Linux y Windows y funciona perfectamente. La unica diferencia en Windows seria cambiar las cabeceras "SDL/SDL.h" por "SDL.h" etc. (Esta es la primera revisión, asi que esta sujeta a correciones, sobre todo gramática :p). Abajo dejo un enlace para descarar el ejemplo completo.

Muy bien, como deben saber cada computadora cuenta con distintos recursos, así que los mas probable es que se ejecute a distintas velocidad y no queremos eso, para ello hay que gestionar el tiempo de tal manera que la velocidad se la misma en cualquier computadora. Afortunadamente SDL no provee un función que nos facilita tomar le tiempo.

//Definicion de la clase tiempo.h, se encarga que el manejo de tiempo se el mismo en cualquier ordenador.

#ifndef _TIEMPO_H_
#define _TIEMPO_H_
#include "SDL/SDL.h"

//Constante para el intervalo de timpo
const int MILISEGUNDOS = 30;

//Comenzamo a definir los atributos y metodos de la clase tiempo
class Tiempo{
private:
int inicioTicks;
int transcTicks;
public:
Tiempo();
void inicio_Ticks();
int transc_Ticks();
};
#endif

Como ven es muy sencilla, comenza por lo habitual definir la clase tiempo e incluir las librerias de SDL, ademas agrege un const int llamado MILISEGUNDOS que se encargara de establecer el tiempo que durara la imagen antes de sr cambiada, (recuerde que 1000 milisegundos = 1Seg). Dentro de los datos privados solo tenemos dos variables inicioTicks que se encarga de tomar el tiempo de inicio y transTicks que sera el tiempo transcurrido desde que se inicio, dentro de los datos publicos; estan el constructor y el las funciones que tomaran el tiempo.

//Incluimos la clase tiempo
#include "tiempo.h"

//Iniciamo el consttructor de nuestra clase tiempo
Tiempo::Tiempo(){
inicioTicks = 0;
transcTicks = 0;
}

El constructor de nuestra clase Tiempo() solo se encaraga de inicializar los valor en 0.

//Esta funciona se encarga de tomar el inicio del tiempo

void Tiempo::inicio_Ticks(){

inicioTicks = SDL_GetTicks();
}

Ahora la funcion inicio_Ticks(). Con la variable inicioTicks se manda a llamar a una función propia de SDL llama SDL_GetTicks() esta se encarga de tomar el tiempo desde en momento en que SDL inicia nuestro bucle de juego.

//Toma el tiempo de inicio lo resta con el tiempo trascurrido y regresa el valor
int Tiempo::transc_Ticks(){
transcTicks = SDL_GetTicks() - inicioTicks;
return transcTicks;
}

La función tranc_Ticks() tambien es muy sencilla toma nuevamente el tiempo con SDL_GetTicks y se le resta al tiempo del inicio para saber que tanto tiempo a transcurrido, entoces esta retorna un valor con que representa el tiempo pasado.

Ahora solo queda llamar a la clase tiempo dentro del main. Re-utilizare el archivo leccion_02.cpp de la leccion anterior y solo remarcare los cambios y la llamada a la función trans_Ticks().

//Archivo leccion_03.cpp, implementacion de la clase tiempo

#include "SDL/SDL.h"

#include "SDL/SDL_image.h"

#include "tiempo.h"

#include "personaje.h"

//Creamos un objeto de nuestra clase tiempo.

Tiempo Tiempo;

Personaje Personaje;

SDL_Event evento;

SDL_Surface *pantalla = NULL;

SDL_Surface *imagen = NULL;

int main(int arc, char* args[]){

bool quitar = false;

SDL_Init(SDL_INIT_EVERYTHING);

pantalla = SDL_SetVideoMode(360, 240, 32, SDL_SWSURFACE | SDL_DOUBLEBUF);

SDL_WM_SetCaption("Leccion 03",NULL);

imagen = IMG_Load ("mapa.png");

Personaje.clips();

//Control de Eventos

while(quitar == false){

//Iniciamo los tick del tiempo

Tiempo.inicio_Ticks();

Personaje.eventos();

while(SDL_PollEvent(&evento)){

if(evento.type == SDL_QUIT){

quitar = true;

}

SDL_BlitSurface(imagen, NULL, pantalla, NULL);

Personaje.dibuja();

//Evalua el tiempo transucurrido

if(Tiempo.transc_Ticks() < MILISEGUNDOS){
SDL_Delay(MILISEGUNDOS - Tiempo.transc_Ticks());
}

SDL_Flip(pantalla);
} //Fin del control de Eventos

//LIbera las superficies

Personaje.limpiar();

SDL_FreeSurface(imagen);

SDL_FreeSurface(pantalla);

return 0;

}

La parte de le llamada Tiempo.transc_Ticks() es muy sencilla, simplemente verifica que si el tiempo transcurrido es mayor a los milisegundos que establecimos esta hará una pausa con SDL_Delay().

SEGUNDA VERSIÓN

Aun podemos hacer las cosas mas simples si no queremos tomar el tiempo y en su vez solo pausar, entoces quitamos la clase tiempo y la sustituimos por solo SDL_delay() y le damos un valor en milisegudos que sera la pausa entre cada bucle.

//Archivo leccion_03.cpp, implementacion de la clase tiempo

#include "SDL/SDL.h"

#include "SDL/SDL_image.h"

#include "personaje.h"

//Creamos objeto de nuestra clase Personaje

Personaje Personaje;

SDL_Event evento;

SDL_Surface *pantalla = NULL;

SDL_Surface *imagen = NULL;

int main(int arc, char* args[]){

bool quitar = false;

SDL_Init(SDL_INIT_EVERYTHING);

pantalla = SDL_SetVideoMode(360, 240, 32, SDL_SWSURFACE | SDL_DOUBLEBUF);

SDL_WM_SetCaption("Leccion 03",NULL);

imagen = IMG_Load ("mapa.png");

Personaje.clips();

//Control de Eventos

while(quitar == false){

//Iniciamo los tick del tiempo

Personaje.eventos();

while(SDL_PollEvent(&evento)){

if(evento.type == SDL_QUIT){

quitar = true;

}

SDL_BlitSurface(imagen, NULL, pantalla, NULL);

Personaje.dibuja();

SDL_Delay(30); //Tiempo a pausar

SDL_Flip(pantalla);
} //Fin del control de Eventos

//LIbera las superficies

Personaje.limpiar();

SDL_FreeSurface(imagen);

SDL_FreeSurface(pantalla);

return 0;

}

Anexo:

Primero creare los módulos con:

g++ -c leccion_03.cpp personaje.cpp tiempo.cpp

Y luego enlazare los modulos con:

g++ -o leccion_03 -lSDL -lSDL_image leccion_03.o personaje.o tiempo.o

Y para ejecutarlo solo basta darle doble click al ejecutable o escribir en consola:

./leccion_03

Descargar el codigo fuente: Leccion_03 Primer versión

Programas Para Dibujar Sprites

2011-08-20T22:29:00.000-07:00

Existe una gran variedad de programas para dibujar Sprites, desde el sencillo Paint de Windows hasta el complejo Photoshop, pero aquí les presentare algunos que son gratuitos:

Gimp

¿Quien no conoce gimp? La version alternativa a Photoshop, con la cual se puede dibujar con gran calidad y posee muchas herramientas, funciona en Windows y Linux. Por supuesto al tener tantas opciones también puedes dibujar sprites con la herramienta lápiz, manejar colores indexados y crear gif.

Pagina Oficial: http://www.gimp.org/

MtPaint

MtPaint es mi programa favorito a la hora de dibujar sprites: sencillo y ligero, capas de abrir en solo dos segundo, obviamente maneja paletas con colores indexados y hasta puede manejar imagen en rgb, al igual que mucho trabaja con capas, al principio me he complicado con las gradientes pero ha terminado gustándome, aunque solo funciona en linux.

Pagina Oficial: http://mtpaint.sourceforge.net/

ASEPRITE

Otro programa gratuito y sencillo para Windows, Mac y Linux es el Allegro Sprite Editor. Como es común maneja paletas de colores, capas, piel de cebolla, etc. Lo necesario para crear y editar sprites y animarlos.

Pagina Oficial: http://www.aseprite.org/

SDL Lección 02 - Movimiento

2011-08-15T19:53:00.000-07:00

Bienvenido al segundo tutorial sobre SDL, en este breve post tratare de explicar como crea un personaje bastante sencillo y que se mueva por la pantalla al presionar las teclas de dirección. Este código lo he compilado en Linux y Windows y funciona perfectamente. La unica diferencia en Windows seria cambiar las cabeceras "SDL/SDL.h" por "SDL.h" etc. (Esta es la primera revisión, asi que esta sujeta a correcciones de código, pero sobre todo gramática :p). Abajo dejo un enlace para descargar el ejemplo completo.

Para ello me adentrare utilizare la programación orientada a objetos, al final obtendrás algo como esto (pfff, bueno los gráficos no son tan importantes en este momento):

(Esta es la primera revision, asi que esta sujeta a correciones, sobre todo gramatica :p).

Bueno, para comenzar creare tres archivos: el personaje.h, personaje.cpp y leccion_02.cpp.

//Archivo de Cabecera, Definicion de la clase Personaje.h
#ifndef _PERSONAJE_H_
#define _PERSONAJE_H_

//Librerias a utilizar
#include "SDL/SDL.h"
#include "SDL/SDL_image.h"

//Variable externa definida arriba del Main
extern SDL_Surface *pantalla;

//Dimensiones, direreciones y velocidad de nuetro personaje
const int PERS_ANCHO = 60;
const int PERS_ALTO = 60;
const int PERS_IZQ = 1;
const int PERS_DER = 2;
const int PERS_AVANZA = 6;

//Empezamo a definir metodos y atributos de la clase personaje
class Personaje{
private:
SDL_Surface *personaje;
SDL_Rect persIzqClip;
SDL_Rect persDerClip;
int direccion;

public:
Personaje();
int x_persPos, y_persPos;
void clips();
void eventos();
void dibuja();
void limpiar();
};
#endif

Comenzamos con lo habitual, definiendo el archivo de cabecera y después incluyendo las librerías que necesitamos SDL/SDL.h y SDL/SDL_image.

Después de ello no topamos con un extern, este simplemente indica el nombre de una variable que utilizaremos y que esta defina en otro archivo. A continuación definimos algunas constantes, lo que hacen son bastante obvias, indican tamaños del dibujo, luego algunos estados para las dirección y una para la Velocidad o desplazamiento.

Ahora empezamos a definir la clase Personaje: Dentro de private, la primer variable se encarga de apuntar a la imagen que vamos a cargar, persIzqClip y persDerClip recortaran un cuadro de un imagen que sirve como SheetSprite(Un SheetSprite es una imagen grande donde se tiene toda las posiciones posibles de un personaje). Ya por ultimo indicamos una variable "direccion", que se encargara de asignar las distintas direcciones o estado que se pueden tomar.

Dentro de la parte publica se encuentra el constructor, ademas de las variables x_persPos y y_persPos, estas funcionaran como coordenas de posición para el personaje. Después de ello siguen alguna funciones que definirán el comportamiento del personaje y que explicare en el siguiente archivo.

//Constructor de nuestro clase personaje, iniciamos la variables y
aginamos la imagen superficie
Personaje::Personaje(){
x_persPos = 0;
y_persPos = 100;
direccion = PERS_DER;
personaje = IMG_Load ("fantasma.png");
}

Para comenzar incluiremos el archivo de cabecera, y luego nos topamos con el constructor de clase Personaje, aqui simplemente iniacimos los valores, x_perPos e y_persPos con ellos le indicamos el lugar en forma de coordenanda donde queramos que aparesca, es importante recordar que el punto 0,0 se encuentra en la parte superior izquierda del monitor, después, direccion indica la dirección(duh!) inicial que querramos y por ultimo la variable personaje se encarage de cargar la imagen del Sprite con IMG_Load(). (yo estoy acostumbrado a trabajar con imagenes con color indexado ya que carga mas rápido, como sea, tal vez usted sera algo que tendrá que investigar).

//Establecemos el tamanio de los recortes para dibujarlos después
void Personaje::clips(){
persIzqClip.x = 0;
persIzqClip.y = 0;
persIzqClip.w = PERS_ANCHO;
persIzqClip.h = PERS_ALTO;
persDerClip.x = 60;
persDerClip.y = 0;
persDerClip.w = PERS_ANCHO;
persDerClip.h = PERS_ALTO;
}

La funcion clips(), es basten facil simplemete toma las coordenas donde se iniciara a corta la imagen y que tan ancha y alta sera y se la asigna a su respectivo cuadro.

//Manejea los eventos que ocurren cuando las teclas son presionadas
void Personaje::eventos(){
Uint8 *tecla;
tecla = SDL_GetKeyState(NULL);

if(tecla[SDLK_RIGHT] == 1 && x_persPos < 360 - PERS_ANCHO){
x_persPos += PERS_AVANZA;
direccion = PERS_DER;
}

else if(tecla[SDLK_LEFT] == 1 && x_persPos > 0){
x_persPos += -(PERS_AVANZA);
direccion = PERS_IZQ;
}
}

La funcion de eventos() es solo un poco mas complida, primero definimos un apuntador a una variable sin signo y después utilizamos SDL_GetKeyState() una función propia de SDL que permite verificar si una tecla a sido oprimida, si el valor es igual a 1 entonces esta presionada. Para ello pondré una simple condición que sucederá cuando presione la tecla de dirección derecha y si la posición sea menor al ancho de la pantalla (esto evita que el personaje se salga de la pantalla), entonces x_persPos se ira incrementando y el estado de dirección cambiara al indicado.

La lista de todas las teclas de SDL la puedes encontrar en este enlace.

//Dibujamos a nuestro personaje de esta forma: Imagen, recorte, superficie destino, coordenadas de posicion
void Personaje::dibuja(){
SDL_Rect posicion;
posicion.x = x_persPos;
posicion.y = y_persPos;

if (direccion == PERS_IZQ){
SDL_BlitSurface(personaje, &persIzqClip, pantalla, &posicion);
}

else if (direccion == PERS_DER){
SDL_BlitSurface(personaje, &persDerClip, pantalla, &posicion);
}
}

La funcion dibuja() simplemente se encarga de pegar le sprite correspondiente a la direccion, para ello primero defino un variable de tipo SDL_rect y a esa variable le asigno la posion en donde se encuentra mi personaje, x_perPos y y_perPos. Ahora dependiendo la dirección sera el clip que se pegara con SDL_BlitSurface() como anteriomente mencione necesita cuatro parametros, el primero es una superficie origen con la imagen, el segundo un cuadro con el clip a pegar de la imagen, el tercero una superficie destino, en este caso la pantalla y por utilmo la coordenada donde sera pegada.

//Liberamos la superficie que reservamos
void Personaje::limpiar(){
SDL_FreeSurface(personaje);
}

La funcion limpiar(), se encarga simplemente de libera la superficie cuando ya no es util.

Ya por ultimo usare la clase personaje creada dentro del archivo leccion_02.cpp, que es muy similara a la leccion anterior que explique, solo resaltare en rojo la llamas al objeto personaje.

//Archivo leccion_02.cpp
#include "SDL/SDL.h"
#include "SDL/SDL_image.h"
#include "personaje.h"

//Creamos una instancia de nuestra clase personaje
Personaje Personaje;
SDL_Event evento;
SDL_Surface *pantalla = NULL;
SDL_Surface *imagen = NULL;

int main(int arc, char* args[]){
bool quitar = false;
SDL_Init(SDL_INIT_EVERYTHING);
pantalla = SDL_SetVideoMode(360, 240, 32, SDL_SWSURFACE | SDL_DOUBLEBUF);
SDL_WM_SetCaption("Leccion 02",NULL);

//Cargamos imagenes y clips
imagen = IMG_Load ("mapa.png");
Personaje.clips();

//Inicia bucle del juego
while(quitar == false){
Personaje.eventos();
while(SDL_PollEvent(&evento)){
if(evento.type == SDL_QUIT){
quitar = true;
}
}
SDL_BlitSurface(imagen, NULL, pantalla, NULL);
Personaje.dibuja();
SDL_Flip(pantalla);
} //Fin del control de Eventos

//LIberamos superfices
Personaje.limpiar();
SDL_FreeSurface(imagen);
SDL_FreeSurface(pantalla);
return 0;
}

Bien ahora si compila y ejecuta el programa probablemente lo primero que notaras es que el personaje se mueve demasiado rapido, esto es debido a que aun no gestionamos el tiempo de ejecucion, en la proxima leccion nos encargaremos de ello.

Anexo:

En linux si compilas usando g++ es necesario indicarle todos los archivos y librerías a utilizar, creando un makefile simplificaría las cosas pero por el momento simplemente lo compilare desde consola.

Primero creare los modulos con:

g++ -c leccion_02.cpp personaje.cpp

Y luego enlazare los modulos con:

g++ -o leccion_02 -lSDL -lSDL_image leccion_02.o personaje.o

Y para ejecutarlo solo basta darle doble click al ejecutable o escribir en consola:

./leccion_02

Si te interse saber un poco mas acerca de gcc y su compilado te dejo un enlace.

Descarga el codigo fuente: Leccion_02

Mapas de Videojuegos

2011-08-11T16:40:00.000-07:00

A aquellos que les interese conseguir Sprites de los mapas de videojuegos les dejo un enlace a un pagina donde podrás encontra una gran cantidad de ellos: http://www.vgmaps.com/

SDL Lección 01 - Primeros Pasos

2011-08-05T20:57:00.000-07:00

En esta breve lección simplemente expondré como crear ventana para obtener una imagen con las librerías de SDL, ademas de implementar un simple manejador de eventos. Este código lo he compilado en Linux y Windows y funciona perfectamente. Pero por comodidad trabajare en un entorno Linux. La única diferencia en Windows seria cambiar las cabeceras "SDL/SDL.h" por "SDL.h" etc.

(Esta es la primera revisión, asi que esta sujeta a correciones, sobre todo gramática :p).

//Incluimos las librerias

#include "SDL/SDL.h"
#include "SDL/SDL_image.h"

//Comienza nuestro programa
int main(int arc, char* args[]){
bool quitar = false;

//Creamos la variable de eventos
SDL_Event evento;

//Reservamos las superfices
SDL_Surface *pantalla = NULL;
SDL_Surface *imagen = NULL;

//Iniciamos los servicios de sdl
SDL_Init(SDL_INIT_EVERYTHING);

//Establecemos los atributos y se los asignamos a la superfice pantalla
pantalla = SDL_SetVideoMode(320, 240, 32, SDL_SWSURFACE | SDL_DOUBLEBUF);
SDL_WM_SetCaption("Leccion 01",NULL);

//Cargamos la imagen
imagen = IMG_Load ("imagen.png");

//Bucle principal del juego
while(quitar == false){

//Iniciamos los eventos
while(SDL_PollEvent(&evento)){

//Evento para quitar
if(evento.type == SDL_QUIT){
quitar = true;
}
}

//Dibujamos la superfice
SDL_BlitSurface(imagen, NULL, pantalla, NULL);

//Volcamos el doble buffer
SDL_Flip(pantalla);
}

//Liberamos las superficies
SDL_FreeSurface(imagen);
SDL_FreeSurface(pantalla);
return 0;
}

Lo primero es indicar la librerias que vamos a utilizar, en este caso la libreria principal de SDL y debido a que SDL originalmente solo maneja imagen tipo BMP agregamos la libreria SDL_image que permite manejar formato PNG.

Agregare un manejador de eventos, el cual se encarga de los eventos (duh!).

Ademas de dos superficies, la primera sera el destino donde se dibujan todas las imagenes, la segunda sera una imagen origen la cual sera pegada sobre la pantalla.

Iniciamos los servicios que vayamos a utilizar, en este caso indico todos, establecemos el modo de video de la pantalla, en este caso 320 es el ancho de la pantalla, 240 es el alto de la pantalla, a continuación se indica la profundidad de los colores puede ser 8, 16, 32. Luego indicamos algunos parametros extras SDL_SWSURFACE se encarga de almacenar las superficies en la memoria principal y SDL_DOUBLEBUF se encarga de utilizar un doble buffer que dibuja por detrás una imagen que sera intercambiada por la primera para evitar un parpadeo causado por no alcanzar a dibujar la imagen.

Con IMG_Load simplemete le indicamos a imagen el archivo que cargaremos para superficie imagen, como supondrán "imagen.png" es una foto que ya tengo preparada.

Ahora agregare un loop que junto con el manejador de eventos, en este caso este se ejecura hasta que el suceda el evento de cerrar la venta.

SDL_BlitSurface se encarga de dibujar en pantalla, el cual por el momento solo necesita una superficie origen (imagen) y una superficie destino (pantalla) donde esta sera pegada. En cuando a los parámetros NULL luegos nos ocuparemos de ellos.

Luego con SDL_FLIP nos encargamos de volcar el buffer doble.

Ya por ultimo hay que liberar las superficies utilizadas.

Anexo:
Debido a que trabajo en entorno Linux dejo una pequena referencia en cuanto a la compilación. (en cuanto a Windows igualmente se tienen que enlazar las librerias)

Para compilar el archivo.cpp, desde la linea de comandos se utiliza:

g++ leccion_01.cpp -lSDL -lSDL_image -o leccion_01

Donde:

g++: Es el compilador a usar para archivos archivos.cpp y gcc para archivos.c

leccion_01.cpp: Es el archivo a compilar.

-lSDL -lSDL_image: Son las librerias a utilizar para poder compilar.

-o leccion_01: Es el nombre del archivo ejecutable.

Una vez compilado basta darle doble click al ejecutable, o escribir en consola ./leccion_01

En estos momentos cuando corran el programa, puede que noten que ocupa muchos recursos, esto es debido a que aun no establecemos un ciertos limites respecto al taza de refresco , después nos encargaremos de ello.

Descarga el codigo fuente: Leccion_01

SDL Lección 00 - Preparándose

2011-08-05T18:36:00.000-07:00

¿Que se Necesita?

Si buscar crear un juego rápidamente y sin tener conocimientos de programación entonces tal vez estas perdiendo tu tiempo aquí.

Para empezar a programar usando SDL primero necesitas tener alguna herramientas básicas, como:

Un editor de texto.
Un compilador.
Las librerias de desarrollo de SDL.

Instalación en Linux

En mi caso trabajare con el editor de texto gedit, aunque puede ser cualquiera y compilare desde la consola con g++ (Como los rudos).

Para el instalar el compilador:

apt-get install build-essential

Para el instalarse las librerias:

apt-get install libsdl1.2-dev libsdl-image1.2-dev libsdl-mixer1.2-dev libsdl-ttf2.0-dev

Instalación en Windows

Para Windows utilizare Visual C++ Express Edition 2010 aunque existen otras opciones como Dev C++. Primero hay que bajarse las librerias de SDL desde su pagina oficial.

La libreria principal de SDL que usaremos sera la de desarollo llamada SDL-devel-1.2.14-VC8.zip

SDL
http://www.libsdl.org/download-1.2.php

Librerias Extras

SDL tambien nos proporciona otras librerias que nos facilitan el trabajo, la mas usadas som SDL_image para diferentes tipos imagenes, SDL_mixer para el sonido y SDL_ttf para manejar tipografias. Hay que bajar la librería que dice contenga el nombre la palabra "devel", ejemplo: SDL_image-devel-1.2.10-VC.zip

SDL_image
http://www.libsdl.org/projects/SDL_image/

SDL_mixer
http://www.libsdl.org/projects/SDL_mixer/

SDL_ttf
http://www.libsdl.org/projects/SDL_ttf/

Después de haber descargado y descomprimido todas las librerías necesarias debes buscar en cada una de ellas todos los archivos con terminación .dll (Dinamic Link Library), copialas y pegalas dentro de C:\Windows\System32.

Ahora pasemos a pasemos a enlazarlas las librerías en Visual C++.

Abrimos Visual C++ y creamos un nuevo proyecto vació y le damos el nombre que queramos. (Click para ampliar las imagenes).

Una vez creado seleccionamos en el menú Proyecto->Propiedades y aparecera algo así:

Ahora hay que agregar la librerías de SDL, seleccionamos "Library Directories" y el procedimiento es el mismo que el anterior pero ahora con las carpetas que digan "lib".

Ahora es momento de linkear las librerías para poder compilarlo. En la misma venta de propiedades seleccionamos del menú izquierdo la opción de "Linker" y luego en la lista que aparecerá a la derecha clickeamos en "Additional Dependecies".

En la nueva venta que aparecerá hay que agregar las librería principal de SDL escribiendo:

SDL.lib
SDLmain.lib

Y en caso de usar las librerías extras también debes escribir:

SDL_image.libSDL_mixer.libSDL_ttf.lib

Por ultimo en esa misma ventana de propiedades en la parte izquierda tienes que ir a System y luego en la lista de la derecha que aparece seleccionas Subsystem, clickea en ella y selecciona la opción que dice: Windows (/SUBSYSTEM:WINDOWS).

Le das aceptar para terminar, ahora es momento de crear un nuevo archivo de código y empezar a programar. Después del primer ejemplo que explico enseguida tendrás algo como esto.

También les dejo enlaces para utilizar SDL en diferentes compiladores.

Lazyfoo

Programacion de videojuegos con SDL Garcia Serrano

http://www.aprendeaprogramar.com/mod/resource/view.php?id=182

SDL Manuales y Tutoriales

2011-08-01T15:21:00.000-07:00

Si estas comenzando a programar videojuegos en C/C++ tal vez la API de SDL te pueda ser de gran ayuda.
SDL es una librería multiplataforma (Windows, Linux, Mac OS, Atari, Sega, DreamCast, etc) escrita en C, la cual esta enfocada en el desarrollo de videojuegos en 2D.

Tal como sus creadores lo dicen: "SDL no hace todo, si no que hace lo que todos." Ademas SDL también puede ser combina con OPengl para la creacion de juegos en 3D.

Manuales y Tutoriales
Programacion de Videojuegos con SDL Garcia Serrano
Tutorial de libSDL para la programaciond de videojuegos Antonio García
Videojuego, c++ y SDL Suben Dario Orozco

Pagina recomendadas:
Loserjuegos
Lazyfoo