Desenvolvendo Jogos 2D em HTML5 - Cocos2d-x
Transferir como PPTX, PDF0 gostou531 visualizações
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.
![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.
]
};](https://image.slidesharecdn.com/desenvolvendojogos2demhtml5-150616142022-lva1-app6892/85/Desenvolvendo-Jogos-2D-em-HTML5-Cocos2d-x-16-320.jpg)
![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;
}](https://image.slidesharecdn.com/desenvolvendojogos2demhtml5-150616142022-lva1-app6892/85/Desenvolvendo-Jogos-2D-em-HTML5-Cocos2d-x-19-320.jpg)
Desenvolvendo Jogos 2D em HTML5 - Cocos2d-x
- 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
- 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
- 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
- 22. CONFIGURANDO A COCOS2D-X PARA O JAVASCRIPT BINDING
- 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 .
- 29. PROBLEMA!?
- 31. Obrigado! Pedro Kayatt @pekayatt Naked Monkey Games @nakedmonkeyG www.nakedmonkey.com.br