Você está na página 1de 32

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

25% de todos jogos mobiles (muito forte na sia)

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

Cocos2D-X - Arquitetura

Cocos2D-HTML5 - Arquitetura

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++)

The magic

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

Instalando Web-Service

XAMPP : for windows, Mac, Linux.


WAMP : for windows
MAMP : for mac

Testando

Javascript IDE

Notepad ++

Aptana

Jetbraind Webstorm

Visual Studio 2012

Estrutura

Hierrquica

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

Moonwarriors

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.
]
};

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);

Actions
var rotateToA = cc.RotateTo.create(2, 0);
var scaleToA = cc.ScaleTo.create(2, 1, 1);

// executa
this.sprite

uma

sequncia

de

aes

diretamente

this.sprite.runAction(cc.Sequence.create(rotateToA,
scaleToA));

no

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);

onKeyUp:function

(e){

// intercepta quando uma tecla solta


},
onKeyDown:function (e){
// intercepta quando uma tecla pressionada

Testando no Navegador

CONFIGURANDO A COCOS2D-X PARA O


JAVASCRIPT BINDING

Abrindo no VS2012

Criando seu projeto

Usando Python (3.2)

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)

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

Faa pelo Opes Avanadas do Windows

Compilando o projeto

./build-native.sh

Deu problema?

CHMOD 777 R .

Importando no eclipse

PROBLEMA!?

Relaxe e aproveite!

Perguntas?

Obrigado!

Pedro Kayatt

@pekayatt

Naked Monkey Games

@nakedmonkeyG

www.nakedmonkey.com.br

Mais uma coisinha.