elementos de computa¸c˜ao gr´afica utilizados em jogos...

37
Universidade Estadual de Campinas - UNICAMP Faculdade de Engenharia El´ etrica e de Computa¸ c˜ao-FEEC UNICAMP Elementos de Computa¸c˜ ao Gr´ afica utilizados em Jogos Digitais 2D opicos em Engenharia de Computa¸ ao VI Introdu¸ ao aos Jogos Digitais Maycon Prado Rocha Silva Paula Dornhofer Paro Costa Paulo S´ ergio Prampero Vera Aparecida de Figueiredo Campinas, outubro 2009

Upload: phungtuong

Post on 08-Nov-2018

220 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Elementos de Computa¸c˜ao Gr´afica utilizados em Jogos ...martino/disciplinas/ia369/trabalhos/t3g1.pdf · mais realista do mundo do jogo. ... ferˆencia, impress˜ao ou reproduc¸˜ao,

Universidade Estadual de Campinas - UNICAMPFaculdade de Engenharia Eletrica e de Computacao - FEEC

UNICAMP

Elementos de Computacao Grafica

utilizados em Jogos Digitais 2D

Topicos em Engenharia de Computacao VI

Introducao aos Jogos Digitais

Maycon Prado Rocha Silva

Paula Dornhofer Paro Costa

Paulo Sergio Prampero

Vera Aparecida de Figueiredo

Campinas, outubro 2009

Page 2: Elementos de Computa¸c˜ao Gr´afica utilizados em Jogos ...martino/disciplinas/ia369/trabalhos/t3g1.pdf · mais realista do mundo do jogo. ... ferˆencia, impress˜ao ou reproduc¸˜ao,

Sumario

Resumo 2

1 Introducao 3

2 Categorizacao de jogos segundo a tecnologia grafica empregada 4

3 Dispositivos de Hardware 5

4 Imagens “bitmap” no contexto de jogos 6

4.1 Cenas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94.2 Visualizacao e animacao . . . . . . . . . . . . . . . . . . . . . . . . . . 11

5 Graficos vetoriais no contexto de jogos 14

5.1 Jogos baseados em graficos vetoriais . . . . . . . . . . . . . . . . . . . . 165.2 Flash e Action Script . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185.3 Jogos em Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 195.4 SVG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20

6 Exemplos da tecnologia 2D aplicada em jogos educacionais 24

7 Jogos 2D em aparelhos celulares 29

8 Consideracoes Finais 33

Referencias 35

1

Page 3: Elementos de Computa¸c˜ao Gr´afica utilizados em Jogos ...martino/disciplinas/ia369/trabalhos/t3g1.pdf · mais realista do mundo do jogo. ... ferˆencia, impress˜ao ou reproduc¸˜ao,

Resumo

Este trabalho apresenta os principais aspectos e conceitos relacionados a modelagem,descricao e visualizacao de cenas e personagens de jogos digitais utilizando-se a tec-nologia grafica 2D. O trabalho aborda as duas vertentes principais: graficos baseadosem imagens do tipo bitmap e graficos vetoriais. Sao apresentados tambem exemplosde jogos educacionais baseados na tecnologia 2D, ressaltando que esta tecnologia, demenor custo e complexidade de desenvolvimento e processamento, pode ser bem apro-veitada em aplicacoes com objetivos voltados para um determinado tipo de publico einteresse. Finalmente realiza-se uma breve analise da evolucao da tecnologia de graficospara jogos em dispositivos “de bolso”, como aparelhos celulares ou assistentes digitaispessoais.

2

Page 4: Elementos de Computa¸c˜ao Gr´afica utilizados em Jogos ...martino/disciplinas/ia369/trabalhos/t3g1.pdf · mais realista do mundo do jogo. ... ferˆencia, impress˜ao ou reproduc¸˜ao,

1 Introducao

A evolucao dos jogos digitais ao longo do tempo esta intimamente relacionada a

evolucao do hardware responsavel pelo processamento e demonstracao de graficos e

dos algoritmos de computacao grafica associados.

Nas decadas de 70 e 80, os jogos digitais eram caracterizados por graficos 2D,

geralmente visualizados nas telas de maquinas de fliperama, televisores conectados a

consoles de videogames e monitores de PC monocromaticos. No inıcio da decada de

90, o advento da tecnologia de graficos 3D e a adicao de uma dimensao extra na re-

presentacao dos cenarios de jogos trouxe uma das maiores inovacoes da historia da

industria de jogos digitais [Rouse III 1998]. Desde entao, a possibilidade da repre-

sentacao de mundo mais realista e mais engajante, fez com que a tecnologia 3D fosse

rapidamente disseminada entre os tıtulos comerciais de jogos.

No entanto, o desenvolvimento de jogos utilizando graficos puramente 2D conti-

nuou sendo realizado, quer pela caracterıstica inerentemente 2D de determinados tipos

de jogos, quer pela popularizacao de tecnologias especıficas como jogos em Flash vas-

tamente disponibilizados na Web ou pelo atendimento a necessidades de graficos que

exigissem menor capacidade de processamento, como aparelhos celulares.

Este trabalho visa apresentar os principais aspectos relacionados a descricao, animacao

e visualizacao de cenas e personagens em jogos utilizando-se a tecnologia 2D. Para isso,

o trabalho apresenta inicialmente (Secao 2) como os jogos podem ser categorizados se-

gundo a tecnologia grafica que eles utilizam. Em seguida, apresenta-se uma breve

descricao sobre o hardware utilizado para visualizacao de imagens em computadores

(Secao 3). Nas secoes 4 e 5 sao apresentadas as principais definicoes associadas a

graficos 2D do tipo bitmap e vetoriais a partir da visao do desenvolvimento de jogos.

Por ultimo, o trabalho busca fornecer um panorama de dois nichos em que os jogos

2D sao encontrados, os nichos de jogos educacionais (Secao 6) e jogos para celulares

(Secao 7).

3

Page 5: Elementos de Computa¸c˜ao Gr´afica utilizados em Jogos ...martino/disciplinas/ia369/trabalhos/t3g1.pdf · mais realista do mundo do jogo. ... ferˆencia, impress˜ao ou reproduc¸˜ao,

2 Categorizacao de jogos segundo a tecnologia grafica

empregada

Considerando-se as os jogos existentes, e possıvel classifica-los em 4 categorias segundo

as tecnologias graficas utilizadas para implementa-los:

• Jogos 2D: implementados a partir de graficos puramente bidimensionais com

uma unica camada. Esta tecnologia foi utilizada pelos primeiros jogos digitais e

foi bastante disseminada em plataformas como Atari ou jogos de fliperama como:

Pong, Space Invaders, Pac-Man.

• Jogos 2.5D: o conceito de jogo 2.5D (ou pseudo-3D) e geralmente atribuıdo a

jogos em que, as abordagens 2D e 3D sao combinadas visando uma reproducao

mais realista do mundo do jogo. Sao considerados jogos 2.5D jogos em que perso-

nagens modelados em imagens 2D se movimentam no plano diante de um cenario

renderizado de elementos modelados tridimensionalmente, personagens 3D em

um fundo (background) 2D ou, mais classicamente, um cenario que busca dar a

aparencia da existencia da dimensao de profundidade a partir da sobreposicao de

imagens 2D.

• Jogos 3D: jogos 3D sao considerados aqueles em que o mundo do jogo e modelado

tridimensionalmente e o jogador e capaz de se mover para qualquer direcao no

espaco, sendo o motor do jogo responsavel por dinamicamente calcular e mostrar

na tela a visao do jogador.

• Jogos estereoscopicos : jogos em que a ilusao de profundidade em uma imagem e

criada apresentando-se imagens ligeiramente diferentes para cada olho. Tipica-

mente requerem o uso de algum aparato especial como oculos ou capacete.

Este trabalho aborda os elementos graficos mais utilizados em Jogos 2D e 2.5D.

4

Page 6: Elementos de Computa¸c˜ao Gr´afica utilizados em Jogos ...martino/disciplinas/ia369/trabalhos/t3g1.pdf · mais realista do mundo do jogo. ... ferˆencia, impress˜ao ou reproduc¸˜ao,

3 Apresentando imagens em uma tela

Os primeiros tıtulos de sucesso de videogames para computadores pessoais (PCs), con-

soles ou fliperamas, baseavam-se na tecnologia de monitores de tubos de raios catodicos

para apresentarem seus graficos.

Os monitores CRT (Catodic Ray Tube) utilizam uma tecnologia descoberta ainda

no inıcio do seculo, mas ao mesmo tempo incorporaram tantos avancos que e impossıvel

nao se surpreender com o nıvel de qualidade que alcancaram.

O princıpio de funcionamento de um monitor CRT e usar um canhao de eletrons,

montado na parte de tras do tubo de imagem para acender as celulas de fosforo que

compoe a imagem. O canhao emite eletrons, que possuem carga negativa. Para atraı-

los ate a parte frontal do tubo e utilizada uma cinta metalica chamada de anodo, que

e carregada com cargas positivas.

O canhao bombardeia uma a uma as celulas de fosforos, sempre da esquerda para a

direita e de cima para baixo. Ao bombardear a ultima celula ele volta a posicao inicial

e recomeca a varredura. O numero de vezes por segundo que o canhao e capaz de

bombardear a tela e chamada de taxa de atualizacao. Para que a imagem seja solida

a taxa de atualizacao deve ser de pelo menos 75 Hz (75 vezes por segundo).

Com menos que isto surge o flicker, que ocorre devido a perda de luminosidade das

celulas de fosforo do monitor. Usando uma taxa de renovacao de menos de 75Hz, o

tempo que o feixe de eletrons demora para passar e muito longo, fazendo com que celulas

percam parte do seu brilho, sendo reacendidas bruscamente na proxima passagem do

feixe de eletrons. Isto faz com que as celulas pisquem, tornando a imagem instavel.

Um detalhe importante e que todos os monitores de CRT sao analogicos, ja que

sinais eletricos de diferentes intensidades controlam o movimento e a potencia do feixe

de eletrons do monitor. Os monitores de LCD e outras tecnologias, como os OLED sao

totalmente digitais, ja nao possuem mais o problema do flicker, mas em compensacao

sao bem mais caros.

5

Page 7: Elementos de Computa¸c˜ao Gr´afica utilizados em Jogos ...martino/disciplinas/ia369/trabalhos/t3g1.pdf · mais realista do mundo do jogo. ... ferˆencia, impress˜ao ou reproduc¸˜ao,

Assim, para monitores CRT, a memoria RAM do computador esta conectada di-

retamente a um conversor digital-analogico, ou DAC (digital-to-analog converter). O

par RAM/DAC, chamado RAMDAC, traduz a imagem para um sinal analogico que

o monitor pode utilizar. Algumas placas possuem multiplos RAMDAC que podem

melhorar o desempenho e suportam mais de um monitor.

O RAMDAC envia a imagem final para o monitor atraves de um cabo. O conector

VGA transporta os sinais analogicos referentes as tres cores primarias (azul, verde e

vermelho), alem dos sinais de sincronismo horizontal e vertical. Como o nome sugere,

estes dois ultimos sao responsaveis pelo movimento do canhao de eletrons do monitor,

que varre toda a tela continuamente, atualizando cada pixel com os sinais referentes

as tres cores.

Variando rapidamente as tensoes fornecidas, a placa de vıdeo consegue que cada um

dos tres pontos que compoe cada pixel brilhem numa intensidade diferente, formando

a imagem. Quando e necessario obter um pixel branco, sao usadas as tensoes maximas

para os tres pixels.

4 Imagens “bitmap” no contexto de jogos

Uma imagem, do ponto de vista do olho humano, e a projecao em um plano (retina)

das energias luminosas presentes no espaco sob a forma de ondas de radiacao eletro-

magneticas que interferem com os objetos reais. Uma imagem real e contınua tanto

em termos de sua representacao espacial (coordenadas espaciais) como em relacao ao

seu brilho (amplitude). Para que uma representacao desta imagem possa ser realizada

em um computador digital e necessario digitaliza-la [Silva 1996].

O processo de digitalizacao e composto de amostragem, quantificacao e codificacao.

A amostragem consiste em transformar uma variacao contınua em uma sucessao de

elementos discretos. Na quantificacao atribuir valores aos elementos amostrados em

uma escala de medicao. Codificar consiste em estabelecer uma correspondencia entre

6

Page 8: Elementos de Computa¸c˜ao Gr´afica utilizados em Jogos ...martino/disciplinas/ia369/trabalhos/t3g1.pdf · mais realista do mundo do jogo. ... ferˆencia, impress˜ao ou reproduc¸˜ao,

um conjunto de partida (o conjunto de pontos na escala de medicao) e um conjunto de

chegada composto de valores codigo (sequencias binarias de tamanho uniforme).

Portanto, a imagem digital e o resultado da transformacao da funcao matematica

f(x,y), com valores contınuos pertencentes ao conjunto (0,∝), em uma outra funcao

matematica F(x,y) cujos valores sao discretos.

A funcao F(x,y) e definida por uma matriz M x N, onde cada elemento desta matriz

representa uma quantidade discreta. Os elementos que definem a funcao discreta F(x,y)

sao chamados pixels, representando a abreviacao de picture elements [Silva 1996].

A resolucao de uma imagem pode ser definida como sendo a qualidade de observacao

dos detalhes discernıveis e, depende diretamente do numero de pixels que caracteriza

o tamanho da imagem, como tambem, da representacao da cor de cada pixel. Assim,

para uma imagem real com tamanho definido, quanto maior for o numero de pixels

que a descreve, maior sera sua resolucao espacial. A resolucao de profundidade desta

imagem esta diretamente relacionada com a quantidade de cores que pode ser atribuıda

a cada pixel que a constitui.

Nas imagens coloridas o valor numerico de cada pixel representa uma grandeza

vetorial associada a cor de cada ponto correspondente, por exemplo, azul, verde e

vermelho, considerando o modelo de cores basicas RGB. Este modelo e baseado em um

sistema de coordenadas cartesianas.

Uma imagem digital, portanto, e a representacao de uma imagem bidimensional

usando numeros binarios codificados de modo a permitir seu armazenamento, trans-

ferencia, impressao ou reproducao, e seu processamento por meios eletronicos.

Uma imagem digital do tipo raster, ou bitmap, ou ainda matricial, e aquela que em

algum momento apresenta uma correspondencia bit-a-bit entre os pontos da imagem

raster e os pontos da imagem reproduzida na tela de um monitor.

As imagens bitmap (mapa de bits) sao tal como o nome indica, um mapa de bits

que formam uma imagem. A imagem consiste numa matriz de pontos individuais (ou

pixels) em que cada um tem a sua propria cor. O olho humano nao e capaz de ver

7

Page 9: Elementos de Computa¸c˜ao Gr´afica utilizados em Jogos ...martino/disciplinas/ia369/trabalhos/t3g1.pdf · mais realista do mundo do jogo. ... ferˆencia, impress˜ao ou reproduc¸˜ao,

cada pixel individualmente, ficando entao com a percepcao de uma imagem com suaves

gradacoes.

Associado a cada pixel pode-se armazenar informacoes de cor em uma forma numerica

(ou digital). A informacao de cor pode ser descrita usando determinados espacos de

cor: RGB, CMYK ou Lab, por exemplo.

Alem da qualidade espacial da imagem, quantidade de pixels que possui, pode ser

necessario que a imagem tenha uma boa qualidade de profundidade. Neste caso, e

necessario utilizar mais bits para representar a cor da imagem.

Por exemplo, truecolor denomina um metodo de armazenamento de dados na

memoria de um computador onde cada pixel e representado por tres ou mais bytes.

Um byte (oito bits) por canal representa 256 ou 28 intensidades de cor para cada um

dos canais, o que nos da 16.777.216 cores para cada pixel. Acredita-se que o olho

humano consegue distinguir algo em torno de 10 milhoes de cores, portanto, o sistema

se chama truecolor justamente por mostrar mais cores que o olho humano pode ver

e, consequentemente, da a ilusao de cores reais. O truecolor de 24 bits utiliza 8 bits

para representar cada uma das cores RGB. Os 256 (28) nıveis que combinados geram

16.777.216 cores (256 x 256 x 256).

Uma concepcao errada e a de que o sistema de 32 bits produz 4 294 967 296 cores

distintas. Na verdade, uma coloracao de 32 bits atualmente se refere a uma coloracao

truecolor de 24 bits com um adicional de 8 bits, como espaco vazio para representar o

canal alfa [Silva 1996].

Quando os valores da profundidade das cores aumentam, torna-se inviavel manter

uma paleta de cores devido a progressao exponencial da quantidade de valores que um

pixel pode suportar. Ha casos em que se prefere codificar em cada pixel os tres valores

de intensidade luminosa que compoem o modelo de cor RGB.

Por limitacoes do hardware disponıvel, frequentemente se trabalha com um numero

de cores reduzido. Um numero tıpico e 256, que exige, para cada pixel, 1 byte de

memoria. Assim cada cor basica pode variar entre 0 e 255, com a limitacao de que,

8

Page 10: Elementos de Computa¸c˜ao Gr´afica utilizados em Jogos ...martino/disciplinas/ia369/trabalhos/t3g1.pdf · mais realista do mundo do jogo. ... ferˆencia, impress˜ao ou reproduc¸˜ao,

simultaneamente, nao se pode ter mais do que 256 cores distintas em exibicao. Dessa

forma o codigo da cor, por si so, nao determina mais os nıveis de R, G e B, mas depende

da consulta a tabela, daı o termo pseudo-color.

Como 256 e um limite pequeno, muitas aplicacoes alocam um colormap privado,

fazendo com que, ao ser dado foco a essa aplicacao, todas as cores na tela, exceto

aquelas da janela em foco, mudem subitamente, provocando efeitos curiosos.

4.1 Cenas

Uma cena pode ser descrita como um agrupamento dos elementos visıveis. Neste caso

a cena e uma composicao de imagens bitmap. Para esta composicao e possıvel utilizar

transparencias com uma ou mais camadas.

Na construcao de uma camada, um fundo e colocado e os elementos de cena sao

sobrepostos. Para que os elementos de cena nao fiquem sempre quadrados, uma vez

que o bitmap e quadrado, transparencias sao utilizadas nas bordas destas imagens

colocadas. Assim as partes do bitmap que nao precisa aparecer ficam transparentes. A

camada tambem pode possuir partes transparentes. Por fim as camadas sao agrupadas

formando a impressao de profundidade [Harbour 2009].

O grupo MPEG desenvolveu uma linguagem binaria para especificar a descricao da

cena MPEG-4, dando a essa linguagem o nome de BIFS (BInary Format for Scenes).

A estrutura BIFS de uma cena MPEG-4 e descrita atraves de uma hierarquia, que

pode ser representada por um grafo direcionado acıclico. Sua codificacao comeca do

no mais ao topo e segue para baixo em cada ramo (caminhamento em profundidade

pela esquerda).

Um grande problema associado aos bitmaps como fundo de imagens, e que estes

arquivos devem ser gigantescos para conter todo o fundo do jogo, sem haver reutilizacao

de imagens.

A maioria dos jogos 2D sao conhecidos como Tile Based Games porque usam uma

tecnica muito comum de construcao de cenarios baseados em mapa de tiles (azulejos).

9

Page 11: Elementos de Computa¸c˜ao Gr´afica utilizados em Jogos ...martino/disciplinas/ia369/trabalhos/t3g1.pdf · mais realista do mundo do jogo. ... ferˆencia, impress˜ao ou reproduc¸˜ao,

A ideia e que se tem varios blocos de mesmo tamanho, mas com diferentes imagens e

que o cenario e montado a partir da juncao desses blocos de uma forma organizada. O

tamanho mais comum para um bloco e de 32x32 pixels. Entao um mapa que ocupe a

tela toda (640x480) teria 20 posicoes no eixo de X e 15 no eixo de Y. Note que no lado

direito da figura estao os “azulejos” que podem ser combinados para formar cenarios,

por exemplo, a figura do lado direito.

Figura 1: Exemplo de tile map

Uma maneira de obter transparencia e atraves da composicao Alfa, que e um pro-

cesso de combinar uma imagem com um fundo para criar a transparencia. Esta tecnica

e utilizada para processar elementos da imagem em passos separados, para combinar

varias imagens em uma so. Para isso e preciso do canal Alfa. Ele e uma mascara que

especıfica como as cores serao unificadas com outros pixels quando estiverem um em

cima do outro.

Dessa forma, o canal Alfa tem todas as informacoes que diz onde deve ser comple-

tamente transparente, onde deve ser meio transparente e onde e completamente opaco.

Isso ocorre pelo uso da cor preta, branca e cinza. E possıvel dizer que o canal alfa

e o quarto elemento da cor de um pixel. Alem de Red (vermelho), Green (verde),

10

Page 12: Elementos de Computa¸c˜ao Gr´afica utilizados em Jogos ...martino/disciplinas/ia369/trabalhos/t3g1.pdf · mais realista do mundo do jogo. ... ferˆencia, impress˜ao ou reproduc¸˜ao,

Blue (azul) - que formam a sigla RGB - tambem ha o Alfa, que define quao opaca ou

transparente sera a imagem.

O canal alfa pode ser associado tambem com alguma cor que deve ser trocada

por transparente. Como exemplo disso pode ser citado o recurso do Chroma Key. As

personagens ficam na frente de paredes verdes (ou azuis) e depois, na edicao, esse fundo

verde e identificado pelo computador como uma cor Alfa e e alterado como se fosse

transparente [Harbour 2009].

O canal alfa define a opacidade de um pixel numa imagem. Esta e uma das princi-

pais vantagens do formato de imagem aberto PNG, recomendado pela W3C para uso

na web. Alguns editores de imagem mostrarem quatro elementos para definir uma cor:

R, G, B e A que sao o Vermelho, Verde, Azul e o Alfa. Todos sao definidos entre [0 ...

1] (valores reais) ou [0 ... 255] (valores inteiros) ou [00 ... FF] (valores hexadecimais)

onde o valor maximo para o elemento alfa significa que o pixel sera totalmente opaco

e o valor mınimo significa transparencia total.

Com uma imagem PNG sua borda pode ser feita com reducao da opacidade dos pi-

xels de menor importancia. Assim a imagem PNG se encaixara suavemente a qualquer

fundo, mesmo com multiplas cores.

Os games utilizam esse canal Alfa para dizer onde deve ser transparente e unir

todos os elementos dentro dos jogos, sejam pecas do cenario ou personagens. Funciona

da mesma maneira que o Chroma Key: um personagem tera uma cor solida em volta

dele (normalmente rosa ou verde) para enviar ao jogo a informacao de que em nessa

regiao deve ser transparente e, no corpo do personagem, deve ser visıvel.

Alem disso, o formato PNG permite comprimir as imagens sem perda de qualidade

e retirar o fundo de imagens com o uso do canal alfa. O canal alfa, diferentemente da

transparencia do GIF, e capaz de definir o nıvel de opacidade de cada pixel, adequando-

se a qualquer fundo, sem serrilhamento.

11

Page 13: Elementos de Computa¸c˜ao Gr´afica utilizados em Jogos ...martino/disciplinas/ia369/trabalhos/t3g1.pdf · mais realista do mundo do jogo. ... ferˆencia, impress˜ao ou reproduc¸˜ao,

4.2 Visualizacao e animacao

Para poder exibir uma imagem no monitor de forma que cada pixel possa ter uma dentre

224 possıveis cores, e necessario dispor, para cada pixel, de 24 bits (ou seja, 3 bytes)

para armazenar a sua cor. Numa resolucao de 1280x1024, isso exige 1280x1024x3 =

3.932.160 bytes, ou seja, a sua adaptadora grafica necessita de no mınimo 4 megabytes

de memoria.

Inicialmente, as tecnicas de animacao eram baseadas em representacao bidimensi-

onal, em que cada imagem era desenhada em 2D, e outras em sequencia, formando

uma animacao. Esta tecnica ainda e utilizada hoje em dia, porem com o a utilizacao

de computadores como ferramenta na criacao de animacoes, houve um grande avanco,

surgindo a animacao de objetos tridimensionais, trazendo tambem um grande aumento

na complexidade. A animacao quadros-chave (Keyframe)e derivada diretamente das

tecnicas de animacao tradicional, nas quais o animador determina o que deve ser apre-

sentado em cada quadro e, portanto, como ferramenta de apoio na determinacao de

quadros intermediarios que interpolarao os quadros-chave determinados pelo usuario.

Embora este tipo de sistema forneca quase que completamente o controle da cena ao

animador, tal metodo e bem deficiente na criacao de sequencias alem de ser muito

trabalhoso.

A animacao procedimental fundamenta-se na capacidade do computador em deter-

minar a cinematica de uma sequencia baseando-se em instrucoes implıcitas ao inves

de posicoes explıcitas. Uma classe de metodos procedimentais consiste na “cinematica

inversa”, onde o objetivo final de uma sequencia e especificado pelo animador, sendo

os movimentos consequentes determinados por algoritmos [Camilo 2006].

Nos jogos 2D e muito utilizado o termo sprite. Sprites sao os personagens que

aparecem no jogo, que interagem uns com os outros e com o cenario. Eles podem

correr, pular, voar, nadar, lutar e atirar. Geralmente, o jogo fornece um sprite que

representa o personagem principal controlado pelo jogador. Os outros sprites podem

ser monstros e inimigos que perseguem o jogador, ou objetos que o jogador pode pegar,

12

Page 14: Elementos de Computa¸c˜ao Gr´afica utilizados em Jogos ...martino/disciplinas/ia369/trabalhos/t3g1.pdf · mais realista do mundo do jogo. ... ferˆencia, impress˜ao ou reproduc¸˜ao,

tal como moedas e armas. Note na figura a sequencia de animacao. Cada sequencia

de imagens pode estar associada a um controle. Desta forma, ao detectar o evento o

jogo exibe a sequencia de imagens, e no caso da caminhada altera o posicionamento da

imagem exibida.

Figura 2: Sprite:Sequencia de animacao

Um sprite pode executar diversos tipos de movimentos que devem ser representados

visualmente para dar mais realismo ao jogo. Desta forma, a estrutura de dados que

representa os sprites deve permitir que varios quadros sejam armazenados para que

seja possıvel escolher no decorrer do jogo qual o quadro que representa o estado atual

do sprite. Para a producao de animacoes em jogos 2D e preciso armazenar todos os

quadros que serao utilizados, de forma semelhante a um desenho animado.

Os objetos que constituem o mundo de um jogo possuem forma assim como uma

posicao no espaco [Lamothe 1999]. Como a lei da fısica ja afirmava que dois corpos nao

podem ocupar o mesmo espaco ao mesmo tempo, o mesmo deve ser respeitado ao criar

jogos. Para jogos 2D sao inumeros os metodos para a verificacao de colisoes. Partindo

do princıpio de que cada elemento possui uma posicao (x, y), uma largura e uma altura

tem se assim um quadrado. O metodo mais simples constitui-se na verificacao de que

algum retangulo invade o espaco de outro. Essa solucao e rapida, porem apresenta um

13

Page 15: Elementos de Computa¸c˜ao Gr´afica utilizados em Jogos ...martino/disciplinas/ia369/trabalhos/t3g1.pdf · mais realista do mundo do jogo. ... ferˆencia, impress˜ao ou reproduc¸˜ao,

resultado nao realıstico. Estes quadrados podem ser inscritos ou circunscritos, ou ate

um grupamento de quadrados [Camilo 2006].

Outro metodo e representar o espaco utilizado pelo objeto como uma circunferencia.

Para determinar se houve uma colisao calcula-se a distancia (distancia entre pontos)

entre os dois objetos. Para uma colisao existir o resultado desse calculo deve ser menor

ou igual a soma dos raios dos objetos multiplicados por uma constante que representa

o quanto da circunferencia e utilizada pelos objetos. Inumeros sao os metodos para a

deteccao de colisao podendo chegar ao nıvel de checar a colisao pixel a pixel, obtendo

assim um resultado perfeito.

Apos a verificacao da existencia ou nao de uma colisao e obtendo uma resposta

positiva deve-se modelar o resultado da mesma. Utilizando uma colisao entre naves

para exemplificar, o resultado ocasionaria a mudanca de direcao, uma perda de velo-

cidade e uma perda de energia dos objetos que colidiram. Para modelar os efeitos de

uma colisao leva-se em consideracao entre outros a massa, a velocidade e a direcao dos

objetos.

5 Graficos vetoriais no contexto de jogos

Uma imagem vetorial representa suas formas atraves de expressoes matematicas ba-

seadas em um conjunto de pontos com distancias proporcionais representando linhas

e curvas. Este tipo de representacao permite o computador interpretar imagens de

forma similar a interpretacao humana, distinguindo objetos e formas. Segundo Lynn

Pocock, graficos vetoriais passaram a significar graficos definidos por linhas, se apli-

cando a graficos 2d e 3d. Graficos vetoriais podem ser representados pelo computador

atraves de uma lista de dados matematicos denominados display list,apresentado na

figura abaixo 3. Um exemplo de dados e (0.5,0.1) e (-0.1,0.2).

A figura e um esboco de uma porta de entrada,(a propria memoria)e uma porta

de saıda.O usuario direciona o CPU para mover os pontos atraves de um periferico.

14

Page 16: Elementos de Computa¸c˜ao Gr´afica utilizados em Jogos ...martino/disciplinas/ia369/trabalhos/t3g1.pdf · mais realista do mundo do jogo. ... ferˆencia, impress˜ao ou reproduc¸˜ao,

Figura 3: Representacao de linhas segmentadas

Quando a CPU muda o valor na display list, por exemplo, faz o valor de -0.4 igual a

-0.8, mudando assim o objeto na tela, valor de (-0.4) para (-0.8).

A representacao matematica permite alteracoes precisas, sem a necessidade de re-

petir informacoes. Ao redimensionar uma imagem dobrando sua escala, ao inves de

“inventar” informacoes replicando os pixels, simplesmente se dobra as proporcoes de

cada objeto representado. Nao ha distorcao de qualidade.

Este tipo de imagem e ideal para representacao de graficos, possibilitando o tra-

tamento individual ou em grupo de objetos. Amplamente utilizado em animacoes,

apresentacoes, logotipos, desenhos de personagens, ou qualquer coisa que possa ser

descrito em contornos. Em contrapartida, graficos vetoriais nao podem ser utilizados

para representar cores contınuas, como uma foto que necessita ser representada por

pixels.

Ao se comparar imagens vetoriais e imagens bitmap pode-se destacar:

1. Imagens vetoriais podem sem redimensionadas sem perder a qualidade: quando

se redimensiona um grafico vetorial, os objetos que o compoem se alteram de

maneira uniforme.

15

Page 17: Elementos de Computa¸c˜ao Gr´afica utilizados em Jogos ...martino/disciplinas/ia369/trabalhos/t3g1.pdf · mais realista do mundo do jogo. ... ferˆencia, impress˜ao ou reproduc¸˜ao,

2. Imagens vetoriais usualmente exigem menos memoria para armazenamento: o

espaco de armazenamento necessario para um grafico vetorial reflete a complexi-

dade da imagem. Cada instrucao requer um determinado espaco para armazena-

mento. No caso de bitmaps todos os pontos da imagem ocupam um determinado

espaco individual de armazenamento.

3. Imagens vetoriais apresentam maior facilidade para edicao: normalmente cada

objeto representado em um grafico vetorial e armazenado de forma independente,

podendo ser movido e editado sem mudar o comportamento de outros objetos,

enquanto que em bitmaps os graficos sao construıdos em uma unica camada de

pixels.

4. Imagens vetoriais nao sao tao realısticas quanto um bitmap:Imagens vetoriais

tendem a ter um estilo de desenho ao inves de uma aparencia realıstica, isto se

deve ao uso de preenchimentos compostos de blocos de cores. Sombreamentos,

transparencia e texturas sao limitados, fotos e complexos efeitos bitmaps sao

definidos ponto por ponto atraves de manipulacao de cores, a representacao des-

tes efeitos atraves de vetores se torna limitado. Imagens complexas podem ser

descritas em vetores, porem estas devem ser criadas especificamente em vetores.

5.1 Jogos baseados em graficos vetoriais

Os graficos vetoriais em jogos surgiram no auge dos “arcades” nas decadas de 70 e 80,

originada por radares militares, mostrava uma tecnologia que facilitava a producao

de jogos. O sistema de graficos vetoriais permitiu um rapido desenvolvimento de

animacoes e manipulacao de objetos, aperfeicoando tracos e contornos. Como estes

graficos eram restritamente baseados em linhas agregadas por pontos, os objetos usados

em jogos vetoriais tendiam a ser compostos por formas basicas de arte, como quadra-

dos e triangulos, podendo ser separados ou unidos. Jogos vetoriais eram considerados

mais rapidos e possuıam linhas que se movimentavam mais suavemente, o oposto de

16

Page 18: Elementos de Computa¸c˜ao Gr´afica utilizados em Jogos ...martino/disciplinas/ia369/trabalhos/t3g1.pdf · mais realista do mundo do jogo. ... ferˆencia, impress˜ao ou reproduc¸˜ao,

Figura 4: Jogo Night Driver da Atari

jogos rasters, que apresentava movimentos que eram mais difıceis de programar. De

acordo com Steve Kent, jogos vetoriais podiam ter mais de 40 objetos independentes,

comparado com somente 10 de jogos rasters. A maior desvantagem dos primeiros jo-

gos vetoriais em relacao aos jogos bitmap, sao que bitmaps nao estavam disponıveis;

tudo era construıdo por caracteres ou series de linhas de segmentos. Um resultado e

que jogos vetoriais tendiam a ser menos baseados em caracteres e mais constituıdo em

linhas em um fundo preto. Como em Atari’s Night Driver, um dos primeiros jogos em

perspectiva primeira pessoa (Figura 4).

Em 1979 foi lancado Lunar Lander, no qual jogadores tentam voar e pousar no

espaco sem bater, e juntamente com Asteroids, tornou-se um dos mais conhecidos games

vetoriais.Em 1980 uma inovacao foi concebida com Battlezone, utilizando computacao

3D. Escalas de imagens foi um diferencial proporcionado por graficos vetoriais no jogo

Tempest de 1981. A partir daı, os jogos vetoriais foram aprimorando tecnicas de escala

com suavidade nos movimentos e ja aparecendo em cores. O ano de 1982 veio com

inovacoes de consoles vetoriais domesticos, proporcionando os primeiros jogos vetoriais

17

Page 19: Elementos de Computa¸c˜ao Gr´afica utilizados em Jogos ...martino/disciplinas/ia369/trabalhos/t3g1.pdf · mais realista do mundo do jogo. ... ferˆencia, impress˜ao ou reproduc¸˜ao,

multi-jogadores. Estes consoles domesticos vinham acoplados a monitores vetoriais,

devido ao fato que televisores da epoca utilizavam graficos raster.A partir da decada de

90, a tecnologia de sprites foi apresentada gradativamente junto com graficos poligonais

e 3D.

No final da decada, os graficos vetoriais se disseminaram na Web atraves da tecno-

logia Flash. Atualmente esta tecnologia possui uma vasta plataforma de jogos dispo-

nibilizados online.

5.2 Flash e Action Script

Flash e uma plataforma multimıdia originalmente oferecida pela Macromedia, e atual-

mente distribuıda pela Abobe Systems, desde 1996 a plataforma se tornou uma popular

e poderosa ferramenta de design 2D, amplamente utilizada por designers e desenvol-

vedores, rica na criacao de apresentacoes, sites, jogos e conteudos que apresentam

interacao com usuario. Esta ferramenta e baseada em graficos vetoriais, apesar de

suportar imagens bitmap e vıdeos. Costuma-se chamar apenas de flash os arquivos

gerados pelo Adobe Flash, ou seja, a producao em si. Esses arquivos sao dos tipos:

• fla: arquivos associados ao codigo fonte da producao. Podem ser editados com o

programa Flash .

• as: (ou .actionscript) arquivos que contem codigo fonte na linguagem Action

Script.

• swf : arquivos finalizados e publicados que nao podem ser editados.

• flv: formato de vıdeo, criado pela Macromedia Flash e Sorenson Squeeze.

O ambiente de desenvolvimento disponibiliza ferramentas que facilitam a producao

de desenhos e animacoes, como interpolacoes de formas e movimentos automaticas. As

animacoes sao guiadas atraves de uma linha do tempo, onde o usuario define para cada

momento a sequencia de quadros que ira ser exibida na sua animacao. Outra facilidade

18

Page 20: Elementos de Computa¸c˜ao Gr´afica utilizados em Jogos ...martino/disciplinas/ia369/trabalhos/t3g1.pdf · mais realista do mundo do jogo. ... ferˆencia, impress˜ao ou reproduc¸˜ao,

e a possibilidade de se trabalhar em camadas, como por exemplo, em um jogo de pla-

taforma 2D, onde temos um fundo como cenario, objetos e inimigos, estes podem ser

separados em camadas distintas, organizando e facilitando o desenvolvimento. Alem

de contar com uma interface rica, o aplicativo disponibiliza ao usuario uma linguagem

de programacao denominada Action Script, usada para controlar comportamentos de

objetos e animacoes, esta linguagem oferece a possibilidade de se trabalhar com eventos

de perifericos de entrada, como mouse e teclado, alem de oferecer maior dinamica e

interatividade ao usuario. Action Script e usado para criar todos os tipos de aplicacoes

interativas, algumas possibilidades: um mp3 player, uma loja virtual, um gerenciador

de e-mails, um editor de html e ate mesmo uma poderosa ferramenta para o desenvol-

vimento de games.

5.3 Jogos em Flash

Flash como um ambiente de desenvolvimento de games apresenta facilidades para se

criar desde um jogo da velha ate um jogo em tempo real de multiplos jogadores, nao

necessitando de profundos conhecimentos de animacao ou programacao. E possıvel

destacar as seguintes vantagens desta tecnologia:

• Desenvolvimento web: os arquivos Flash sao modelados para serem visualizados

em paginas da internet.

• Tamanho pequeno de arquivo: fazendo uso de imagens vetoriais e sons compri-

midos.

• Multi-plataforma: atraves de plugins, as aplicacoes se tornam compatıvel com a

maioria dos navegadores.

• Integracao com servidores: ferramentas de integracao com servidores sao nativas,

tornando possıvel o desenvolvimento games multi-jogadores e bate-papos.

19

Page 21: Elementos de Computa¸c˜ao Gr´afica utilizados em Jogos ...martino/disciplinas/ia369/trabalhos/t3g1.pdf · mais realista do mundo do jogo. ... ferˆencia, impress˜ao ou reproduc¸˜ao,

• Facilidade de uso: um dos maiores atrativos de se usar Flash para desenvolvi-

mento de games e a facilidade de uso das ferramentas disponibilizadas.

Como desvantagem, 3D engines com Action Script se tornam inviaveis. Na verdade

estes engines manipulam coordenas no espaco 3D e entao mapeiam em um espaco 2D.

Estas transicoes de espacos tornam producoes de games 3D em flash mais trabalhosas

e com performance reduzida.

5.4 SVG

Considerando-se graficos vetoriais, o padrao SVG (Scalable Vector Graphics) vem sendo

cada vez mais disseminado entre aplicacoes Web e/ou aplicacoes voltadas para dispo-

sitivos moveis [W3C].

O SVG pode ser definido como uma linguagem de descricao de graficos bidimen-

sionais que segue o formato XML (Extended Markup Language). Inicialmente (1999),

o SVG foi apresentado pelo W3C (World Wide Web Consortium) como um padrao

aberto para a publicacao de animacoes e aplicacoes interativas usando graficos vetori-

ais na Web. No entanto, juntamente com a evolucao do padrao, a grande maioria da

industria de telefones moveis escolheu o SVG como base para suas plataformas graficas

[Adobe].

O fato de uma imagem SVG ser descrita no formato XML implica que ela seja

armazenada em um arquivo texto, nao binario, capaz de ser editado com um editor de

texto padrao. A figura 5, por exemplo, pode ser descrita, segundo o padrao SVG, pelo

seguinte codigo:

<?xml version="1.0" standalone="no"?>

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">

<rect id="Rectangular_shape" fill="#FF9900" width="85.302" height="44.092"/>

<ellipse id="Elliptical_shape" fill="#FFFF3E"

cx="42.651" cy="22.046" rx="35.447" ry="16.426"/>

20

Page 22: Elementos de Computa¸c˜ao Gr´afica utilizados em Jogos ...martino/disciplinas/ia369/trabalhos/t3g1.pdf · mais realista do mundo do jogo. ... ferˆencia, impress˜ao ou reproduc¸˜ao,

<text transform="matrix(1 0 0 1 16.2104 32.2134)" font-family="AfMyriad-RomanAf"

font-size="31.2342">SVG</text>

</svg>

Neste codigo observa-se que elementos como o retangulo e a elipse visualizados na

figura sao primitivas constantes do codigo SVG.

Figura 5: Exemplo SVG

Assim, e possıvel destacar tres caracterısticas importantes de imagens descritas no

formato texto do SVG:

• os arquivos SVG podem ser lidos e modificados por um grande numero de ferra-

mentas de edicao de texto;

• arquivos SVG sao tipicamente menores e suportam maior compressao que ima-

gens nos formatos JPEG ou GIF, por exemplo;

• arquivos SVG podem ter seu conteudo selecionado e pesquisado.

Dentre estas caracterısticas, a possibilidade de selecionar e pesquisar o texto que

define atributos de uma determinada imagem permite, por exemplo, a pesquisa de

imagens na Web atraves de elementos de seu conteudo visual. Esta caracterıstica

vem sendo bastante utilizada por aplicativos de visualizacao de mapas e orientacao

de caminhos (navegacao) ou sistemas de informacoes geograficas (GIS - Geographic

Information System.

21

Page 23: Elementos de Computa¸c˜ao Gr´afica utilizados em Jogos ...martino/disciplinas/ia369/trabalhos/t3g1.pdf · mais realista do mundo do jogo. ... ferˆencia, impress˜ao ou reproduc¸˜ao,

Para desenvolvedores de aplicativos e paginas Web e aplicativos multimıdia em dis-

positivos portateis, o SVG, sendo um formato grafico vetorial, atende o requisito de

ser visualizado numa grande variedade de dispositivos, com diferentes tamanhos de

tela e permitir a impressao com diferentes resolucoes, sem sacrificar a acuracidade dos

contornos do grafico (sharpness), a riqueza de detalhes e sua compreensao. Alem disso,

o padrao SVG tambem preve funcionalidades graficas sofisticadas incluindo o suporte

a filtros de processamento de imagem diversos, funcionalidades de processamento mor-

fologico de imagens e tratamento de gradientes. Alem disso, o SVG suporta animacoes

e a implementacao de comportamento interativo com imagens e animacoes (animacoes

responsivas) [W3C].

A utilizacao de um padrao como o XML permite a geracao de imagens por servidores

de maneira dinamica e com alta velocidade. Por estar baseado no padrao XML, o

SVG admite a possibilidade de internacionalizacao. E possıvel assim modificar um

determinado conteudo ou texto de uma imagem seja modificado de acordo com a lıngua

escolhida ou personalizar imagens para diferentes tipos de audiencia, culturas e povos.

No contexto do desenvolvimento de jogos, o SVG pode ser considerado um con-

corrente da tecnologia Flash. Apesar da tecnologia Flash possuir um grande legado

de jogos online atualmente disponibilizados na Web, o SVG oferece, alem das carac-

terısticas mencionadas, as seguintes vantagens:

• ser um padrao aberto, com diversos editores e aplicativos ja desenvolvidos, in-

cluindo aqueles com codigo livre e de uso livre;

• ter sido amplamente adotado pela industria de dispositivos moveis.

Atualmente, existem duas versoes de SVG recomendadas [W3C]:

• SVG 1.1: versao completa mais recente disponibilizada pelo W3C.

• SVG 1.2 Tiny: padrao que tem como alvo a implementacao em dispositivos

moveis mas que pode ser implementada desde plataformas como telefones celu-

lares a sistemas embarcados e computadores desktop.

22

Page 24: Elementos de Computa¸c˜ao Gr´afica utilizados em Jogos ...martino/disciplinas/ia369/trabalhos/t3g1.pdf · mais realista do mundo do jogo. ... ferˆencia, impress˜ao ou reproduc¸˜ao,

O grupo de industrias que fazem parte do grupo de trabalho do W3C para desen-

volvimento do SVG inclui, dentre outras, as empresas: Adobe Systems (atual deten-

tora da tecnologia Flash), AOL/Netscape, Apple, Autodesk (Autocad), Canon, Corel,

Eastman Kodak, Hewlett-Packard, IBM, Macromedia, Microsoft, Sun Microsystems.

A presenca destas empresas neste grupo de trabalho revela o interesse do mercado

de software e hardware no estabelecimento de um padrao para descricao de graficos

vetoriais na Web.

23

Page 25: Elementos de Computa¸c˜ao Gr´afica utilizados em Jogos ...martino/disciplinas/ia369/trabalhos/t3g1.pdf · mais realista do mundo do jogo. ... ferˆencia, impress˜ao ou reproduc¸˜ao,

6 Exemplos da tecnologia 2D aplicada em jogos

educacionais

Enquanto que os jogos 3D sao comercialmente mais atraentes no mercado de video-

games e computadores pessoais, existem alguns nichos em que e possıvel se encontrar

uma grande variedade de jogos 2D implementados. E o caso, por exemplo, de jogos

online baseados em Flash ou jogos educacionais diversos.

Nesta secao, sao apresentados alguns jogos 2D voltados para educacao que revelam

como a tecnologia 2D pode ser bem aproveitada em jogos onde o objetivo de desenvol-

vimento do jogo nao seja talvez, proporcionar entretenimento por meio de um elevado

nıvel de imersao ou reproduzir o mundo do jogo com elevado nıvel de realismo. Nes-

tes casos, a tecnologia 2D apresenta como principais vantagens menor complexidade e

menores custos de desenvolvimento, maior alcance de plataformas de execucao e, em

alguns casos, pode ser a unica alternativa valida (como no caso de jogos direciona-

dos para criancas muito pequenas, com capacidade de abstracao tridimensional pouco

desenvolvida).

No contexto da educacao, os jogos educacionais apresentam uma forte oposicao

ao modelo de ensino-aprendizagem atual, que e centrado no professor e com enfoque

conteudista (apresentacao de conteudo em detrimento do processo de aquisicao de co-

nhecimento). Enquanto o sistema de ensino atual e forjado em intencionalidades a

atividades dirigidas, o jogo representa uma atividade livre e prazerosa. Uma atividade

ludica esta alem dos conteudos educativos agregados ao jogo. O jogo por si so exercita

a funcao representativa da cognicao como um todo. O brincar desenvolve a imaginacao

e a criatividade. Assim o simples fato de jogar acaba desenvolvendo habilidades nos

aprendizes extremamente uteis para desempenhar outras atividades, tais como a leitura

e a escrita. De forma sumaria podemos dizer que o jogo auxilia o aluno a aprender.

Partindo desse contexto e possıvel afirmar que o fato de jogar e uma atividade educa-

tiva. Dessa forma, os jogos eletronicos pelo fato de serem efetivamente uma atividade

24

Page 26: Elementos de Computa¸c˜ao Gr´afica utilizados em Jogos ...martino/disciplinas/ia369/trabalhos/t3g1.pdf · mais realista do mundo do jogo. ... ferˆencia, impress˜ao ou reproduc¸˜ao,

ludica, tambem sao educativos e possuem espaco em um novo modelo de sala adaptada

para uma sociedade pos-moderna.

A partir da revisoes bibliografica realizada, e possıvel perceber que os pedagogos

e psicologos buscam uma nova forma de ensinar que nao seja cansativa e, ao mesmo

tempo, apresente dinamismo em seu conceito e pratica. Com isso, novas metodologias

foram criadas e dentre elas a utilizacao de jogos como forma de educar. Afirmar

que a maioria desses jogos e baseada na tecnologia 2D, seria um equıvoco. O que se

observa e que existe uma grande quantidade de jogos 2D para a educacao, razoes das

quais, a opcao pela tecnologia 2D (duas dimensoes) advem da estrutura de informatica

das escolas publicas, que se utilizam de computadores com pouca memoria e baixa

velocidade de processamento.

A tecnologia utilizada no desenvolvimento desses jogos e, tipicamente, o Flash, um

interpretador de aplicacoes multimıdia, muito utilizado atualmente na internet, porque

possui a grande vantagem de ser multiplataforma, de acesso facil e com plugin gratuito,

agregando diversos tipos de recursos multimıdias e bibliotecas de elementos interativos

prontos para uso alem de muitas facilidades no desenvolvimento de aplicacoes intera-

tivas, que contam com ambientes de programacao java script que esta em constante

evolucao, viabilizando novos recursos e, consequentemente, a implementacao de jogos

cada vez mais sofisticados.

O Flash oferece uma interface que agrega diversas necessidades do desenvolvedor

de jogos, como criacao de recursos graficos, entre eles imagens GIF e JPG e filmes

animados no formato SWF; importacao de arquivos externos, tais como vıdeo e audio

criados ou editados em outros softwares. Um outro ponto positivo do Flash e o fato

de ter sido inicialmente uma ferramenta destinada a animacao, possuindo diversas

ferramentas e recursos que permitem um bom desenvolvimento grafico desses jogos. O

destaque e o uso de graficos vetoriais, que alem de permitir redimensionamento para

se adaptar ao tamanho da janela, tambem cria arquivos mais leves com graficos de boa

qualidade.

25

Page 27: Elementos de Computa¸c˜ao Gr´afica utilizados em Jogos ...martino/disciplinas/ia369/trabalhos/t3g1.pdf · mais realista do mundo do jogo. ... ferˆencia, impress˜ao ou reproduc¸˜ao,

Quanto ao desenvolvimento, no artigo [Bittencourt e Giraffa 2003] e dito que

esses jogos sao simples e de facil desenvolvimento, propoem a nomeacao de objetos

do nosso cotidiano pelas criancas e trabalham a coordenacao visio-motora, atencao e

concentracao, reconhecimento de objetos, aceitacao das regras e reconhecimento da

escrita.

Dois exemplos interessante de jogos educacionais 2D sao apresentados em [Silva

2008].

O GameKid (Figura 6) e um jogo educativo desenvolvido para auxiliar no apren-

dizado de Matematica, sua interface e toda em 2D. Desenvolvido na Universidade do

Estado do Amazonas, o GameKid sustenta-se, fundamentalmente em conceitos da

Matematica basica, adequado para criancas do Ensino Fundamental, pois apresenta

conceitos introdutorios de matematica. Tratam de nocoes de operacoes basicas (soma,

divisao, subtracao e multiplicacao), medicoes, raciocınio logico e temperatura.

Figura 6: GameKid

O segundo exemplo e um domino matematico, um jogo pedagogico para o auxılio

no ensino das quatro operacoes basicas da matematica utilizando-se a realidade virtual

para a criacao de suas interfaces, tem se como objetivos especıficos a modelagem dos

objetos virtuais que farao parte do ambiente e a definicao dos mecanismos de interacao

com o ambiente.

26

Page 28: Elementos de Computa¸c˜ao Gr´afica utilizados em Jogos ...martino/disciplinas/ia369/trabalhos/t3g1.pdf · mais realista do mundo do jogo. ... ferˆencia, impress˜ao ou reproduc¸˜ao,

Domino Matemagico (Figura 7) e um jogo 2D desenvolvido em Flash pelo Grupo

de “Tecnologias em Educacao e no Ensino da Matematica” da Universidade Federal

do Ceara em 2005. O objetivo principal deste jogo e trabalhar a operacao aritmetica

(adicao) de numeros naturais, apoiando-se na estrategia de jogos, tendo como publico

alvo os alunos do Ensino Fundamental.

Figura 7: Domino Matemagico

O jogo consiste em formar um ”quadrado magico”, cuja soma dos valores seja cinco,

para conseguir esse objetivo o jogador deve utilizar as pecas de domino disponıveis

no ambiente de jogo, entao, ele tera de move-las no sentido horizontal ou vertical,

encaixando-as no tabuleiro e formando assim uma matriz de ordem quatro.

Finalmente, ha uma extensa bibliografia dando exemplo de jogos 2D, nao so na area

educacional, como tambem na area de reabilitacao. Em [Araujo 2000], por exemplo,

sao apresentados jogos fonoarticulatorios que visam proporcionar um ambiente ludico

no qual um deficiente auditivo possa sentir prazer ao explorar suas potencialidades, ao

longo da pratica que permitira sua coordenacao articulatoria. Em um destes jogos, por

exemplo, o objeto sob controle e um passaro. O objetivo do jogo e realizar exercıcios

fono-respiratorios. Quando ocorre a expiracao (sopro ou fonacao), o passaro sobe e

quando ocorre a inspiracao o passaro desce. O rastro deixado pelo passaro fornece

informacoes relativas sobre o tempo de expiracao. Quanto maior for o tamanho do

27

Page 29: Elementos de Computa¸c˜ao Gr´afica utilizados em Jogos ...martino/disciplinas/ia369/trabalhos/t3g1.pdf · mais realista do mundo do jogo. ... ferˆencia, impress˜ao ou reproduc¸˜ao,

rastro na ascendente, tanto maior sera o tempo de expiracao. As nuvens e o sol sao

apenas animacoes que movem-se em sentido contrario ao passaro, nao interferindo sua

movimentacao.

Figura 8: Jogo de respiracao para deficientes auditivos

28

Page 30: Elementos de Computa¸c˜ao Gr´afica utilizados em Jogos ...martino/disciplinas/ia369/trabalhos/t3g1.pdf · mais realista do mundo do jogo. ... ferˆencia, impress˜ao ou reproduc¸˜ao,

7 Jogos 2D em aparelhos celulares

Atualmente, o termo “mobile game” vem sendo utilizado para caracterizar um genero

de jogos digitais que possui como caracterıstica ser jogado em telefones celulares,

smartphones, assistentes pessoais digitais, computadores de mao ou tocadores de mıdia

portateis. Neste genero nao estao inclusos os jogos para consoles portateis como o PSP

(PlayStation Portable) ou Nintendo DS.

Este genero de jogos surgiu no inıcio da decada de 90, quando os fabricantes de

calculadoras, como a Texas Instruments, embutiram em seus aparelhos o jogo Snake

ou Snakes. Neste jogo, puramente 2D, uma cobra, representada por um bloco de pixels

moveis na tela, esta em constante movimento e o jogador deve controla-la buscando

aumentar sua pontuacao atraves da captura de objetos da tela, enquanto evita colidir

com as paredes do cenario do jogo ou com o proprio corpo da cobra, que cresce na

medida em que os objetos sao capturados.

Em 1997, a Nokia passou a distribuir o Snake em um de seus modelos (com telas

monocromaticas) e assim se tornou a primeira fabricante de celulares a incluir jogos

em seus aparelhos. Ate 2008, estima-se que 350 milhoes de aparelhos celulares tenham

oferecido Snakes como uma caracterıstica original de fabrica.

Em 2000, a Nokia lanca seu modelo 3310, com display monocromatico de 84 x 84

pixels de resolucao e incluindo 4 jogos: Snake II, Pairs II, Space Impact e Bantumi

(Figura 9).

Desde entao, os jogos para celulares, ou mobile games, se popularizaram entre os

aparelhos de diversos fabricantes e se tornaram comercialmente importantes. Alem

de jogos disponibilizados gratuitamente pelos fabricantes, os jogos sao oferecidos pelas

operadoras para download via rede aerea ou, em alguns aparelhos, e possıvel a ins-

talacao de jogos a partir da conexao com um computador. Desta maneira, os jogos

para celulares representam um nicho do mercado de jogos abrangentes (aproximada-

mente 4.1 bilhoes de assinantes de telefonia movel no final de 2008) com caracterısticas

29

Page 31: Elementos de Computa¸c˜ao Gr´afica utilizados em Jogos ...martino/disciplinas/ia369/trabalhos/t3g1.pdf · mais realista do mundo do jogo. ... ferˆencia, impress˜ao ou reproduc¸˜ao,

Figura 9: Nokia 3310

particulares e um futuro promissor [Association 2008].

E possıvel afirmar que a maioria dos jogos para celulares sao atualmente baseados

na tecnologia grafica 2D ou 2.5D. De fato, ate 2002 poucos aparelhos possuıam a

capacidade de renderizar graficos simples 3D [Pulli et al. 2005].

Mas sera que os jogos baseados em graficos 3D terao o mesmo sucesso comercial

que o alcancado com a plataforma desktop ou de computadores pessoais? Sera que e

apenas uma questao de tempo ate que os jogos para celulares ou outros dispositivos

portateis sejam predominantemente baseados em graficos 3D?

Do ponto de vista tecnico, e possıvel citar ao menos dois fatores que sugerem que

a evolucao da tecnologia para jogos para celulares percorre caminhos diferentes dos ja

percorridos pela plataforma desktop.

Em primeiro lugar, os aparelhos celulares possuem uma capacidade limitada de

processamento, comparavel aos PCs do inıcio da decada de 90 e, tipicamente, nao su-

portam operacoes com pontos flutuantes ou funcoes graficas 3D. A baixa capacidade

de processamento esta relacionada nao somente a necessidade de tornar estes disposi-

tivos baratos, mas principalmente a necessidade de mante-los pequenos e alimentados

por baterias. Iniciativas como a pesquisa para o desenvolvimento de GPUs (Graphical

Processing Units) especializadas para dispositivos de bolso (handhelds) buscam o au-

30

Page 32: Elementos de Computa¸c˜ao Gr´afica utilizados em Jogos ...martino/disciplinas/ia369/trabalhos/t3g1.pdf · mais realista do mundo do jogo. ... ferˆencia, impress˜ao ou reproduc¸˜ao,

mento da capacidade de processamento de graficos neste aparelhos [Strom 2008]. No

entanto, e possıvel afirmar que um dos principais fatores que atrasam este aumento e

a baixa velocidade de evolucao tecnologica das baterias se comparada a Lei de Moore

[Rasmusson et al. 2004]. Alem da bateria ocupar uma area relativamente grande des-

tes dispositivos, as unidades de processamento e memorias necessitam utilizar clocks

de baixa frequencia visando reduzir o consumo de energia (deve-se notar tambem a

dificuldade da dissipacao de potencia nestes aparelhos).

Em segundo lugar, considerando-se a plataforma software de desenvolvimento, ate

recentemente as APIs graficas e de jogos para pequenos dispositivos como telefones

celulares e PDAs nao eram padronizadas. Muitos dispositivos utilizavam APIs pro-

prietarias, geralmente projetadas por pessoas com pouco conhecimento previo em jogos

ou graficos. O desenvolvimento de jogos para estes dispositivos se tornava custoso e

uma grande parcela do tempo era dedicada a portar codigo entre diferentes tipos de

aparelho.

Esta realidade tem sido modificada pelos esforcos na definicao de padroes graficos

que sejam amplamente aceitos pela industria, de maneira que os jogos possam ser exe-

cutados em dispositivos de diferentes fabricantes, com diferentes caraterısticas tecnicas,

como o tamanho do display. Como descrito neste trabalho, o SVG e um destes padroes,

especializado em graficos vetoriais 2D que permitem animacao por camadas. No en-

tanto, outras iniciativas vem sendo trabalhadas, como o OpenGL ES (versao simplifi-

cada da API OpenGL 3D para sistemas embarcados) e as APIs JSR-184 (Mobile 3D

Graphics - M3G) e JSR-226 (Scalable 2D Vector Graphics) para o Java ME [Pulli

2004], [Pulli et al. 2005].

Considerando-se aspectos comportamentais Chehimi, Coulton e Edwards 2008 des-

creve os jogadores “casuais”, considerados a maioria dos jogadores de mobile games, e

questiona se a utilizacao ou nao de graficos 3D e relevante para estes jogadores.

Os jogadores “casuais” possuem caracterısticas como:

• compram poucos jogos, compram jogos populares ou jogam jogos recomendados

31

Page 33: Elementos de Computa¸c˜ao Gr´afica utilizados em Jogos ...martino/disciplinas/ia369/trabalhos/t3g1.pdf · mais realista do mundo do jogo. ... ferˆencia, impress˜ao ou reproduc¸˜ao,

a eles;

• preferem ter diversao, ou estarem imersos em uma atmosfera de experiencia;

• geralmente preferem uma interface com o usuario simples (como por exemplo,

quebra-cabecas);

• consideram a atividade de jogar como um entretenimento para passar o tempo,

como TV ou filmes.

Segundo Chehimi, Coulton e Edwards 2008, apesar de existirem variacoes deste

perfil, a evolucao para jogos 3D poderia ser comparada a evolucao das telas mono-

cromaticas para telas coloridas. Partindo da premissa que um jogo possa ser imple-

mentado nas versoes 2D e 3D, a evolucao para uma versao 3D sera naturalmente aceita

pelo mercado se oferecer uma boa experiencia de jogo.

Considerando-se estes aspectos, num futuro proximo, os jogos 3D se tornarao mais

populares em aparelhos celulares. Tal realidade, no entanto, nao diminui a importancia

deste nicho de mercado para jogos baseados na tecnologia 2D, que certamente se encon-

tram em sua janela de mercado para estes dispositivos, diferentemente do que ocorre

com jogos para PCs ou consoles, em que a tecnologia 3D e comercialmente predomi-

nante.

32

Page 34: Elementos de Computa¸c˜ao Gr´afica utilizados em Jogos ...martino/disciplinas/ia369/trabalhos/t3g1.pdf · mais realista do mundo do jogo. ... ferˆencia, impress˜ao ou reproduc¸˜ao,

8 Consideracoes Finais

Com o advento da facilidade de reproducao de jogos 3D em consoles e computado-

res pessoais, houve um grande movimento da industria de jogos de investimento no

desenvolvimento, producao e distribuicao de jogos baseados nesta tecnologia.

E fato, no entanto, que o processo de desenvolvimento e producao de um jogo 3D

e mais complexo e custoso quando comparado a jogos baseados na tecnologia 2D. Esta

diferenca pode ser evidenciada, por exemplo, atraves da analise realizada por Blow

2004, que analisa o tamanho e complexidade de projetos de jogos.

Por outro lado, e possıvel identificar nichos de mercado ou ambientes em que os

jogos 2D sao mais populares. E o caso, por exemplo, de jogos online, tipicamente

implementados utilizando-se a tecnologia Flash. Nestes casos, os jogos em geral sao

gratuitos e muitos deles sao voltados para o publico infantil 1. O trabalho apresentou

tambem alguns exemplos de jogos educacionais baseados na tecnologia 2D.

Outro ambiente em que os jogos 2D ou 2.5D ainda predominam sao os aparelhos

celulares ou dispositivos moveis portateis que possuem capacidade limitada de proces-

samento. Alem da preocupacao em se utilizar tecnologias graficas que se adaptem bem

a dispositivos deste tipo, tem sido intenso os esforcos na definicao de padroes graficos

que sejam amplamente aceitos pela industria, de maneira que os jogos possam ser exe-

cutados em dispositivos de diferentes fabricantes, com diferentes caraterısticas tecnicas,

como o tamanho do display. Como descrito neste trabalho, o SVG e um destes padroes,

especializado em graficos vetoriais 2D que permitem animacao por camadas. No en-

tanto, outras iniciativas vem sendo trabalhadas tambem, como o OpenGL ES (versao

simplificada da API OpenGL 3D para sistemas embarcados) e as APIs JSR-184 (Mo-

bile 3D Graphics - M3D) e JSR-226 (Scalable 2D Vector Graphics) para o Java ME. O

grande desafio apontado para jogos 3D em celulares e como obter alta performance sem

consumir muita potencia, uma vez que a evolucao da tecnologia de baterias caminha

1Veja por exemplo os sites: http://games.yahoo.com/free-games/,

http://www.discoverykidsbrasil.com, http://www.poissonrouge.com

33

Page 35: Elementos de Computa¸c˜ao Gr´afica utilizados em Jogos ...martino/disciplinas/ia369/trabalhos/t3g1.pdf · mais realista do mundo do jogo. ... ferˆencia, impress˜ao ou reproduc¸˜ao,

numa velocidade menor que a evolucao da capacidade de processamento.

34

Page 36: Elementos de Computa¸c˜ao Gr´afica utilizados em Jogos ...martino/disciplinas/ia369/trabalhos/t3g1.pdf · mais realista do mundo do jogo. ... ferˆencia, impress˜ao ou reproduc¸˜ao,

Referencias

[Adobe]ADOBE. SVG Overview. Acessado online 16/10/2009. Disponıvel em:

<http://www.adobe.com/svg/overview.html>.

[Araujo 2000]ARAuJO, A. M. de L. Jogos Computacionais Fonoarticulatorios para

Criancas com Deficiencia Auditiva. Dissertacao (Mestrado) — Unicamp, 2000.

[Association 2008]ASSOCIATION, E. S. Video Games and Mobile Games. 2008.

[Bittencourt e Giraffa 2003]BITTENCOURT, J. R.; GIRAFFA, L. M. Modelando am-

bientes de aprendizagem virtuais utilizando role playing games. Simposio Brasileiro

de Informatica na Educacao, 2003.

[Blow 2004]BLOW, J. Game development harder than you think. ACM Queue, p. 29–

37, 2004.

[Camilo 2006]CAMILO, M. S. Sistema de Controle de Animacoes de Personagens para

o Framework GUFF. Dissertacao (Mestrado) — Universidade Federal Fluminense,

2006.

[Chehimi, Coulton e Edwards 2008]CHEHIMI, F.; COULTON, P.; EDWARDS, R.

Evolution of 3d mobile games development. Pers Ubiquit Comput, v. 12, p. 19–25,

2008.

[Harbour 2009]HARBOUR, J. S. Advanced 2D Game Development. [S.l.: s.n.], 2009.

[Lamothe 1999]LAMOTHE, A. Tricks of the Windows game programming gurus. [S.l.]:

Sams, 1999.

[Pulli 2004]PULLI, K. The rise of mobile graphics. Technology in Depth, v. 3, p. 1,

2004.

[Pulli et al. 2005]PULLI, K. et al. Designing graphics programming interfaces for mo-

bile devices. IEEE Computer Graphics and Applications, November/December, 2005.

35

Page 37: Elementos de Computa¸c˜ao Gr´afica utilizados em Jogos ...martino/disciplinas/ia369/trabalhos/t3g1.pdf · mais realista do mundo do jogo. ... ferˆencia, impress˜ao ou reproduc¸˜ao,

[Rasmusson et al. 2004]RASMUSSON, J. et al. Multimedia in mobile phones the on-

going revolution. Ericsson Review, 2004.

[Rouse III 1998]Rouse III, R. Do computer games need to be 3d? Computer Graphics,

May 1998.

[Silva 1996]SILVA, F. A. Aplicacoes das tecnicas de processamento digital de imagens

na caracterizacao de materiais. Tese (Doutorado) — Unicamp, 1996.

[Silva 2008]SILVA, R. M. F. da. O Uso de Realidade Virtual no Desenvolvimento de

um Jogo para Auxiliar o Ensino das Quatro Operacoes Basicas da Matematica. [S.l.],

2008.

[Strom 2008]STROM, T. A. M. J. Graphics processing units for handhelds. Proceedings

of IEEE, v. 96, 2008.

[W3C]W3C. Scalable Vector Graphics (SVG). Acessado online 19/10/2009. Disponıvel

em: <http://www.w3.org/Graphics/SVG/>.

[W3C]W3C. SVG Intro. Acessado online: 16/10/2009. Disponıvel em:

<http://www.w3schools.com/svg/>.

36