GM3D 02 – Projeção e Movimento da Câmera

GM3D 02 – Projeção e Movimento da Câmera

Assim como os olhos dos seres vivos projetam o ambiente para o cérebro, o jogo também deve ter algo que projete o espaço virtual ao jogador.
Nessa aula vou explicar como criar uma câmera que se movimenta com o mouse.
Essa parte é complicada tanto para aprender quanto para explicar.
Fiquem atentos.


Existem duas funções que usamos para definir como o mundo será visto:

Código:

d3d_set_projection(xfrom,yfrom,zfrom,xto,yto,zto,xup,yup,zup);
d3d_set_projection_ext(xfrom,yfrom,zfrom,xto,yto,zto,xup,yup,zup,angle,aspect,znear,zfar);

A primeira á a forma simples e a segunda é a forma estendida da função. Iremos usar apenas a segunda.

Fazer com que entendam cada argumento será bem complicado, mas eu gosto que tudo seja explicado então prestem bastante atenção e façam testes com cada parâmetro..

Código:

d3d_set_projection_ext(xfrom,yfrom,zfrom,xto,yto,zto,xup,yup,zup,angle,aspect,znear,zfar)

xfrom,yfrom,zfrom,xto,yto,zto – from significa “de” e to “para”. Os três primeiros argumentos são os pontos da câmera, ou seja, o lugar de onde se olha e os três últimos o lugar para onde esta se olhando. Por exemplo:
Você esta no quarto olhando para o computador. A posição dos seus olhos representam “xfrom,yfrom,zfrom” e a posição do computador representa “xto,yto,zto”.

xup,yup,zup – esses argumentos são definidos apenas como false ou true. Neles você especifica o eixo em que a projeção gira. Exemplo:
Você ainda está olhando para o computador.
Levante ou abaixe a cabeça. Pronto! Você acabou de girar a visão em torno do eixo y.
Agora mexa a cabeça para direita ou para a esquerda. Pronto! Você acabou de girar a visão em torno do eixo z.
Girar em torno do eixo x seria como rodar a cabeça em torno de si mesma olhando sempre pra fentre.

Marque como true os eixos que a câmera vai gira.
O padrão usado é “0,0,1”, ou seja, ira girar em torno do eixo z.

angle – este não tem nada a ver com o ângulo da visão e muita gente se confundi com ele. Aqui você deve definir a largura da câmera em graus. Exemplo:
As lentes dos óculos são medidas em graus lembra? Quanto maior o grau, mas as imagens são aumentadas.
Você já viu aquelas câmera que quanto se gira a lente o zoom aumenta ou diminui? Então! O efeito desse argumento é o mesmo.

Quanto maior o valor de angle, maior vai ser o zoom “natural” da projeção.
Um padrão razoável é 45° mas eu estou usando 90° em meus projetos.

aspect – defini o aspecto da tela. Não há muito o que explicar...
Se você esta usando uma dimensão de tela padrão (640x480, 1024x768...), qualquer valor sem ser a divisão desses tamanho causara distorção na imagem.
Defini-o como 640/480 ou simplesmente 1.3.

znear,zfar – de znear a zfar é a região que será desenhada pela câmera. Por exemplo:
znear é 1 e zfar é 10000. Tudo que estiver entre o pixel 1 e o pixel 10000 da projeção será desenhado. Tudo que estiver fora dessas coordenadas não será desenhando.


Nessa figura a primeira linha vertical representa o znear e a segunda linha vertical o zfar. Tudo o que há na parte azul será desenhado e tudo o que há na parte cinza não será desenhando.

O padrão é znear = 1 e zfar = 32000.



Se você quer desenhar coisas bidimensionais em modo 3D?
Então terá que usar isso.
Visão ortogonal nada mais é do que a projeção das imagens ignorando a profundidade delas, ou seja, o valor z.
Seria como desenhar um modelo 3D com todas as suas coordenadas z iguais a zero. Ele ficaria achatado. Sem profundidade.
Essa função é extremamente útil, pois podemos desenhar textos e imagens na tela sem dificuldades.

Código:

d3d_set_projection_ortho(x,y,w,h,angle)

x,y,w,h – essa é a região ou tamanho da tela. Note que se for diferente do tamanho da view o que for desenhado na tela vai se esticar em relação a view.

angle – gira o que for desenhado. O ponto de origem é por padrão o meio da area que você definiu.

Para desenhar um texto na tela você pode fazer da seguinte forma:

Código:

draw_set_color(c_black);
d3d_set_projection_ortho(0,0,view_width,view_height,0);
d3d_set_hidden(false);
draw_text(10,10,'FPS: ' + string(fps));
d3d_set_hidden(true);

Essa função deve vir sempre antes de d3d_set_projection_ext ou a cena não será desenhada direito.



Agora é hora de aprender como movimentar a câmera no mundo.
Vamos adicionar um exemplo de visão em terceira pessoa onde o personagem é totalmente enquadrado pela câmera no projeto da aula anterior. Depois explicarei como adaptar isso para primeira pessoa que é ver o mundo como se estiver com os olhos do personagem.

Abra a engine que começamos na aula 1. Você também pode baixar o source clicando aqui.

Crie um novo background que será a textura do chão.


Abra o obj1 e defina outra variável para a textura do chão:

Código:

tex2 = background_get_texture(background1);

No evento Draw:

Código:

 d3d_draw_floor(0,0,0-16,room_width,room_height,0-16,tex2,5,5);

Isso vai desenhar um chão do tamanho da room e embaixo do cubo.

Agora abra o objCamera e vamos definir todos as variáveis necessários para controlar o movimento no evento Create:

Código:

 // Movimento da camera
z  = 0;   // ponto z
dx = 0;   // armazena movimento x da câmera
dy = 0;   // armazena movimento y da câmera
dz = 0;   // armazena movimento z da câmera
px = 0;   // ponto x para onde se esta olhando
py = 0;   // ponto y para onde se esta olhando
pz = 0;   // ponto z para onde se esta olhando
zoom = 400;
zang = 0;   // angulo horizontal da camera
yang = 0;   // angulo vertical da camera
// Definir posição do mouse
window_mouse_set(200,200);
// Sem cursor
window_set_cursor(cr_none);

Agora crie um evento Step e:
Primeiro deve-se achar os ângulos da câmera. É o movimento do mouse que vai modar os ângulos então precisamos saber o quanto e para onde ele esta se movendo.

Código:

// Definindo angulos a partir do mouse
zang-=(window_mouse_get_x()-200)/8;
yang-=(window_mouse_get_y()-200)/8;
window_mouse_set(200,200);
yang=median(yang,-89,89);

zang é igual a posição x do mouse -200 dividido por 8. Isso retorna quantos pixels o mouse se moveu em x.
yang é igual a posição y do mouse -200 dividido por 8. Isso retorna quantos pixels o mouse se moveu em y.
O valor 8 é a sensibilidade do mouse. Quanto menor mais rápido o movimento vai ficar.
A função window_mouse_set defini a posição do mouse novamente depois de já achar os ângulos.
A ultima linha de código faz com que yang nunca passe de -89 a 89, ou seja, quanto a câmera estiver em cima ou embaixo do objeto seu ângulo vertical não mudará mais.

Já temos os ângulos vertical e horizontal definidos. Agora precisamos saber o quanto os pontos x,y e z da câmera teriam que mudar para que possa girar em torno do personagem.

Código:

// Animação da camera

// calculando movimento dos vetores da camera
dx=cos(degtorad(zang));
dy=-sin(degtorad(zang));
dz=tan(degtorad(yang));

// normalizar vetores
// torna movimento da camera totalmente esferico.
m=sqrt(sqr(dx)+sqr(dy)+sqr(dz));
dx/=m;
dy/=m;
dz/=m;

Coseno, seno e tangente são operações matemáticas para achar pontos de acordo com um ângulo.
Convertemos os graus em radianos com a função degtorad(ang).
cos retorna quantos pixels o x terá que se mover para estar naquele ângulo.
sin retorna quantos pixels o y terá que se mover para estar no mesmo ângulo que x (ângulo vertical).
E tan retorna quantos pixels o z terá que se mover para estar de acordo com o ângulo vertical.
Por ultimo em tenho que normalizar dx, dy e dz para que o movimento gire de forma perfeitamente esférica em torno do personagem.
Não tem muito o que explicar disso. Aquilo é uma operação para não deixar que o zoom mude automaticamente dependendo do ângulo.

A parte complicada já foi.
Agora é só definir as novas coordenadas da câmera de acordo com dx, dy e dz.

Código:

// Calculando posição da camera no mundo
x = obj1.x+dx*zoom;
y = obj1.y+dy*zoom;
z = obj1.z+dz*zoom;

// Zoom
if keyboard_check(vk_add) zoom += 4;
if keyboard_check(vk_subtract) zoom -= 4;

Ao multiplicar os valores que acho com cos, sin e tan eu estou adicionando uma distancia ao movimento. Essa distancia é o zoom que vale 400 pixels. A câmera ficará a 400 pixels do personagem.
Adicionei também algo para aumentar e diminuir o zoom apertando “+” ou “-“ no teclado.

Finalize o código do evento Step definindo o lugar para onde o câmera vai olhar que no caso é a posição do obj1.

Código:

// Movimento no personagem
px = obj1.x;
py = obj1.y;
pz = obj1.z;

Abra o evento Draw do objCamera, apague o código lá e defina uma nova projeção:

Código:

d3d_set_projection_ext(x,y,z,px,py,pz,0,0,1,90,1.3,1,32000);

Adicione um movimento simples para o obj1. Crie um evento Step nele:

Código:

if keyboard_check(ord('W')) y -= 4;
if keyboard_check(ord('S')) y += 4;
if keyboard_check(ord('A')) x -= 4;
if keyboard_check(ord('D')) x += 4;

Pra finalizar defina a velocidade da room como 60.

Se você quiser fazer um visão em terceira pessoa é simples.
Basta inverter os pontos xfrom, yfrom, zfrom, xto, yto, zto

Código:

d3d_set_projection_ext(px,py,pz,x,y,z,0,0,1,90,1.3,1,32000);

Não se esqueça de tirar o código que desenha o cubo porque senão a visão vai ficar tampada pela parte de dentro do cubo.

Esse exemplo pronto pode ser baixado clicando aqui:

Código:

http://www.mediafire.com/?ge19g3a47q65qv9

A próxima aula será sobre como fazer um movimento mas detalhado, animação simples como pulos e noção de como mexer com transformações em D3D que são usadas principalmente para rotacionar os objetos.
Até mais.

mto boa kabeça vamu faze o obj pula agora

óptimo tutorial, um pouco complexo e complicado de perceber...
....mas estas de parabéns pela iniciativa, realmente estava a espera disso a muito tempo....
valeu...

Seguinte galera...
Esses dias da semana não tenho muito tempo parar preparar os próximos. Então o numéro 3 vai ser so no domingo.

Além disso, Natch, me fala o que está difícel de entender pra ver se da pra melhorar na explicação.
Essa parte de projeção tem que ser bem explicada porque é muito importante intender como usar a matemática prar achar ângulos e fazer movimento.
Qualquer um que não estiver consegindo intender diga.

aqui não deu certo, eu baixei sua engine e coloquei elas lado a lado, olhei cada codigo e tava TUDO igual (tirando alguns detalhes como o background do chao que na sua tava igual) mas nada d+, tava tudo igual e a minha não deu certo, eu não entendi como isso é possivel se é tudo igual

primeiro a variavel tex2 não existia, daí eu criei, coloquei no create tex2=""

depois apareceu um erro que nem lembro mas é +/- assim

don't compare arguments <- era algo assim nem lembro ¬¬

vc sabe o que pode ser?

e a parada matematica eu nem entendi mas é só fazer CTRL + C e CTRL + V (nunca pensei que diria isso :oops: )

Kabeção Parabéns ótimo tutorial, bem explicado, é importante este tipo de tutorial aqui no fórum já que poucas pessoas entendem ou utilizam a parte 3D do GM.

Henrique_GJ escreveu:aqui não deu certo, eu baixei sua engine e coloquei elas lado a lado, olhei cada codigo e tava TUDO igual (tirando alguns detalhes como o background do chao que na sua tava igual) mas nada d+, tava tudo igual e a minha não deu certo, eu não entendi como isso é possivel se é tudo igual

primeiro a variavel tex2 não existia, daí eu criei, coloquei no create tex2=""

depois apareceu um erro que nem lembro mas é +/- assim

don't compare arguments <- era algo assim nem lembro ¬¬

vc sabe o que pode ser?

e a parada matematica eu nem entendi mas é só fazer CTRL + C e CTRL + V (nunca pensei que diria isso :oops: )

Agora que vi, tem um erro ali nos códigos que passei nessa parte:

Código:

tex2 = tex2 = background_get_texture(background1);

O certo seria assim:

Código:

tex2 = background_get_texture(background1);

RKNF1995 escreveu:Kabeção Parabéns ótimo tutorial, bem explicado, é importante este tipo de tutorial aqui no fórum já que poucas pessoas entendem ou utilizam a parte 3D do GM.

Vlw RKNF1995.
Pretendo continuar trazendo muito mais coisas que não são abortadas com frequência aqui.

Ótimo tutorial, com ele ja da pra ter uma base sobre jogos 3D... o que eu queri ver é colisão, isso que me encuca a cabeça, parabéns Kabeção, trazendo coisas novas para irmos aprendendo mais.
FLW

uai kabeção, eu fiz isso logo de cara quando deu o bug e não deu certo

mas dai eu fucei fucei hoje e consegui mas aconteceu algo tragico

apareceu a tela do jogo normal mas só que só tinha o background do chao em pé na tela (2D) e não entendi o porque

mas pode deixar eu entendi cada passo do tuto isso que realmente importa vlw

muito bom zé esse tutorial. vc sabe informar se o GM trabalha com objetos animados por bonnes vindo do 3d max por exemplo no formato 3ds ou obj?

Anderson3d escreveu:muito bom zé esse tutorial. vc sabe informar se o GM trabalha com objetos animados por bonnes vindo do 3d max por exemplo no formato 3ds ou obj?

Não nativamente mas usando uma DLL sim.
A muitas DLLs para aumentar o suporte ao 3D do Game Maker, é só escolher a que você achar melhor mas é claro que trabalhar com 3D precisaria de muito mas tempo para aprender quanto você demorou para intender o 2D até hoje.

Bem legal o tutorial. Bem explicado. o/

O bacana de projeção é que ela não se limita ao 3D. Na realidade, projeção é uma das mais gratas técnicas de programação. A "view normal" do Game Maker também é uma projeção de jogo lateral. Um formulário ou uma janela, também podem ser encarados como projeções também.

A partir do momento em que você entende que o mecanismo do jogo é uma coisa e o que é passado para o jogador (seja pelo meio visual ou sonoro) é outra coisa, você expande muito seu campo de visão nesse tipo de programação.

Deu certo Mais todo jogo 3D que eu faço fica de cabeça para baixo

Cara no tuto ta :

Se você quiser fazer um visão em terceira pessoa é simples.
Basta inverter os pontos xfrom, yfrom, zfrom, xto, yto, zto

Na verdade o tutorial ja ensina faze em terceira pessoa, se inverter os valores vai fica em primera pessoa !

Mas mesmo assim .... nao tenho palavras para descrever os seus tutoriais!!!!!
To aprendeno muuuuito com eles !!!! Vlw mesmo !!!!