Cocos2D é uma engine open source multiplataforma para desenvolvimento de jogos 2D em HTML5, C++ e outras linguagens. A apresentação discute as arquiteturas de Cocos2D-X e Cocos2D-HTML5, demonstra como configurar o ambiente de desenvolvimento e criar sprites, ações, entrada de toque e teclado em jogos 2D com Cocos2D-HTML5.

1. Desenvolvendo
Jogos 2D em
HTML5
Pedro Kayatt
@pekayatt

2. COCOS2D
 Cross Platform
 IOS
 Android
 Windows Phone
 Blackberry, Bada, Tizen, geladeira da minha avó….
 Open Source
 Fast
 Prove
 25% de todos jogos mobiles (muito forte na Ásia)

3. Coco2D – Qual?
 Cocos2D-X
 C++
 Com maior suporte a diferentes plataformas
 Rápida e leve
 Cocos2D-XNA
 Windows Phone
 MonoGame
 Cocos2D-HTML5
 Rápida (Javascript)
 Multi plataforma (em navegadores)
 Javascript Binding

4. Cocos2D-X - Arquitetura

5. Cocos2D-HTML5 - Arquitetura

6. Javascript binding what?
 Performance até 20x melhor do que no mobile browser
 Como? Mágica? Não! É tecnologia (e um pouco de magia negra)
 Mozilla Spidermonkey – Roda o javascript
como código nativo (C++)

7. The magic

8. Preparando o Ambiente
http://www.cocos2d-x.org/download

9. Instalando Web-Service
• XAMPP : for windows, Mac, Linux.
• WAMP : for windows
• MAMP : for mac

10. Testando

11. Javascript IDE
 Notepad ++
 Aptana
 Jetbraind Webstorm
 Visual Studio 2012

12. Estrutura

13. Hierárquica

14. Exemplos
 MoonWarriors – um jogo no melhor estilo “shooter” onde o jogador
controla uma nave espacial
 WatermelonWithMe – utiliza de um simulador de física 2D
(chipmunk) e desafia o jogador a dirigir uma caminhonete sem
deixar melancias caírem de sua caçamba.
 CrystalCraze – um jogo no estilo Puzzle elaborado com uma
ferramenta chamada CocosBuilder
 CocosDragonJS – jogo plataforma parecido com sucessos como
Doogle Jump e Mega Jump, utiliza uma mescla de CocosBuilder
com edição de Javascript

15. Moonwarriors

16. Exemplo – HelloHTML5World
var c = {
COCOS2D_DEBUG:2, //0 desliga, 1 básica, ou 2 para depuração completa
box2d:false, //Define se utilizaremos a extensão Box2D de Simulação Fisica
chipmunk:false, //Define a utilização da extensão Chipmunk
showFPS:true, //Exibir Quadros por Segundo
frameRate:60, //Define com quantos quadros por segundo seu jogo rodará
loadExtension:false, //Carregar as Extensões da Cocos2D
renderMode:0, //Escolhe o RenderMode: 0(padrão), 1(Canvas), 2(WebGL)
tag:'gameCanvas', //o element DOM onde rodará a Cocos2D
engineDir:'../cocos2d/', //localização da Engine
SingleEngineFile:'', //Se a Engine foi minimizada para apenas um arquivo.
appFiles:[
'src/resource.js',
'src/myApp.js'//Adicione todos os seus arquivos fontes aqui.
]
};

17. Adicionando Sprites
var lazyLayer = cc.Layer.create();
this.addChild(lazyLayer);
// adicionando o sprite ao lazyLayer, centralizado e usando o arquivo .png como
fonte.
this.sprite = cc.Sprite.create("res/HelloWorld.png");
this.sprite.setPosition(cc.p(size.width / 2, size.height / 2));
// escalona o Sprite para ter metade de seu tamanho nominal
this.sprite.setScale(0.5);
// gira o Sprite em 180 graus.
this.sprite.setRotation(180);
lazyLayer.addChild(this.sprite, 0);

18. Actions
var rotateToA = cc.RotateTo.create(2, 0);
var scaleToA = cc.ScaleTo.create(2, 1, 1);
// executa uma sequência de ações diretamente no
this.sprite
this.sprite.runAction(cc.Sequence.create(rotateToA,
scaleToA));

19. Entrada - Touch
// ao tocar na tela
onTouchesBegan:function (touches, event) {
this.isMouseDown = true;
},
// ao mover o toque na tela
onTouchesMoved:function (touches, event) {
if (this.isMouseDown) {
if (touches) {
this.circle.setPosition(cc.p(touches[0].getLocation().x,
touches[0].getLocation().y));
}
}
},
// ao remover o toque da tela
onTouchesEnded:function (touches, event) {
this.isMouseDown = false;
}

20. Entrada - Teclado
this.setKeyboardEnabled(true);
onKeyUp:function (e){
// intercepta quando uma tecla é solta
},
onKeyDown:function (e){
// intercepta quando uma tecla é pressionada

21. Testando no Navegador

22. CONFIGURANDO A COCOS2D-X PARA O
JAVASCRIPT BINDING

23. Abrindo no VS2012

24. Criando seu projeto
 Usando Python (3.2)

25. EXECUTANDO O PROJETO NO ANDROID
 Android SDK
 http://developer.android.com/sdk/index.html
 Eclipse ADT Bundle
 Baixar Emulador Intel, HAXM e tudo que quiser no Android Manager
 Android NDK
 http://developer.android.com/tools/sdk/ndk/index.html
 CygWin
 Procure Mirrors mais amigaveis… (o default é um inferno)

26. Setando variaveis de ambiente
 c:cygwinhomeuser.bashprofile, abra este arquivo com o
Notepad++ e adicione:
 NDK_ROOT=/cygdrive/c/android-ndk-r8e
 Export NDK_ROOT
 Faça pelo Opções Avançadas do Windows

27. Compilando o projeto
 ./build-native.sh
 Deu problema?
 CHMOD 777 –R .

28. Importando no eclipse

29. PROBLEMA!?

30. Relaxe e aproveite!
Perguntas?

31. Obrigado!
 Pedro Kayatt
 @pekayatt
 Naked Monkey Games
 @nakedmonkeyG
 www.nakedmonkey.com.br

32. Mais uma coisinha….