Tutorial: Matemática Aplicada a Jogos Digitais – Parte 1 – Sistemas de Coordenadas

Iniciando mais um tutorial, mas este aqui vai ser diferente: ao invés de apresentar uma tecnologia, estarei apresentando bases da matemática e da física que, uma vez dominada, torna o desenvolvimento de jogos muito mais eficiente. Hoje vamos começar o tutorial falando de Sistemas de Coordenadas.

Por que estudar o sistema de coordenadas? O motivo é bem simples: Eu diria que 90% dos cálculos feitos pela maioria dos jogos envolvem posições. Outros 9% são cálculos que envolvem estatísticas e outros 1% são cálculos auxiliares. Por isso se você quer ser um bom desenvolvedor de jogos, você deve saber muito bem os sistemas de coordenadas.

 

O que são Sistemas de Coordenadas?

A primeira ideia de localizar algo em um determinado espaço veio do filósofo René Descartes, no ano de 1637, que consistia em duas retas perpendiculares e que possua um sistema métrico para cada uma delas, cuja a origem delas é o ponto de interseção. Esse sistema criado é chamado de Plano Cartesiano.

Figura 1: Um plano cartesiano é formado por duas retas perpendiculares e que possuem um sistema métrico cuja origem fica na interseção das mesmas

Como o próprio nome diz, o sistema de Plano Cartesiano mostra a localização de um ponto em um plano, sempre tendo como referência o ponto de origem. Um plano é um espaço bidimensional. Superfícies em geral podem ser projetadas em um plano, como a tela do computador.

As retas bases que compõem o plano cartesiano são chamadas de eixos. Na figura 1, chamamos a reta X de eixo das Abscissas, enquanto a reta Y é o eixo das Ordenadas.

Para indicar a localização de um ponto no plano é adotado, por padrão, uma anotação onde primeiro dizemos a posição na abscissa e em seguida, a posição na ordenada. Tudo isso, fica entre parenteses e separados por “,” ou “;” (este último, muito usado quando utilizamos números reais). Veja a seguinte imagem:

Figura 2: A Localização de um ponto segue o padrão (x,y)

Pontos também podem receber nomes, geralmente letras latinas em maíusculas. Se usarmos a Figura 2 por exemplo, podemos dizer que o ponto A está localizado na posição (2,4), assim como o ponto C está na posição (-4,-5).

Se observarmos os dois eixos do Plano Cartesiano, vemos que a mesma divide o plano em 4 partes. Essas partes são chamadas de Quadrantes. A nomeclatura delas é simples: vamos pegar a primeira área, ou melhor o primeiro quadrante. Neste quadrante, tanto a abscissa quanto a ordenadas são posições positivas. O ponto A da figura 2 está no primeiro quadrante. Então, tendo definido o primeiro quadrante, vamos seguindo o sentido anti-horário para definir os restantes. Seguindo a ideia, temos que o segundo quadrante é a área cuja as abscissa são negativas e as ordenadas são positivas. O ponto D está no segundo quadrante. O ponto C está no terceiro quadrante, onde tanto a abscissa quanto as ordenadas são negativas. Por fim, o quarto quadrante é a área onde a abscissa é positiva e a ordenada negativa (ponto B).

Figura 3: Os quatros quadrantes seguem a ordem anti-horário

Sistemas de Coordenadas nos Computadores

Na maioria das ferramentas de programação, o sistema de coordenadas da tela é um pouco diferente do plano cartesiano, mas seguem os mesmos princípios. A principal diferença está na direção na qual o eixo das ordenadas cresce. Enquanto no plano cartesiano, o valor da ordenada cresce no sentido para cima, no computador, o eixo da ordenada cresce para baixo.

Figura 4: Na maioria das linguagens de programação, o eixo das ordenadas são invertidas

Mas como o computador interpreta o sistema de coordenadas? A partir da Origem, a parte visível avançará para o primeiro quadrante (que neste caso, está no canto inferior direito, e não no superior) até as medidas das telas serem atingidas. Vamos supor que a tela tenha uma medida 7×7, então toda área que estiver entre o ponto (0,0) e (7,7) será vísivel na tela. A imagem 5 mostra isso:

Figura 5: O primeiro quadrante (área destacada) é a área visível da tela

Qualquer elemento que estiver fora da área demarcada, não será visível. Por exemplo, se colocarmos algo no ponto (9,2), apesar de estar no primeiro quadrante, ele não será visível, pois o mesmo se encontra além da tela.

Já que estamos falando em tamanho de telas, o computador usa um sistema métrico chamado Pixel. Um pixel é um ponto que compõe a imagem. Quando dizemos que uma tela tem uma Resolução de 800×600 pixeis, queremos dizer que a imagem que é projetada na tela é composta por 480.000 pixeis distribuídos em 600 linhas com altura de 1 pixel com 800 pixeis cada. Isso vale para qualquer sistema digital, telas de computadores, máquinas fotográficas, etc.

Agora a questão é: quanto maior a resolução, melhor vai ser a imagem? Não necessariamente, porque não existe uma relação padrão com medidas não virtuais (como metros por exemplo). Cada máquina pode possuir uma medida diferente de pixel. Por exemplo, dois aparelhos celulares tem o tamanho físico da tela 9,6×6,4 cm, mas um possui a resolução de 960×640 pixeis e o segundo possui a resolução de 480×320 pixeis. No primeiro, cada pixel medirá 0,01cm2, enquanto no segundo celular cada pixel terá 0,02cm2. Ou seja, se mandar mostrar uma imagem de tamanho 480×320 no segundo celular, a mesma vai ocupar a tela inteira, enquanto o primeiro celular vai ocupar apenas ¼ da tela. Essa proporção de pixel com uma medida física é o que chamamos de Densidade de Pixeis. A unidade de medida mais utilizadas para densidade de pixeis é o ppi (pixel por polegada).

Figura 6: No primeiro retângulo, uma imagem de tamanho 480×320 é exibida em uma tela com o mesmo tamanho de resolução. No segundo, a mesma imagem é exibida numa tela com o dobro de resolução

Sistema Cartesiano em 3D

Por volta de 1996, os jogos criados a partir de motores 3D começaram a ascender. Isto foi uma revolução para os videogames, pois tornou-se mais fácil a programação de jogos que permite um grau de liberdade de movimentos maior que esquerda e direita.

Entretanto, como fica a matemática por trás disso tudo? Realmente, algumas coisas ficaram mais complexas, como o controle de câmeras, mas muitas coisas básicas continuam simples. No caso do sistema de Coordenadas, ao invés de dois eixos perpendiculares entre si, teremos três. Esses três eixos são chamadas de eixo das Abscissas, eixo de Afastamento e eixo da Cota.

Figura 7: Sistema de Coordenadas Cartesiano em 3D com os eixos Abscissa (X), Afastamento (Y) e Cotas (Z)

Os três eixos dividem o espaço em oito octantes, que é análogo ao quadrante do espaço cartesiano 2D.
Em motores 3D, a visão do jogador é controlado por um objeto chamada câmera, que é responsável por captar tudo que será visível para o jogador e montar a imagem que será exibida no monitor.

 

Considerações Finais

No tutorial de hoje apresentei o conceito de sistemas de coordenadas. Elas são importantes principalmente para posicionamento dos elementos do jogo. Vimos também que diferente do sistema tradicional, geralmente as engines usam o eixo das ordenadas invertido, onde vai crescendo para baixo.

Figura 8: Tela de criação de Room do GameMaker e sua sistema de coordenadas

Também expliquei o que é a densidade da tela e como isto afeta o sistema de coordenadas de um equipamento, mostrando que duas telas do mesmo tamanho podem ter um sistema dependendo de quantos pixels a tela pode exibir.

Finalizei mencionando que o conceito é válido quando se deseja fazer jogos com engines 3D e que uma câmera é responsável por transformar esse ambiente 3D em 2D.

Então, até o próximo tutorial!

 

 

Thalisson Christiano de Almeida

Thalisson Christiano de Almeida

Formado em Ciência da Computação (UDESC). Foi Programador da Céu Games e professor do Técnico em Informática do SENAI-SC. Atualmente, trabalha na empresa By Seven. Já foi jogador de xadrez e praticou kung-fu, ambos por 4 anos. Hoje é praticante do Jiu-jitsu, esperando que não fique nos 4 anos. Não tem preferência de tipos de jogos em especifico, variando desde jogos casuais de Facebook até jogos mais hardcore.

Send this to a friend