O documento discute interfaces de jogos para diferentes telas. Apresenta a solução da Naked Monkey Games de usar a engine Cocos2D-x, que suporta multiplataforma e permite definir uma "Resolução de Design" independente da tela real. Isso é feito através de transformações que adaptam os recursos visuais tanto para a resolução de design quanto para a tela do dispositivo. Exemplos demonstram como isso funciona na prática para jogos desenvolvidos pela empresa.

1. Interfaces de Games
para Diferentes Telas
Naked Monkey Games
Pedro Kayatt
@pekayatt

2. Contos do Macaco Pelado….
 Pedro Kayatt (@pekayatt)
 Msc. Engenharia de Computação – PoliMi
 Mestrando da POLI-USP
 Naked Monkey Games
 Jungle Jump – Custom Shaders e mto mais :D
 Badaboom – Festival SBGames e Intel Perceptual Challenge
 Domino Gang – Multiplayer com a Ubiquos
 Last Survivor – HTML5+JSB Binding

3. Naked Monkey Ltda.
 Dois anos desenvolvendo jogos mobile
 Mais de 400k downloads.
 Intel Perceptual Challenge 2013 (2 dos top10)
 Entrando no mundo da Realidade Virtual

4. Nosso problema..
 Desenvolver jogos para diferentes resoluções
 iPad – 4:3 (1024x768 e 2048x1536)
 iPhone – 3:2 e 16:9 (480x320, 960x640, 1136x640)
 iPhone 6 – (1334x750 e 1920x1080*)
 Android (OMG…. ><)

5. Nossa solução
 Design PRÉVIO de interface!!!
 Utilizar o máximo de ferramentas já prontas.
 Demonstração com Cocos2D-x.
 Conceitos podem facilmente ser aplicados a outras engines (i.e. Unity3D).

6. Cocos2d-X
 Baseado na Cocos2D de Ricardo Quesada
 Engine mais utilizada para jogos de iOS
 Popular – mais de 400k desenvolvedores
 Comprovada – 7 dos 10 jogos mais lucrativos da China
 Código Aberto – GitHub e Comunidade Ativa

7. Cocos2d-X – Qual?
 Cocos2D-X
 C++
 Com maior suporte a diferentes plataformas
 Rápida e leve
 Cocos2D-XNA (CocoSharp)
 Windows Phone
 MonoGame
 Cocos2D-HTML5
 Rápida (Javascript)
 Multi plataforma (em navegadores)
 Javascript Binding

8. Cocos2d-X – Arquitetura

9. Cocos2d-X – Multi Resolution
 Suporte na Cocos2d-x 2.04 em diante.
 Capacidade de descobrir a resolução do dispositivo.
 Definição do que é chamado Resolução De Design (Design Resolution)

10. Cocos2d-X – Explicando

11. Cocos2d-X – Como assim?
Sendo:
RW – Largura do resource
DW – Largura do Design
SW – Largura da Tela
A primeira transformação é
adaptar o tamanho da imagem
à resolução de design. Isso é
feito pelo próprio
artista/desenvolvedor.
Notem a
“Letter box”
Corte lateral do
Fundo

12. Cocos2d-X – Agora para a tela!
Agora temos que definir
como queremos que
nossa resolução deve
ser transcrita para a tela
do dispositivo
Existem cinco tipos em
geral:
 ShowAll
 ExactFit
 NoBorder

13. Cocos2d-X – Agora para a tela! (2)
Existem cinco tipos em
geral:
 FixedHeight
 FixedWidth
 Sendos estes últimos 2
os mais indicados
para se utilizar.

14. Exemplos - Badaboom
 Jogo com Design Resolution 1920x1080
 Desenvolvimento inicalmente para o Intel Perceptual Challenge 2013
 Interface com objetos interativos

15. Exemplos - Badaboom

16. Exemplos - Badaboom

17. Exemplos - Badaboom

18. Exemplos – Domino Gang
 Jogo com Design Resolution 1280x960
 Jogo de Dominó multiplayer local: “Party Game”
 Interface simplificada de botões e menus.

19. Exemplos - Domino Gang

20. Exemplos - Domino Gang

21. Exemplos - Domino Gang

22. Exemplos - Domino Gang

23. Conclusão
 Planeje sua interface com antecedência!!!
 Posicionar objetos através de código para posições relativas da tela é
sempre uma boa opção em designs “flutuantes”.
 Prepare sempre backgrounds que possam ter áreas mortas.

24. Obrigado!
Pedro Kayatt
@pekayatt
Naked Monkey Games
@nakedmonkeyG
www.nakedmonkey.com.br

25. Extra – Dinos do Brasil
http://www.dinosdobrasil.com.br