isd 2015 - interfaces de games para diferentes telas
TRANSCRIPT
![Page 1: ISD 2015 - Interfaces de Games para Diferentes Telas](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55c2865bbb61eb72608b45b1/html5/thumbnails/1.jpg)
Interfaces de Games
para Diferentes TelasNaked Monkey Games
Pedro Kayatt
@pekayatt
![Page 2: ISD 2015 - Interfaces de Games para Diferentes Telas](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55c2865bbb61eb72608b45b1/html5/thumbnails/2.jpg)
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
![Page 3: ISD 2015 - Interfaces de Games para Diferentes Telas](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55c2865bbb61eb72608b45b1/html5/thumbnails/3.jpg)
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
![Page 4: ISD 2015 - Interfaces de Games para Diferentes Telas](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55c2865bbb61eb72608b45b1/html5/thumbnails/4.jpg)
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…. ><)
![Page 5: ISD 2015 - Interfaces de Games para Diferentes Telas](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55c2865bbb61eb72608b45b1/html5/thumbnails/5.jpg)
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).
![Page 6: ISD 2015 - Interfaces de Games para Diferentes Telas](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55c2865bbb61eb72608b45b1/html5/thumbnails/6.jpg)
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
![Page 7: ISD 2015 - Interfaces de Games para Diferentes Telas](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55c2865bbb61eb72608b45b1/html5/thumbnails/7.jpg)
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
![Page 8: ISD 2015 - Interfaces de Games para Diferentes Telas](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55c2865bbb61eb72608b45b1/html5/thumbnails/8.jpg)
Cocos2d-X – Arquitetura
![Page 9: ISD 2015 - Interfaces de Games para Diferentes Telas](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55c2865bbb61eb72608b45b1/html5/thumbnails/9.jpg)
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)
![Page 10: ISD 2015 - Interfaces de Games para Diferentes Telas](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55c2865bbb61eb72608b45b1/html5/thumbnails/10.jpg)
Cocos2d-X – Explicando
![Page 11: ISD 2015 - Interfaces de Games para Diferentes Telas](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55c2865bbb61eb72608b45b1/html5/thumbnails/11.jpg)
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
![Page 12: ISD 2015 - Interfaces de Games para Diferentes Telas](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55c2865bbb61eb72608b45b1/html5/thumbnails/12.jpg)
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
![Page 13: ISD 2015 - Interfaces de Games para Diferentes Telas](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55c2865bbb61eb72608b45b1/html5/thumbnails/13.jpg)
Cocos2d-X – Agora para a tela! (2)
Existem cinco tipos emgeral:
FixedHeight
FixedWidth
Sendos estes últimos 2
os mais indicados
para se utilizar.
![Page 14: ISD 2015 - Interfaces de Games para Diferentes Telas](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55c2865bbb61eb72608b45b1/html5/thumbnails/14.jpg)
Exemplos - Badaboom
Jogo com Design Resolution 1920x1080
Desenvolvimento inicalmente para o Intel Perceptual Challenge 2013
Interface com objetos interativos
![Page 15: ISD 2015 - Interfaces de Games para Diferentes Telas](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55c2865bbb61eb72608b45b1/html5/thumbnails/15.jpg)
Exemplos - Badaboom
![Page 16: ISD 2015 - Interfaces de Games para Diferentes Telas](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55c2865bbb61eb72608b45b1/html5/thumbnails/16.jpg)
Exemplos - Badaboom
![Page 17: ISD 2015 - Interfaces de Games para Diferentes Telas](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55c2865bbb61eb72608b45b1/html5/thumbnails/17.jpg)
Exemplos - Badaboom
![Page 18: ISD 2015 - Interfaces de Games para Diferentes Telas](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55c2865bbb61eb72608b45b1/html5/thumbnails/18.jpg)
Exemplos – Domino Gang
Jogo com Design Resolution 1280x960
Jogo de Dominó multiplayer local: “Party Game”
Interface simplificada de botões e menus.
![Page 19: ISD 2015 - Interfaces de Games para Diferentes Telas](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55c2865bbb61eb72608b45b1/html5/thumbnails/19.jpg)
Exemplos - Domino Gang
![Page 20: ISD 2015 - Interfaces de Games para Diferentes Telas](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55c2865bbb61eb72608b45b1/html5/thumbnails/20.jpg)
Exemplos - Domino Gang
![Page 21: ISD 2015 - Interfaces de Games para Diferentes Telas](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55c2865bbb61eb72608b45b1/html5/thumbnails/21.jpg)
Exemplos - Domino Gang
![Page 22: ISD 2015 - Interfaces de Games para Diferentes Telas](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55c2865bbb61eb72608b45b1/html5/thumbnails/22.jpg)
Exemplos - Domino Gang
![Page 23: ISD 2015 - Interfaces de Games para Diferentes Telas](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55c2865bbb61eb72608b45b1/html5/thumbnails/23.jpg)
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.
![Page 24: ISD 2015 - Interfaces de Games para Diferentes Telas](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55c2865bbb61eb72608b45b1/html5/thumbnails/24.jpg)
Obrigado!Pedro Kayatt
@pekayatt
Naked Monkey Games
@nakedmonkeyG
www.nakedmonkey.com.br
![Page 25: ISD 2015 - Interfaces de Games para Diferentes Telas](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55c2865bbb61eb72608b45b1/html5/thumbnails/25.jpg)
Extra – Dinos do Brasil
http://www.dinosdobrasil.com.br