Desenvolvendo jogos com AndEngine!

No post anterior sobre Android eu comentei um pouco sobre como começar a estudar sobre Android, falando um pouco sobre os materiais que tive contato e no final comentei um pouco sobre as Engines, que facilitam a vida do desenvolvedor. Uma que citei foi a AndEngine (http://www.andengine.org/), que é um projeto Open Source de uma engine para jogos.

Então neste post vou mostrar uma introdução ao desenvolvimento com a AndEngine, para isso vamos implementar o exemplo clássico inicial: Hello World!

Criando o projeto:

Para começar do começo vamos criar um novo projeto Android no eclipse. Com o projeto no workspace crie uma nova pasta chamada lib, na raiz do projeto. Nela vamos colocar o .jar da AndEngine. Como a AndEngine é um projeto open source, é possível baixar os códigos e linkar ao seu projeto (http://wiki.andengine.org/Getting_And_Updating_AndEngine), no entanto, vamos utilizar agora o arquivo .jar da engine, que fica bem mais fácil de linkar ao projeto. Baixe o arquivo aqui.

Baixou o arquivo e criou a pasta lib? Agora é só colar o arquivo dentro da pasta. Agora no eclipse vá até a pasta lib do seu workspace e clique com o botão direito do mouse, depois clique em Build Path e Configure Build Path. Na tela que vai aparecer clique na aba Order and Export e selecione o AndEngine.jar. Pronto, agora já estamos com a Andengine linkada ao nosso projeto.

Uma Actvity diferente

Agora vamos ver um pouco de código. Uma classe padrão já é criada junto com o projeto, no entanto ela deriva da classe Activity da API do android. Para utilizar a AndEngine precisamos criar uma classe que derive de BaseGameActivity. O método onCreate() já não é mais necessário, então delete ele.

Provavelmente um erro será apontado na classe, como derivamos de BaseGameActivity, precisamos implementar alguns métodos, então clique no indicador de erro do lado esquerdo da linha e selecione “Add unimplemented methods”, para que o eclipse gere todos estes métodos para você. Sua classe deve estar assim:

public class TutorialAndengineActivity extends BaseGameActivity {

	@Override
	public void onLoadComplete() {
		// TODO Auto-generated method stub

	}

	@Override
	public Engine onLoadEngine() {
		// TODO Auto-generated method stub
		return null;
	}

	@Override
	public void onLoadResources() {
		// TODO Auto-generated method stub

	}

	@Override
	public Scene onLoadScene() {
		// TODO Auto-generated method stub
		return null;
	}

}

Estes métodos indicam o ciclo de vida de um app que utilize a AndEngine. Para entermos melhor, faça o seguinte: dentro da classe crie uma String constante chamada TAG:

public class TutorialAndengineActivity extends BaseGameActivity {
	// Essa string vai ser utilizada para filtrar o LogCat
	public static final String TAG = "AndEngineTest";
	...
}

Agora, dentro de cada um destes métodos coloque a seguinte chamada:

	public void onLoadComplete() {
		Log.i(TAG, "onLoadComplete()");
	}

Fazendo o app rodar

Agora é possível ver no LogCat o que exatamente está acontecendo. Beleza, então vamos fazer o aplicativo rodar. O método onLoadEngine() deve retornar um objeto Engine, esse objeto tem as configurações que seu aplicativo vai precisar. Vamos contruí-lo então:

	@Override
	public Engine onLoadEngine() {
		// Aqui é preciso configurar um objeto Engine com as configurações do
		// seu app. Este método é chamado primeiro
		Log.i(TAG, "onLoadEngine()");

		Display displayPadrao = getWindowManager().getDefaultDisplay();
		// Declare estas variáveis como atributos int da classe
		cameraWidth = displayPadrao.getWidth();
		cameraHeight = displayPadrao.getHeight();
		Log.i(TAG, "cameraWidth: " + cameraWidth + " cameraHeight: "
				+ cameraHeight);

		// Esse cara faz com que o app funcione direito em qualquer resolução
		RatioResolutionPolicy resolucao = new RatioResolutionPolicy(
				cameraWidth, cameraHeight);

		Camera camera = new Camera(0, 0, cameraWidth, cameraHeight);

		EngineOptions configuracoesEngine = new EngineOptions(true,
				ScreenOrientation.LANDSCAPE, resolucao, camera);

		return new Engine(configuracoesEngine);
	}

Não se assuste com o código, vamos por parte. Primeiro precisamos de um objeto display que contenha as informações do display do celular que ta rodando o app. Depois disso nos pegamos o valor de largura e altura deste display. Agora vem um objeto que configurar a resolução do app, ele recebe o tamanho e depois se vira pra exibir as imagens direitinho. Depois precisamos criar uma câmera, que é a área que vai exibir alguma coisa na tela. Agora vamos criar um objeto que vai ter as configurações da engine, o primeiro parametro dele é se o app deve ser fullscreen ou não, depois é preciso indicar qual a orientação da tela, LANDSCAPE é deitado e PORTRAIR é em pé. Por fim passamos o cara que controla a resolução e a câmera. Agora basta criar uma nova engine com as configurações selecionadas e retornar ela.

Mas calma, ainda não execute o projeto, antes é preciso implementar o método onLoadScene. Nele é preciso carregar a cena do jogo, que é uma camada onde as imagens e textos vão ser desenhados. Por enquanto basta fazer isso:

	public Scene onLoadScene() {
		// Esse método carrega a cena do jogo, ou seja, a camada onde tudo vai
		// ser desenhado
		Log.i(TAG, "onLoadScene()");

		return new Scene();
	}

Pronto agora sim, pode rodar tranquilo. Só que não vai aparecer nada. Para adicionar uma cor na tela altere o onLoadScene para:

	public Scene onLoadScene() {
		// Esse método carrega a cena do jogo, ou seja, a camada onde tudo vai
		// ser desenhado
		Log.i(TAG, "onLoadScene()");

		Scene cenaPrincipal = new Scene();
		cenaPrincipal.setBackground(new ColorBackground(0.1f, 0.3f, 0.8f));

		return cenaPrincipal;
	}

Pronto, agora sim, se tiver dado tudo certo, deve aparecer uma tela azul (BSOD), mas não, seu Android não travou.

Até que enfim o Hello World!

Beleza, agora que o bicho tá rodando, vamos implementar o clássico hello world! Crie dois atributos da classe que vão ser necessário para escrever na tela:

	private BitmapTextureAtlas fontTexture;
	private Font font;

Esse BitmapTextureAtlas é um bitmap bem grande que vai guardar várias imagens dentro dele, no caso vamos guardar a fonte. A Font é uma classe que guarda as informações básicas das fontes. Vamos instanciá-las e tudo ficará mais claro. Dentro do método onLoadResources adicione o seguinte código:

	@Override
	public void onLoadResources() {
		// Aqui você vai carregar os recursos que seu app vai precisar, como
		// imagens, fontes sons e etc.
		Log.i(TAG, "onLoadResources()");

		fontTexture = new BitmapTextureAtlas(256, 256,
				TextureOptions.BILINEAR_PREMULTIPLYALPHA);
		font = new Font(fontTexture, Typeface.create(Typeface.DEFAULT,
				Typeface.BOLD), 40, true, Color.BLACK);
		// O atributo mEngine é a engine que você configurou no método
		// onLoanEngine(), que é herdado do BaseGameActivity
		mEngine.getTextureManager().loadTexture(fontTexture);
		mEngine.getFontManager().loadFont(font);
	}

Ao instanciar o fontTexture é preciso tomar cuidado ao escolher o tamanho, pois ele precisa ser uma potência de dois (não me pergunte porque). Em seguida precisamos configurar a fonte. O primeiro argumento é a textura onde a fonte vai ser desenhada. Depois precisamos criar um objeto TypeFace, que guarda a família da fonte e os detalhes de estilo, no exemplo utilizamos a fonte padrão e em negrito. Depois precisamos indicar o tamanho da fonte e se ele vai utilizar AntiAlias. No fim indicamos a cor.

Beleza, agora que configuramos a fonte é preciso fazer com que o app conheça ela, para isto utilizamos o atributo mEngine, que é a engine que acabamos de criar no método onLoadEngine. Para apresentar uma textura, utilizamos o getTextureManager, e para apresentar a fonte utilizamos o…? Correto, getfontManager.

Pronto, agora configuramos os nossos recursos. Vamos então partir para a exibição das informações de fato. Para isto, vamos alterar o onLoadScene(). Nele criamos uma cena e adicionamos uma cor de background, agora vamos criar um objeto Text e anexar ele a cena:

	@Override
	public Scene onLoadScene() {
		// Esse método carrega a cena do jogo, ou seja, a camada onde tudo vai
		// ser desenhado
		Log.i(TAG, "onLoadScene()");

		Scene cenaPrincipal = new Scene();
		cenaPrincipal.setBackground(new ColorBackground(0.1f, 0.3f, 0.8f));

		String helloWorld = "Hello World!\n" + getString(R.string.app_name);
		Text texto = new Text(0, 0, font, helloWorld);

		cenaPrincipal.attachChild(texto);
		return cenaPrincipal;
	}

O objeto Texto recebe uma posição para ser desenhado, uma fonte e uma string que será exibida. Depois disso utilizamos o método attachChild para anexar o texto a cena. Se rodar o projeto agora verá que será exibida a mensagem Hello World! e o nome do projeto que você criou.

Um pouco além do Hello World

Ótimo, conseguimos o Hello World. Mas e que tal exibir uma imagem na tela? O processo é semelhante a exibição do texto. Precisamos de um atlas de bitmap novo, já que o outro foi utilizado para guardar a fonte, e de uma textura para carregar a imagem. Adicione os seguintes atributos na classe:

	private BitmapTextureAtlas bitmapTextureAtlas;
	private TextureRegion texturaImagem;

Agora vamos instanciá-los. Você já deve saber em qual método vamos fazer isso né? Exatamento, no onLoadResources()

	@Override
	public void onLoadResources() {
		...
		bitmapTextureAtlas = new BitmapTextureAtlas(128, 128,
				TextureOptions.BILINEAR_PREMULTIPLYALPHA);
		BitmapTextureAtlasTextureRegionFactory.setAssetBasePath("gfx/");
		texturaImagem = BitmapTextureAtlasTextureRegionFactory.createFromAsset(
				bitmapTextureAtlas, this, "icon.png", 0, 0);
		mEngine.getTextureManager().loadTexture(bitmapTextureAtlas);

	}

Agora vem mais um detalhe importante. As imagens são carregadas no android pelas pastas dentro da pasta “res/drawable” certo? Ao utilizar a AndEngine é preciso utilizar a pasta “assets/”. Então copie o ícone do Andriod que fica dentro da pasta “res/drawable” para a pasta “assets/gfx”, se ela não existir crie.

Aquele BitmapTextureAtlasTextureRegionFactory é uma classe que contém métodos estáticos para carregar as texturas. Primeiro precisamos dizer que o caminho básico é o “gfx/” assim ele vai saber encontrar a imagem que acabamos de copiar. Agora vamos atribuir para o objeto texturaImagem a imagem do ícone, utilizando o método createFromAsset. Nele precisamos indicar um atlas de bitmap, um contexto (que é a própria classe que estamos implementando), o nome do arquivo e a posição onde ele vai ser guardado. Lembra que o atlas é um bitmap gigante? Então, precisamos indicar em qual posição, dentro deste bitmap, vai ser guardada a imagem. Por isso aquele 0,0 no final.

Por fim, vamos dizer que o que acabamos de criar existe para o aplicativo, conforme fizemos com a fonte. Agora que os recursos foram carregados, basta desenhar o sprite na tela. Para isto vamos voltar ao método onLoadScene:

	@Override
	public Scene onLoadScene() {
		...
		int imagemX = cameraWidth / 2 - texturaImagem.getWidth() / 2;
		int imagemY = cameraHeight / 2 - texturaImagem.getHeight() / 2;
		Sprite imagem = new Sprite(imagemX, imagemY, texturaImagem);

		cenaPrincipal.attachChild(imagem);
		cenaPrincipal.attachChild(texto);
		return cenaPrincipal;
	}

Um Sprite é uma textura que possui um aposição no eixo xy. Para isto precisamos indicar qual a posição do sprite e qual a sua textura. Feito isto, basta anexar o sprite na cena principal. Pronto! Rode o aplicativo e se delicie com a maravilha que você acabou de criar! 😀

Próximos passos

Se você chegou até aqui, parabéns, é sinal de que quer realmente aprender a utilizar a AndEngine, ou então só saiu rolando pra baixo esse monte de texto. Se você quiser um exemplo mais prático de jogo mesmo, eu recomendo esse link: https://jimmaru.wordpress.com/2011/09/28/andengine-simple-android-game-tutorial/. Aqui o cara mostra como fazer um jogo mesmo, com interações, músicas e tudo mais. Eu só não gostei muito porque o código ficou bem gambiarroso, principalmente no finalzinho, e ele fez tudo numa classe só, mas enfim, dá pra ver como fazer bastante coisa com a AndEngine.

Agora que você já começou a desenvolver jogos para Android, é só ficar milionário e curtir a vida 😀

Código fonte

Pra quem quiser baixar o projeto completo e só rodar no eclipse, tá aqui o link pro Github: https://github.com/MarcosX/AndEngine-Tutorial. O código tá todo comentado, então deve dar pra entender o que cada parte faz. Só não esqueça de configurar o Build Path com a AndEngine.jar!

Anúncios

Android Nv. 1 – Aprendiz

Este post tem como objetivo fazer uma pequena introdução e prover algumas referência para quem quiser iniciar no desenvolvimento mobile na plataforma Android.

O que é Android

Para iniciar nada como dar uma olhada no site: http://www.android.com/. Aqui é possível ver as novidades da plataforma e conhecer um pouco sobre seu ecossistema.

Para nós, desenvolvedores, o legal mesmo é ver a parte dos developers! Então vejam o site: http://developer.android.com. Aqui podemos ver informações da SDK (Software Development Kit) do Android, anúncios de eventos, videos com palestras, guia para iniciantes, referência, entre várias outras informações. Vale a pena fuçar o site todo 😀

Links sobre como instalar a SDK tem aos montes na internet, e no site dos desenvolvedores de Android também tem um excelente tutorial, em inglês. Caso ainda tenha dificuldades na língua basta googlar por aí que será bem fácil achar uma maneira de instalar o SDK no Eclipse.

Bom, após essa parte inicial de instalação é legal ver alguns exemplos práticos, pra ver alguma coisa rodando né? O grande amigo meu blogou sobre alguns tutoriais legais sobre o Android: http://yuriadamsmaia.wordpress.com.

Antes de sair por aí copiando código de tutorial, baixando exemplo do Git, vale a pena perder algum tempo vendo como o Android organiza o seu projeto, assim você terá uma entendido maior sobre a plataforma. Por isso, vale a pena ver este post: http://yuriadamsmaia.wordpress.com/2011/03/24/desenvolver-para-android-entendendo-o-helloworld-i/.

Agora sim, procure por tutoriais de Android, veja exemplos, aprenda sobre a organização MVC do Android, só da pra aprender sobre código escrevendo código né. Se você tem algum recurso guardado eu aconselho muito conferir o livro Google Android do autor Ricardo R. Lecheta, pela editora Novatec.

O livro tem uma abordagem bem prática, desde o começo você vê os conceitos com códigos, exemplos práticos de utilização. Até mesmo pra quem já conhece sobre a plataforma vai aproveitar bem o livro, porque ele cobre muito conteúdo.

O único problema é que a versão dele já está ficando meio desatualizada, a plataforma já vai pra sua versão 4.0. Mas como a maioria dos aparelhos ainda roda nas versões 2.2 e 2.3 o livro vai muito bem.

Se você tá com a grana meio curta, outro excelente opção é a apostila do Luciano Alves: http://apostilaandroid.ueuo.com/inicio.php. Ela é disponibilizada para download gratuitamente no site.

O conteúdo da apostila também é extremamente prático e dão uma excelente visão sobre os componentes gráficos da plataforma, sempre com exemplos de código. O destaque da apostila fica para a explicação bem detalhada do uso de arquivos XML para definição de formulários e telas dos aplicativos.

Bom, com isso já dá pra ter um bom norte pra começar com o Android. Quando estiver dominando o conteúdo e se sentindo confortável com  o desenvolvimento Android procure por engines que facilitem o trabalho no desenvolvimento. Quem curte jogos pode procurar pelo projeto Andengine http://www.andengine.org/ uma engine 2D para jogos gratuita!

E fiquem de olho aqui no blog também, em breve teremos alguns post sobre desenvolvimento Android. Obrigado pela visita e bons estudos!