Com o hyperPad, você pode criar seu projeto para vários dispositivos e tamanhos de tela. Quando se trata de suportar diferentes dispositivos, existem dois tipos de projetos: Projetos Específicos para Dispositivos e Projetos Universais.

Projetos Específicos para Dispositivos: Criar uma versão separada do seu projeto para cada plataforma que você deseja suportar. Ao criar seu projeto, você especifica um único dispositivo para seu projeto. Por exemplo, se você deseja fazer apenas um jogo para iPad, selecione APENAS iPad (4:3) ao criar seu projeto.

Projetos Universais: Suporte a vários dispositivos com um único projeto. Ao criar seu projeto, selecione mais de um dispositivo-alvo. Isso significa que o mesmo projeto pode funcionar tanto no iPhone quanto no iPad sem ter duas versões separadas.

Existem prós e contras para ambas as abordagens. Para projetos que requerem controle total sobre a tela e o que você deseja visível o tempo todo, uma abordagem específica para dispositivo pode ser benéfica. No entanto, isso vem com o custo de ter que recriar seu jogo/projeto para cada nova plataforma.

O benefício dos projetos universais é que você só precisa criar seu jogo ou aplicativo uma vez. No entanto, você tem menos controle sobre o que aparece na tela. Por exemplo, em um dispositivo mais amplo, você pode ver mais conteúdo que de outra forma não seria notado. O hyperPad fornece algumas ferramentas e comportamentos para controlar certos elementos, mas às vezes você só precisa de controle total e um projeto específico para dispositivo faz mais sentido.

Este artigo aborda principalmente projetos universais, já que você está lidando com múltiplas proporções de aspecto e dispositivos. Para projetos específicos para dispositivos, é tão simples quanto garantir que seu conteúdo se encaixe na área verde do canvas.

Criando um Projeto Universal

Ao criar um novo projeto, você será solicitado a selecionar os dispositivos que deseja suportar. Por padrão, apenas o iPad (4:3) é selecionado. Você pode tocar nos outros dispositivos para habilitar o suporte para eles também. Se você tiver mais de um dispositivo selecionado, seu projeto é considerado um "Projeto Universal".

Ciclismo de Dispositivos

Quando você seleciona vários dispositivos para suportar, isso significa que você precisa garantir que o conteúdo do seu projeto se encaixe na tela de cada dispositivo/proporção de aspecto.

A área retangular verde no canvas é o espaço de tela visível. Qualquer coisa colocada dentro do espaço de tela visível será vista quando seu projeto estiver em execução. Lembre-se de que cada dispositivo que você habilitou ao criar o projeto tem seu próprio espaço de tela visível.

Para garantir que seu conteúdo se encaixe dentro do espaço de tela visível para cada área, toque no ícone Ciclo de Dispositivo na paleta de ferramentas.

Lembre-se, alguns dispositivos como o iPhone têm vários tamanhos de tela e proporções de aspecto. Se você estiver desenvolvendo um projeto para esses dispositivos e quiser suportar uma versão mais antiga do iOS, deve garantir que seu conteúdo funcione em cada versão desse dispositivo. Portanto, se você selecionar iPhone, deve garantir que seu conteúdo se encaixe no espaço de tela do iPhone 4 (3:2) e no espaço de tela do iPhone 5, 6, 6+ (16:9).

Projetando seu projeto para múltiplos dispositivos

Normalmente, ao desenvolver um jogo ou aplicativo, você deseja evitar refazer tudo para cada projeto. Com Projetos Universais, você pode usar um design inteligente para minimizar a quantidade de trabalho que precisa fazer novamente.

O hyperPad tem todos os tamanhos de tela começando do canto inferior esquerdo, depois escala para cima e para a direita para dispositivos maiores. Se você mantiver isso em mente, muitos jogos podem ser criados uma vez.

Ao projetar sua cena, desenhe seu conteúdo principal para se encaixar dentro do menor dispositivo e seu fundo para se encaixar no maior. Ao criar seu projeto, o maior tamanho é rotulado como "Resolução de Design". Ao fazer isso, muitos projetos automaticamente ficam ótimos em todos os dispositivos.

Por exemplo, você quer fazer um jogo de plataforma para funcionar tanto no iPhone quanto no iPad. Você pode projetar o nível principal (obstáculos no chão, etc.) para se encaixar dentro da menor tela do iPhone (proporção 16:9), e ter seu fundo se encaixando no maior dispositivo (iPad). No menor iPhone, o jogo aparecerá exatamente como você projetou. Para os dispositivos maiores (iPad 4:3 ou Desktop 16:10), o jogo mostrará mais conteúdo vertical ao longo do topo. Como você fez seu fundo se encaixar no maior tamanho, sempre haverá algo visível e você não ficará com espaço vazio preto.

Enquanto você muda entre os diferentes dispositivos, perceba que o espaço de tela visível não muda em largura. O hyperPad usa uma resolução personalizada para manter as larguras consistentes em todos os dispositivos. Apenas a altura muda, mostrando mais ou menos conteúdo verticalmente.

Abaixo está um gráfico que representa as diferentes proporções e resoluções de dispositivos.

Proporções de Aspecto	Ícone	Dispositivos	Resolução de Design
4:3		iPad, iPad Pro	2048 px x 1536 px
16:9		iPhone 5, iPhone 5S, iPhone 6, iPhone 6 plus, iPhone 6S. iPhone 6S Plus, iPod 5ª geração, iPod 6ª geração	2048 px x 1158 px
3:2		iPhone 3GS, iPhone 4, iPhone 4S, iPod 4ª geração	2046 px x 1364 px
16:10		Desktop computers	2048 px x 1280 px

Uma nota sobre os iPhones mais antigos (3GS, iPhone 4, 4S e iPod 4ª Geração): Estes dispositivos usam uma proporção de 3:2. Para manter a largura de todos os dispositivos consistente, o espaço de tela visível para dispositivos 3:2 é, na verdade, mais alto que o espaço de tela do iPhone 5, 6+ (16:9) que é fisicamente maior. Se você deseja desenvolver para iPhone e suportar iOS 9 e versões anteriores, VOCÊ TAMBÉM deve garantir que seu projeto se encaixe no espaço de tela 3:2.

Se você só quiser suportar iOS 10 e versões posteriores, então você não precisa se preocupar com o seu conteúdo se encaixando dentro do espaço de tela 3:2.

Importando ativos

O hyperPad escala automaticamente seu projeto para parecer ótimo em todos os dispositivos. Para manter seu projeto com uma boa aparência em todos os dispositivos, você deve sempre importar suas imagens para se encaixar na Resolução de Design. A Resolução de Design é dada em retina, então, ao importar imagens, uma imagem não-retina será gerada automaticamente para você.

Por exemplo, se você importar uma imagem de 512x512 pixels, uma imagem de 256x256 pixels será criada para você.

Note também que a resolução de design é medida em pixels. No dispositivo real, tudo é medido em pontos. Isso significa que 2048x1536 pixels é, na verdade, 1024x768 pontos (em um dispositivo retina).

Posição Absoluta e Relativa

Existem duas maneiras de posicionar objetos no hyperPad. Absoluta e Relativa. Posições absolutas colocam um objeto em uma localização de pixel específica no canvas e são medidas em metros. Posições relativas colocam seu objeto com base na porcentagem do espaço de tela visível.

Com posições absolutas seus objetos podem aparecer fora da tela em dispositivos menores. Isso acontece porque o sistema de coordenadas não muda com base em cada dispositivo (1 metro é o mesmo em um iPhone, iPad e qualquer outra coisa).

Com posições relativas, seu objeto aparecerá na mesma posição relativa, não importa qual dispositivo. Então, se você colocar seu objeto no meio da tela, ele ficará no centro para iPhone, iPad e qualquer dispositivo maior como uma TV ou computador.

Por padrão, qualquer objeto que você colocar em camadas normais usará posições absolutas, e qualquer coisa colocada nas camadas de UI é configurada para posições baseadas em porcentagens. Dessa forma, você não precisa se preocupar em ter seus botões, barras de vida ou joysticks fora da tela para cada dispositivo.

No gif abaixo, você pode ver o efeito das posições relativas. Os sinais de "Tap" e a mão estão usando posições relativas e sempre ficam no meio para cada dispositivo.

Para alterar o tipo de posicionamento do seu objeto, selecione seu objeto e, nas Propriedades do Objeto, mude para a Aba Transformar e toque no ícone "%" no campo de posição. Isso transformará sua posição atual em uma porcentagem da tela.

Se você mudar entre os dispositivos suportados na paleta de ferramentas, poderá ver seus objetos relativos permanecendo dentro do espaço de tela visível.

Para manter um objeto completamente centralizado, as posições X e Y devem estar em 50%.

Ações Personalizadas Baseadas no Tamanho da Tela

Às vezes, você quer que seu projeto pareça e se sinta um pouco diferente para cada dispositivo. Por exemplo, você só quer que um botão esteja disponível no iPad e não no iPhone.

Para isso, você pode usar o comportamento "Get Screen" para descobrir o tamanho da tela atual, e com um comportamento IF esconder o botão no iPhone.

No exemplo acima, você usaria Get Screen, e então saídas a Proporção de Aspecto para um comportamento IF, que verifica se é um iPhone (16:9).

Então, use o comportamento de esconder gráfico para ocultar o botão se o tamanho da tela for 16:9.

Vários Tamanhos de Tela e Dispositivos