interfaces de games para diferentes telas
Post on 24-Dec-2014
108 Views
Preview:
DESCRIPTION
TRANSCRIPT
Interfaces de Games para Diferentes TelasNaked Monkey GamesPedro Kayatt e Vinicius Vecchi
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
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
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…. ><)
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).
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
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
Cocos2d-X – Arquitetura
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)
Cocos2d-X – Explicando
Cocos2d-X – Como assim?
Sendo:RW – Largura do resourceDW – Largura do DesignSW – 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
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
Cocos2d-X – Agora para a tela! (2)Existem cinco tipos em geral:
• FixedHeight• FixedWidth
• Sendos estes últimos 2 os mais indicados para se utilizar.
Exemplos - Badaboom
• Jogo com Design Resolution 1920x1080
• Desenvolvimento inicalmente para o Intel Perceptual Challenge 2013
• Interface com objetos interativos
Exemplos - Badaboom
Exemplos - Badaboom
Exemplos - Badaboom
Exemplos – Domino Gang
• Jogo com Design Resolution 1280x960
• Jogo de Dominó multiplayer local: “Party Game”
• Interface simplificada de botões e menus.
Exemplos - Domino Gang
Exemplos - Domino Gang
Exemplos - Domino Gang
Exemplos - Domino Gang
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.
Obrigado!
@pekayatt
@vvecchi
@nakedmonkeyG
www.nakedmonkey.com.br
top related