O documento aborda o desenvolvimento de interfaces de jogos móveis para diversas resoluções de tela, apresentando soluções como o uso prévio de design e ferramentas prontas, com a engine cocos2d-x como destaque. Exemplos de jogos como Badaboom e Domino Gang mostram práticas recomendadas e design de interface. A conclusão enfatiza a importância do planejamento na criação de interfaces e adaptação de elementos para diferentes dispositivos.

1. Interfaces de
Games para
Diferentes Telas
Naked Monkey Games
Pedro Kayatt e Vinicius Vecchi

2. Contos do Macaco Pelado….
• Pedro Kayatt (@pekayatt)
– Msc. Engenharia de Computação – PoliMi
– Mestrando da POLI-USP
• Vinicius Vecchi (@vvecchi)
– Bacharel em Matemática Aplicada IME-USP

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!
@pekayatt
@vvecchi
@nakedmonkeyG
www.nakedmonkey.com.br