Tutorial: Criando um jogo ao estilo Arkanoid – Parte 1: Criando o projeto

Continuaremos na mesma ideia de desenvolver games em sequência de tutoriais.

Nessa nova sequência, desenvolveremos um jogo ao estilo Arkanoid.

Partiu para um desenvolvimento de um novo jogo?

 

No tutorial anterior nós terminamos o desenvolvimento de um jogo cujo objetivo era desviar um crânio de cristal das pedras que eram arremessadas contra ele. O jogador clicava sobre o crânio e o arrastava na tela para evitar que as pedras arremessadas o acertassem.

Nesse tutorial nós daremos início a uma nova sequência de tutoriais que geram um jogo no final. Dessa vez, nós criaremos um jogo ao estilo Arkanoid. Você conhece esse jogo?

 

O Arkanoid

O Arkanoid é um jogo eletrônico bastante antigo, criado pela Taito em 1986. Esse é um jogo muito viciante e inspirou a criação de várias outras versões similares. Nesse game, o jogador tem o controle de uma pá que fica localizada na parte inferior da tela. Existem blocos que podem ser destruídos com a colisão de uma bola que fica em constante movimento. O objetivo é fazer com que a bola destrua todos os blocos sem que ela saia pela parte inferior da tela. Dessa forma, o jogador precisa evitar que a bola saia, fazendo com que ela rebata na pá que ele tem o controle. O vídeo a seguir mostra o jogo em detalhes:

Criando o projeto

Como de praxe, nesse primeiro tutorial não faremos muito além de criar o projeto e colocar os Sprites na tela para ver como eles ficarão. Então, primeiramente, crie um projeto no Cocos2d-x. Crie-o no pacote “com.Santy.Arkanoid” e o nomeie como “Arkanoid”. Escolha a API do Android com número id igual a 8. A Figura 1 mostra como eu criei o projeto no Cocos2d-x. Se você não se lembra como criar um projeto no Cocos2d-x, veja como nesse tutorial.

Figura 1 - Criando o projeto

Figura 1 – Criando o projeto

Criado o projeto, descompacte esse arquivo no link na pasta “Resources”. Nesse arquivo estão contidos os arquivos que descrevem o sprite sheet do jogo. Se você não faz ideia do que isso se trata, veja esse tutorial. Ainda nessa mesma pasta, remova o arquivo “HelloWorld.png”, ele não servirá para mais nada. Eu fiz um sprite sheet para que o nosso Arkanoid contenha elementos gráficos do jogo Super Mario World (créditos a Nintendo).

Vamos ao código. Abra o arquivo “HelloWorldScene.cpp” e remova todas as linhas de código partindo dessas (inclusive):

/////////////////////////////

// 3. add your codes below…

// add a label shows “Hello World”

// create and initialize a label

CCLabelTTF* pLabel = CCLabelTTF::create(“Hello World”, “Thonburi”, 34);

Até essa (inclusive):

this->addChild(pSprite, 0);

Nesse mesmo lugar, adicione as seguintes linhas de código:

CCSpriteFrameCache::sharedSpriteFrameCache()->addSpriteFramesWithFile(“spriteSheet.plist”);

CCSize size = CCDirector::sharedDirector()->getWinSize();

CCSprite* fundo = CCSprite::createWithSpriteFrameName(“fundo.jpg”);

fundo->setScale(size.width/fundo->boundingBox().size.width);

fundo->setPosition(ccp(size.width/2,size.height/2));

addChild(fundo);

CCSprite* pa = CCSprite::createWithSpriteFrameName(“pa.png”);

pa->setScale((0.07*size.height)/pa->boundingBox().size.height);

pa->setPosition(ccp(size.width/2,0.1*size.height));

addChild(pa);

CCSprite* bola = CCSprite::createWithSpriteFrameName(“bolaFogo.png”);

bola->setScale((0.1*size.height)/bola->boundingBox().size.height);

bola->setPosition(ccp(size.width/2,0.25*size.height));

addChild(bola);

CCSprite* bloco = CCSprite::createWithSpriteFrameName(“bloco.png”);

bloco->setScale((0.1*size.height)/bloco->boundingBox().size.height);

bloco->setPosition(ccp(size.width/2,0.6*size.height));

addChild(bloco);

O que fizemos aí? Apenas incluímos todos os Sprites que utilizaremos no nosso Arkanoid com temática do Super Mario World. O fundo de uma fase será o fundo do nosso jogo, uma plataforma que será a pá, um bloco amarelo, que será o Sprite dos blocos a serem destruídos, e uma bola de fogo, sendo a bola destruidora dos blocos amarelos. Compile esse código e execute o game. Será mostrado na tela algo parecido com o que está na Figura 2.

Figura 2 - Primeira execução do jogo

Figura 2 – Primeira execução do jogo

Para que você tenha uma ideia melhor, a plataforma na parte de baixo da Figura 2 será a pá que o jogador manipulará no game. A bolinha de fogo será a bola que quebrará os blocos e o bloco amarelo mostra como serão os blocos que precisam ser destruídos. No meu ponto de vista, esse jogo ficará legal. ;D

Entendemos nesse tutorial quase tudo sobre o jogo Arkanoid. Vimos como funciona o principal mecanismo do motor do jogo. Criamos também um novo projeto no Cocos2d-x e mostramos na tela os principais Sprites que aparecerão no game. No próximo tutorial implementaremos a movimentação da pá. Para deixar o jogo um pouco mais legal, faremos com que a pá se movimente conforme a angulação dos acelerômetros do aparelho. Legal, não?! =]

Por hoje é isso pessoal, nos vemos no próximo tutorial. []

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.