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