1. Globalcode – Open4education
Desenvolvimento e análise de performance
de jogos Android com Cocos2d-HTML5
George H. Silva
Android Community Manager
Vinicius Vecchi
Game Developer

2. Globalcode – Open4education
FISL 15
Agenda
Fragmentação
A importância de Open Source
Desenvolvendo jogos em HTML5
Cocos2d-HTML5
Ambiente de desenvolvimento
Análise de desempenho
Otimizações

3. Globalcode – Open4education
FISL 15
Fragmentação
Diversidade de Hardware
PC
Notebook
Tablet
Smartphone
…

4. Globalcode – Open4education
FISL 15
Fragmentação
Diversidade de Sistemas Operacionais
IOS
Android
Windows
7
8
Phone
Linux
BlackBerry OS

5. Globalcode – Open4education
FISL 15
Fragmentação
Versões de Sistemas Operacionais
Windows Phone 7 vs Windows Phone 8
Android 2.3, 3.0, 4.0 … 4.4

6. Globalcode – Open4education
FISL 15
Fragmentação
Interação
NFC
Sensores
Stylus
Cameras

7. Globalcode – Open4education
FISL 15
Fragmentação
Componentes de Hardware
Tipo de GPU
Arquitetura de CPU
ARM
X86
MIPS
Quantidade de memória RAM
Espaço em disco
…

8. Globalcode – Open4education
FISL 15
Como resolver tudo isso?
1. Impossível!
2. Mas …
1. Conheça o público alvo
2. Mire nas fatias mais grossas do Mercado
3. Quem pode te ajudar
1. Open Source!!!

9. Globalcode – Open4education
FISL 15
Open Source
Além de todas as vantagens que conhecemos …
Fabricantes de Hardware podem contribuir
Desenvolvedores de SO podem contribuir
Desenvolvedor final pode escolher como
compilar e otimizar

10. Globalcode – Open4education
FISL 15
Estudo de Caso
Ambiente Android
SDK + NDK
Cocos2d
Framework de desenvolvimento de jogos open source
Multi plataforma
Baseado em Open GL
E o melhor
Recompilável :-D

11. Globalcode – Open4education
FISL 15
Cocos-2d
Criada em 2008 em python
Em seguida portada para iOS e objective-c
Cocos2d-x port em c++ da cocos2d-iphone
Cocos2d-html5 port para javascript

12. Globalcode – Open4education
FISL 15
Por que usar Cocos?
Open-source
Comunidade ativa
Várias ferramentas e editores
Cross-Platform
Mesmo código pode rodar em várias plataformas móveis
e desktops.

13. Globalcode – Open4education
FISL 15
Estrutura

14. Globalcode – Open4education
FISL 15
Estrutura

15. Globalcode – Open4education
FISL 15
Colocando um Sprite na tela
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/sprite.png");
this.sprite.setPosition(cc.p(size.width / 2, size.height / 2));
// escala o Sprite para ter tamanho 0
this.sprite.setScale(0);
this.sprite.setRotation(180); // gira o Sprite em 180 graus
// cria ações parar girar e escalar o sprite
// para o tamanho e rotação certos
this.sprite.runAction(cc.ScaleTo.create(1,1));
this.sprite.runAction(cc.RotateTo.create(1,0));
lazyLayer.addChild(this.sprite, 0); //coloca no layer

16. Globalcode – Open4education
FISL 15
Entrada
// ao tocar na tela
onTouchesBegan:function (touches, event) {
this.isMouseDown = true;
},
// ao mover o toque na tela
onTouchesMoved:function (touches, event) {
if (this.isMouseDownc && touches) {
this.sprite.setPosition(cc.p(touches[0].getLocation().x,
touches[0].getLocation().y));
}},
// ao remover o toque da tela
onTouchesEnded:function (touches, event) {
this.isMouseDown = false;
}

17. Globalcode – Open4education
FISL 15
Javascript Binding
Permite utilizar o código javascript em plataformas
móveis com desempenho similar ao nativo.
Usa spidermonkey para executar o código de jogo
em javascript
Usa código nativo para transformações de cena,
física e desenho.
Por enquanto somente disponível nas versões 2.x
da cocos2d-x

18. Globalcode – Open4education
FISL 15
Ambiente
Uso de ferramentas para desenvolvimento web
Webstorm + Chrome para desenvolvimento e
depuração
Use o eclipse ou a linha de comando para testar
em aparelhos Android(e o Xcode para iOS)

19. Globalcode – Open4education
FISL 15
Criando um projeto

20. Globalcode – Open4education
FISL 15
Abrindo no Eclipse

21. Globalcode – Open4education
FISL 15
Abrindo no Eclipse

22. Globalcode – Open4education
FISL 15
Compilando mais rápido

23. Globalcode – Open4education
FISL 15
Análise de desempenho
O que estamos procurando:
Queda de FPS
Uso de energia
Número de zumbis

24. Globalcode – Open4education
FISL 15
Cenário de Teste
Criamos um herói imortal
Iniciamos a partir do dia 27
Fluxo continuo de 2 Zumbis por segundo
Compilação padrão
Compilação x86
NDK Android + ICC (também usamos o GCC)
Medição de desempenho usando o Intel GPA

25. Globalcode – Open4education
FISL 15
Uso de CPU – Compilação Padrão

26. Globalcode – Open4education
FISL 15
Uso de CPU – Compilação x86

27. Globalcode – Open4education
FISL 15
Comparação do uso de CPU
Usamos o mesmo Workload nos dois testes
Compilação padrão
Levou cerca de 25 segundos para ficar sobrecarregada
Compilação x86
Levou cerca de 45 segundos para ficar sobrecarregada

28. Globalcode – Open4education
FISL 15

29. Globalcode – Open4education
FISL 15

30. Globalcode – Open4education
FISL 15

31. Globalcode – Open4education
FISL 15

32. Globalcode – Open4education
FISL 15
Comparação de consumo
Consumo 2.35% superior na compilação x86
Por quê?
Não é apenas a CPU que consome energia
Preço associado a uma melhor experiência de usuário
FPS 57.87% superior

33. Globalcode – Open4education
FISL 15
Próximos passos

34. Globalcode – Open4education
FISL 15
Próximos passos

35. Globalcode – Open4education
FISL 15
Conclusões
Analise dados pelos mais diversos ângulos
Open Source permite otimizações consideráveis
Relativar o gasto de energia
Gasto por tempo de execução
Gasto por frame
HTML5 precise de ajuda para multi threading
É uma preocupação válida?
Em uma situação real você sobreviveria a mais de 100
zumbis te perseguindo?

36. Globalcode – Open4education
FISL 15
Contatos
George H. Silva [@ghsilva]
george.silva@intel.com
http://software.intel.com
Vinicius Vecchi [@vvecchi]
vinicius@nakedmonkey.mobi
www.nakedmonkey.mobi