View
57
Download
3
Category
Preview:
Citation preview
Interfaces de Games
para Diferentes TelasNaked Monkey Games
Pedro Kayatt
@pekayatt
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
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 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
Cocos2d-X – Agora para a tela!
Agora temos que definircomo queremos quenossa resolução deveser transcrita para a telado dispositivo
Existem cinco tipos emgeral:
ShowAll
ExactFit
NoBorder
Cocos2d-X – Agora para a tela! (2)
Existem cinco tipos emgeral:
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!Pedro Kayatt
@pekayatt
Naked Monkey Games
@nakedmonkeyG
www.nakedmonkey.com.br
Extra – Dinos do Brasil
http://www.dinosdobrasil.com.br
Recommended