Tutorial: Desenvolvendo um Jogo de Labirinto – Parte 1: Conceito e Tela de Gameplay

Olá Pessoal, iniciaremos mais um conjunto de tutoriais.

Implementaremos outro jogo de labirinto mas com mecânica diferente.

Não se perca e alcance o fim do desenvolvimento de mais um jogo.

Finalizamos no tutorial passado o desenvolvimento do jogo ao estilo Pokey Pummel. Implementamos o cronômetro e as rotinas de término de jogo. Ficamos de ver qual jogo iniciaríamos para desenvolvimento nesse tutorial.

Já fizemos um jogo de labirinto, cujo conjunto de tutoriais se inicia a partir desse. Porém, o jogo que iniciaremos agora terá a mecânica clássica. Nesse tutorial, nós veremos como funciona a mecânica clássica de um jogo de labirinto e implementaremos a tela de gameplay.

 

Conceito do Jogo de Labirinto

Na mecânica clássica dos jogos de labirinto, o jogador se movimenta pelo cenário por meio dos botões de interação com o jogo. São quatro botões que representam as quatro direções para locomoção do personagem, dependendo da região onde ele está no labirinto. As direções são: para cima, para baixo, para a direita e para a esquerda.

O labirinto é apresentado ao jogador por meio de uma matriz em que cada célula é uma região transitável ou não. O personagem encontra-se em uma célula da matriz e ele pode se movimentar para as células adjacentes que são regiões transitáveis. Simples assim. O vídeo a seguir ilustra a explicação dada. Ele mostra o gameplay do jogo Corridors.

É um jogo parecido com esse apresentado no vídeo que desenvolveremos nesse conjunto de tutoriais.

 

Projeto e Tela de Gameplay

Conhecendo o jogo de labirinto e a sua mecânica clássica, já podemos iniciar o desenvolvimento. Primeiro vamos criar o projeto Cocos2d-x do jogo para a plataforma Android. Digite no terminal o comando “cocos new Labirinto -p com.Santy.Labirinto -l cpp” na pasta onde você deseja criar a pasta do projeto. As ferramentas do Cocos2d-x criarão um projeto para a linguagem C++. A Figura 1 mostra o projeto sendo criado. Caso você não saiba como criar projetos Cocos2d-x, acesse esse tutorial. Caso você ainda precise configurar todo ou parte do ambiente de desenvolvimento, acesse esse tutorial.

Após a criação do projeto, apagaremos a imagem padrão do Cocos2d-x, essa apresentada na aplicação padrão, e copiaremos os arquivos de tile set e de sprite sheet na pasta “Resources”. Acesse esse tutorial caso você não saiba o que é um tile set e acesse esse tutorial caso você não saiba o que é um sprite sheet. Apague o arquivo “HelloWorld.png”, existente na pasta “Resources”. Baixe esse arquivo e o descompacte nessa mesma pasta. Os arquivos de tile set foram feitos por mim mesmo e o arquivo de sprite frame eu modifiquei com base em um emoticon existente nos confins da Internet. =] O cenário do labirinto já está modelado no arquivo de extensão TMX. Agora o projeto tem somente os arquivos necessários para a execução o jogo.

Vamos ao código. Abra o arquivo “HelloWorldScene.h” e adicione as seguintes linhas de código:

cocos2d::TMXTiledMap* labirinto;

cocos2d::Sprite* personagem;

logo baixo dessa:

virtual bool init();

Com isso, nós declaramos duas variáveis de classe: uma que armazena a referência do tile set e outra que armazena a referência do sprite do personagem. Isso já é o suficiente para termos ideia de como será o gameplay do jogo. Salve esse arquivo e abra o arquivo “HelloWorldScene.cpp”. Apague as seguintes linhas de código nele:

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

// 3. add your codes below…

// add a label shows “Hello World”

// create and initialize a label

auto label = Label::createWithTTF(“Hello World”, “fonts/Marker Felt.ttf”, 24);

// position the label on the center of the screen

label->setPosition(Vec2(origin.x + visibleSize.width/2,

origin.y + visibleSize.height – label->getContentSize().height));

// add the label as a child to this layer

this->addChild(label, 1);

// add “HelloWorld” splash screen”

auto sprite = Sprite::create(“HelloWorld.png”);

// position the sprite on the center of the screen

sprite->setPosition(Vec2(visibleSize.width/2 + origin.x, visibleSize.height/2 + origin.y));

// add the sprite as a child to this layer

this->addChild(sprite, 0);

e adicione no mesmo lugar as seguintes linhas de código:

HelloWorld::labirinto = TMXTiledMap::create(“Labirinto.tmx”);

HelloWorld::labirinto->setAnchorPoint(Vec2(0.5,0.5));

HelloWorld::labirinto->setScale(visibleSize.height/HelloWorld::labirinto->getContentSize().height);

HelloWorld::labirinto->setPosition(visibleSize.width/2,visibleSize.height/2);

addChild(HelloWorld::labirinto);

Sprite* tile = HelloWorld::labirinto->getLayer(“Camada de Tiles 1”)->getTileAt(Vec2(4,1));

HelloWorld::personagem = Sprite::create(“Personagem.png”);

HelloWorld::personagem->setPosition(Vec2(

  tile->getPositionX() + tile->getBoundingBox().size.width/2,

  tile->getPositionY() + tile->getBoundingBox().size.height/2));

HelloWorld::labirinto->addChild(HelloWorld::personagem);

Com isso, nós apagamos o código que apresenta ao jogador uma etiqueta de “Hello World” e a imagem padrão do Cocos2d-x. Além disso, nós abrimos o tile set do nosso labirinto e adicionamos o personagem em uma das células do tile set, esse representado por uma matriz. Salve o código e execute o jogo. Note que o labirinto é pequeno, mas é suficiente para podermos entender como implementar um jogo desse tipo. Para os curiosos de plantão, a Figura 2 mostra a tela de gameplay. A célula verde representa o lugar onde jogador inicia a jornada e a célula amarela onde ele finaliza. O personagem é representado pelo emoticon.

 

Criamos no tutorial de hoje o projeto de um jogo de labirinto. Vimos como funciona a mecânica clássica dos jogos de labirinto, criamos o projeto do jogo em Cocos2d-x e implementamos a tela de gameplay.

No próximo tutorial, nós faremos o personagem se movimentar no labirinto.

Um grande abraço e até mais. []