Tutorial: Desenvolvimento de Jogos para Android – Parte 2

Programação de Jogos para Android - Parte 2No último tutorial, eu mostrei para vocês como configurar o ambiente de desenvolvimento Android. Falei sobre o compilador Java, o SDK Android e sobre o Eclipse IDE. Nesse tutorial, eu falarei sobre como instalar o driver do seu aparelho Android para rodarmos nosso jogo no seu aparelho, como o configurar para executar a aplicação e os passos para fazermos o nosso primeiro game.

Obviamente, como estamos iniciando, não esperem que vamos desenvolver hoje um World of Warcraft para tablet. Isso seria um pouco ambicioso de nossa parte. Mas como eu sei que vocês são confiantes e querem desenvolver jogos ao nível, então vamos começar pelo basicão: o Jokenpô, ou o famoso jogo “pedra, papel e tesoura”. Vamos começar? Let’s play!

Instalação do driver e configuração do aparelho

GooglePara você poder rodar uma aplicação Android no seu celular ou tablet, você precisa instalar o driver USB no seu PC. Isso é necessário principalmente porque o ambiente de desenvolvimento precisa se comunicar certinho com o celular. Como existem aparelhos de muitas fabricantes diferentes, você precisará encontrar o driver do seu aparelho na lista disponibilizada pelo Google. Procure diretamente no site do fabricante do seu aparelho o driver do seu modelo certinho e instale.

Agora você precisa configurar o seu telefone ou tablet para o modo depurador. O modo depurador faz com que o seu aparelho fique apto para executar qualquer operação de desenvolvimento conectado com o PC. Esse início é meio técnico, mas ele será realizado uma única vez. =]

No seu aparelho, faça os seguintes caminhos:

Botão de Opções → Configurações → Segurança → Fontes desconhecidas

Deixa essa opção selecionada.

Botão Opções → Configurações → Opções do desenvolvedor → Depuração de USB

Deixa essa opção selecionada também.

A Figura 1 mostra as telas das primeira e segunda opções. Vale falar que essas telas são do Android versão 4.0.3 (Ice Cream Sandwich). Talvez o caminho para chegar nessas opções varie dependendo a versão do seu Android.

Depuração USB - Android

Figura 1 – Depuração USB

Se vocês observarem, tem uma opção que eu não falei sobre o que é. Quando vocês clicam em “Fontes desconhecidas”, o seu aparelho fica livre para instalar qualquer aplicativo fora do Google Play. Como o seu jogo ainda não está publicado no Google Play, você precisa selecionar essa opção para que o Android instale o seu jogo. Vale lembrar que quando você clica nessa opção, o seu celular fica mais vulnerável a ataques de vírus. Cuide sempre do seu celular desabilitando essa opção, logo depois de você desconectar o seu celular da USB do seu PC.

Após instalar o driver e configurar o seu celular para desenvolvimento, vamos ver se ele é reconhecido pelo SDK Android. Se ele for reconhecido, então ele está pronto para rodar o seu aplicativo. Mas como fazer isso?

Primeiro conecte o seu aparelho em modo de depuração na USB do seu PC. Logo após entre do Prompt de Comando. Se você não lembra como entrar no Prompt de Comando, olhe no primeiro tutorial como se faz. Acesse a pasta onde você descompactou o SDK Android digitando “cd <c:caminho da pasta>”. Digite “cd platform-tools” e aperte enter. Digite “adb devices” e aperte enter. Se aparecer algum dispositivo na lista de aparelhos, então você fez tudo certinho. =]

A Figura 2 mostra os comandos que eu fiz e o meu aparelho listado ali. No meu computador, o SDK está copiado dentro da minha pasta de Arquivos e Programas. Eu apaguei as primeiras letras do número identificador do meu celular porque eu não quero que vocês o saibam. =P

Dispositivo Android detectado

Figura 2 – Dispositivo detectado

Bora programar nosso primeiro game? Weee … *_*

 

Criando o Projeto do Jogo no Eclipse

É bem tranquilo para criarmos o nosso projeto no Eclipse. Vou mostrar para vocês como fazer isso praticamente do zero e com imagens sequenciais.

Primeiramente abra o Eclipse IDE. Clique no menu superior “File”, selecione “New” e clique em “Other …”.

Na janela que abriu, expanda a pasta “Android”, selecione a opção “Android Application Project” e clique em “Next”.

Dê o nome da aplicação de “Jokenpo”. Depois disso, será preenchida a maioria dos campos automaticamente. Eu mudei o nome do pacote para “com.santy.Jokenpo” por opção mesmo. Ali nos campos sobre versão do Sistema Operacional Android, de preferência, coloque a versão do seu aparelho em todos. Clique em “Next”.

Clique em “Next” nas próximas telas até aparecer a tela “Blank Activity”. Nessa tela, você modifica o nome da Activity para “JokenpoActivity”. Clique em “Finish”.

Você acabou de criar a sua primeira aplicação Android. o/

Agora eu vou mostrar o que você precisa fazer para criar o jogo Jokenpo. Esse jogo eu programei aqui unicamente para vocês executarem aí. Não vai dar para eu explicar tudo o que eu fiz nesse tutorial, mas eu explicarei tudo no próximo. Apenas façam o que eu falar. ;D

 

Programando o Jokenpo

Após vocês criarem o projeto, vão no lado esquerdo da janela do Eclipse, em “Package Explorer” abram a pasta “res” e a subpasta “values”. Nessa última pasta, tem um arquivo “strings.xml”, abra-o clicando duas vezes sobre ele. Quando você abrir esse arquivo, ele vai ser apresentado no centro da janela do Eclipse. Nessa parte, logo abaixo, tem uma aba chamada “strings.xml”, clique nessa aba. A Figura 3 mostra sequencialmente todo o caminho que eu descrevi.

Editando o arquivo strings.xml

Figura 3 – Editando o arquivo strings.xml

No editor de texto que abriu, digite as linhas a seguir:

<?xml version=“1.0” encoding=“utf-8”?>

<resources>

<string name=“app_name”>Jokenpo</string>

<string name=“action_settings”>Settings</string>

<string name=“opcoes”>Escolha uma opção</string>

<string name=“ultimaJogada”>Última Jogada</string>

<string name=“jogadaPlayer”>Você</string>

<string name=“resultado”>Resultado</string>

<string name=“jogadaPC”>Computador</string>

</resources>

Escrevendo isso, nós acabamos de criar um conjunto de constantes Strings que serão utilizadas no jogo. Como eu falei, a explicação mais aprofundada eu deixarei para o próximo tutorial.

Após isso, salve e feche o arquivo. Agora, crie uma pasta dentro da pasta “res” chamada “drawable”. Após criá-la, coloque dentro os arquivos de imagem anexos nesse tutorial. Esses arquivos podem ser baixados aqui. Para criar uma pasta em “res”, clique com o botão direito em “res”, selecione “New” e clique em “Folder”. Depois de criar a pasta, arraste os arquivos de imagem para dentro dela. A Ilustração 4 mostra como o projeto vai ficar depois disso.

Inclusão dos Arquivos de Imagem.

Figura 4 – Inclusão dos arquivos de imagem

Acabamos de incluir no projeto as imagens que ficarão nos botões quando você for escolher se você quer pedra, papel ou tesoura. Essas imagens eu busquei na internet e, como eu vi em vários blogs, então eu conclui que elas caíram em domínio público. De qualquer forma, eu deixo claro que esse tutorial serve unicamente como aprendizado e não como uma forma de eu ganhar dinheiro.

Depois disso, abra a pasta “res” e abra a subpasta “layout”. Nessa última pasta tem um arquivo chamado “activity_jokenpo.xml”. Abra esse arquivo e selecione a aba “activity_jokenpo.xml”, assim como fizemos quando editamos o arquivo “strings.xml”. Nesse editor de texto, escreva as seguintes linhas:

<RelativeLayout xmlns:android=“http://schemas.android.com/apk/res/android”

xmlns:tools=“http://schemas.android.com/tools”

android:layout_width=“match_parent”

android:layout_height=“match_parent”

android:paddingBottom=“@dimen/activity_vertical_margin”

android:paddingLeft=“@dimen/activity_horizontal_margin”

android:paddingRight=“@dimen/activity_horizontal_margin”

android:paddingTop=“@dimen/activity_vertical_margin”

tools:context=“.JokenpoActivity” >

 

<TextView

android:id=“@+id/textView1”

android:layout_width=“wrap_content”

android:layout_height=“wrap_content”

android:layout_above=“@+id/button2”

android:layout_centerHorizontal=“true”

android:text=“@string/opcoes”

android:textSize=“30sp” />

 

<Button

android:id=“@+id/button1”

android:layout_width=“100dp”

android:layout_height=“100dp”

android:layout_above=“@+id/textView2”

android:layout_toLeftOf=“@+id/button2”

android:background=“@drawable/pedra” />

 

<Button

android:id=“@+id/button2”

android:layout_width=“100dp”

android:layout_height=“100dp”

android:layout_above=“@+id/textView2”

android:layout_centerHorizontal=“true”

android:background=“@drawable/papel” />

 

<Button

android:id=“@+id/button3”

android:layout_width=“100dp”

android:layout_height=“100dp”

android:layout_above=“@+id/textView2”

android:layout_toRightOf=“@+id/button2”

android:background=“@drawable/tesoura” />

 

<TextView

android:id=“@+id/textView2”

android:layout_width=“wrap_content”

android:layout_height=“wrap_content”

android:layout_centerHorizontal=“true”

android:layout_centerVertical=“true”

android:text=“@string/ultimaJogada”

android:textSize=“30sp” />

 

<TextView

android:id=“@+id/textView3”

android:layout_width=“wrap_content”

android:layout_height=“wrap_content”

android:layout_below=“@+id/textView2”

android:layout_toLeftOf=“@+id/imageView2”

android:text=“@string/jogadaPlayer” />

 

<TextView

android:id=“@+id/textView4”

android:layout_width=“wrap_content”

android:layout_height=“wrap_content”

android:layout_below=“@+id/textView2”

android:layout_centerHorizontal=“true”

android:text=“@string/resultado” />

 

<TextView

android:id=“@+id/textView5”

android:layout_width=“wrap_content”

android:layout_height=“wrap_content”

android:layout_below=“@+id/textView2”

android:layout_toRightOf=“@+id/imageView2”

android:text=“@string/jogadaPC” />

 

<ImageView

android:id=“@+id/imageView1”

android:layout_width=“100dp”

android:layout_height=“100dp”

android:layout_below=“@+id/textView4”

android:layout_toLeftOf=“@+id/imageView2” />

 

<ImageView

android:id=“@+id/imageView2”

android:layout_width=“100dp”

android:layout_height=“100dp”

android:layout_below=“@+id/textView4”

android:layout_centerHorizontal=“true” />

 

<ImageView

android:id=“@+id/imageView3”

android:layout_width=“100dp”

android:layout_height=“100dp”

android:layout_below=“@+id/textView4”

android:layout_toRightOf=“@+id/imageView2” />

</RelativeLayout>

Acabamos de modelar a principal tela do jogo com esse código. Agora vamos incluir a lógica no jogo. Para isso, abra a pasta “src” e a subpasta “com.santy.jokenpo”. Ali dentro tem um arquivo chamado “JokenpoActivity.java”. Abra-o e digite no editor o seguinte código:

 

package com.santy.jokenpo;

 

import java.util.Random;

 

import android.os.Bundle;

import android.app.Activity;

import android.view.Menu;

import android.view.View;

import android.view.View.OnClickListener;

import android.widget.Button;

 

public class JokenpoActivity extends Activity {

 

private Random numeroAleatorio;

 

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_jokenpo);

 

numeroAleatorio = new Random();

Button pedra = (Button)findViewById(R.id.button1);

pedra.setOnClickListener(new OnClickListener() {

public void onClick(View v) {

findViewById(R.id.imageView1).setBackgroundResource(R.drawable.pedra);

realizaJogadaPC(1);

}

});

 

Button papel = (Button)findViewById(R.id.button2);

papel.setOnClickListener(new OnClickListener() {

public void onClick(View v) {

findViewById(R.id.imageView1).setBackgroundResource(R.drawable.papel);

realizaJogadaPC(2);

}

});

 

Button tesoura = (Button)findViewById(R.id.button3);

tesoura.setOnClickListener(new OnClickListener() {

public void onClick(View v) {

findViewById(R.id.imageView1).setBackgroundResource(R.drawable.tesoura);

realizaJogadaPC(3);

}

});

}

 

public void realizaJogadaPC(int jogadaPlayer) {

int jogadaPC;

jogadaPC = numeroAleatorio.nextInt(3) + 1;

if(jogadaPC==1) {

findViewById(R.id.imageView3).setBackgroundResource(R.drawable.pedra);

if(jogadaPlayer==1)

findViewById(R.id.imageView2).setBackgroundResource(R.drawable.empatou);

else if(jogadaPlayer==2)

findViewById(R.id.imageView2).setBackgroundResource(R.drawable.venceu);

else

findViewById(R.id.imageView2).setBackgroundResource(R.drawable.perdeu);

}

else if(jogadaPC==2) {

findViewById(R.id.imageView3).setBackgroundResource(R.drawable.papel);

if(jogadaPlayer==1)

findViewById(R.id.imageView2).setBackgroundResource(R.drawable.perdeu);

else if(jogadaPlayer==2)

findViewById(R.id.imageView2).setBackgroundResource(R.drawable.empatou);

else

findViewById(R.id.imageView2).setBackgroundResource(R.drawable.venceu);

}

else if(jogadaPC==3) {

findViewById(R.id.imageView3).setBackgroundResource(R.drawable.tesoura);

if(jogadaPlayer==1)

findViewById(R.id.imageView2).setBackgroundResource(R.drawable.venceu);

else if(jogadaPlayer==2)

findViewById(R.id.imageView2).setBackgroundResource(R.drawable.perdeu);

else

findViewById(R.id.imageView2).setBackgroundResource(R.drawable.empatou);

}

}

 

@Override

public boolean onCreateOptionsMenu(Menu menu) {

// Inflate the menu; this adds items to the action bar if it is present.

getMenuInflater().inflate(R.menu.jokenpo, menu);

return true;

}

}

Muito provavelmente o Eclipse deve apontar algum erro. Apontando ou não, é necessário que ele atualize o projeto com todas as modificações que você fez. Para isso, clique no menu superior “Project” e selecione “Clean …”. Na janela que abrir, selecione “Clean all projects” e clique em “OK”. Nesse momento, o Eclipse atualiza todo o projeto e elimina os erros. As Ilustrações abaixo mostram o caminho e a tela que será aberta.

Opção de Limpeza do Projeto

Figura 5 – Opção de limpeza do projeto

Limpeza de Todos os Projetos

Figura 6 – Limpeza de todos os projetos

Uffffaaa … vamos rodar o game agora. ;D

 

Rodando o jogo no seu dispositivo

Se o seu celular estiver ligado na USB do PC e devidamente configurado como fizemos e testamos, ele executará o jogo. Está curioso … né!? =P

No Eclipse, selecione a opção “Run” no menu superior e clique em “Run Configurations …”.

Opção de Execução

Figura 7- Opção de execução

Na tela que abrir, dê duplo clique na opção “Android Application”. Logo do lado, coloque em nome a palavra “Jokenpo”. Clique em “Browse…” e selecione “Jokenpo”. Em “Launch Action”, selecione “Launch” e selecione a opção “com.santy.jokenpo.JokenpoActivity” no combobox logo ao lado. Logo após mude a aba clicando em “Target”.

Configurando Execução do Jogo

Figura 8 – Configurando Execução do jogo

Na nova aba, clique em “Always prompt to pick device” e clique em “Run”. Você acabou de executar o jogo que você programou. ;D

Quando você clicar em “Run” vai abrir uma tela perguntando em qual dispositivo você quer executar o jogo. Selecione o seu dispositivo na tela e clique em “OK”. A Ilustração abaixo mostra a tela de escolha de dispositivo.

Seleção do Dispositivo

Figura 9 – Seleção do dispositivo

Olhe a tela do seu celular e você verá o game executando. AAAWWWW YEEAAAHHH. Corre mostrar o seu jogo para o seu irmão, amigo, pai, avô, tio, cunhado, namorada (o), cachorro e para quem for. ;D

Para os curiosos de plantão que estão lendo o tutorial e não o estão fazendo, a Ilustração abaixo é a tela do jogo executando.

Execução do Jogo Jokenpo

Figura 10 – Execução do jogo Jokenpo

Ah, Santy … mas eu não tenho nenhum celular Android. O que eu faço? Eu vou explicar, no próximo tutorial, cada linha de código que eu coloquei nesse, além de falar sobre como executar o jogo no emulador que vem junto com o SDK. Infelizmente não dá para mostrar tudo para todo mundo em um tutorial só. Aguardem. =]

Aprendemos hoje a instalar os drivers de um dispositivo Android para desenvolvimento. Aprendemos também a configurar o dispositivo para ele servir como um aparelho teste. Vimos como criar um projeto no Eclipse e como executar um aplicativo no celular. Bastante coisa né!?

Então é isso, galera… nos vemos no próximo tutorial.

Um grande abraço.

Santiago Viertel

Santiago Viertel

Formado em Bacharelado em Ciência da Computação (UDESC), mestre e doutorando em Análise de Algoritmos (UFPR). Foi programador da Céu Games por 8 anos. Possui a preferência por jogos de estratégia e de tiro em primeira pessoa. Jogando bastante DotA 2, Left 4 Dead 2 e Age of Empires II HD.

Send this to a friend