INTRODUÇÃO AO DESENVOLVIMENTO DE JOGOS COM LIBGDX Vinícius Barreto de Sousa Neto
Libg Libgdx dx é um fram framew ewor orkk mult multii-pl plat ataf afor orma ma de visu visual aliz izaç ação ão e dese desenv nvol olvi vime ment nto o de jogo jogos. s. Atualmente ele suporta Windows, Linux, Mac OS X, Android, iOS e HTML5 como plataformas de destino. Libg Libgdx dx perm permit ite e que que você você escr escrev eva a o seu seu códi código go uma uma únic única a vez vez e o impla mplant nte e em múl múltipl tiplas as plataform ormas, sem sem modificação ção. Ao invés de espe sperar por suas uas últimas modificaç cações a sere serem m impl implan anta tada dass no seu seu disp dispos osit itiv ivo, o, ou para para ser ser comp compililad ado o para para HTML HTML5, 5, você você pode pode se bene benefi fici ciar ar de um cicl ciclo o de itera teraçã ção o extr extrem emam amen entte rápi rápido do codi codiffican icando do sua sua apli aplica caçã ção, o, pri princi ncipal palment mente e em um desk deskto top. p. Você Você pode pode usar usar todas odas as ferra errame ment ntas as do ecos ecossi sist stem ema a Java para ser tão produtivo quanto você possa ser. Libgdx permite ir tão baixo nível quanto você queira, o que lhe dá acesso direto aos sist sistem emas as de arqu arquiv ivos os,, disp dispos osititiv ivos os de entr entrad ada, a, disp dispos osititiv ivos os de áudi áudio o e Open OpenGL GL via via uma uma interface unificada OpenGL ES 2.0 e 3.0. Em cima dessas instalações de baixo nível foi construído um poderoso conjunto de APIs que ajudam nas tarefas comuns de desenvolvimento de jogos, como renderização de sprites e texto xto, a con construção ção de interfa rfaces ces com o usuá suário, a rep reprod rodução de efeitos sonor noros e stream eams de músic sica, álgebra linear e cálculos de trigonometria, análise de JSON e XML, e assim por diante. Sempre que necessá ssário, Lib Libgdx gdx deixa o reino de Java e reco ecorre rre ao código nativo para alcançar çar o melhor hor des desempenho possí ssível vel. Toda essa funcio cional nalidade está esc escondid dida atrás de APIs Java ava para ara que você não não precise cise se pre preocup cupar com multi-compilação do códi código go nati nativo vo para para toda todass as plat plataf afor orma mas. s. Mui Muitas tas part partes es do Libg Libgdx dx traba rabalh lham am em torn torno o de problemas conhecidos da plataforma para que você não tenha que lidar com eles. Libg Libgdx dx est está mais mais para para um fram ramewor eworkk do que que para para uma uma engi engine ne,, reco reconh nhec ecen endo do que que não não há uma única solução par para vári ários probl oblema emas diferen rentes. Ao invés disso, ele fornece ece abstra straçções podero erosas que permitem que que você escol colha como voc você des deseja escre crever ver o seu jogo ou aplicação.
1
Preparando o seu ambiente de desenvolvimento
Obs.: O sistema operacional utilizado será o Windows 8 (64 bits), mas o Libgdx também funciona em outras versões do Windows, e outros sistemas operacionais. Neste tutorial utilizaremos o Eclipse, mas também 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 versões 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
Preparando o seu ambiente de desenvolvimento
Obs.: O sistema operacional utilizado será o Windows 8 (64 bits), mas o Libgdx também funciona em outras versões do Windows, e outros sistemas operacionais. Neste tutorial utilizaremos o Eclipse, mas também 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 versões 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 através do link: http://www.oracle.com/technetwork/java/javase/downloads/index.html
3
Será baixado um arquivo executável de nome “ jdk-8u40-windows-x64”. Obs.: Lembrando que todos os nomes dos arquivos referentes às ferramentas podem variar de acordo com versões 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 através 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 diretório de fácil acesso pois estará em constante uso. Neste momento ainda não 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 através do link: http://developer.android.com/sdk/index.html#Other
10
Será baixado um arquivo executável de nome “installer_r24.1.2-windows”. Instalando o Android SDK O Android SDK não 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 disponível). Instalando no Windows:
O seu pacote de download é um arquivo executável que inicia um instalador. O instalador verifica se você tem as ferramentas necessárias instaladas em sua máquina, como o Java SE Development Kit (JDK) e o instala se necessário. O Android SDK é então salvo numa localização de diretório especificada no momento da instalação.
11
1 - Duplo-clique no arquivo executável (.exe) para iniciar a instalação. 2 - Anote o nome e o local aonde você salvar o SDK — Você vai precisar referenciar o diretório quando utilizar as ferramentas do SDK pela linha de comando. 3 - Quando a instalação terminar, o instalador inicia o Android SDK Manager. Caso não tenha obtido sucesso com as instruções textuais, talvez queira dar uma olhada nas instruções em telas:
12
13
14
15
O Android SDK agora está pronto para começar o desenvolvimento de apps, mas ainda há alguns pacotes que você deve adicionar para tornar o seu SDK mais completo.
16
Adicionando os pacotes necessários:
17
18
19
Ao terminar de baixar os pacotes, clique no botão “Close” e feche o Android SDK Manager. Obs.: O download e instalação dos pacotes podem levar bastante tempo para serem concluídos. Agora que o JDK, o Eclipse e o Android SDK já estão instalados, vá ao diretório em que extraiu o Eclipse e o inicie. O Eclipse vai apresentar uma janela solicitando um diretório onde seus projetos serão salvos. Forneça o diretório desejado (se preferir pode deixar o diretório padrão) e clique em OK.
20
Feito isso, agora precisamos informar ao Eclipse o diretório do Android SDK e adicionar o ADT Plugin e o Gradle Integration Plugin ao Eclipse.
21
Informando ao Eclipse o diretório do Android SDK:
22
Clique no botão 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 não autorizados) para distribuição.
23
Para adicionar o ADT plugin ao Eclipse: 1. Inicie Inicie o Eclip Eclipse, se, seleci selecione one Help > Install New Software. 2. Clique em em Add, no canto superior direito. 3. Na caixa de diálogo ogo “Add Reposit sitory” que aparec recer, digite "AD "ADT Plugin" para o campo Name e a seguinte URL para Location: 4. https://dlhttps://dl-ssl.go ssl.google.c ogle.com/and om/android/e roid/eclipse clipse// 5. Nota: O Andr ndroid Developer Tools update site requer uer uma uma conexão xão segu egura. Tenha certeza de que a URL que você digitou comece com HTTPS. 6. Clique em em OK. 7. Na caixa de diálogo “Available Software”, marque a caixa de seleção Developer Tools e clique em Next. 8. Na próx próxim ima a jane janela la,, você você verá verá uma uma lista ista de ferra errame ment ntas as para para down downlo load ad.. Cliq Clique ue em Next. 9. Leia e aceite os termos termos de licença, licença, e então clique em Finish. 10.Se .Se você receber um aviso de segurança dizendo que a autenticidade ou validade do software não pode ocorrer, clique em OK. 11.Quando a instalação terminar, reinicie o Eclipse.
Configurando o ADT Plugin:
Após reiniciar o Eclipse, você deve especificar a localização do diretório do seu Android SDK: 1. Na janela "Welcome to Androi roid Devel velopm opment ent" que aparec rece, selecione Use existing SDKs. 2. Navegue e selecione a localização do diretório do Android SDK que acabou de baixar. 3. Clique em em Next. Seu Eclipse IDE agora está pronto para desenvolver apps para Android, mas você deve deve adic adicio iona narr as ferr ferram amen enttas de plat plataf afor orma ma Andr Androi oid d mais mais rece recent ntes es e uma uma plat plataf afor orma ma Android para o seu ambiente.
24
Adicionando o Gradle Integration Plugin ao Eclipse: Ec lipse:
Proj Projet etos os Libg Libgdx dx usam usam o Grad Gradle le para para gere gerenc ncia iarr depe depend ndên ênci cias as,, o proc proces esso so de cons constr truç ução ão e integração da IDE. Isso permite que você desenvolva seu app com qualquer ambi ambien ente te de dese desenv nvol olvi vime ment nto o que que você você pref prefer erir ir.. O melh melhor or de tudo tudo:: seus seus comp compan anhe heir iros os de equipe podem usar um ambiente de desenvolvimento diferente ao trabalhar no mesmo projeto! Só não dê “commit” em seus arquivos específicos da IDE para o seu cont contro role le de orig origem em.. O arqu arquiv ivo o .giti gitign gnor ore e cont contid ido o em proj projet etos os Libg Libgdx dx vai vai cuid cuidar ar diss disso o se você usar Git. Gradle update site: http://dist.springsource.com/release/TOOLS/gradle
1. No Ecli Eclipse pse cliq clique ue em Help >> Install New Software 2. Digite o Gradle update site no campo "Work with". 3. Clique Clique no no botão botão Add Add no topo topo da tela tela.. 4. Garanta que a opção opção "Group "Group Items Items by Category" Category" esteja ativa. ativa. 5. Selecione Selecione a primeira primeira caixa de marcação marcação 'Extensions 'Extensions / Gradle Gradle Integratio Integration'. n'. 6. Clique em "Next". "Next". Isso pode demorar um pouco. pouco. 7. Revise a lista lista de softwa software re que será instala instalada. da. Clique Clique em "Next" "Next" novamente. novamente. 8. Leia e aceite aceite os termos termos de licença licença e clique clique em "Finish". "Finish".
25
Obtendo o LibGDX:
Acesse o site http://libgdx.badlogicgames.com/download.html e clique no botão “Download Setup App” como na imagem abaixo:
Libgdx vem com um arquivo chamado “gdx-setup.jar” que é um executável com interface de usuário e ferramenta de linha de comando. Você pode simplesmente executar o arquivo JAR para que abra a janela de configuração. Para executar o arquivo JAR por linha de comando: java -jar gdx-setup.jar
26
27
Especifique o nome da sua aplicação, o nome do seu pacote Java, o nome da sua classe principal, o diretório de saída, e o diretório para o seu Android SDK. Depois, escolha as plataformas que você deseja que a sua aplicação 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 extensões para serem incluídas no seu app. Alguns podem não funcionar em todas as plataformas, para as quais receberá um aviso. Por enquanto não utilizaremos nenhuma extensão. 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! Após clicar em “Generate” o LibGDX começará a baixar os arquivos necessários para gerar o projeto. É importante lembrar que ele gera um projeto Gradle e não um projeto Eclipse, mas graças 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 botão direito do mouse no projeto Android e vá na opção “Properties”. Na aba Android, selecione “Google APIs” e clique no botão “Apply”. Clique em OK para finalizar. O erro deverá ter desaparecido e tudo estará normalizado.
35
36
Agora iremos executar a aplicação 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 opção “Depuração USB” ativada. Para ativá-la vá nas configurações do seu dispositivo e acesse as opções de desenvolvedor. Na lista de opções apresentada, busque a categoria Depuração e selecione a opção “Depuração USB”.
40
41
42
Obtendo o Tiled Map Editor:
O Tiled Map Editor pode ser obtido através 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 propósito geral. Ele funciona como uma ferramenta gratuita para permitir a fácil criação de layouts de mapa. Ele é versátil o suficiente para permitir especificações mais abstratas, tais como áreas de colisão, posições de surgimento do inimigo, ou posições 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 essência, o processo de criação 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 flexível e poderosa já em mãos 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 nível (fase), e seguir em frente. Mesmo se você não quer que seu jogo tenha mapas baseados em tiles, o Tiled ainda é uma excelente escolha como um editor de níveis. Com Tiled você pode especificar o tamanho de cada tile em sua imagem; você pode criar seu mapa sem tamanhos rigorosos nas imagens. Você também pode usar o Tiled para todas as entidades invisíveis, tais como áreas de colisão, 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 rápidas para o seu pipeline de trabalho. A criação de mapas no Tiled é tão simples que experiência em programação não é requerida, e mesmo os não-desenvolvedores podem usá-lo. Outro motivo para usar o Tiled é que todas as informações de layout do mapa são 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 botão “Browse” para selecionar o diretório em que deseja instalar o Tiled, e em seguida clique no botão “Install”.
46
Ao clicar no botão “Finish” com a opção “Lauch Tiled” selecionada, o Tiled será aberto.
47
Criando um mapa no Tiled:
Com o Tiled já aberto após a instalação, 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 posição 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 mínimo (minimapa). Tilesets: Esta aba exibe os tilesets carregados no seu mapa para utilização do mesmo. Aqui você será capaz de pegar os tiles desejados para inserir em seu mapa utilizando algumas ferramentas que serão apresentadas em seguida. Ativando abas e ferramentas:
Selecione todas as opções marcadas com pontos vermelhos. Caso alguma opção já esteja selecionada, não precisa selecionar, pois irá desativá-la.
49
Agora com todas as abas e ferramentas em mãos, clique em Arquivo > Novo ou simplesmente pressione CTRL + N.
50
Orientação: Aqui escolheremos a orientação do mapa. A orientação pode ser ortogonal ou isométrica. Um jogo 2D (como o nosso) costuma usar orientação ortogonal, mas caso queira dar uma impressão de 3D, a orientação isométrica 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.: Não mexa nas outras opções. Não são necessárias para usuários 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 através 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á também salvaremos o nosso mapa. Ambos tileset e mapa devem estar armazenados no mesmo diretório.
52
Clique no botão “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 próprio arquivo automaticamente. Em seguida clique no botão “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 serão utilizadas na criação 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 pincéis 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 chão do nosso mapa. Para poupar tempo e esforço, utilizaremos a ferramenta de preenchimento (balde). Depois de selecionar o tile e a ferramenta, agora é só aplicar na grade e teremos o nosso chão. 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 pincéis mais complexos tirando proveito da inteligência por trás do Tiled. Queremos criar um pincéis para o terrenos “Terra” e “Neve” por exemplo. Na aba Tileset, clique no ícone “Editar informações de terreno”.
56
Com o botão direito do mouse, selecione o tile com textura de “Neve” e clique em “Adicionar Tipo de Terreno”.
57
Procure todas as ocorrências de neve em todos os tiles e as selecione. Você deve marcar de azul todas as bordas que possuírem neve. Selecione tudo até que fique da seguinte forma:
Agora faça 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 pincéis 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 botão esquerdo do mouse na área desejada e arrastá-lo. Algumas vezes será necessário a sobreposição 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 extensão TMX do arquivo como dito anteriormente. Salve o arquivo no diretório de recursos do seu projeto. Procure pela pasta “assets” no projeto Android do seu projeto LibGDX para que possamos acessar o arquivo futuramente.
Conclusão:
Com tais ferramentas simples e práticas, a limitação é a criatividade. Para um desenvolvedor que não tenha habilidades para desenhos/arte, criar os tilesets pode ser uma dificuldade. Muitas das vezes ele terá de obter os tilesets em repositórios que ofereçam tilesets gratuitamente (como em nosso caso) ou contratar um artista. Mas de forma geral, o ganho de produtividade é muito alto e com pouco esforço. Percebe-se que o Tiled pode ser usado por desenvolvedores e não-desenvolvedores com muita praticidade e facilidade. 61
Utilizando o mapa no LibGDX:
Perceba o arquivo “mytiledmap.tmx” na pasta “assets” do projeto Android. Caso não apareça, certifique-se de atualizar o projeto. Simplesmente clique com o botão direito do mouse no local indicado pela seta vermelha e selecione a opção “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, criações de objetos e chamadas de métodos 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 câmera não ser posicionada da forma como desejamos. Ela é posicionada na posição (0,0). A origem do mapa. Trataremos de câmeras e outros objetos futuramente.
65
