Tcnicas para Animao de Imagens em Jogos 2D

Utilizando Java
Silvano Maneck Malfatti
1

1
Faculdade Catlica do Tocantins (FACTO)
Palmas TO Brasil
Malfatti@catolica-to.edu.br
Resumo. Um dos recursos que tem sido cada vez mais utilizado para criar
efeitos e dar vida aos personagens em jogos 2D a criao de animaes
atravs do uso de imagens. Dentre as linguagens de programao existentes,
Java atualmente uma das mais populares para o desenvolvimento de jogos
2D. Isto se deve ao fato de que Java portvel entre diversos sistemas
operacionais e possibilita a execuo de aplicaes em vrios ambientes
como desktop, internet e celulares. Este artigo tem por objetivo apresentar
tcnicas e recursos da linguagem Java para a criao de animaes
destinadas ao desenvolvimento de jogos 2D.
1. Introduo
O mercado de jogos eletrnicos est em franca ascenso, tendo superado inclusive a
bilionria indstria do cinema [Folha 2003]. No Brasil o mercado de jogos cresceu 31%
em 2008 [G1 2009], e grande parte desse sucesso deve-se ao fato de que os jogos atuais
apresentam cenrios to complexos em termos de efeitos quanto os filmes produzidos
em Hollywood. No entanto, os jogos oferecem ao participante a possibilidade de
interagir e tomar as decises que iro definir o desfecho do enredo.
Outro fator que contribui para o sucesso dos jogos eletrnicos o fato de que os
mesmos j no esto mais limitados a computadores pessoais ou consoles, e j podem
ser encontrados em diversas pginas da web ou em celulares. Alm disso, a
popularizao da Internet e dos dispositivos mveis trouxe novamente tona o mercado
de jogos 2D que havia perdido espao.
O mercado de jogos 2D altamente lucrativo, sendo que o estilo de jogo mais
procurado so os casuais, que caracterizam-se pela simplicidade da jogabilidade e
facilidade de aprendizado. O perfil dos jogadores que se interessam por jogos casuais
tambm um pouco diferente do pblico que prefere jogos do tipo Triple A, pois
formado por adultos com mais de 30 anos, independentes financeiramente e que no
passam grandes intervalos de tempo jogando [Bates 2001].
Com o intuito de fomentar a pesquisa e o desenvolvimento de jogos 2D o presente
trabalho tem por objetivo apresentar os recursos grficos oferecidos pela linguagem
Java juntamente com algumas tcnicas para a implementao de animaes baseadas
em imagem, recurso este que de suma importncia para criao de jogos que atraiam a
ateno do jogador.

2. Por que programar jogos em Java?
Uma das questes mais importantes a ser considerada antes de iniciar o
desenvolvimento de um jogo a escolha pela tecnologia ou linguagem que ser
utilizada para a implementao do mesmo.
Dentre as linguagens de programao existentes, Java est se tornando popular para o
desenvolvimento de jogos 2D principalmente pelo fato de ser multiplataforma, realizar
o gerenciamento automtico de memria e permitir a execuo de aplicaes no s em
desktop, como tambm em pginas da web e celulares.
Outro argumento relevante para a escolha da linguagem Java o fato de que a cada
nova verso lanada, a linguagem torna-se mais rpida e com mais recursos destinados
especificamente programao de jogos, como renderizao em fullscreen e acelerao
de algumas operaes grficas por hardware. Este fato pode ser comprovado atravs do
estudo comparativo realizado entre Java e C++, onde foi constatado que a primeira
verso do JDK (Java Development Kit) era at quarenta vezes mais lenta que o C++,
porm, a quinta verso do Java apenas 1.1 vezes mais lenta [Davison 2005].
Diante de tais argumentos, a linguagem Java deixa de ser uma incerteza para a
programao de jogos e passa a ser favorita principalmente quando houver a inteno de
aumentar a visibilidade da aplicao e atingir um pblico maior de jogadores.
3. A Biblioteca Grfica do Java
O principal recurso da linguagem Java para a programao de jogos a sua biblioteca
grfica conhecida como Java 2D. Trata-se de um conjunto de classes destinadas a
oferecer suporte para a renderizao de objetos visuais, como geometrias, textos e
imagens.
O Java 2D tambm oferece outras funcionalidades desejveis ao desenvolvimento de
jogos como a aplicao de efeitos em imagens, operaes lgicas entre primitivas
geomtricas, mtodos nativos para a deteco de coliso e operaes como rotao,
translao e escala [Petchel 2001].
A principal classe do Java 2D a Graphics2D pertencente ao pacote java.awt. A
Graphics2D foi disponibilizada a partir da verso 1.2 do JDK com o intuito de oferecer
uma grande variedade de mtodos para renderizao de objetos visuais e transformaes
geomtricas.
Por tratar-se de uma classe abstrata, no possvel instanciar objetos da Graphics2D
diretamente atravs do operador new. Uma das formas mais comuns de obter um objeto
Graphics2D atravs da criao de uma classe que estenda a classe abstrata Canvas e
sobrescreva o mtodo paint que possui a seguinte assinatura:
public void paint(Graphics g)
A classe Canvas representa uma rea de desenho que poder ser inserida em uma janela
ou applet. Ao estender esta classe e sobrescrever o mtodo paint o desenvolvedor
recebe como parmetro um objeto do tipo Graphics representando a superfcie de
desenho do componente Canvas e que contm os mtodos necessrios para a
renderizao de elementos visuais sobre tal superfcie. Para obter um objeto do tipo
Graphics2D basta ento fazer um cast com o intuito de converter o objeto Graphics

recebido pelo mtodo paint em um objeto do tipo Graphics2D. O fragmento de cdigo
mostrado na Figura 1 apresenta um exemplo deste procedimento:

Figura 1 Estendendo a classe Canvas para a obteno de um objeto grfico.
Outra classe importante oferecida pelo Java 2D e que complementa as funcionalidades
da Graphics2D, a BufferedImage. Esta classe oferece mtodos para o carregamento e
manipulao de imagens de diversos tipos que sero renderizadas no canvas por
intermdio do objeto Graphics.
A classe BufferedImage oferece dois recursos importantes para o desenvolvimento de
um jogo. O primeiro realizar a leitura de uma imagem j existente em algum formato
como JPG, BMP, PCX ou PNG. O segundo recurso permitir a renderizao de
grficos em uma imagem criada na prpria aplicao e que posteriormente ser
desenhada na tela. O fragmento de cdigo apresentado na Figura 2 mostra as duas
formas de renderizar uma imagem atravs da classe BufferedImage.

Figura 2 Utilizando a classe BufferedImage para a renderizao de imagens.
O cdigo apresentado na Figura 2 contm a declarao de dois objetos do tipo
BufferedImage. O primeiro, denominado imgAplicacao, armazena a referncia para uma
imagem vazia de tamanho 100 x 100 criada no construtor da classe Painel. O segundo
objeto BufferedImage chamado imgArquiv,o armazena a referncia para uma imagem
no formato PNG carregada do disco a partir do mtodo read() oferecido pela classe
ImageIO. A renderizao de ambas as imagens apresentadas direita da Figura 2 feita
no mtodo paint() atravs do objeto Graphics2D. Na prxima seo sero trabalhadas

algumas tcnicas que em conjunto com as classes Graphics2D e BufferedImage
permitem a implementao de animaes basedas em imagens.
4. Tcnicas para a Animao de Imagens com Java
As primeiras tcnicas para a animao de imagens surgiram no sculo 19 com a
inveno de um equipamento denominado praxynoscpio cuja funo era projetar em
uma tela diversas imagens desenhadas sobre uma fita transparente. A exibio de vrias
imagens com pequenas alteraes em um curto intervalo de tempo davam a sensao de
movimento.
Em animaes computacionais baseadas em imagem o processo praticamente o
mesmo, com a diferena de que cada imagem representada por uma matriz de pixels e
renderizada na tela do computador.
A tcnica mais simples de implementar animaes em Java atravs do carregamento
de diversas imagens sequenciais como mostra a Figura 3.

Figura 3 Animao composta de vrias imagens.
Para realizar a implementao de animaes baseadas em mltiplas imagens utilizando
Java, basta criar um vetor de imagens do tipo BufferedImage e desenvolver um
algoritmo para controlar o ndice da imagem que ser renderizada aps um determinado
intervalo de tempo. O fragmento de cdigo a seguir utiliza as classes Canvas e Graphics
juntamente com o conceito de thread para implementar a tcnica de animao por
imagens seqenciais.

Figura 4 Cdigo Java para renderizao de uma animao baseada em sequncia de
imagens.
Segundo Jonathan (Harbour 2006), apesar desta tcnica ser de fcil implementao, ela
apresenta algumas desvantagens, como o longo tempo de carga das imagens
correspondentes a cada quadro da animao. Outro problema com as animaes

baseadas em diversas imagens a sobrecarga criada no
manter todas as animaes na memria.
A tcnica mais utilizada para a implementao de animaes
imagens do tipo tiled, onde todos os quadros da animao esto contidos na mesma
imagem. Nesta abordagem, uma imagem contm diversos quadros representando uma
ou diversas animaes dispostas em
Figura 5 imagem contendo
Para que seja possvel implementar animaes baseadas em
necessita oferecer suporte a uma operao denominada
operao de cpia de dados que permite ao desenvolvedor
parte da imagem original. Neste caso, preciso
determinar qual a subrea da imagem
desejado.
A linguagem Java permite a realizao do
drawImage() pertencente a classe
Figura 6 assinatura do mtodo responsvel pela operao
O primeiro parmetro corresponde imagem original conten
animao. Os prximos quatro parmetros inteiros correspondem
rea onde a imagem copiada
correspondem s coordenadas do
a Figura 7.
Figura 7 Resultado da operao
A frmula matemtica responsvel pelo clculo das coordenadas do quadro
copiado a partir da imagem original bastante simples e baseia
imagens a sobrecarga criada no sistema para que seja possvel
manter todas as animaes na memria.
A tcnica mais utilizada para a implementao de animaes baseada no conceito de
onde todos os quadros da animao esto contidos na mesma
imagem. Nesta abordagem, uma imagem contm diversos quadros representando uma
ou diversas animaes dispostas em linhas e colunas como mostra a Figura 5.

imagem contendo oito quadros de animao dispostos em duas linhas e
quatro colunas.
Para que seja possvel implementar animaes baseadas em imagens tiled, a linguagem
necessita oferecer suporte a uma operao denominada blit, que basicamente
operao de cpia de dados que permite ao desenvolvedor desenhar na tela apenas uma
Neste caso, preciso implementar um algoritmo que ir
imagem dever ser copiada com base no ndice do qu
A linguagem Java permite a realizao do blit a partir de uma das verses do mtodo
pertencente a classe Graphics, o qual possui a seguinte assinatura:
assinatura do mtodo responsvel pela operao blit em Java.
O primeiro parmetro corresponde imagem original contendo todos os quadros da
s prximos quatro parmetros inteiros correspondem s coordenadas da
copiada ser desenhada e os quatro ltimos parmetros
s coordenadas do quadro selecionado da imagem original, como mostra

esultado da operao blit para uma imagem do tipo tiled
A frmula matemtica responsvel pelo clculo das coordenadas do quadro
imagem original bastante simples e baseia-se no ndice do quadro
para que seja possvel
baseada no conceito de
onde todos os quadros da animao esto contidos na mesma
imagem. Nesta abordagem, uma imagem contm diversos quadros representando uma

dispostos em duas linhas e
a linguagem
basicamente uma
desenhar na tela apenas uma
implementar um algoritmo que ir
dever ser copiada com base no ndice do quadro
a partir de uma das verses do mtodo
seguinte assinatura:

em Java.
do todos os quadros da
s coordenadas da
ser desenhada e os quatro ltimos parmetros inteiros
, como mostra
tiled.
A frmula matemtica responsvel pelo clculo das coordenadas do quadro a ser
se no ndice do quadro

desejado, no total de colunas da imagem original, e na largura e altura do quadro a ser
desenhado, como mostra o fragmento de cdigo da Figura 8.

Figura 8 Implementao da operao blit em Java.
O mtodo apresentado na Figura 8 recebe como parmetro a imagem original, o objeto
Graphics2D representando a superfcie onde o quadro selecionado ser desenhado, as
coordenadas (x,y) correspondentes a posio em que o quadro ser desenhado, o
nmero de colunas da imagem original, o ndice do quadro desejado, a largura e altura
de cada quadro.
Para que todos os quadros da animao sejam renderizados basta ento que o
programador crie um algoritmo para controlar o valor da varivel que armazenar o
ndice do prximo quadro a ser desenhado, como mostrado na figura 9.

Figura 9 Olgoritmo utilizado para controlar o ndice do quadro renderizado no
momento.
Conforme apresentado na Figura 9, o algoritmo utilizado precisa garantir que aps o
ltimo quadro ter sido apresentado na tela, o valor da varivel utilizada para armazenar
o ndice do quadro atual retorne a zero para que a animao possa ento recomear.
Outro recurso importante para a programao de jogos o espelhamento, que consiste
em inverter a ordem dos pixels do quadro gerado pela operao blit. O espelhamento
promove uma reduo no nmero de quadros necessrios para uma animao. A
implementao do espelhamento em Java simples, basta inverter as coordenadas do
eixo X especificadas no segundo e quarto parmetros do mtodo drawImage() utilizado
na operao blit.
Apesar da animao por imagens do tipo tiled ser a base do desenvolvimento de jogos
2D em Java, necessrio ainda a utilizao de uma tcnica complementar denominada
buffer duplo. A utilizao desse recurso tem por objetivo evitar que ocorram falhas na
renderizao, tambm conhecidas como flickers [Percia et al 2005].
A implementao o buffer duplo consiste em utilizar uma superfcie secundria para
desenhar os elementos do jogo antes de serem enviados para a visualizao. Para tanto
necessrio criar uma imagem do mesmo tamanho da superfcie de visualizao onde os
elementos grficos sero renderizados. Aps todos os grficos terem sido desenhados na
superfcie secundria, a imagem ento aplicada na superfcie principal.
No cdigo apresentado pela Figura 10 possvel observar que o construtor da classe
Painel cria duas imagens, uma a partir de um arquivo existente e outra definida na
prpria aplicao com o mesmo tamanho do canvas. No mtodo paint(), a imagem lida
a partir do arquivo desenhada primeiramente no buffer secundrio atravs objeto

superficieSecundaria. O ltimo passo consiste em aplicar a superfcie secundria ao
painel principal representado pelo objeto g2d.

Figura 10 Implementao do buffer duplo em Java.
5. Concluses
O mercado de jogos 2D tornou-se novamente um negcio altamente lucrativo devido ao
crescimento do nmero de jogadores adeptos ao estilo de jogos casuais e tambm
popularizao da Internet e dispositivos mveis. Neste contexto, a linguagem Java
uma das principais tecnologias destinadas implementao de jogos, tendo em vista que
a execuo de aplicaes em diversas plataformas. Um dos principais recursos visuais
presentes nos jogos 2D da atualidade so as animaes baseadas em imagens utilizadas
para criar efeitos e dar movimentos aos personagens. Este trabalho apresentou as
principais tcnicas para a implementao de animao como tiled, espelhamento e
buffer duplo, que juntamente com os recursos da linguagem Java so a base para o
desenvolvimento de jogos eletrnicos.
Referncias
Folha on-line (2003). ltimo acesso 31/09/2009. Disponvel em
http://www1.folha.uol.com.br/folha/ilustrada/ult90u40114.shtml.
G1, Portal globo.com (2009). ltimo acesso em 31/09/2009. Disponvel em
http://g1.globo.com/Noticias/Games/0,,MUL11979059666,00INDUSTRIA+DE+GA
MES+CRESCE+NO+BRASIL+EM.html.
Bates, B. (2001). Game Design: The Art & Business of Creating Games. Prima Tech.
Davison, A. (2005). Killer Game Programming in Java. OReilly.
Petchel, T. A. (2001). Java 2 Game Programming. Premier Press.
Harbour, J. S. (2006). Beginning Java 5 Game Programming. Thomson Course
Technology.
Percia, A. S., Berthm, A. C., Bertschinger, G. L., Menezes, R. R. C. Desenvolvimento
de jogos eletrnicos. Novatec.