Tutorial: Criando um jogo de car parking – Parte 1: Criando o projeto Cocos2d-x

Vamos iniciar o desenvolvimento de mais um game por meio de um conjunto de poucos tutoriais.

Dessa vez implementaremos um jogo cujo objetivo é estacionar o carro em uma vaga.

Bora conhecer como são esses jogos e como iniciaremos o nosso projeto.

No último tutorial nós finalizamos o desenvolvimento de um jogo ao estilo Angry Birds (créditos a Rovio). Implementamos o game com a possibilidade de criar fases no Tiled e as abrir no jogo. Especificamos as propriedades físicas dos objetos e fizemos a simulação. Ao final, fizemos com que o canhão atirasse balas de aço pela aplicação de um impulso nelas e adicionamos os elementos de HUD para que o jogo tivesse também um fim.

Nesse tutorial iniciaremos o desenvolvimento de mais um game para o nosso portfólio. Quem nunca jogou aqueles jogos de estacionar um carro em uma vaga de garagem? Veremos como funciona o motor desse tipo de jogos desenvolvendo um, o que acham? =]

 

Jogos de car parking

Em games de car parking o jogador tem total controle sobre um carro, podendo acelerar e andar para frente ou andar na marcha a ré. O principal objetivo é estacionar o carro em uma vaga de garagem com o mínimo possível de colisões com os objetos do cenário. Normalmente é dado liberdade ao jogador, podendo estacionar na vaga de ré ou de frente mesmo.

Um bom exemplo de jogo de car parking é o Parking Super Skills, esse publicado pela Turbo Nuke. Normalmente, jogos de car parking são bastante viciantes, desafiam as suas habilidades motoras e fazem você se questionar qual é a melhor forma de estacionar um carro. Conhecendo bem o jogo que implementaremos, daremos continuidade ao tutorial. o/

 

Criando o projeto

Crie um projeto Cocos2d-x com o nome de pacote “com.Santy.Estacionamento”, com o nome do projeto “Estacionamento” e com o índice da API igual a 8. Se você não sabe ou não se lembra como criar um projeto Cocos2d-x para Android, acesse esse tutorial. A Figura 1 mostra como eu criei o projeto que trabalharemos.

Figura 1 - Criando o projeto Cocos2d-x

Figura 1 – Criando o projeto Cocos2d-x

Abra a pasta “Resources” e apague o arquivo “HelloWorld.png”, ele não nos servirá para nada. Descompacte esse arquivo (SpriteSheetPSK) dentro da pasta “Resources”. Esses arquivos descrevem as imagens que serão utilizadas nos Sprites do nosso game. De forma resumida, nesse sprite sheet tem uma imagem de um carro vermelho, de uma roda de carro, de uma seta e de um estacionamento. O estacionamento servirá para delimitar as garagens e será um plano de fundo para o nosso game, bem como o carro vermelho será o carro que o jogador dirigirá. Também serão distribuídos outros carros vermelhos como parte do cenário. A seta definirá os botões do jogo que darão a direção para o carro e a roda será apenas para ilustrar quando o carro está virando o volante. Eu pulei os passos de criação do sprite sheet, mas caso você queira saber como eu criei ou do que se trata um Sprite ou um sprite sheet, dê uma olhada nesse tutorial.

Agora podemos abrir as imagens nos Sprites que criaremos para o nosso game. Primeiramente, vamos excluir os códigos desnecessários ao jogo. Para isso, abra o arquivo “HelloWorldScene.cpp” e apague todo o trecho de código que se inicia aqui (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);

e termina aqui (inclusive):

// add the sprite as a child to this layer

this->addChild(pSprite, 0);

Para mostrar um ambiente teste e podermos ter ideia de como ficará o jogo, adicione o seguinte trecho de código nesse mesmo lugar onde você apagou o código anterior:

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

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

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

if(size.width/size.height>470/320)

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

else

    rua->setScale(size.height/rua->boundingBox().size.height);

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

addChild(rua);

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

carro1->setScale((0.3*size.height)/carro1->boundingBox().size.width);

carro1->setPosition(ccp(0.26*size.width,0.34*size.height));

carro1->setRotation(-90);

addChild(carro1);

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

carro2->setScale((0.3*size.height)/carro2->boundingBox().size.width);

carro2->setPosition(ccp(0.74*size.width,0.68*size.height));

carro2->setRotation(90);

addChild(carro2);

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

dir->setScale((0.2*size.height)/dir->boundingBox().size.height);

dir->setPosition(ccp(size.width-dir->boundingBox().size.width/2,dir->boundingBox().size.width + 0.5*dir->boundingBox().size.height));

addChild(dir);

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

baixo->setScale((0.2*size.height)/baixo->boundingBox().size.height);

baixo->setPosition(ccp(size.width-baixo->boundingBox().size.width-baixo->boundingBox().size.height/2,0.5*baixo->boundingBox().size.width));

baixo->setRotation(90);

addChild(baixo);

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

esq->setScale((0.2*size.height)/esq->boundingBox().size.height);

esq->setPosition(ccp(size.width-1.5*esq->boundingBox().size.width-esq->boundingBox().size.height,esq->boundingBox().size.width + 0.5*esq->boundingBox().size.height));

esq->setRotation(180);

addChild(esq);

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

cima->setScale((0.2*size.height)/cima->boundingBox().size.height);

cima->setPosition(ccp(size.width-cima->boundingBox().size.width-cima->boundingBox().size.height/2,1.5*cima->boundingBox().size.width + cima->boundingBox().size.height));

cima->setRotation(270);

addChild(cima);

O que fizemos no trecho de código acima? Primeiramente abrimos o sprite sheet que você baixou daqui do site e incluímos um Sprite que representa a garagem, também a redimensionando de forma que ela seja mostrada por inteiro na tela. Logo após incluímos dois carros vermelhos no ambiente de modo que eles possuam comprimento igual a 30% da largura da tela e posicionamos em seus lugares. Por último, incluímos os quatro futuros botões de interação com o game: o de aceleração para frente, o de aceleração à ré, o de virar à esquerda e o de virar à direita. O resultado disso tudo é mostrado na Figura 2.

Figura 2 - Tela do gameplay

Figura 2 – Tela do gameplay

Vimos nesse tutorial como funciona um jogo ao estilo car parking. Soubemos que o principal objetivo desses tipos de jogos é estacionar o carro com o mínimo de colisões possíveis. Ainda não implementamos qualquer funcionalidade, mas já testamos os Sprites e vimos como ficará o jogo quando ele estiver funcionando. No próximo tutorial criaremos um mundo físico no Box2D para o jogo que fará todos os tratamentos necessários para adicionar realismo ao nosso game.

Um grande abraço e nos vemos adiante. []

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