Ponto V!

Pong game - Exemplo completo Escrito por Marcos Vasconcelos

Índice do Artigo
Pong game - Exemplo completo
Criando algum movimento
Mais objetos interagindo na tela
Interação com o usuário
Utilizando imagens do resource
Conclusão: mais trabalho pela frente
Todas Páginas

Este artigo, não ensina como programar para Android, para isso siga esse roadmap. O intuito desse artigo é mostrar as diferenças entre o Java2D e Android, e também mostrar um jogo como exemplo. Este artigo também mostra alguns conceitos de como programar jogos, e como fazer isso no Android e de quebra um pouquinho de matematica e fisica.

Se você já sabe como programar jogos com Java2D, mudar para o Android vai ser fácil.
O sistema de desenho do Android é parecido com o do Java SE, mas no lugar de denharmos no Graphics, desenhamos no Canvas.

As principais diferenças são:

• Canvas = Graphics
• Matrix = AffineTransform
• Bitmap e Drawable = BufferedImage

Para termos acesso a uma surface para desenho, estendemos a classe View e sobrescrevemos o método onDraw(Canvas) e desenhamos nesse parâmetro.

Assim como em Graphics, precisamos salvar o estado do nosso objeto de desenho antes de alterar suas propriedades, para isso usamos o método save() e depois da rotina de desenho usamos o método restore() para retornar o estado original no Canvas, permitindo qualquer outro método de desenho trabalhe corretamente com ele( desenhos da UI por exemplo).

Então vamos lá, crie um projeto com os seguintes parâmetros.

Target: 2.1
Application Name: JPong
Package Name: br.com.pontov
Create Activity: AndPongActivity
Min SDK Version: 7

Crie uma nova classe no pacote br.com.pontov.jpong chamada GameView que extenda android.view.View.

Precisamos sobrescrever os três construtores de View pois o Android os usa quando está inflando o Layout do XML, e um ultimo para criar Layouts programaticamente, como queremos que a classe se comporte igual não importa como esteja sendo construída então vamos chamar um método init() que faça nossa rotina de construção dentro de cada construtor, com isso nosso código ficará assim.

package br.com.pontov.jpong;

import android.graphics.Canvas;
import android.util.AttributeSet;
import android.view.View;

public class GameView extends View implements Runnable {
   public GameView(Context context) {
      super(context);
      init();
   }
   public GameView(Context context, AttributeSet attrs) {
      super(context, attrs);
      init();
   }
   public GameView(Context context, AttributeSet attrs, int defStyle) {
      super(context, attrs, defStyle);
      init();
   }
   private void init() {
      //Metodos para inicializar os componentes da nossa tela
   }
   public void onDraw(Canvas canvas){
      //Desenhar na tela
   }
}

Os métodos de desenho do canvas fora as coordenadas do objeto que vamos desenhar também precisam de um objeto Paint que indica como o objeto deve ser pintado, e como recomendações do Android, não se deve ficar criando esses objetos dentro do método onDraw que será chamado várias vezes na nossa aplicação, então vamos criá-la no nosso método init() e guardar a referencia dela em uma variável na tela.

Crie os atributos na classe.

private Paint backgroundPaint;
private Paint ballPaint;

No método init vamos criar esses objetos e no método onDraw desenhar objetos na tela.

private void init() {
   backgroundPaint = new Paint();
   backgroundPaint.setColor(Color.BLACK);
   ballPaint = new Paint();
   ballPaint.setColor(Color.RED);
}
public void onDraw(Canvas canvas){
   //Guardar o estado do Canvas
   canvas.save();
   //Pintando o fundo
   canvas.drawRect(0, 0, getWidth(), getHeight(), backgroundPaint);
   //Pintando a bola (x, y, radius, Paint)
   canvas.drawCircle(80,80,10,ballPaint);
   //Retornando o estado do Canvas
   canvas.restore();
}

Agora abra o arquivo res/layout/main.xml, ele por enquanto contém o básico de uma aplicação HelloWorld. Para usar nosso componente customizado nas tags do XML só precisamos passar seu nome junto com a declaração do pacote, o XML então vai ficar assim:

Para transformar nossa atividade em FullScreen é simples, basta editar o arquivo AndroidManifest.XML e adicionar o seguinte atributo na tag activity da nossa aplicação:

android:theme="@android:style/Theme.NoTitleBar.Fullscreen"

Rodando nosso exemplo já temos algo como isso.

Vamos transformar nosso exemplo em um jogo de Pong, com isso será possível já apresentar vários conceitos sobre desenvolvimento de jogos e ainda vai ser um resultado legal.

Agora entra a parte interessante, vamos dar algum movimento para nossa bolinha, isso é fácil se você entende de vetores, se ainda não sabe como usá-los voce pode ver aqui.

A principio, a bolinha precisa de uma posição, direção e velocidade e vamos atualizar essa posição através das iterações e redesenhar nossa bolinha.

Vamos criar uma classe chamada Ball no pacote br.com.pontov.pieces para representar nossa bolinha.

Posição e Direção são vetores, e velocidade é um float que é o tanto que nossa bolinha ira andar por iteração.
Nossa classe também é responsável por atualizar a posição da bolinha e oferecer um método para que ela se desenhe em um Canvas.

package br.com.pontov.pieces;

import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import br.com.pontov.Vector2D;

public class Ball {
    private Paint paint;

    private Vector2D pos;
    private Vector2D dir;
    private float speed;

    public Ball(Vector2D pos, Vector2D dir, float speed) {
        this.pos = pos;
        this.dir = dir;
        this.speed = speed;

        paint = new Paint();
        paint.setColor(Color.RED);
    }

    public void draw(Canvas canvas) {
        canvas.save();
        canvas.drawCircle(pos.getX(), pos.getY(), 10, paint);
        canvas.restore();
    }

    private void move() {
        pos.plusMe(dir.multiply(speed));
    }

    public void processAI() {
        move();
    }
}

No Android, assim como no Java2D é necessário chamar os métodos de redesenho na Thread principal da aplicação, mas no lugar de repaint() usamos apenas invalidate(), podemos informar nossa Thread através de um Handler para fazer o refresh da tela.

Voltamos ao AndPongActivity e vamos criar um Handler que vai atualizar o GameView.

Primeiro temos que guardar a referencia do GameView na nossa classe, então criamos uma variável pra ela.

private GameView gameView;

No método onCreate podemos obter essa referencia através do id que demos no XML. E depois criar um Handler para ouvir mensagens da nossa thread para atualizar a tela.

gameView = (GameView) findViewById(R.id.gameView);

guiRefresher = new Handler(){
    public void handleMessage(Message msg){
        if(msg.what == 10001)//Numero arbitrario
            gameView.invalidate();
        super.handleMessage(msg);
    }
};

Vamos deixar nossa GameView responsavel por iterar nosso jogo e avisar o Handler para fazer o refresh, para isso temos que guardar a referencia do Handler nela e também implementar o método run() para que ele processe o jogo.

Também vamos deixar que ele crie um objeto Ball e deixe ele percorrer a tela.

package br.com.pontov.jpong;

import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.os.Handler;
import android.os.Message;
import android.util.AttributeSet;
import android.view.View;
import br.com.pontov.math.Vector2D;
import br.com.pontov.pieces.Ball;

public class GameView extends View implements Runnable {
    private int width = 600, height = 1024;
    private Paint background;
    private Handler handler;
    private Ball ball;

    public GameView(Context context) {
        super(context);
        init();
    }

    public GameView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public GameView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        init();
    }

    private void init() {
        background = new Paint();
        background.setColor(Color.BLACK);

        ball = new Ball(new Vector2D(20, 20), new Vector(1,1), 1.2);
    }

    public void onDraw(Canvas canvas) {
        canvas.save();
        //Pintando background
        canvas.drawRect(0, 0, getWidth(), getHeight(), background);
        //Deixando a bolinha se pintar na posição correta
        ball.draw(canvas);
        canvas.restore();
    }

    @Override
    public void run() {
        while (true) {
            try {
                ball.processAI();

                Message msg = new Message();
                msg.what = 10001;//Mesmo id que o Handler espera para atualizar
                handler.sendMessage(msg);

                Thread.sleep(10);
            } catch (Exception e) {
            }
        }
    }

    public void setCallbackHandler(Handler guiRefresher) {
        this.handler = guiRefresher;
    }
}

Voltamos ao AndPongActivity e colocamos nosso Handler na GameView e iniciamos uma Thread para atualizar.

O método onCreate agora ficara o seguinte:

public void onCreate(Bundle savedInstanceState) {
   super.onCreate(savedInstanceState);
   setContentView(R.layout.main);

   gameView = (GameView) findViewById(R.id.gameView);

   guiRefresher = new Handler(){
      public void handleMessage(Message msg){
         if(msg.what == 10001){
            gameView.invalidate();
         }
         super.handleMessage(msg);
      }
   };

   gameView.setCallbackHandler(guiRefresher);

   Thread t = new Thread(gameView);
   t.setDaemon(true);
   t.start();
}

Rodando nossa aplicação já podemos ver a animação da bolinha indo continuamente na direção south-east (1,1).

O problema é que nossa bolinha vai alcançar o final da tela e continuar, precisamos criar paredes e fazer com que a bolinha colida nela.

A parede também é uma entidade do jogo, e precisa passar pelos mesmos passos que a bolinha passa, "draw" e "processAI" tudo bem que ela não precisa realmente pensar, mas esse é um comportamente comum dos objetos de jogo então vamos criar uma classe que represente uma entidade.

package br.com.pontov.pieces;

import android.graphics.Canvas;
import android.graphics.Rect;

public abstract class Entity {
    private Rect bounds;

    public Entity(Rect bounds) {
        this.bounds = bounds;
    }

    public Rect getBounds() {
        return bounds;
    }

    public void setBounds(Rect rect) {
        this.bounds = rect;
    }

    public abstract void draw(Canvas canvas);

    public abstract void processAI();
}

Mudamos a classe Ball simplesmente para estende-la e como já implementamos esses dois métodos anteriormente ela vai continuar funcionando.

Seguindo a mesma ideia das entidades de jogo, logo imaginamos que os Pads e as Walls serão entidades que bloqueiam a passagem de algo. Então podemos criar uma classe que as represente.
É aqui que entra uma pequena mágica da matemática, para fazer que a nossa bolinha colida para o lado certo, precisamos aplicar uma formula na sua direção com um outro vetor chamado normal, que é um vetor que faz ângulo de 90º com o objeto, vamos simplesmente criar uma entidade que tenha um Vector2D normal que será usado depois nas colisões.

package br.com.pontov.pieces;

import android.graphics.Rect;
import br.com.pontov.math.Vector2D;

public abstract class BlockableEntity extends Entity {
    private Vector2D normal;
    public BlockableEntity(Rect bounds, Vector2D vec) {
        super(bounds);
        this.normal = vec;
    }
    public BlockableEntity(Vector2D vec) {
        this.normal = vec;
    }
    public void setNormal(Vector2D normal) {
        this.normal = normal;
    }
    public Vector2D getNormal() {
        return normal;
    }
}

Agora podemos criar uma classe que representa uma parede, e ela seria simplesmente o seguinte:

package br.com.pontov.pieces;

import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Rect;
import br.com.pontov.math.Vector2D;

public class Wall extends BlockableEntity {
    private Paint wallPaint;

    public Wall(Rect bounds, Vector2D normal) {
        super(bounds, normal);
        wallPaint = new Paint();
        wallPaint.setColor(Color.GRAY);
    }

    public void draw(Canvas canvas) {
        canvas.save();
        canvas.drawRect(getBounds(), wallPaint);
        canvas.restore();
    }

    public void processAI() {
        // Do nothing, walls don't think
    }
}

Um problema agora é que para cada vez que precisarmos adicionar uma nova entidade na nossa tela teriamos que guardar uma referencia para ela e verificar suas iterações, também seria necessário chamar o método processAI e draw para todos as entidades, para facilitar isso, vamos criar uma classe que vai cuidar disso para nós, chamada PiecesManager, ela simplesmente guarda uma lista das nossas entidades e invocar os métodos corretos nela:

package br.com.pontov;

import java.util.ArrayList;
import java.util.Collection;
import java.util.Collections;
import java.util.List;

import android.graphics.Canvas;
import br.com.pontov.Entity;

public class PiecesManager {
    private List pieces;

    public PiecesManager() {
        pieces = new ArrayList();
    }

    public void addPiece(Entity ent) {
        pieces.add(ent);
    }

    public void draw(Canvas canvas) {
        for (Entity ent : pieces)
            ent.draw(canvas);
    }

    public List getPieces() {
        return pieces;
    }

    public void processAI() {
        for (Entity ent : pieces)
            ent.processAI();
    }
}

Com tudo isso pronto, podemos voltar ao GameView e adicionar algumas paredes ao nosso jogo.

Primeiro criamos a variável que guarda nossa instancia de objetos do jogo.
Aproveitamos aqui também e vamos criar uma variável width e height para guardar o tamanho da nossa tela.

private PiecesManager pieces;
private int width = 600, height = 1024;//Tamanho do Galaxy Tab

Agora podemos modificar nosso init e criar os objetos e adicionar ao nosso manager.

O construtor da Wall espera um Vector2D que é um vetor que faz 90º na parede, no sentido oposto ao qual a bola vem, mas não se desespere, esses vetores já tem valores pré-definidos, e seguem como a relação abaixo:

Se for a parede esquerda, esse vetor é (1, 0);
Se for a direita (-1, 0);
Se for a de cima (0, -1);
E se for a de baixo (0, 1);

Então nosso init fica assim:

private void init() {
   background = new Paint();
   background.setColor(Color.BLACK);

   manager = new PiecesManager();

   manager.addPiece(new Ball(new Vector2D(300, 600), new Vector2D(1, 1), 8));

   manager.addPiece(new Wall(new Rect(0, 0, 10, height), new Vector2D(1,0)));//Left
   manager.addPiece(new Wall(new Rect(width - 10, 0, width, height), new Vector2D(-1,0)));//Right
   manager.addPiece(new Wall(new Rect(0, 0, width, 10), new Vector2D(0,-1)));// Top
   manager.addPiece(new Wall(new Rect(0, height - 10, width, height),new Vector2D(0,1)));//Bottom
}

Note que defini variáveis para valores do width e height. Essas variáveis com o tamanho são para facilitar essas contas e deixar um pouco mais escalável, para criar para outro tamanho de tela basta mudar os valores em width e height.

Como nosso manager agora é responsável por invocar todos processAI e draw podemos delegar a ele esses métodos pelo GameView, nosso método draw e run ficam assim.

public void onDraw(Canvas canvas) {
    canvas.save();
    canvas.drawRect(0, 0, getWidth(), getHeight(), background);
    pieces.draw(canvas);
    canvas.restore();
}

@Override
public void run() {
    while (true) {
        try {
            pieces.processAI();

            Message msg = new Message();
            msg.what = 10001;
            handler.sendMessage(msg);

            Thread.sleep(10);
        } catch (Exception e) {
        }
    }
}

Rodando nosso exemplo já podemos ver as paredes, mas isso não fará que a bolinha automaticamente colida e mude sua direção, precisamos implementar o processAI na classe Ball para verificar se existe alguma BlockableEntity no seu caminho e mudar sua direção se isso acontecer.

Primeiro temos que ter as referencias das peças para que a Ball verifique, podemos simplesmente guardar a referencia de PiecesManager nela e iterar sobre sua lista e verificar se alguma BlockableEntity está colidindo com ela.

A função que representa a mudança do angulo da direção é dada por:

r = v-2 * v.dot( n ) * n;

Onde:

• V é o vetor de momento (direção)
• N é a normal da parede
• R é o vetor de resultado

Se tivessemos sobrecargas de operadores em Java, aplicar essa formula para nossa bolinha seria simplesmente

dir = dir - 2 * dir.dot(wall.getNormal()) * wall.getNormal()

Como não existe, a fórmula é a seguinte:

dir = dir.minus(n.multiply(2).multiply(dir.dot(n)))

Nosso código ficará o seguinte:

package br.com.pontov.pieces;

import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Rect;
import br.com.pontov.PiecesManager;
import br.com.pontov.math.Vector2D;

public class Ball extends Entity {
    private Paint paint;

    private Vector2D pos;
    private Vector2D dir;
    private float speed;

    private PiecesManager pieces;

    public Ball(Vector2D pos, Vector2D dir, float speed, PiecesManager manager) {
        super();

        this.pos = pos;
        this.dir = dir;
        this.speed = speed;

        paint = new Paint();
        paint.setColor(Color.RED);

        pieces = manager;
    }

    @Override
    public void draw(Canvas canvas) {
        canvas.save();
        canvas.drawCircle(pos.getX(), pos.getY(), 10, paint);
        canvas.restore();
    }

    private void move() {
        pos.plusMe(dir.multiply(speed));
    }

    @Override
    public void processAI() {
        Rect bounds = new Rect((int) pos.getX() - 5, (int) pos.getY() - 5,
                (int) pos.getX() + 5, (int) pos.getY() + 5);

        for (Entity ent : pieces.getPieces()) {
            if (ent == this)
                continue;
            if (ent instanceof BlockableEntity)
                if (bounds.intersect(ent.getBounds())) {
                    Vector2D n = ((BlockableEntity) ent).getNormal();
                    // r = v-2 * v.dot(n) * n
                    dir = dir.minus(n.multiply(2).multiply(dir.dot(n)));
                }
        }
        move();
    }
}

Na classe GameView só precisamos passar o manager como parametro para Ball e finalmente a bolinha pode ficar rebatendo nas paredes.

O resultado até agora será algo como isso:

Agora precisamos oferecer alguma iteração com o usuário, vamos criar os pads que nada mais são que BlockableEntities que mudam sua posição de acordo com o toque.

package br.com.pontov.pieces;

import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Rect;
import br.com.pontov.math.Vector2D;

public class Pad extends BlockableEntity {
    private Paint wallPaint;

    private int defaultDistanceFromAxis;

    public Pad(Vector2D normal, int defaultDistance) {
        super(new Rect(), normal);
        wallPaint = new Paint();
        wallPaint.setColor(Color.GRAY);

        this.defaultDistanceFromAxis = defaultDistance;
    }

    public void notifyMotionEvent(float x, float y) {
                setBounds(new Rect((int) x - 150,
                        defaultDistanceFromAxis, (int) x + 150,
                        defaultDistanceFromAxis + 10))
    }

    @Override
    public void draw(Canvas canvas) {
        canvas.save();
        canvas.drawRect(getBounds(), wallPaint);
        canvas.restore();
    }

    @Override
    public void processAI() {
        // Do nothing, position is handled by events
    }
}

Essa classe muda sua posição através do setBounds, precisamos notificá-la dos eventos que o usuário tocou na tela, nós podemos adicionar ela no PiecesManager, mas ainda temos que ter a referencia dela para delegar os eventos, como implementar uma AI está fora do escopo desse artigo, podemos usar o suporte multi-touch dos devices para moverem os Pads separadamente.

Primeiro, criamos as variáveis para guardar as referencias dos nossos pads.

private Pad northPad;
private Pad southPad;

Agora inicializamos ele no método init e adicionamos ao PiecesManager para aproveitar o desenho automatizado dos objetos do nosso jogo.

northPad = new Pad(new Vector2D(0, -1), 80); //80 é a distancia default do eixo, no caso desenhar no 80 de y
manager.addPiece(northPad);
southPad = new Pad(new Vector2D(0, 1), 944);//944 do y
manager.addPiece(southPad);

A maneira mais simples de ouvir os eventos de toque é sobrescrevendo o método onTouchEvent(MotionEvent evt) na nossa GameView, podemos sobrescreve-lo e delegar o x e o y para os nossos pads.

public boolean onTouchEvent(MotionEvent evt) {
    southPad.notifyMotionEvent(evt.getX(), evt.getY());
    northPad.notifyMotionEvent(evt.getX(), evt.getY());
    return true;
}

Desse modo o evento vai mover os dois pads na mesma direção.

Como Pad já é uma BlockableEntity a nossa bolinha irá bater nele do mesmo modo que nas paredes sem mais nenhuma alteração necessaria.

A maioria dos devices com Android agora tem suporte a multi-touch, e utiliza-lo também é simples. Mas precisamos de uma permissão especial para isso, basta adicionar a seguinte linha no AndroidManifest.XML

Agora voltamos ao nosso onTouchEvent e vamos verificar os toques de múltiplos usuários, isso é feito através dos métodos getX(int pointer) getY(int pointer). Como nossa aplicação não precisa exatamente se importar com qual dedo está se movendo para tal lugar, vamos apenas adicionar suporte para que qualquer toque em uma área da metade do campo mova o pad daquele lado.

public boolean onTouchEvent(MotionEvent evt) {
    for (int i = 0; i < evt.getPointerCount(); i++) {
        float y = evt.getY(i);
        if (y > 612)
            southPad.notifyMotionEvent(evt.getX(i), evt.getY(i));
        else
            northPad.notifyMotionEvent(evt.getX(i), evt.getY(i));
    }

    return true;
}

Desse modo dois usuarios podem jogar tocando em uma area da tela.

O resultado até aqui:

Agora que cansamos de ver essa bolinha vermelha kikando pela tela, vamos colocar uma imagem como essa:

Para utiliza-la é facil, primeiro salve esse arquivo dentro da pasta res/drawable-hdpi e voltamos a nossa classe Ball.

A maneira mais fácil de carregar uma imagem é através dos Resources.

Como nossa classe Ball não tem acesso a ela vamos modificar o construtor para aceitar apenas um Bitmap e carregar a imagem na nossa GameView, também modificar o método draw para desenhar a imagem com drawBitmap no lugar de drawCircle com uma cor sólida.

Precisamos guardar a referencia da imagem em um objeto Bitmap.

//Variável para guardar a referência
private Bitmap image;

No construtor apenas um novo argumento para receber esse novo parametro e colocar na variavel, e modificar o método draw para desenhar a imagem.

public void draw(Canvas canvas) {
    canvas.save();
    canvas.drawBitmap(image, pos.getX(),pos.getY(), paint);
    canvas.restore();
}

Agora na GameView podemos carregar a imagem e passar como referencia.

A única coisa necessária é utilizar a classe BitmapFactory para fazer o decode da imagem dos resources que nos referimos pelo id.

Bitmap image = BitmapFactory.decodeResource(getResources(), R.drawable.ball);

Agora passamos como referencia para Ball e terminamos o basico de um jogo de Pong.

E o resultado final da nossa aplicação é o seguinte:

Isso conclui nosso game de Pong, claramente é possível melhora-lo em vários aspectos e funcionalidades, mas até aqui já foi o suficiente para mostrar como fazer um jogo de Pong, a matematica envolvida e ainda como fazer isso no Android, espero que tenham aprendido mais sobre todas essas áreas.

Ainda é possivel utilizar aceleração nativa com OpenGL ES 2.0 no Android, mas isso é assunto para outro artigo.

Todo código da aplicação está disponível no repositório do AndroidTechsGames no github, com mais algumas alterações que fui implementando quando me sobrou tempo.