Desenvolvendo Jogos 2D em HTML5. Pedro

Transcrição

1 Desenvolvendo Jogos 2D em HTML5 Pedro

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

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 Eclipse ADT Bundle Baixar Emulador Intel, HAXM e tudo que quiser no Android Manager Android NDK CygWin Procure Mirrors mais amigaveis (o default é um inferno)

26 Setando variaveis de ambiente c:\cygwin\home\user\.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 Naked Monkey

32 Mais uma coisinha.