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 Rpida e leve Cocos2D-XNA Windows Phone MonoGame Cocos2D-HTML5 Rpida (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? Mgica? No! tecnologia (e um pouco de magia negra) Mozilla Spidermonkey Roda o javascript como cdigo 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. Hierrquica 14. Exemplos MoonWarriors um jogo no melhor estilo shooter onde o jogador controla uma nave espacial WatermelonWithMe utiliza de um simulador de fsica 2D (chipmunk) e desafia o jogador a dirigir uma caminhonete sem deixar melancias carem de sua caamba. 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 edio de Javascript 15. Moonwarriors 16. Exemplo HelloHTML5World var c = { COCOS2D_DEBUG:2, //0 desliga, 1 bsica, ou 2 para depurao completa box2d:false, //Define se utilizaremos a extenso Box2D de Simulao Fisica chipmunk:false, //Define a utilizao da extenso Chipmunk showFPS:true, //Exibir Quadros por Segundo frameRate:60, //Define com quantos quadros por segundo seu jogo rodar loadExtension:false, //Carregar as Extenses da Cocos2D renderMode:0, //Escolhe o RenderMode: 0(padro), 1(Canvas), 2(WebGL) tag:'gameCanvas', //o element DOM onde rodar a Cocos2D engineDir:'../cocos2d/', //localizao 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 sequncia de aes 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 Faa pelo Opes Avanadas 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.