Matemática e Física em Jogos 2D

Prévia do material em texto

03/04/2023, 21:04 Matemática e Física Aplicada a Jogos
https://student.ulife.com.br/ContentPlayer/Index?lc=gTaMjssRS5yNljuISRh7RA%3d%3d&l=hiTFLRrvYPpmNqfh9fVFgw%3d%3d&cd=Iu%2fluEx… 1/38
MATEMÁTICA	E	FÍSICA	APLICADA	A	JOGOS
UNIDADE 1 - GEOMETRIA E MECA� NICA 2D
Isabel Cristina Siqueira da Silva
03/04/2023, 21:04 Matemática e Física Aplicada a Jogos
https://student.ulife.com.br/ContentPlayer/Index?lc=gTaMjssRS5yNljuISRh7RA%3d%3d&l=hiTFLRrvYPpmNqfh9fVFgw%3d%3d&cd=Iu%2fluEx… 2/38
03/04/2023, 21:04 Matemática e Física Aplicada a Jogos
https://student.ulife.com.br/ContentPlayer/Index?lc=gTaMjssRS5yNljuISRh7RA%3d%3d&l=hiTFLRrvYPpmNqfh9fVFgw%3d%3d&cd=Iu%2fluEx… 3/38
Introdução
A presente unidade trata dos principais conceitos relacionados à base Matemática e Fı́sica dos conteúdos
grá�icos e interativos necessários à construção de jogos digitais no espaço 2D. Neste sentido, considerando
jogo estilo space	shooter	2D, como você imagina que o tiro é animado e como se detecta que este acertou o
alvo? Quem tem ideia de como e por que conceitos de translação, rotação e escala são empregados em jogos
digitais? Em jogos 2D de plataforma, como se calcula e se implementa um salto de um personagem? Como é
implementada a colisão de um objeto com limites laterais, superior e inferior em um sistema de coordenadas
cartesianas? Como coincidir a colisão com os limites citados anteriormente com as bordas da janela grá�ica?
Esta unidade aborda conceitos que auxiliarão nas respostas a tais questões, envolvendo: visão geral sobre
sistemas grá�icos interativos, modelagem geométrica de objetos 2D no sistema cartesiano, transformações
geométricas de objetos 2D, focando, principalmente, em translação, escala e rotação, animação de objetos,
explorando conceitos de aceleração e colisão, além de meios de realizar a interação grá�icas com tais objetos.
Espera-se, assim, que esta unidade introduza os principais conceitos 2D envolvidos com a criação de jogos
digitais empregando-se, para tanto, a biblioteca grá�ica OpenGL.
1.1 Geração de Imagens Gráficas
Esta seção aborda conceitos introdutórios relacionados à geração de imagens grá�icas e sua aplicação em
sistemas grá�icos interativos, abordando a sua evolução.
VOCÊ SABIA?
Sistemas grá�icos interativos (SGI) estão cada dia mais presentes na vida das
pessoas, como na área de entretenimento (indústrias cinematográ�ica, televisiva e
da área de jogos eletrônicos), simulação de atividades especı�́icas (Aeronáutica,
Medicina, Arquitetura e Urbanismo, Design, Indústria, Meteorologia etc.) e/ou na
área da Educação, auxiliando o desenvolvimento de ambientes virtuais de
aprendizagem, jogos lúdicos, entre outras.
03/04/2023, 21:04 Matemática e Física Aplicada a Jogos
https://student.ulife.com.br/ContentPlayer/Index?lc=gTaMjssRS5yNljuISRh7RA%3d%3d&l=hiTFLRrvYPpmNqfh9fVFgw%3d%3d&cd=Iu%2fluEx… 4/38
Uma das principais ciências que permitem o desenvolvimento de sistemas grá�icos é a computação grá�ica, a
qual tem por objetivo a produção de imagens grá�icas a partir de dados, sendo responsável pela visualização e
pelo rendering de objetos bidimensionais (2D) e, principalmente, tridimensionais (3D) (GOMES, 2008). Para
tanto, conceitos de geometria analı́tica e álgebra linear, relativos à modelagem geométrica de objetos no plano
e no espaço, se fazem necessários (ver tabela a seguir).
Técnicas de CG permitem a geração de imagens de modelos que, por sua vez, podem corresponder a uma
representação computacional de um objeto real ou imaginário ou a um conjunto de dados descrevendo uma
entidade ou fenômeno.
1.1.1 Pipeline de Visualização
As etapas de geração de uma imagem por CG podem ser sintetizadas em um pipeline de visualização, seja no
espaço 2D ou no espaço 3D. Como etapas deste pipeline, temos: modelagem geométrica, instanciamento,
recorte, mapeamento e conversão vetorial-matricial (ver �igura a seguir).
Tabela 1 - Objeto 3D versus objeto 2D.
Fonte: Elaborado pelo autor, 2019.
03/04/2023, 21:04 Matemática e Física Aplicada a Jogos
https://student.ulife.com.br/ContentPlayer/Index?lc=gTaMjssRS5yNljuISRh7RA%3d%3d&l=hiTFLRrvYPpmNqfh9fVFgw%3d%3d&cd=Iu%2fluEx… 5/38
Este pipeline é seguido tanto para a visualização 2D como para a visualização 3D, com pequenas adequações a
cada espaço de coordenadas.
Figura 1 - Pipeline de visualização.
Fonte: Elaborado pelo autor, 2019.
03/04/2023, 21:04 Matemática e Física Aplicada a Jogos
https://student.ulife.com.br/ContentPlayer/Index?lc=gTaMjssRS5yNljuISRh7RA%3d%3d&l=hiTFLRrvYPpmNqfh9fVFgw%3d%3d&cd=Iu%2fluEx… 6/38
CASO
A seguir, apresentamos um breve histórico com os principais fatos que marcaram a
evolução das técnicas de desenvolvimento de sistemas grá�icos.
1906 – Lee De Forest desenvolve a válvula (audion	vacuum	tube	ampli�ier);
1926 – John Logie Baird apresenta o primeiro protótipo de televisão;
1930 – John Eckert (http://pt.wikipedia.org/wiki/John_Eckert) e John Mauchly
(http://pt.wikipedia.org/wiki/John_Mauchly) criam o ENIAC (Electronic
Numerical	Integrator	And	Computer), o primeiro computador eletrônico.
1950 – o MIT (Massachusetts	 Institute	 of	 Technology) apresenta o primeiro
computador grá�ico chamado Whirlwind, desenvolvido com �inalidades acadêmicas e
militares para aplicações de aerodinâmica e simulação de voo;
1955 – Desenvolvimento do SAGE (Semi-Automatic	Ground	Environment), sistema de
defesa antiaérea dos Estados Unidos, o qual teve como base o computador Whirlwind.
1962 – Ivan Sutherland, do MIT, apresenta o Sketchpad, primeiro editor grá�ico que
servirá de base das interfaces grá�icas interativas. O Sketchpad é voltado para
indústrias automobilıśticas e aeroespaciais.
1963 – Edward Zajac produz, nos Laboratórios Bell, o primeiro �ilme gerado por
computador: “A two gyro gravity gradient altitude control system
(http://www.um.pro.br/index.php?c=/computacao/historia-1960-1970)”
(sistema de controle de gradientes de ângulos de giro);
1963 – Inspirada no Sketchpad, a GM desenvolve o DAC-1 (Design	 Augmented	 by
Computer), precursor dos sistemas CAD (Computer	Aided	Design);
1966 – Ivan Sutherland, trabalhando para a Bell Helicopter Company, desenvolve o
primeiro Head	 Mounted	 Display (HMD), um capacete que produzia um efeito
estereoscópico através de duas imagens em monitores projetadas diretamente sobre
os olhos e que, acoplado a uma câmera infravermelha, possibilitava a um piloto
militar um pouso noturno em terreno desconhecido;
1967 - Rod Rougelet apresenta o primeiro simulador interativo de voo desenvolvido
para a NASA;
1970 – a Xerox PARC (Palo	Alto	Research	Center) inventa a interface grá�ica;
1972 – Alan Kay, trabalhando para a Xerox PARC, apresenta o protótipo de um
computador pessoal (Alto	computer) para o uso em ambiente de escritório;
1972 – Nolan Bushnell e Ted Dabney desenvolvem Pong, o primeiro videogame, e
fundam a empresa Atari;
1973 – Ocorre a primeira conferência SIGGRAPH (International	 Conference	 on
Computer	Graphics	and	Interactive	Techniques);
1979 – George Lucas funda a Lucasilm;
1980 – Disney usa CG em um �ilme pela primeira vez: TRON;
1980 – Dave Zeltzer (Fraunhofer	 Center	 for	 Research	 in	 Computer	 Graphics)
desenvolve a animação SAS (Skeleton	Animation	System), que apresenta o movimento
de um esqueleto articulado;
http://pt.wikipedia.org/wiki/John_Eckert
http://pt.wikipedia.org/wiki/John_Mauchly
http://www.um.pro.br/index.php?c=/computacao/historia-1960-1970
03/04/2023, 21:04 Matemática e Física Aplicada a Jogos
https://student.ulife.com.br/ContentPlayer/Index?lc=gTaMjssRS5yNljuISRh7RA%3d%3d&l=hiTFLRrvYPpmNqfh9fVFgw%3d%3d&cd=Iu%2fluEx… 7/38
O pipeline 3D é similar ao pipeline 2D, com a diferença de que devem ser de�inidos a câmera sintética (ou
virtual) e o tipo de projeção utilizado para a geração da imagem (ver �igura a seguir). Ressaltamos também
que os pontos dos objetos são expressos a partir de três coordenadas .
1983 – ILM (Industrial	Light&	Magic), uma das subdivisões da Lucas�ilm, utiliza CG
no �ilme “Star Trek II - The Wrath of Khan”;
1984 – Lucas�ilm apresenta “As aventuras de André & Wally B.
(http://www.um.pro.br/index.php?c=/computacao/historia-1980-1990)”,
desenho animado de curta duração criado totalmente por computador exibido no
Festival Internacional de Animação em Toronto;
1986 – "Luxo Jr." foi o primeiro curta animado por computador, da Pixar Animation
Studios (http://pt.wikipedia.org/wiki/Pixar_Animation_Studios), a receber uma
indicação ao Oscar de Melhor Curta Animado;
1987 – Criação do padrão VGA (Video	Graphics	Array) pela IBM;
1992 – Surge a biblioteca grá�ica de programação OpenGL (Open	Graphics	 Library)
proposta pela SGI (Silicon	Graphics,	Inc.);
1995 – A Pixar produz Toy	 Story, o primeiro �ilme longa metragem totalmente
animado por computador;
1995 – A Sony lança o Playstation;
1996 – id	Software lança o jogo Quake;
1998 – A Pixar ganha o Oscar de Melhor Curta De Animação com “Geri’s Game”.
http://www.um.pro.br/index.php?c=/computacao/historia-1980-1990
http://pt.wikipedia.org/wiki/Pixar_Animation_Studios
03/04/2023, 21:04 Matemática e Física Aplicada a Jogos
https://student.ulife.com.br/ContentPlayer/Index?lc=gTaMjssRS5yNljuISRh7RA%3d%3d&l=hiTFLRrvYPpmNqfh9fVFgw%3d%3d&cd=Iu%2fluEx… 8/38
Tanto o pipeline de visualização 2D quanto o pipeline de visualização 3D são implementados por sistemas
grá�icos interativos, os quais são abordados na próxima subseção.
1.1.2 Sistemas Gráficos Interativos
Um sistema grá�ico interativo (SGI) tradicional é responsável por percorrer a estrutura de dados que descreve
um objeto e gerar a imagem deste utilizando funções da API (application programming interface) grá�ica.
O processamento grá�ico é decomposto em diversas atividades representadas por etapas ou estágios
funcionais. Cada uma destas etapas é implementada por um ou mais estágios correspondentes no hardware
grá�ico. A aplicação, responsável pelo envio de comandos a serem executados pelos demais estágios do
pipeline grá�ico, roda no processador central da estação de trabalho ou unidade central de processamento
(CPU). Os demais estágios são implementados por uma unidade de processamento especializada, a unidade
de processamento grá�ico (GPU).
O subsistema de processamento grá�ico nos computadores pessoais modernos tem evoluı́do em velocidade
mais acelerada do que a evolução das CPUs. O subsistema grá�ico é composto por uma placa de expansão
(placa de vı́deo) que conecta com o sistema através de barramentos PCI, AGP ou PCI-Express. A GPU situa-se
na placa de vı́deo e também é referenciada por VPU (Unidade de Processamento Visual). As imagens geradas
pelo sistema grá�ico são armazenadas em espaços de memória denominado buffers.
Figura 2 - Pipeline 3D.
Fonte: Elaborado pelo autor, 2019.
03/04/2023, 21:04 Matemática e Física Aplicada a Jogos
https://student.ulife.com.br/ContentPlayer/Index?lc=gTaMjssRS5yNljuISRh7RA%3d%3d&l=hiTFLRrvYPpmNqfh9fVFgw%3d%3d&cd=Iu%2fluEx… 9/38
1.1.3 OpenGL
OpenGL (Open	Graphics	Library) é uma API destinada às funções de saı́da (exibição) 2D e 3D que deve ser
usada juntamente a alguma linguagem de programação (C, C++, Java, Objetc Pascal/Delphi, entre outras).
OpenGL é formada por três outras bibliotecas, a saber: a GL (Graphics	Library), responsável pelas primitivas
geométricas e grá�icas e pelo controle de atributos; a GLU (Graphics	Utility	Library), que fornece funções para
a criação de objetos mais complexos; e a GLUT (GL	 Utility	 Toolkit), responsável pelas funções para
comunicação com sistema de janelas. A GL, a GLU e a GLUT são disponibilizadas para diferentes sistemas
operacionais, em pacotes especı́�icos e podem ser obtidos através de vários sites devido à larga aplicação
desta API.
1.2 Representação 2D
Para a representação computacional de um objeto devemos, inicialmente, de�inir a descrição geométrica
(forma e posição) e os seus atributos visuais (cor, transparência, material etc.). A descrição geométrica será
realizada em relação à dimensionalidade do objeto e, para tanto, devemos de�inir se a visualização do mesmo
se dará no espaço bi (2D) ou tridimensional (3D).
Além disso, também é necessário de�inir em que sistema de coordenadas o objeto será descrito, de modo a
obter uma referência para a descrição geométrica do objeto dentro da área de trabalho. Tal sistema recebe a
denominação de sistema de referência do universo (SRU) (ver �igura a seguir).
Como vemos na �igura anterior, as de�inições de objetos, no SRU, se dão em relação ao sistema de coordenadas
cartesianas (sistema cartesiano), o qual é formado no espaço 2D pelos eixos e no espaço 3D pelos
eixos .
1.2.1 Sistema de Coordenadas 2D
No espaço 2D, o objeto é de�inido no plano do SRU (coordenadas ). Para tanto, informações sobre a
topologia (de�inição de arestas e faces que ligam os vértices) e sobre a geometria (localização dos elementos
topológicos no espaço) devem ser especi�icadas (ver �igura a seguir).
Figura 3 - Sistemas de coordenadas cartesianas: (a) espaço 2D; (b) espaço 3D.
Fonte: Elaborado pelo autor, 2019.
03/04/2023, 21:04 Matemática e Física Aplicada a Jogos
https://student.ulife.com.br/ContentPlayer/Index?lc=gTaMjssRS5yNljuISRh7RA%3d%3d&l=hiTFLRrvYPpmNqfh9fVFgw%3d%3d&cd=Iu%2fluE… 10/38
Além do SRU, pode-se de�inir uma entidade em função do seu próprio sistema de referência – o sistema de
referência do objeto (SRO).
Além do SRU, pode-se de�inir uma entidade em função do seu próprio sistema de referência – o sistema de
referência do objeto (SRO).
Figura 4 - Sistema de referência do objeto.
Fonte: Elaborado pelo autor, 2019.
Figura 5 - Sistema de referência do objeto.
Fonte: Elaborado pelo autor, 2019.
03/04/2023, 21:04 Matemática e Física Aplicada a Jogos
https://student.ulife.com.br/ContentPlayer/Index?lc=gTaMjssRS5yNljuISRh7RA%3d%3d&l=hiTFLRrvYPpmNqfh9fVFgw%3d%3d&cd=Iu%2fluE… 11/38
OpenGL disponibiliza primitivas geométricas básicas, como pontos, retas, triângulos, quadrados e polı́gonos.
Tais primitivas são agrupamentos de vértices e especi�icadas em função do seu tipo, do número de vértices e
do tipo de dado.
1.2.2 tColisão
O conceito de colisão 2D no espaço está relacionado a desenvolver um método de identi�icar se a posição de
dois objetos no espaço 2D coincide, principalmente quando estes são animados por transformações
geométricas.
Desta forma, compara-se as coordenadas de cada vértice de um objeto com as coordenadas x e y de
outro objeto, de modo a analisar suas posições no espaço 2D.
VOCÊ QUER VER?
O vıd́eo a seguir aborda a detecção de colisão entre objetos 2D usando a linguagem
C++ com a biblioteca grá�ica Allegro, voltada ao desenvolvimento de jogos simples.
Acesse:
https://www.youtube.com/watch?v=prJXXSz-tkw (https://www.youtube.com/watch?
v=prJXXSz-tkw)
1.3 Transformações Geométricas 2D
Após a modelagem geométrica do objeto e da de�inição de seus atributos, este deve ser instanciado e, para
tanto, transformações geométricas são aplicadas. São estas que permitem a animação de objetos a partir da
de�inição de movimentos, giros, saltos etc.
As transformações geométricas alteram os vértices dos objetos e mantém as arestas, ou seja, altera sua
geometria mantendo a topologia. Das transformações existentes, três principais serão abordadas neste
capı́tulo. Clique nos itens e veja quais são elas.
Translação
•
https://www.youtube.com/watch?v=prJXXSz-tkw
03/04/2023, 21:04 Matemática e Física Aplicada a Jogos
https://student.ulife.com.br/ContentPlayer/Index?lc=gTaMjssRS5yNljuISRh7RA%3d%3d&l=hiTFLRrvYPpmNqfh9fVFgw%3d%3d&cd=Iu%2fluE… 12/38
Rotação
Escala
Para tanto, será realizada uma revisão de alguns conceitos de álgebra linear.
1.3.1 Translação
A translação no espaço 2D permite a movimentação do objeto, no SRU, nos sentidos dos eixos cartesianos x e
y. Para tanto, as coordenadas do objeto devem ser incrementadas(se a direção é positiva) ou decrementadas
(se a direção é negativa) de acordo com fatores de translação para x e y. Para efetuar a translação de um vértice
V para uma posição , devemos adicionar às suas coordenadas do mesmo o fator t de translação desejado
(Equação 1).
 Equação 1
No exemplo da �igura a seguir, foi aplicada a translação aos vértices do objeto V1, V2 e V2 obtendo-se,
assim, os novos vértices .
•
•
Figura 6 - Exemplo de translação aplicada a um objeto no espaço 2D.
Fonte: Elaborado pelo autor, 2019.
03/04/2023, 21:04 Matemática e Física Aplicada a Jogos
https://student.ulife.com.br/ContentPlayer/Index?lc=gTaMjssRS5yNljuISRh7RA%3d%3d&l=hiTFLRrvYPpmNqfh9fVFgw%3d%3d&cd=Iu%2fluE… 13/38
Em um jogo digital, a movimentação de um objeto do cenário é realizada através da transformação geométrica
de translação. No entanto, a maioria das game	engines encapsula tais cálculos, que não são visı́veis para o
usuário.
1.3.2 Escala
Para aplicar a transformação de escala sobre as coordenadas x e y de um objeto, é preciso de�inir um fator de
escala e que será multiplicado pelas mesmas (Equação 2).
 Equação 2
No exemplo da próxima �igura, podemos observar o resultado do fator de escala aplicado às
coordenadas dos vértices V1, V2 e V3 resultando no novo objeto formado pelos vértices .
A escala, quando aplicada a um objeto que não se encontra na origem do SRU, gera uma translação
involuntária.
Figura 7 - Exemplo de escala aplicada a um objeto no espaço 2D.
Fonte: Elaborado pelo autor, 2019.
03/04/2023, 21:04 Matemática e Física Aplicada a Jogos
https://student.ulife.com.br/ContentPlayer/Index?lc=gTaMjssRS5yNljuISRh7RA%3d%3d&l=hiTFLRrvYPpmNqfh9fVFgw%3d%3d&cd=Iu%2fluE… 14/38
Para que tal fato não ocorra, deve-se de�inir um ponto do objeto em torno do qual se deseja aplicar a escala e,
então, calcular a translação necessária para levá-lo para a origem. Uma vez calculada tal translação, aplica-se a
mesma às coordenadas dos vértices do objeto de modo a transladá-lo para a origem.
Por exemplo, a �igura a seguir apresenta a escala sobre o objeto da �igura anterior (“Escala com translação
involuntária”) tomando-se por base o ponto central do mesmo: P(1.5, 1.5). A translação necessária para levá-
lo para a origem é de . Aplicando-se t aos vértices V1, V2, V3 e V4, obtém-se o
objeto transladado para a origem, com seu vértice central coincidindo com esta. A seguir, aplica-se a escala
 sobre todos os vértices do objeto e translada-o novamente para a posição original com a translação
.
Figura 8 - Escala com translação involuntária.
Fonte: Elaborado pelo autor, 2019.
03/04/2023, 21:04 Matemática e Física Aplicada a Jogos
https://student.ulife.com.br/ContentPlayer/Index?lc=gTaMjssRS5yNljuISRh7RA%3d%3d&l=hiTFLRrvYPpmNqfh9fVFgw%3d%3d&cd=Iu%2fluE… 15/38
A seguir, veremos sobre rotação.
1.3.3 Rotação
A rotação de um objeto no espaço 2D pode ser positiva (sentido anti-horário) ou negativa (sentido horário).
Assim, para efetuar a rotação de um vértice para uma posição , deve-se de�inir o ângulo desejado,
bem como o sinal deste, e aplicar as equações 3 e 4 sobre as coordenadas de .
 Equação 3
 Equação 4
A �igura a seguir apresenta um exemplo de rotação, com º aplicado aos vértices V1, V2 e V3 do
objeto triângulo.
Figura 9 - Escala relativa a um ponto do objeto: (a), (b), (c) e (d) apresentam, respectivamente, as etapas de
realização da escala.
Fonte: Elaborado pelo autor, 2019.
03/04/2023, 21:04 Matemática e Física Aplicada a Jogos
https://student.ulife.com.br/ContentPlayer/Index?lc=gTaMjssRS5yNljuISRh7RA%3d%3d&l=hiTFLRrvYPpmNqfh9fVFgw%3d%3d&cd=Iu%2fluE… 16/38
As Equações 2 e 3, apresentadas anteriormente, são de�inidas em função do seno e do cosseno 
do ângulo .
A exemplo da operação de escala, quando se deseja aplicar a rotação sobre o objeto em relação a um
determinado ponto P deste, deve-se calcular a translação necessária para levar tal ponto à origem do SRU. A
seguir, aplica-se a rotação desejada e, então, translada-se o objeto novamente para sua posição original em
relação ao ponto P. A �igura a seguir ilustra tal operação.
Figura 10 - Exemplo de rotação aplicada a um objeto no espaço 2D.
Fonte: Elaborado pelo autor, 2019.
03/04/2023, 21:04 Matemática e Física Aplicada a Jogos
https://student.ulife.com.br/ContentPlayer/Index?lc=gTaMjssRS5yNljuISRh7RA%3d%3d&l=hiTFLRrvYPpmNqfh9fVFgw%3d%3d&cd=Iu%2fluE… 17/38
Em um jogo digital, a rotação de um objeto em torno do seu eixo ou do eixo de outro objeto do cenário é
realizada através da transformação geométrica de rotação. No entanto, tal como ocorre com a translação e com
a escala, a maioria das game	engines encapsula tais cálculos, que não são visı́veis para o usuário.
1.3.4 Representação Matricial 2D
Nos exemplos de translação, escala e rotação apresentados, notamos que tais operações devem ser aplicadas a
cada vértice do objeto separadamente. Tais operações podem ser realizadas, também, através da manipulação
de matrizes e, para tanto, os vértices do objeto devem ser agrupados em uma matriz bem como cada uma das
transformações geométricas.
A �im de exempli�icar a operação de translação por manipulação de matrizes, toma-se por base um objeto
formado por três vértices V1, V2 e V3. O primeiro passo é expressar seus vértices em forma de matriz (matriz
O) e o fator de translação como uma matriz linha (matriz T). A seguir, realiza-se a soma entre as matrizes,
resultando na matriz como pode ser observado na Equação 5.
Figura 11 - Rotação relativa a um ponto do objeto: (a), (b), (c) e (d) apresentam, respectivamente, as etapas
de realização da rotação.
Fonte: Elaborado pelo autor, 2019.
03/04/2023, 21:04 Matemática e Física Aplicada a Jogos
https://student.ulife.com.br/ContentPlayer/Index?lc=gTaMjssRS5yNljuISRh7RA%3d%3d&l=hiTFLRrvYPpmNqfh9fVFgw%3d%3d&cd=Iu%2fluE… 18/38
O + =O’ Equação 5
Da mesma forma, a operação de escala também pode ser representada por uma matriz E, como pode ser
observado na Equação 6 (exemplo para três vértices V1, V2 e V3 de um objeto).
O =O’ Equação 6
A realização da operação de rotação através da manipulação de matrizes deve ser realizada tal como é
apresentado na Equação 7.
O =O’ Equação 7
Anteriormente, vimos que a escala e a rotação em torno de um ponto qualquer precisa utilizar operações de
translação. Tal fato prejudica a e�iciência do processo de visualização no sistema grá�ico, uma vez que
aumenta a complexidade da realização de transformações geométricas.
A �im de atenuar tal processo, utiliza-se a multiplicação matricial, a qual permite a concatenação de mais de
uma operação em uma única matriz. Para tanto, nota-se que as operações de escala e rotação já são realizadas
através de multiplicação matricial; porém, a translação constitui-se de uma operação de soma, fato que não
permite sua combinação com a escala e com a rotação.
Pode-se, contudo, reformular a matriz de translação a �im de realizar tal operação através de multiplicação
matricial. No entanto, esta reformulação necessita da utilização do conceito de coordenadas homogêneas, de
modo a permitir a multiplicação das coordenadas dos vértices do objeto pela matriz de translação gerando,
assim, a mesma transformação obtida através da soma apresentada na Equação 5.
No espaço 2D, os vértices do objeto são expressos através de suas coordenadas x e y. O sistema de
coordenadas homogêneas, por sua vez, utiliza três valores para representar um vértice: ou
. A transformação do sistema homogêneo para o sistema cartesiano se dá através da relação
expressa na Equação 8.
 Equação 8
Assim, a matriz responsável por realizar a translação através de multiplicação matricial pode ser observada
na Equação 9.
 Equação 9
Porém, para que tal matriz possa ser aplicada ao objeto expresso em coordenadas homogêneas, é necessário
aumentar a mesma apartir da inclusão de uma coluna à direita, transformando-a em matriz canônica. A
Equação 10 apresenta um exemplo de aplicação desta matriz sobre um objeto formado pelos vértices V1, V2 e
V3 expressos em coordenadas homogêneas.
 Equação 10
Devido ao aumento da matriz de translação, para que as matrizes de escala e de rotação possam ser
concatenadas à mesma, é necessário aumentar estas também. Assim, as matrizes canônicas de escala e de
rotação podem ser observadas, respectivamente, nas Equações 11 e 12.
A partir das matrizes canônicas apresentadas, as operações de escala e rotação em torno de um ponto P
qualquer a partir da concatenação destas com a matriz canônica de translação.
03/04/2023, 21:04 Matemática e Física Aplicada a Jogos
https://student.ulife.com.br/ContentPlayer/Index?lc=gTaMjssRS5yNljuISRh7RA%3d%3d&l=hiTFLRrvYPpmNqfh9fVFgw%3d%3d&cd=Iu%2fluE… 19/38
Assim, a Equação 13 apresenta a matriz responsável por concatenar as transformações de
translação do objeto para a origem , de escala E e de translação de volta para a posição original
.
• =
Equação 13
A Equação 14 traz a concatenação das transformações de translação do objeto para a origem , de
rotação R e de translação de volta para a posição original a �im de formar a matriz 
responsável pela rotação do objeto em torno de um determinado ponto.
• =
Equação 14
Em OpenGL, as transformações geométricas são realizadas através de multiplicação matricial. OpenGL
empilha as chamadas das transformações geométricas e as chamadas de desenho na “ModelView”, de acordo
com a ordem das chamadas dentro da rotina passada para a função “glutDisplayFunc” (nos exemplos, a rotina
“DesenhaCena”).
O quadro a seguir apresenta um exemplo de código para desenho de três quadrados. Em tal código, a exemplo
dos demais códigos apresentados, a rotina “DesenhaCena” é a responsável pela de�inição da cena, a ser exibida
na imagem �inal, e é nela que foram inseridas as chamadas das transformações geométricas.
03/04/2023, 21:04 Matemática e Física Aplicada a Jogos
https://student.ulife.com.br/ContentPlayer/Index?lc=gTaMjssRS5yNljuISRh7RA%3d%3d&l=hiTFLRrvYPpmNqfh9fVFgw%3d%3d&cd=Iu%2fluE… 20/38
03/04/2023, 21:04 Matemática e Física Aplicada a Jogos
https://student.ulife.com.br/ContentPlayer/Index?lc=gTaMjssRS5yNljuISRh7RA%3d%3d&l=hiTFLRrvYPpmNqfh9fVFgw%3d%3d&cd=Iu%2fluE… 21/38
03/04/2023, 21:04 Matemática e Física Aplicada a Jogos
https://student.ulife.com.br/ContentPlayer/Index?lc=gTaMjssRS5yNljuISRh7RA%3d%3d&l=hiTFLRrvYPpmNqfh9fVFgw%3d%3d&cd=Iu%2fluE… 22/38
03/04/2023, 21:04 Matemática e Física Aplicada a Jogos
https://student.ulife.com.br/ContentPlayer/Index?lc=gTaMjssRS5yNljuISRh7RA%3d%3d&l=hiTFLRrvYPpmNqfh9fVFgw%3d%3d&cd=Iu%2fluE… 23/38
A �igura a seguir, por sua vez, traz a imagem gerada pelo código do quadro anterior.
A ordem de chamada das funções dentro da “DesenhaCena” de�ine o modo como os objetos serão exibidos. No
código do quadro anterior (“Código de um programa OpenGL para desenho de três quadrados utilizando
transformações geométricas”), o quadrado 3 (verde) sofre todas as transformações chamadas antes de sua
exibição: escala, rotação e duas translações. Já o objeto 2 (azul) sofre apenas uma translação (a de
) enquanto o objeto 1 (vermelho) não sofre transformações, uma vez que não há nenhuma
chamada antes da sua função de desenho em meio ao código.
Todas as chamadas de desenho e de transformações listadas no código anterior são empilhadas e, somente
após do empilhamento de todas estas, a cena será gerada com a aplicação da matriz “ModelView”. A �igura a
seguir apresenta a imagem resultante do código do quadro anterior (“Código de um programa OpenGL para
desenho de três quadrados utilizando transformações geométricas”).
Quadro 1 - Código de um programa OpenGL para desenho de três quadrados utilizando transformações
geométricas.
Fonte: Elaborado pelo autor, 2019.
Figura 12 - Imagem gerada pelo código apresentado no Quadro 3.
Fonte: Elaborado pelo autor, 2019.
03/04/2023, 21:04 Matemática e Física Aplicada a Jogos
https://student.ulife.com.br/ContentPlayer/Index?lc=gTaMjssRS5yNljuISRh7RA%3d%3d&l=hiTFLRrvYPpmNqfh9fVFgw%3d%3d&cd=Iu%2fluE… 24/38
No entanto, podemos desejar isolar as transformações entre os objetos da cena, de modo que as
transformações de uma não inter�iram no outro (como ocorre com o objeto 3 que, como o objeto 2, também
sofre a translação de ). Para tanto, OpenGL possui duas funções especiais – a “glPushMatrix” e a
“glPopMatrix” – encarregadas de empilhar e desempilhar transformações na matriz corrente (“ModelView”),
respectivamente.
Observe o código anterior alterado com a inclusão das funções “glPushMatrix” e “glPopMatrix” no quadro a
seguir.
Figura 13 - Ordem de desenho da cena referente ao código do Quadro 3.
Fonte: Elaborado pelo autor, 2019.
03/04/2023, 21:04 Matemática e Física Aplicada a Jogos
https://student.ulife.com.br/ContentPlayer/Index?lc=gTaMjssRS5yNljuISRh7RA%3d%3d&l=hiTFLRrvYPpmNqfh9fVFgw%3d%3d&cd=Iu%2fluE… 25/38
03/04/2023, 21:04 Matemática e Física Aplicada a Jogos
https://student.ulife.com.br/ContentPlayer/Index?lc=gTaMjssRS5yNljuISRh7RA%3d%3d&l=hiTFLRrvYPpmNqfh9fVFgw%3d%3d&cd=Iu%2fluE… 26/38
03/04/2023, 21:04 Matemática e Física Aplicada a Jogos
https://student.ulife.com.br/ContentPlayer/Index?lc=gTaMjssRS5yNljuISRh7RA%3d%3d&l=hiTFLRrvYPpmNqfh9fVFgw%3d%3d&cd=Iu%2fluE… 27/38
03/04/2023, 21:04 Matemática e Física Aplicada a Jogos
https://student.ulife.com.br/ContentPlayer/Index?lc=gTaMjssRS5yNljuISRh7RA%3d%3d&l=hiTFLRrvYPpmNqfh9fVFgw%3d%3d&cd=Iu%2fluE… 28/38
A seguir, a �igura apresenta a imagem gerada pelo código do quadro anterior.
Após a aplicação de transformações geométricas sobre objetos de uma cena grá�ica, passa-se para a etapa de
recorte, onde é de�inida que parte da cena será exibida na imagem. A próxima seção apresenta os aspectos da
etapa de recorte.
Quadro 2 - Código do quadro anterior com a inclusão das funções “glPushMatrix” e “glPopMatrix”.
Fonte: Elaborado pelo autor, 2019.
Figura 14 - Imagem gerada pelo código apresentado no quadro anterior.
Fonte: Elaborado pelo autor, 2019.
1.4 Recorte 2D
Após a realização da modelagem geométrica de um objeto e do instanciamento deste, é necessário de�inir a
região da cena que será exibida na imagem �inal. Para tanto, conceitos de recorte 2D e de mapeamento de
imagem, no SRU, para coordenadas de tela devem ser aplicados.
03/04/2023, 21:04 Matemática e Física Aplicada a Jogos
https://student.ulife.com.br/ContentPlayer/Index?lc=gTaMjssRS5yNljuISRh7RA%3d%3d&l=hiTFLRrvYPpmNqfh9fVFgw%3d%3d&cd=Iu%2fluE… 29/38
Neste sentido, esta seção aborda relação “viewport x janela de exibição x tela do dispositivo grá�ico” e traz
exemplos e conceitos implementados com a biblioteca grá�ica OpenGL. Já no espaço 3D, esses conceitos estão
relacionados à de�inição de projeções e câmera.
1.4.1 Recorte 2D e Exibição da Imagem
O processo de recorte 2D, ou clipping, visa a de�inir a área do SRU que será visı́vel na imagem �inal. Para tanto,
é preciso de�inir uma janela de recorte tal como exempli�icado na �igura a seguir.
VOCÊ QUER LER?
A leitura dos capıt́ulos 1 e 2 (2.1 e 2.2) do livro “Introduction to Computer Graphics”
(ECK, 2018) reforça a apresentação dos conteúdos apresentados nesta unidade.
Acesse:
http://math.hws.edu/eck/cs424/downloads/graphicsbook-linked.pdf
(http://math.hws.edu/eck/cs424/downloads/graphicsbook-linked.pdf ).
http://math.hws.edu/eck/cs424/downloads/graphicsbook-linked.pdf
03/04/2023, 21:04 Matemática e Física Aplicada a Jogos
https://student.ulife.com.br/ContentPlayer/Index?lc=gTaMjssRS5yNljuISRh7RA%3d%3d&l=hiTFLRrvYPpmNqfh9fVFgw%3d%3d&cd=Iu%2fluE… 30/38
Assim que a porção visı́vel do SRU é de�inida através do recorte, esta deve ser mapeada para a imagem e, para
tanto, as dimensões da imagem devem ser especi�icadas cuidando a relação entre recorte eimagem.
O recorte aplica procedimentos especı́�icos para o recorte de pontos, retas e ou polı́gonos (ver �igura a seguir).
Figura 15 - Exemplo de recorte 2D.
Fonte: Elaborado pelo autor, 2019.
Figura 16 - Diferentes tipos de recorte 2D: (a) Pontos; (b) Retas; (c) Polı́gonos.
Fonte: Elaborado pelo autor, 2019.
03/04/2023, 21:04 Matemática e Física Aplicada a Jogos
https://student.ulife.com.br/ContentPlayer/Index?lc=gTaMjssRS5yNljuISRh7RA%3d%3d&l=hiTFLRrvYPpmNqfh9fVFgw%3d%3d&cd=Iu%2fluE… 31/38
Após a delimitação da região visı́vel do SRU pelo recorte, devemos realizar a conversão vetorial-matricial, em
que são de�inidos quais pixels da imagem �inal devem ser “pintados”, de modo a exibir os objetos modelados.
Algoritmos clássicos da Computação Grá�ica para recorte e conversão vetorial-matricial não serão descritos
neste material, mas recomenda-se a sua leitura a �im da obtenção de informações sobre o processo.
Ao exibir um objeto 2D em OpenGL, por default, é exibido por inteiro se os valores de suas coordenadas "x" e
"y" não ultrapassarem 1 ou -1, considerando que a origem do SRU se encontra no centro da janela, do
contrário, é realizado um recorte pelo sistema. No entanto, tais aspectos podem ser alterados através do uso
da função "gluOrtho2D", que permite de�inir a área visı́vel do SRU na imagem �inal.
O quadro a seguir traz um exemplo de código usando tais conceitos de recorte 2D enquanto a �igura a seguir
(“Imagem gerada pelo código do quadro Código exempli�icando o uso da “gluOrtho2D") apresenta a imagem
gerada por este código. Pode-se notar que a "gluOrtho2D" está recebendo como parâmetros valores entre -1 e
1, os quais não farão diferença à cena caso tal função seja retirada pois são os valores default de recorte do
OpenGL.
03/04/2023, 21:04 Matemática e Física Aplicada a Jogos
https://student.ulife.com.br/ContentPlayer/Index?lc=gTaMjssRS5yNljuISRh7RA%3d%3d&l=hiTFLRrvYPpmNqfh9fVFgw%3d%3d&cd=Iu%2fluE… 32/38
03/04/2023, 21:04 Matemática e Física Aplicada a Jogos
https://student.ulife.com.br/ContentPlayer/Index?lc=gTaMjssRS5yNljuISRh7RA%3d%3d&l=hiTFLRrvYPpmNqfh9fVFgw%3d%3d&cd=Iu%2fluE… 33/38
03/04/2023, 21:04 Matemática e Física Aplicada a Jogos
https://student.ulife.com.br/ContentPlayer/Index?lc=gTaMjssRS5yNljuISRh7RA%3d%3d&l=hiTFLRrvYPpmNqfh9fVFgw%3d%3d&cd=Iu%2fluE… 34/38
03/04/2023, 21:04 Matemática e Física Aplicada a Jogos
https://student.ulife.com.br/ContentPlayer/Index?lc=gTaMjssRS5yNljuISRh7RA%3d%3d&l=hiTFLRrvYPpmNqfh9fVFgw%3d%3d&cd=Iu%2fluE… 35/38
Quando são aplicadas transformações geométricas aos objetos da cena, deve-se chamar novamente as funções
"glMatrixMode" e "glLoadIdentity", após a de�inição da função "gluOrtho2D”, passando "GL_MODELVIEW"
como parâmetro para a primeira. Isso é necessário em função da necessidade de preparar o ambiente para a
alteração das coordenadas dos vértices do objeto pelas transformações.
Além do recorte realizado com a função "gluOrtho2D", outra função é oferecida pela OpenGL relacionada ao
recorte – a “glViewport” (melhor detalhada na próxima seção). Viewport é o conceito para a região, dentro da
janela de exibição, em que a imagem será visualizada (ver �igura a seguir).
Como podemos observar, é possı́vel a exibição de mais de uma viewport em uma mesma janela de exibição.
1.4.2 Relação Viewport x Janela de Exibição x Tela do Dispositivo Gráfico
Quadro 3 - Código exempli�icando o uso da “gluOrtho2D".
Fonte: Elaborado pelo autor, 2019.
Figura 17 - Janela de recorte, viewport e janela de exibição.
Fonte: Elaborado pelo autor, 2019.
03/04/2023, 21:04 Matemática e Física Aplicada a Jogos
https://student.ulife.com.br/ContentPlayer/Index?lc=gTaMjssRS5yNljuISRh7RA%3d%3d&l=hiTFLRrvYPpmNqfh9fVFgw%3d%3d&cd=Iu%2fluE… 36/38
Além dos sistemas de referência do universo (SRU) e do objeto (SRO), um terceiro sistema deve ser
considerado na exibição de uma imagem – o sistema de referência da tela (SRT) do dispositivo grá�ico -,
de�inido em termos de pixels e cuja origem está posicionada no canto superior esquerdo.
Neste sentido, a janela de exibição OpenGL mede, por default, 300 x 300 pixels em relação ao SRT, sendo
posicionada na origem do mesmo (ver �igura a seguir).
VOCÊ O CONHECE?
Nolan Bushnell e Ted Dabney fundaram a Atari no inıćio dos anos 70 e lançaram o jogo
Pong, o qual rapidamente se tornou um sucesso, representando a primeira máquina
de videogame arcade comercialmente bem-sucedida, a qual auxiliou no
estabelecimento da indústria de videogames.
03/04/2023, 21:04 Matemática e Física Aplicada a Jogos
https://student.ulife.com.br/ContentPlayer/Index?lc=gTaMjssRS5yNljuISRh7RA%3d%3d&l=hiTFLRrvYPpmNqfh9fVFgw%3d%3d&cd=Iu%2fluE… 37/38
A de�inição da viewport, por sua vez, é realizada em relação às coordenadas da janela de exibição OpenGL (em
pixels), que possui origem no canto inferior esquerdo. Se a viewport não for de�inida, seus valores coincidem
com os valores da janela de exibição.
Figura 18 - Relação Janela de Exibição OpenGL x Tela do Dispositivo Grá�ico.
Fonte: Elaborado pelo autor, 2019.
Síntese
Nesta unidade, tivemos a oportunidade de estudar os principais conceitos de Matemática e Fı́sica
relacionados a jogos digitais no espaço 2D.
Nesta unidade, você teve a oportunidade de:
trabalhar conceitos Sistemas Gráficos Interativos;
trabalhar conceitos Modelagem geométrica 2D;
trabalhar conceitos Transformações geométricas 3D;
trabalhar conceitos Recorte.
•
•
•
•
03/04/2023, 21:04 Matemática e Física Aplicada a Jogos
https://student.ulife.com.br/ContentPlayer/Index?lc=gTaMjssRS5yNljuISRh7RA%3d%3d&l=hiTFLRrvYPpmNqfh9fVFgw%3d%3d&cd=Iu%2fluE… 38/38
Bibliografia
ANGEL, E. Interactive	Computer	Graphics: A Top-Down Approach with OpenGL. 3. ed. São Paulo: Addison-
Wesley, 2003.
ANTON, H.; RORRES, C. Álgebra	Linear	com	Aplicações. 8. ed. São Paulo: Bookman, 2000.
AZEVEDO, E. Computação	Grá�ica. São Paulo: Campus, 2003.
BOURG, D. M.; BYWALEC, B. Physics	 for	 Game	 Developers: Science, math, and code for realistic effects.
Newton: O'Reilly Media, 2013.
COHEN, M.; MANSSOUR, I. H. OpenGL: uma abordagem prática e objetiva. São Paulo: Novatec, 2006.
ECK, D. J. Introduction	to	Computer	Graphics. 1.2 ed. Geneva: Addison-Wesley Professional, 2018.
FOLEY, J. et	al. Computer	Graphics – Principles and Practice. São Paulo: Addison-Wesley, 1990.
GOMES, J. Fundamentos	da	Computação	Grá�ica. Brası́lia: IMPA, 2008.
HILL JR., F. S. Computer Graphics using OpenGL (http://www.prenhall.com/hill/). 2. ed. Nova Jersey: Prentice-
Hall, 2001.
OPENGL. The	 Industry's	 Foundation	 for	 High	 Performance	 Graphics. Disponı́vel em: www.opengl.org
(http://www.blender.org). Acesso em: 26 set. 2019.
SHREINER, D.; WOO, M.; NEIDER, J.; DAVIS, T. OpenGL	 Programming	 Guide. 4. ed. São Paulo: Addison-
Wesley, 2004.
SILVA, I. C. S. Aprendendo	computação	grá�ica	com	OpenGL	e	Blender. Porto Alegre: UniRitter, 2007.
WATT, A. 3D	Computer	Graphics. 3. ed. São Paulo: Addison-Wesley, 2000.
WIEDERMANN, J. Animation	Now! Colonia: Taschen, 2004.
http://www.prenhall.com/hill/
http://www.blender.org/