INTRODUO AO DESENVOLVIMENTO DE JOGOS COM LIBGDX

Vincius Barreto de Sousa Neto

Libgdx um framework multi-plataforma de visualizao e desenvolvimento de jogos.

Atualmente ele suporta Windows, Linux, Mac OS X, Android, iOS e HTML5 como
plataformas de destino.

Libgdx permite que voc escreva o seu cdigo uma nica vez e o implante em mltiplas
plataformas, sem modificao. Ao invs de esperar por suas ltimas modificaes a
serem implantadas no seu dispositivo, ou para ser compilado para HTML5, voc pode
se beneficiar de um ciclo de iterao extremamente rpido codificando sua aplicao,
principalmente em um desktop. Voc pode usar todas as ferramentas do ecossistema
Java para ser to produtivo quanto voc possa ser.

Libgdx permite ir to baixo nvel quanto voc queira, o que lhe d acesso direto aos
sistemas de arquivos, dispositivos de entrada, dispositivos de udio e OpenGL via uma
interface unificada OpenGL ES 2.0 e 3.0.

Em cima dessas instalaes de baixo nvel foi construdo um poderoso conjunto de

APIs que ajudam nas tarefas comuns de desenvolvimento de jogos, como renderizao
de sprites e texto, a construo de interfaces com o usurio, a reproduo de efeitos
sonoros e streams de msica, lgebra linear e clculos de trigonometria, anlise de
JSON e XML, e assim por diante.

Sempre que necessrio, Libgdx deixa o reino de Java e recorre ao cdigo nativo para
alcanar o melhor desempenho possvel. Toda essa funcionalidade est escondida
atrs de APIs Java para que voc no precise se preocupar com multi-compilao do
cdigo nativo para todas as plataformas. Muitas partes do Libgdx trabalham em torno
de problemas conhecidos da plataforma para que voc no tenha que lidar com eles.

Libgdx est mais para um framework do que para uma engine, reconhecendo que no
h uma nica soluo para vrios problemas diferentes. Ao invs disso, ele fornece
abstraes poderosas que permitem que voc escolha como voc deseja escrever o
seu jogo ou aplicao.

1
Preparando o seu ambiente de desenvolvimento

Obs.: O sistema operacional utilizado ser o Windows 8 (64 bits), mas o Libgdx
tambm funciona em outras verses do Windows, e outros sistemas operacionais.
Neste tutorial utilizaremos o Eclipse, mas tambm pode ser usado o NetBeans ou
Intellij.

Para desenvolver com o Eclipse voc precisar de algumas ferramentas:

JDK 7 (Java Development Kit 7) ou superior;

Android SDK;

Eclipse IDE for Java Developers;

LibGDX

Tiled Map Editor

Para este tutorial estaremos utilizando as seguintes verses das ferramentas citadas:

JDK 8 (Java Development Kit 8)

Android SDK (Revision 24.1.2)

Eclipse IDE for Java Developers (Luna SR 4.4.2)

LibGDX 1.5.5

Tiled Map Editor 0.11.0

2
1 - Obtendo e instalando o JDK 8 (Java Development Kit 8):

O JDK 8 pode ser obtido atravs do link:

http://www.oracle.com/technetwork/java/javase/downloads/index.html

3
Ser baixado um arquivo executvel de nome jdk-8u40-windows-x64.

Obs.: Lembrando que todos os nomes dos arquivos referentes s ferramentas podem
variar de acordo com verses e tempo que foram disponibilizados.

4
Execute o arquivo baixado e siga o passo-a-passo abaixo:

5
6
7
2 - Obtendo e instalando o Eclipse:

Eclipse IDE for Java Developers pode ser obtido atravs do link:

https://www.eclipse.org/downloads/packages/eclipse-ide-java-developers/lunasr2

8
Ser baixado um arquivo zipado de nome eclipse-java-luna-SR2-win32-x86_64.
Extraia para o local desejado. Recomendo que seja um diretrio de fcil acesso pois
estar em constante uso. Neste momento ainda no utilizaremos o Eclipse. Antes
precisamos instalar o Android SDK e mais algumas ferramentas.

9
3 - Obtendo e instalando o Android SDK:

Android SDK pode ser obtido atravs do link:

http://developer.android.com/sdk/index.html#Other

10
Ser baixado um arquivo executvel de nome installer_r24.1.2-windows.

Instalando o Android SDK

O Android SDK no inclui um ambiente de desenvolvimento completo para Android. Ele
inclui somente as principais ferramentas do SDK, que voc pode acessar por linha de
comando ou por um plugin em alguma IDE (quando disponvel).

Instalando no Windows:

O seu pacote de download um arquivo executvel que inicia um instalador. O

instalador verifica se voc tem as ferramentas necessrias instaladas em sua mquina,
como o Java SE Development Kit (JDK) e o instala se necessrio. O Android SDK
ento salvo numa localizao de diretrio especificada no momento da instalao.

11
1 - Duplo-clique no arquivo executvel (.exe) para iniciar a instalao.

2 - Anote o nome e o local aonde voc salvar o SDK Voc vai precisar referenciar o
diretrio quando utilizar as ferramentas do SDK pela linha de comando.

3 - Quando a instalao terminar, o instalador inicia o Android SDK Manager.

Caso no tenha obtido sucesso com as instrues textuais, talvez queira dar uma
olhada nas instrues em telas:

12
13
14
15
O Android SDK agora est pronto para comear o desenvolvimento de apps, mas ainda
h alguns pacotes que voc deve adicionar para tornar o seu SDK mais completo.

16
Adicionando os pacotes necessrios:

17
18
19
Ao terminar de baixar os pacotes, clique no boto Close e feche o Android SDK
Manager.

Obs.: O download e instalao dos pacotes podem levar bastante tempo para serem
concludos.

Agora que o JDK, o Eclipse e o Android SDK j esto instalados, v ao diretrio em

que extraiu o Eclipse e o inicie. O Eclipse vai apresentar uma janela solicitando um
diretrio onde seus projetos sero salvos. Fornea o diretrio desejado (se preferir
pode deixar o diretrio padro) e clique em OK.

20
Feito isso, agora precisamos informar ao Eclipse o diretrio do Android SDK e adicionar
o ADT Plugin e o Gradle Integration Plugin ao Eclipse.

21
Informando ao Eclipse o diretrio do Android SDK:

22
Clique no boto OK para finalizar.

Adicionando o ADT Plugin ao Eclipse:

O Android oferece um plugin customizado para o Eclipse, chamado Android

Development Tools (ADT). Esse plugin fornece um poderoso e integrado ambiente para
desenvolvimento de apps Android. Ele aumenta as capacidades do Eclipse permitindo
criar e configurar projetos Android mais rapidamente, construir um app UI, depurar seu
app, e exportar pacotes app (APKs) autorizados (ou no autorizados) para distribuio.

23
Para adicionar o ADT plugin ao Eclipse:

1. Inicie o Eclipse, selecione Help > Install New Software.

2. Clique em Add, no canto superior direito.
3. Na caixa de dilogo Add Repository que aparecer, digite "ADT Plugin" para
o campo Name e a seguinte URL para Location:
4. https://dl-ssl.google.com/android/eclipse/
5. Nota: O Android Developer Tools update site requer uma conexo segura.
Tenha certeza de que a URL que voc digitou comece com HTTPS.
6. Clique em OK.
7. Na caixa de dilogo Available Software, marque a caixa de seleo
Developer Tools e clique em Next.
8. Na prxima janela, voc ver uma lista de ferramentas para download. Clique
em Next.
9. Leia e aceite os termos de licena, e ento clique em Finish.
10. Se voc receber um aviso de segurana dizendo que a autenticidade ou
validade do software no pode ocorrer, clique em OK.
11. Quando a instalao terminar, reinicie o Eclipse.

Configurando o ADT Plugin:

Aps reiniciar o Eclipse, voc deve especificar a localizao do diretrio do seu Android
SDK:

1. Na janela "Welcome to Android Development" que aparece, selecione Use

existing SDKs.
2. Navegue e selecione a localizao do diretrio do Android SDK que acabou
de baixar.
3. Clique em Next.

Seu Eclipse IDE agora est pronto para desenvolver apps para Android, mas voc
deve adicionar as ferramentas de plataforma Android mais recentes e uma plataforma
Android para o seu ambiente.

24
Adicionando o Gradle Integration Plugin ao Eclipse:

Projetos Libgdx usam o Gradle para gerenciar dependncias, o processo de construo

e integrao da IDE. Isso permite que voc desenvolva seu app com qualquer
ambiente de desenvolvimento que voc preferir. O melhor de tudo: seus companheiros
de equipe podem usar um ambiente de desenvolvimento diferente ao trabalhar no
mesmo projeto! S no d commit em seus arquivos especficos da IDE para o seu
controle de origem. O arquivo .gitignore contido em projetos Libgdx vai cuidar disso se
voc usar Git.

Gradle update site: http://dist.springsource.com/release/TOOLS/gradle

1. No Eclipse clique em Help >> Install New Software

2. Digite o Gradle update site no campo "Work with".
3. Clique no boto Add no topo da tela.
4. Garanta que a opo "Group Items by Category" esteja ativa.
5. Selecione a primeira caixa de marcao 'Extensions / Gradle Integration'.
6. Clique em "Next". Isso pode demorar um pouco.
7. Revise a lista de software que ser instalada. Clique em "Next" novamente.
8. Leia e aceite os termos de licena e clique em "Finish".

25
Obtendo o LibGDX:

Acesse o site http://libgdx.badlogicgames.com/download.html e clique no boto

Download Setup App como na imagem abaixo:

Libgdx vem com um arquivo chamado gdx-setup.jar que um executvel com

interface de usurio e ferramenta de linha de comando. Voc pode simplesmente
executar o arquivo JAR para que abra a janela de configurao.

Para executar o arquivo JAR por linha de comando:

java -jar gdx-setup.jar

26
27
Especifique o nome da sua aplicao, o nome do seu pacote Java, o nome da sua
classe principal, o diretrio de sada, e o diretrio para o seu Android SDK. Depois,
escolha as plataformas que voc deseja que a sua aplicao seja disponibilizada. Para
este tutorial, escolha apenas as plataformas Desktop e Android.

Nota: uma vez escolhidas as plataformas desejadas, se quiser suportar outras

plataformas ter de adicion-las manualmente!

Finalmente, voc pode selecionar extenses para serem includas no seu app. Alguns
podem no funcionar em todas as plataformas, para as quais receber um aviso. Por
enquanto no utilizaremos nenhuma extenso. Quando terminar de configurar tudo,
clique em "Generate". Agora voc est pronto para importar o seu projeto Gradle para
a IDE Eclipse, executar, depurar e disponibilizar!

Aps clicar em Generate o LibGDX comear a baixar os arquivos necessrios para

gerar o projeto. importante lembrar que ele gera um projeto Gradle e no um projeto
Eclipse, mas graas ao Gradle Integrated Plugin que foi instalado anteriormente
poderemos importar o projeto sem dificuldades.

28
29
Com o projeto Gradle gerado, agora podemos import-lo no Eclipse.

Para importar o projeto no Eclipse: File -> Import -> Gradle -> Gradle Project

30
31
32
33
34
Caso o projeto Android seja iniciado com o erro The import android.os.Bundle cannot
be resolved. Clique com o boto direito do mouse no projeto Android e v na opo
Properties. Na aba Android, selecione Google APIs e clique no boto Apply. Clique
em OK para finalizar. O erro dever ter desaparecido e tudo estar normalizado.

35
36
Agora iremos executar a aplicao demo que j vem embutida no projeto criado.

37
Executando no Windows:

38
39
Executando no dispositivo Android:

Pr-requisitos:

Seu dispositivo Android deve estar conectado ao computador via cabo USB e com a
opo Depurao USB ativada. Para ativ-la v nas configuraes do seu dispositivo
e acesse as opes de desenvolvedor. Na lista de opes apresentada, busque a
categoria Depurao e selecione a opo Depurao USB.

40
41
42
Obtendo o Tiled Map Editor:

O Tiled Map Editor pode ser obtido atravs do link:

http://www.mapeditor.org/download.html

Um arquivo de nome tiled-0.11.0-win32-setup ser baixado.

O que o Tiled?

Tiled um editor de mapa baseado em tiles de propsito geral. Ele funciona como uma
ferramenta gratuita para permitir a fcil criao de layouts de mapa. Ele verstil o
suficiente para permitir especificaes mais abstratas, tais como reas de coliso,
posies de surgimento do inimigo, ou posies de power-up. Ele armazena todos
esses dados em um formato conveniente e pradonizado chamado TMX (map.tmx).

43
Como funciona o Tiled?

Na sua essncia, o processo de criao de mapas usando o Tiled funciona da seguinte

forma:

1 - Escolher o tamanho do mapa e o tamanho base do tile.

2 - Adicionar tilesets de imagem(s).
3 - Colocar o(s) tileset(s) no mapa.
4 - Adicionar quaisquer objetos adicionais para representar algo abstrato.
5 - Salvar o mapa como um arquivo TMX.
6 - Importar o arquivo TMX e interpret-lo para o seu jogo.

Por qu usar o Tiled?

Ter um sistema padronizado e uma ferramenta flexvel e poderosa j em mos permite

que voc se concentre em coisas mais importantes em seu jogo. Com o Tiled voc vai
ser capaz de pegar alguns tilesets, criar o seu nvel (fase), e seguir em frente.

Mesmo se voc no quer que seu jogo tenha mapas baseados em tiles, o Tiled ainda
uma excelente escolha como um editor de nveis. Com Tiled voc pode especificar o
tamanho de cada tile em sua imagem; voc pode criar seu mapa sem tamanhos
rigorosos nas imagens. Voc tambm pode usar o Tiled para todas as entidades
invisveis, tais como reas de coliso, ou objetos de surgimento (spawn) dentro do seu
mapa.

Uma vez que voc capaz de interpretar os dados TMX para o seu jogo, as
ferramentas do Tiled tornam-se muito rpidas para o seu pipeline de trabalho. A criao
de mapas no Tiled to simples que experincia em programao no requerida, e
mesmo os no-desenvolvedores podem us-lo.

Outro motivo para usar o Tiled que todas as informaes de layout do mapa so
armazenadas no arquivo TMX. Isto poderoso porque ele permite que voc envie o
arquivo TMX a um jogador, e eles teriam instantaneamente o layout sem ter que baixar
novamente o cliente (assumindo que o mapa TMX j utilize texturas do computador do
jogador).

44
Instalando o Tiled Map Editor:

Execute o arquivo tiled-0.11.0-win32-setup baixado e siga o passo-a-passo:

45
Clique no boto Browse para selecionar o diretrio em que deseja instalar o Tiled, e
em seguida clique no boto Install.

46
Ao clicar no boto Finish com a opo Lauch Tiled selecionada, o Tiled ser aberto.

47
Criando um mapa no Tiled:

Com o Tiled j aberto aps a instalao, siga os passos abaixo:

Conhecendo a interface do Tiled:

Ao abrir o Tiled voc vai se deparar com a tela acima. Pode ser que a sua tela esteja
um pouco diferente, pois talvez nem todas as abas e ferramentas estejam ativadas.
Ser mostrado em breve como ativar essas abas e ferramentas.

Algumas abas:

Camadas: Esta aba exibe as camadas (layers) do seu mapa. Voc pode criar quantas
camadas desejar. Lembre-se que h uma ordem na posio dessas camadas. Fica
sempre uma em cima de outra. Caso j tenha utilizado um editor de imagens como o
Photoshop ou Gimp, j deve ter se deparado com esta funcionalidade.

48
Minimapa: Aqui o seu mapa exibido em tamanho mnimo (minimapa).

Tilesets: Esta aba exibe os tilesets carregados no seu mapa para utilizao do mesmo.
Aqui voc ser capaz de pegar os tiles desejados para inserir em seu mapa utilizando
algumas ferramentas que sero apresentadas em seguida.

Ativando abas e ferramentas:

Selecione todas as opes marcadas com pontos vermelhos. Caso alguma opo j
esteja selecionada, no precisa selecionar, pois ir desativ-la.

49
Agora com todas as abas e ferramentas em mos, clique em Arquivo > Novo ou
simplesmente pressione CTRL + N.

50
Orientao: Aqui escolheremos a orientao do mapa. A orientao pode ser
ortogonal ou isomtrica. Um jogo 2D (como o nosso) costuma usar orientao
ortogonal, mas caso queira dar uma impresso de 3D, a orientao isomtrica faz isso.

Tamanho do mapa:

Largura: Aqui definiremos a largura do mapa em tiles.

Altura: Aqui definiremos a altura do mapa em tiles.

Tamanho do tile:

Largura: Aqui definiremos a largura do tile em pixels.

Altura: Aqui definiremos a altura do tile em pixels.

Obs.: No mexa nas outras opes. No so necessrias para usurios comuns.

51
O mapa ser criado, e em seguida vamos inserir um tileset para utilizar no mapa.
Clique em Mapa > Novo Tileset:

Obtendo o tileset:

O tileset pode ser obtido atravs do link:

http://opengameart.org/sites/default/files/snowWIP_12.png

Obs.: Salve o tileset na pasta Assets do seu projeto Android gerado pelo projeto
LibGDX. L tambm salvaremos o nosso mapa. Ambos tileset e mapa devem estar
armazenados no mesmo diretrio.

52
Clique no boto Explorar para procurar o tileset a ser inserido no mapa.
No campo Nome voc pode nomear o tileset. Se preferir, ao selecionar o tileset o
nome do mesmo levar o nome do prprio arquivo automaticamente. Em seguida
clique no boto OK.

53
Na aba Tilesets indicada pela seta vermelha podemos ter acesso ao nosso tileset. O
tileset nada mais que uma imagem dividida em tiles contendo todas as texturas que
sero utilizadas na criao do mapa. Dessa forma, podemos selecionar os tiles
desejados e encaix-los na grade do mapa como desejarmos.

54
Ferramentas:

Carimbo: O carimbo pinta um tile da grade por vez, utilizando o tile selecionado do
tileset.

Ferramenta de Preenchimento: O balde pinta toda a grade com o tile selecionado.

Pincel de Terreno: A ferramenta pincel de terreno permite criar pincis mais complexos.

55
Navegue pelos tiles do tileset (indicado pela seta vermelha) e selecione um tile com
textura de neve, por exemplo. O objetivo fazer todo o cho do nosso mapa. Para
poupar tempo e esforo, utilizaremos a ferramenta de preenchimento (balde). Depois
de selecionar o tile e a ferramenta, agora s aplicar na grade e teremos o nosso
cho. Perceba que voc pode selecionar mais de um tile por vez apenas arrastando o
mouse.

Utilizando o pincel de terreno:

Vamos aprender agora a criar pincis mais complexos tirando proveito da inteligncia
por trs do Tiled.

Queremos criar um pincis para o terrenos Terra e Neve por exemplo. Na aba
Tileset, clique no cone Editar informaes de terreno.

56
Com o boto direito do mouse, selecione o tile com textura de Neve e clique em
Adicionar Tipo de Terreno.

57
Procure todas as ocorrncias de neve em todos os tiles e as selecione. Voc deve
marcar de azul todas as bordas que possurem neve. Selecione tudo at que fique da
seguinte forma:

Agora faa o mesmo para o terreno Terra.

Obs.: Nas imagens o termo Snow-Ice corresponde a Neve e o termo Dirt

corresponde a Terra.

58
Com os pincis prontos, podemos agora selecion-los na aba Terrenos e aplicar em
nosso mapa.

Perceba que com o pincel de terreno voc pode facilmente criar terrenos. Basta
pressionar o boto esquerdo do mouse na rea desejada e arrast-lo. Algumas vezes
ser necessrio a sobreposio de terrenos e/ou objetos. Para isso basta criar uma
camada superior e desenhar sobre ela.

59
Depois de criar e editar, vamos agora salvar o nosso mapa. Clique em Arquivo > Salvar
Como:

60
Digite o nome desejado para o mapa e perceba a extenso TMX do arquivo como dito
anteriormente. Salve o arquivo no diretrio de recursos do seu projeto. Procure pela
pasta assets no projeto Android do seu projeto LibGDX para que possamos acessar o
arquivo futuramente.

Concluso:

Com tais ferramentas simples e prticas, a limitao a criatividade. Para um

desenvolvedor que no tenha habilidades para desenhos/arte, criar os tilesets pode ser
uma dificuldade. Muitas das vezes ele ter de obter os tilesets em repositrios que
ofeream tilesets gratuitamente (como em nosso caso) ou contratar um artista. Mas de
forma geral, o ganho de produtividade muito alto e com pouco esforo. Percebe-se
que o Tiled pode ser usado por desenvolvedores e no-desenvolvedores com muita
praticidade e facilidade.

61
Utilizando o mapa no LibGDX:

Perceba o arquivo mytiledmap.tmx na pasta assets do projeto Android.

Caso no aparea, certifique-se de atualizar o projeto. Simplesmente clique com o
boto direito do mouse no local indicado pela seta vermelha e selecione a opo
Refresh, ou pressione F5 com o projeto selecionado.

Volte ao projeto LibGDX criado anteriormente e abra a classe MyGdxGame.java no

pacote com.mygdx.game na pasta src do projeto my-gdx-game-core. Apague
todos atributos, criaes de objetos e chamadas de mtodos utilizados anteriormente
para rodar o exemplo demo.

62
63
Deixando dessa forma:

64
Em seguida, edite a sua classe para que fique assim:

Agora s executar o projeto como ensinado anteriormente e ver o resultado.

Obs.: Talvez voc enxergue apenas parte do mapa. Isso se d ao fato de a cmera no
ser posicionada da forma como desejamos. Ela posicionada na posio (0,0). A
origem do mapa. Trataremos de cmeras e outros objetos futuramente.

65
Veja o resultado:

66