"Ningún juego dura tanto hasta que te lo terminas como el que te programas tú mismo,
ninguno te absorbe tanto y ninguno te produce tanta satisfacción cuando lo has acabado"
Programacion de videojuegos
Inicio Curso de programación de juegos 5. Proyecciones ortogonales
Miércoles 13 de Diciembre del 2017

Menu principal
Colaborar (con PayPal)

Para continuar con el trabajo de esta Web y poder pagar el hosting, viene bien la ayuda que sea. Gracias a todos.

Importe: 

Ultimas descargas
19.Jan

Clase que permite dibujar texto en OpenGL con mucha facilidad.Usa FreeType2.Para ver que hace y c...


5. Proyecciones ortogonales Imprimir Correo electrónico
Videojuegos - Curso de Programación de juegos
Escrito por Vicengetorix   
En esta entrega veremos como cambiar la proyeccion de nuestra escena sobre la pantalla de acuerdo con nuestras necesidades, de forma que seremos capaces de dibujar escenas en 2D controlando el sistema de coordenadas.


Empezaremos con la proyeccion ortografica u ortogonal.
¿Que es una proyeccion ortografica? ummm... ¿como explicarlo? ¿y para que? Si en internet ya esta casi todo. En estos enlaces aclaran las cosas: Ortografica , ortogonal.
Como se ve en la wikipedia, lo importante del concepto es que las lineas que se proyectan sobre el plano en que estamos dibujando (papel o la ventana de nuestro programa) son perpendiculares a este mismo plano y por tanto paralelas entre si.



Esta proyeccion nos serviria, por ejemplo, para un juego en isometrica (un caso de proyeccion ortogonal) o para graficos en 2D en los que las cordenadas X e Y de los vertices coincidirian con los pixels de nuestra ventana Windows y la coordenada Z seria siempre la misma (en el caso de nuestro codigo ejemplo, 0 ).

Ahora modificamos nuestro programa.
El meollo del asunto sera en la funcion IniciaGL().

Usaremos algo de programacion Windows para ajustar bien el tamaño del viewport al de nuestra ventana:

1
2
3
4
5
6
7
8
9
//Definimos un rectangulo (programacion windows)
RECT rect;
// Extraemos el area cliente de nuestra ventana en rect.
GetClientRect(IdVentana, &rect);
// Usamos rect (el area cliente o espacio util dentro de los
// bordes de nuestra ventana) para definir los limites del
// espacio que va a usar OpenGL para dibujar (viewport).
// asi ajustamos nuestra ventana y OpenGL.
glViewport(rect.left,rect.top,rect.right,rect.bottom);

Ahora definimos la proyeccion ortogonal:

1
2
3
4
5
6
7
8
9
// Decimos a OpenGL que el tipo de perspectiva que
// usamos es ortogonal, y que las coordenadas a usar
// seran en el eje x de 0 al ancho del area cliente de la
// ventana y en el eje y de 0 al alto del area cliente.
// El eje de coordenadas sera la esquina superior izquierda
// del area cliente de la ventana. La profundidad visible
// sera entre -1 y 1 (si ponemos 0 como profundidad se
// veran nuestros dibujos, vamos a usar solo 2 dimensiones).

glOrtho(0,rect.right,rect.bottom,0,-1,1);

Una pequeña explicacion de la funcion glOrtho(...):
Sus 4 primeros parametros delimitan el cuadrado donde se proyecta la escena. Los 2 ultimos parameros delimitan el rango del eje Z, profundidad, dentro del que se pintaran las cosas. (en nuestro caso lo que se encuentre entre -1 y 1 sera visible, fuera de este rango no).
Graficamente:

Y ahora la funcion glOrtho(...) correspondiente:
glOrtho(xwmin, xwmax, ywmin, ywmax, pcerca, plejos);

Despues viene una parte de codigo para poder ver el tañano que tiene finalmente nuestro viewport y nuestra proyeccion (ya que los valores dependen del area cliente de la ventana):

1
2
3
4
5
6
7
8
9
10
11
12
13
#include <stdio.h>
.
.
.
// Definimos una cadena de caracteres para poner en
// el titulo de nuestra ventana el tamaño del area
// cliente (a mi me gusta saber el tamaño de mi
// ventana de dibujo)
char cad[50]; // 50 seran suficientes caracteres.
// Relleno mi cadena con lo que voy a poner en la ventana.
sprintf(cad,"USW %i x %i",rect.right,rect.bottom);
// Modifico el titulo de mi ventana.
SetWindowTextA(IdVentana,cad);

Finalmente nos vamos a la funcion Pinta() y modificamos todas las coordenadas para ajustarlas a la nueva proyeccion.
Pongo de ejemplo solo el triangulo principal:

1
2
3
4
5
6
7
8
glBegin(GL_TRIANGLES); 
// Primer vertice de mi triangulo:
glVertex3f(0,350, 0);
// El segundo vertice de mi triangulo:
glVertex3f(600,350 , 0);
// El tercer vertice de mi triangulo:
glVertex3f(300, 0, 0);
glEnd();

Notaras que la esquina derecha del triangulo se sale de la ventana. Esto es porque el lado inferior es de 600 pixels de longitud, lo mismo que la ventana, y el area cliente de la venana es un poco mas pequeña al ser la ventana menos el borde.

El programa se veria asi:



Y el codigo completo seria: usw5.cpp


¡Sólo los usuarios registrados pueden escribir comentarios!
+/- Comentarios
Buscar
bakadeshisho  - Trate de pasarlo a linux   |Registered |30-11-2013 23:07:11
Bueno he tratado de pasarlo a linux y esto es lo que me sale, dejo un link
de pastebin para no sobrecargar el post

http://pastebin.ca/2485486
y el link de una imagen

http://subefotos.com/ver/?11215a65098f5634c0300...
espero que me ayude a poder traspasarlo de mejor manera a linux, de ante
mano muchas gracias!!!
JOSE A.   |84.122.93.xxx |22-06-2012 00:07:43
Podrías indicar donde hay que insertar estas partes de código. Lo digo para la
gente como yo, que todavía no somos expertos en programación.

Muchas gracias.
Vicengetorix   |87.221.214.xxx |23-06-2012 12:29:10
Al final del capitulo hay un enlace con el codigo completo, Ahi puedes verlo.
JUAN JOSÉ  - No veo la diferencia.   |Registered |21-11-2011 14:44:40
¿Cuál es la diferencia principal entre el resultado de este capítulo y el
resultado del capítulo anterior? A simple vista, parece que solo cambia el
tamaño.
Vicengetorix   |85.53.213.xxx |21-11-2011 19:43:14
Eso es. Solo cambia el tamaño ... y el sistema de coordenadas. Hemos definido
el viewport y hemos establecido una proyeccion.
aunque no se vea a simple vista
nos permite seguir avanzando.

3.26 Copyright (C) 2008 Compojoom.com / Copyright (C) 2007 Alain Georgette / Copyright (C) 2006 Frantisek Hliva. All rights reserved."

 


Banner
Spanish Chinese (Simplified) English French German Japanese Portuguese Russian