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 – 7VRWonders

http://bit.ly/7vrwonders