quarta-feira, 6 de fevereiro de 2013

Cocos2D/Cocos2D-x: Sprites

Vamos começar mais uma série de postagens. Começaremos a falar sobre o framework Cocos2D. Esse framework ficou bastante utilizado agora, na era dos smartphones pois foi o primeiro a ser disponibilizado livre para iOS. Mais tarde, ganhou uma versão C++, conhecido como Cocos2D-x, e como tanto o Android quanto iOS tem suporte para uma implementação em C++, então ganhou a vantagem de ser portável.
Como disse, o conteúdo desse blog é basicamente as minhas pesquisas que faço para ter registro. Estou aprendendo através de um livro de Cocos2D, mas o problema é que a minha necessidade é para Cocos2D-x. Por isso, aqui eu trabalharei com os dois, embora, os códigos tirados para o Cocos2D é tirado diretamente do livro, portanto não garanto que ele funciona. 

Então, vamos começar o primeiro assunto que é:


1. Sprite
1.1 Criando um Sprite
Aqui vamos ver como se carrega um sprite.

1.1.1 Cocos2D i


0. CGSize winSize = [[CCDirector sharedDirector] winSize];
1. CCSprite *spaceCargoShip = [CCSprite spriteWithFile:@"SpaceCargoShip.png"];

2. [spaceCargoShip setPosition:ccp(winSize.width/2, winSize.height/2)];
3. [self addChild:spaceCargoShip];

1.1.2 Cocos2D-x

0. CGSize winSize = CCDirector::sharedDirector()->getWinSize();
1. CCSprite *spaceCargoShip = CCSprite::create("SpaceCargoShip.png");
2. spaceCargoShip->setPositionccp(winSize.width/2, winSize.height/2)];
3. this-> addChild(spaceCargoShip);

1.1.3 Comentários
Enumerei as linhas de forma que possa mostrar a equivalência entre as duas. Linhas que não tem equivalência provavelmente foi algum código que adicionei, por isso vai ser comentado de acordo com a necessidade.
Começando com a linha 1, é simples, crie um objeto CCSprite e indique a imagem que via ser carregado.
Na linha 2, vamos configurar a posição dele na tela, para isso usamos o método setPosition que possui como parâmetro um objeto CCPoint, ou seja, um ponto que será adicionado. Para conseguir esse ponto, utilizamos a função cpp que cria um objeto CCPoint com os parâmetros. Por isso, na linha 0 nós pegamos o tamanho de tela na variável winSize e usamos esses valores para indicar onde queremos inserir o sprite.
Na linha 3, adicionamos a Sprite na árvore de elementos. Sem essa ação, não adianta nós configuramos pois ela não irá aparecer. Uma vez colocada, ela será renderizada na tela normalmente.

1.2. Movendo o Sprite
Aqui vamos ver como fazer o sprite mover pela tela.

1.2.1 Cocos2D


1. id moveAction = [CCMoveTo actionWithDuration:5.0f 

     position:ccp(0, size.height/2)];

2. [spaceCargoShip runAction:moveAction];

1.2.2 Cocos2D-x

1. CCFiniteTimeAction* moveAction = 
     CCMoveTo::create(5.0fccp(0, size.height/2));
2. spaceCargoShip->runAction(moveAction);

1.2.3 Comentários
Logo na primeira linha, vemos uma certa divergência: enquanto no Cocos2D utiliza-se um tipo genérico de variável, na versão X vemos que a variável moveAction é da classe CCFiniteTimeAction. Entretanto, o parâmetro é o mesmo, um objeto da classe CCMoveTo. Para criar a classe CCMoveTo, temos como primeiro parâmetro, a duração da animação, e no segundo, um ponto final. A velocidade resultante da locomoção depende do quão longe está esse ponto com o tempo de duração, coisa de física básica.
Na linha 2, damos o comando para o sprite se mover utilizando o método runAction e usando o objeto moveAction como parâmetro.

2. Conclusão
Então pessoal, esse é um tutorial introdutório para a série Cocos2D. Vimos sobre como carregar um sprite e como fazer mover. Claro que existe muito mais coisas para se ver, mas esse fica para um outro post.

Um comentário: