Tutorial: Desenvolvimento de Jogos para Android com Cocos2d-x – Parte 3

Agora que estamos sendo inclusos no real mundo dos desenvolvedores profissionais de games (meeee), podemos começar a criar animações que são muito utilizadas em jogos eletrônicos.

Animações mais simples, que podem ser inclusas no jogo sem que haja muito processamento. Essas animações podem ser realizadas com um objeto chamado Sprite. Vamos animar esse tutorial? =]

No último tutorial eu mostrei a vocês como criar e compilar um jogo que tem código fonte em baixo nível. Falei sobre a necessidade disso para quem quer que o seu jogo seja otimizado e rode decentemente em várias plataformas. Nesse tutorial eu mostrarei como fazer um dos tipos de animações simples com Sprites: as que envolvem trocas consecutivas de imagens em um curto espaço de tempo. Mas … o que são Sprites?

 

Sprites

O tutorial de hoje será focado basicamente na manipulação de Sprites no Cocos2d-x. Mas, antes de sairmos codificando tudo, é necessário que vocês entendam o que é um Sprite, como ele funciona e quando ele pode ser utilizado.

Um Sprite é um objeto gráfico bidimensional ou tridimensional que possui a capacidade de se mover e modificar sua aparência com o passar do tempo. Evitando delongas, no nosso caso e do Cocos2d-x, a movimentação do Sprite na tela é realizada pelo programador e a mudança da aparência é realizada por trocas de imagens.

A troca consecutiva de várias imagens pouco diferentes em um curto espaço de tempo faz com que o objeto se torne uma animação. É dessa forma que os desenhos animados funcionam. Você pode ver na animação ao lado que a animação do Funky Kong (créditos da Nintendo) é um conjunto de imagens que são alternadas sistematicamente em um intervalo de tempo com o intuito de fazer você ver uma movimentação do personagem. Na verdade isso não passa de várias trocas de imagens em um mesmo lugar. =]

Vamos montar um Sprite e animá-lo no seu celular/tablet?

 

Zwoptex

O Zwoptex é um aplicativo para criação de Sprite sheets que tem a sua versão paga e a sua versão gratuita. Felizmente a versão gratuita é suficiente para criarmos o nosso Sprite no jogo. E agora … o que são Sprite sheets?

Sprite sheets são arquivos de imagem que contém todas as imagens dos Sprites contidas em um único arquivo. Sprite sheets são utilizados com o propósito de economizar memória. Tanto o jogo fica mais leve para gravar no dispositivo, como também o consumo de memória é diminuído ao carregar os Sprites durante a execução do jogo. A Figura 1 mostra um exemplo de Sprite sheet (créditos da Sega).

Figura 1 – Sprite sheet do Sonic

O Zwoptex ajuda você a criar esses tipos de imagens partindo de imagens únicas. Ele abre várias imagens em um único Sprite sheet e ajuda você a organizá-lo da melhor forma. É possível baixar a versão livre do software aqui. Ele roda no seu navegador de internet em uma apresentação Flash.

Então vamos criar nosso primeiro Sprite sheet. Abra o Zwoptex com duplo clique sobre o arquivo “Zwoptex.html”. No menu superior do aplicativo, clique em “File” e selecione “Import Images”. Abra todas as imagens que contêm nesse arquivo compactado. Nesse caso vamos criar um Sprite do MegaMan (créditos da Capcom). Essas imagens eu peguei desse site. A figura ao lado mostra a opção. Você pode baixar as imagens utilizadas aqui: Megaman Sprite Frames.

Quando você terminar de incluir as imagens do Sprite, você poderá arrastá-las para qualquer lugar do Sprite sheet. O programa te ajuda a gerar o Sprite sheet da forma que ocupa menos memória. Primeiramente, reduza a imagem do Sprite sheet clicando na opção “Modify”  do menu superior, selecionando “Canvas Width” e clicando em “512px”. Faça o mesmo com a opção “Canvas Height”. Logo após, rearranje as imagens do Sprite selecionando a opção “Arrange” no menu superior e clicando em “By Width”. Na verdade você pode escolher qualquer uma dessas opções para ver o melhor arranjo para você. O Sprite sheet final deverá ficar algo como na Figura 2.

Figura 2 – Sprite sheet do Megaman

Para finalizar, você precisa exportar a imagem e o mapeamento de cada imagem dentro do Sprite sheet. Para isso, clique na opção “File” e selecione a opção “Export Texture”. Ali você exportará o seu Sprite sheet. Dê um nome que você lembre, eu nomeei de “Megaman.png”. Logo após exporte o mapeamento das imagens selecionando a opção logo abaixo: “Export Coordinates”. Nomeie o arquivo com o mesmo nome do Sprite sheet, nesse caso “Megaman.plist”. Esses dois arquivos são muito importantes, não esqueça de exportar os dois.

Já temos nosso Sprite sheet. Agora é colocarmos o Sprite na tela para animar. o/

 

Codificando a animação

Lembram do programa que compilamos no último tutorial? Então … dentro da pasta onde está o projeto, tem três subpastas: “Classes”, “proj.android” e “Resources”. Arraste os arquivos exportados “Megaman.png” e “Megaman.plist” para dentro da pasta “Resources”. Não importa se você exportou esses arquivos com outros nomes, coloque-os nessa pasta. É aqui que vão todas as imagens, sons e qualquer outro recurso que é aberto no Cocos2d-x.

Agora entre na pasta “Classes” e abra o arquivo “HelloWorldScene.cpp”. No arquivo aberto, procure essa linha de código:

CCSprite* pSprite = CCSprite::create(“HelloWorld.png”);

Apague todas as linhas de código entre ela (inclusive ela) e essa próxima (inclusive também):

this->addChild(pSprite, 0);

No lugar onde você apagou as linhas, escreva a seguinte codificação:

CCSpriteFrameCache* sfc = CCSpriteFrameCache::sharedSpriteFrameCache();

sfc->addSpriteFramesWithFile(“Megaman.plist”);

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

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

CCArray* ar = CCArray::create();

ar->addObject(sfc->spriteFrameByName(“m1.png”));

ar->addObject(sfc->spriteFrameByName(“m2.png”));

ar->addObject(sfc->spriteFrameByName(“m3.png”));

ar->addObject(sfc->spriteFrameByName(“m4.png”));

ar->addObject(sfc->spriteFrameByName(“m5.png”));

ar->addObject(sfc->spriteFrameByName(“m6.png”));

sprite->runAction(

      CCRepeatForever::create(

      CCAnimate::create(

      CCAnimation::createWithSpriteFrames(ar,0.15))));

addChild(sprite);

Para explicar o que eu escrevi, eu o dividi em 4 partes separadas por uma linha em branco. Na primeira parte, eu abri o Sprite sheet criado no Zwoptex para ele poder ser utilizado a qualquer momento do jogo. No meu caso eu exportei os arquivos com os nomes “Megaman.png” e “Megaman.plist”. Mude para o seu caso se você exportou com nomes diferentes. Apesar de ter sido aberto somente um Sprite sheet, é possível de criar quantos Sprites (MegaMans) quisermos.

Na segunda parte eu criei um Sprite chamado “sprite” com a imagem adicionada no Sprite sheet nomeada como “m1.png”. Nessa hora vocês vejam a importância de nomear bem os arquivos antes mesmo de criar o Sprite sheet. Logo depois eu o posicionei para o centro da tela do celular.

Na terceira parte eu criei uma lista de imagens, denominadas Sprite frames, que representam a sequência exata que as imagens devem ser mostradas na animação. Nesse caso eles foram consecutivamente “m1.png”, “m2.png”  e assim por diante. Na última linha da terceira parte, eu iniciei a animação do Sprite que eu criei. Notem que ali também tem o tempo entre imagens (frames), que é igual a 0,15 segundos. Notem também que essa animação será executada repetidamente sem um fim definido por causa do uso da classe CCRepeatForever do Cocos2d-x.

Por último, mesmo após eu ter criado o Sprite, criado a animação e tê-la iniciado , ainda é necessário incluir o Sprite na cena do jogo. Se não houver essa linha, o Sprite será criado e animado logicamente, mas não na tela. É necessário que você o inclua na cena para que ele possa ser visualizado pelo jogador.

Agora compile o código de baixo nível no Cygwin. Se você não lembra, olhe o último tutorial. Depois disso compile no Eclipse e veja o resultado. A Figura 3 mostra o Sprite do MegaMan correndo na tela. Obviamente não animará aqui porque eu só tirei um print screen da tela do meu celular. ;D

Figura 3 – Sprite do Megaman

Nesse tutorial nós vimos como funciona o mecanismo do principal elemento gráfico de jogos em duas dimensões: o Sprite. Esse elemento é de extrema importância, pois sem ele não há animação no jogo e, consequentemente, não há jogo, dependendo do jogo, claro. Vimos também como gerar Sprite sheets para que vocês possam criar seus próprios Sprites em seus jogos. Por fim nós vimos como programar uma animação de um Sprite por meio do motor Cocos2d-x. O que acharam do tutorial de hoje? Massa né? =]

No próximo tutorial nó veremos uma outra forma importante de animar Sprite no Cocos2d-x: animar o Sprite fazendo-o se movimentar pela tela do aparelho. Fica meio estranho ver o Megaman correndo “parado” na tela, não acham? Mas isso é assunto para mais adiante.

Então é isso galera, eu espero que esteja empolgando vocês para o desenvolvimento de jogos eletrônicos. Nos vemos mais além. []

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