Desenvolvendo
Jogos 2D em
HTML5
Pedro Kayatt
@pekayatt
COCOS2D
Cross Platform
IOS
Android
Windows Phone
Blackberry, Bada, Tizen, geladeira da minha avó….
Open Source
Fast
Prove
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
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
Preparando o Ambiente
Instalando Web-Service
• XAMPP : for windows, Mac, Linux. • WAMP : for windows
Javascript IDE
Notepad ++
Aptana
Jetbraind Webstorm
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
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.
] };
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);
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));
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;
Entrada - Teclado
this.setKeyboardEnabled(true);
on
KeyUp:function (e){// intercepta quando uma tecla é solta
},
onKeyDown:function (e){
C
ONFIGURANDO A
C
OCOS
2
D
-X
PARA O
Criando seu projeto
E
XECUTANDO O PROJETO NO
A
NDROID
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
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
Compilando o projeto
./build-native.sh
Deu problema?
Relaxe e aproveite!
Obrigado!
Pedro Kayatt
@pekayatt
