Tutorial: Simulação física com Cocos2d-x – Parte 1: Sprites e corpos rígidos

Já vimos em outros tutoriais como fazer simulação física com Cocos2d-x.

Mas como essa biblioteca tem uma equipe de mantenedores muito competente, ocorreram algumas modificações que ajudam bastante o desenvolvedor.

Veremos mais um conjunto de tutoriais sobre simulação física com Cocos2d-x.

Parte 1 – Parte 2 – Parte 3

Terminamos no último tutorial um conjunto de tutoriais que mostrava como configurar um ambiente de desenvolvimento de jogos com Cocos2d-x para a plataforma Android. Esse conjunto de tutoriais foi finalizado com a criação de um projeto Cocos2d-x para Android e com a compilação e execução do aplicativo padrão no aparelho.

No tutorial de hoje nós daremos início a um novo conjunto de tutoriais. Veremos como programar vários tipos de simulação física nas versões mais novas da biblioteca Cocos2d-x. Veremos que, agora, a programação de simulações físicas está mais simples e direta.

 

Integração entre bibliotecas

Já mostrei em outros tutoriais do blog Fábrica de Jogos como fazer simulações físicas com Cocos2d-x utilizando a biblioteca Box2D. O principal motivo de eu reescrever tutoriais sobre simulação física com Cocos2d-x é que, antes, era necessário programar em duas bibliotecas: uma física (Box2D) e uma gráfica (Cocos2d-x).

Com o passar do tempo, os desenvolvedores da biblioteca Cocos2d-x integraram a programação da Cocos2d-x com uma biblioteca física chamada Chipmunk. Isso significa que, agora, programar simulação física com Cocos2d-x ficou mais fácil e direto. Não há mais a necessidade de saber programar em uma biblioteca física específica, como vínhamos fazendo até então com a Box2D. Também não há a necessidade de saber como integrar manualmente a biblioteca física com a biblioteca gráfica. Toda essa integração entre a biblioteca física e a gráfica já é feita pela própria Cocos2d-x.

Atualmente, para programar simulações físicas com Cocos2d-x, basta conhecer alguns conceitos básicos de simulação física e os objetos da biblioteca Cocos2d-x implementados para isso. Os conceitos sobre simulação física necessários para darmos continuidade no tutorial de hoje já foram apresentados em tutoriais anteriores. Os conceitos de corpo rígido (body), material (material) e formato (shape) podem ser encontrados nesse tutorial.

Como tudo ficou mais fácil, então vamos diretamente à programação.

 

Programando a simulação física

A nossa simulação física consistirá em um aplicativo que cria corpos rígidos aleatórios na parte superior da tela do aparelho. Tais corpos rígidos poderão ser caixas de madeira ou bolas de pedra de tamanhos variados. O aplicativo criará um novo objeto rígido a cada meio segundo. Com o passar do tempo, a parte inferior da tela é preenchida com objetos rígidos variados devido a ação da gravidade.

Começaremos criando um projeto Cocos2d-x com nome “SimulacaoFisica” e nome de pacote “com.Santy.SimulacaoFisica”, como mostrado na Figura 1. Se você não lembra como criar um projeto Cocos2d-x, dê uma olhada nesse tutorial. Após a criação do projeto, vamos nos preocupar com os seus arquivos de imagem. Como de praxe, não precisaremos do arquivo de imagem padrão do Cocos2d-x. Abra a pasta “Resources” e apague o arquivo “HelloWorld.png”. Em compensação, o nosso aplicativo de simulação física utilizará alguns arquivos de sprite sheet. Baixe esse arquivo compactado e o descompacte na pasta “Resources”. Se você não sabe do que se trata um sprite sheet, acesse esse tutorial.

Vamos ao código. Primeiramente, adicionaremos o protótipo do único método necessário para essa simulação física. Abra o arquivo “HelloWorldScene.h” e adicione a seguinte linha de código:

void adicionaCorpo(float dt);

logo abaixo dessa:

virtual bool init();

Esse método, nomeado “adicionaCorpo”, será executado a cada meio segundo e possui a função de adicionar um novo corpo rígido aleatório na simulação. Salve e feche esse arquivo, já fizemos o que era necessário nele.

Abra o arquivo “HelloWorldScene.cpp” que agora começaremos a sua edição. Para que os cálculos de simulação física sejam executados pela biblioteca Cocos2d-x, é necessário criar o objeto Scene padrão por meio da chamada de outro método. Dessa forma, modifique a seguinte linha de código:

auto scene = Scene::create();

de forma que ela fique assim:

auto scene = Scene::createWithPhysics();

No entanto, ainda existem códigos que não são necessário para a simulação física. Podemos apagar o trecho de código que adiciona na tela uma etiqueta escrita “Hello World” e a imagem padrão do Cocos2d-x. Delete todo o código que começa nessas linhas (inclusive):

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

// 3. add your codes below…

e termina nessa (inclusive):

this->addChild(sprite, 0);

Agora nós carregaremos o sprite sheet para que os sprites de caixa de madeira e de bola de pedra possam ser criados. Logo após o carregamento, nós criamos um corpo rígido que representa uma parede ao redor da tela do aparelho. Fizemos isso para que os objetos não saiam da tela em momento algum. Por último, nós programamos a execução do método “adicionaCorpo” a cada meio segundo. Para fazer essas três tarefas, adicione as seguintes linhas de código no mesmo lugar onde você apagou o trecho de código anterior.

SpriteFrameCache::getInstance()->addSpriteFramesWithFile(“SpriteSheet.plist”);

Vec2 pontos[] = {Vec2(-visibleSize.width/2,-visibleSize.height/2),Vec2(-visibleSize.width/2,visibleSize.height/2),

  Vec2(visibleSize.width/2,visibleSize.height/2),Vec2(visibleSize.width/2,-visibleSize.height/2)};

PhysicsBody* limitesCorpo = PhysicsBody::createEdgePolygon(pontos,4,PhysicsMaterial(1.0,0.0,0.5));

limitesCorpo->setDynamic(false);

addComponent(limitesCorpo);

schedule(schedule_selector(HelloWorld::adicionaCorpo),0.5);

Se você analisar como foi criado o corpo rígido correspondente à parede, você perceberá que nós criamos um polígono oco com vértices nos quatro cantos da tela. Além disso, você também perceberá que esse corpo rígido não é dinâmico, ou seja, ele é estático. Corpos rígidos estáticos não sofrem ação da gravidade e não sofrem movimentação quando outro objeto colide com eles.

Agora só falta implementar o método “adicionaCorpo” para podermos executar a nossa simulação física. Adicione as seguintes linhas de código no final do arquivo.

void HelloWorld::adicionaCorpo(float dt) {

    Size size = Director::getInstance()->getVisibleSize();

    Sprite* obj;

    PhysicsBody* corpo;

    if(cocos2d::random()%2) {

        obj = Sprite::createWithSpriteFrameName(“Caixa.png”);

        corpo = PhysicsBody::createBox(obj->getContentSize(),PhysicsMaterial(1.0,0.0,0.5));

    } else {

        obj = Sprite::createWithSpriteFrameName(“Bola.png”);

        corpo = PhysicsBody::createCircle(obj->getContentSize().width/2,PhysicsMaterial(1.0,0.0,0.5));

    }

    obj->setScale(cocos2d::random(0.075,0.15)*size.height/obj->getContentSize().height);

    obj->setPosition(obj->getBoundingBox().size.width/2+rand_0_1()*(size.width-obj->getBoundingBox().size.width),

      size.height-obj->getBoundingBox().size.height/2);

    obj->addComponent(corpo);

    addChild(obj);

}

Então, qual o procedimento que o método “adicionaCorpo” faz? Primeiramente é sorteado um valor inteiro aleatório. Se esse valor for par, então é criado um sprite de bola de pedra e um corpo rígido circular, caso contrário, é criado um sprite de caixa de madeira e um corpo rígido quadrado. Logo após, é sorteado um valor aleatório que define o tamanho do objeto. Depois, o objeto criado é posicionado aleatoriamente na parte superior da tela. Por último, o corpo rígido é associado ao sprite e o sprite é adicionado na tela.

Agora sim, você pode compilar o código e executar o jogo. Se você não se lembra como fazer isso, dê uma olhada nesse tutorial. O resultado é algo como o que é mostrado no vídeo a seguir.

 

Vimos no tutorial de hoje como fazer uma simulação física simples com Cocos2d-x. Percebemos que a programação ficou mais simples em relação a anterior. Atualmente não é mais necessário saber programar utilizando diretamente uma biblioteca física. Vimos que integração entre a biblioteca física e a biblioteca gráfica já é realizada pelo Cocos2d-x, facilitando a programação de simulações físicas.

Nos próximos tutoriais nós veremos como aplicar outros conceitos de simulação física, como ‘juntas’ e ‘detecção’ de colisão. Deixo aqui o meu conselho a vocês para acessarem os outros tutoriais do blog Fábrica de Jogos. Além do próprio blog, existe o canal no youtube, que também tem tutoriais em vídeo. Vale a pena dar uma olhada lá também.

Por hoje é isso pessoal. Um grande abraço e até mais. []