Como desenvolver apps para diferentes resoluções de tela

Um dos grandes desafios do desenvolvimento de aplicações para dispositivos móveis é lidar com os múltiplos tamanhos e resoluções de telas. E não estou falando de tablets vs smartphones, mas de smartphones pequenos vs médios vs grandes vs phablets vs tablets pequenos vs tablets grandes e suas inúmeras variações. Neste post, vou dar algumas dicas de como ajustar seu o arquivo de configuração do seu aplicativo para que suporte múltiplas resoluções.

Este post utiliza o framework de desenvolvimento mobile multiplataforma Corona SDK. Caso não conheça, sugiro começar por este post.

Talvez a pergunta mais comum quando estamos desenvolvendo apps é “Como eu oferecerei suporte a diferentes dispositivos?”. Apenas no lado do iOS temos três formas básicas que temos de lidar, com suas várias resoluções. No lado do Android, as coisas são bem mais complicadas.

Algumas telas são mais largas que outras, estas mais estreitas. Se nós tiramos a resolução da equação, fica mais fácil focar nas telas. Corona torna muito fácil abstrair a resolução usando uma técnica chamada Dynamic Scaling (Escalonamento Dinâmico). Com Dynamic Scaling, você pode usar um conjunto comum de coordenadas na tela e o Corona automaticamente irá escalonar o texto e imagens para as diferentes resoluções de tela. Ele pode aumentar ou diminuir dependendo do ponto inicial. Ele também pode substituir suas imagens por versões com maior resolução quando precisar aumentá-las e você tiver preparado o app para isso (criando imagens com tamanhos diferentes). Todos esses recursos são gerenciados por um arquivo Lua na pasta do seu projeto chamado config.lua.

Uma vez que as resoluções disponíveis variam consideravelmente, é sempre útil usar a mesma escala para cada dispositivo. Não importa se você está com iPhone 3GS de 320×480 ou um iPad Retina com 1536×2048, o local (0,0) representa o canto superior-esquerdo e (320×480), em modo retrato, é o canto inferior-direito. A tela centraliza em (160, 240). Cada ponto, neste caso, é um pixel em um dispositivo de baixa resolução como o 3GS, que tem uma resolução nativa de 320×480, enquanto cada ponto é 4px em um iPad Retina. Não se preocupe com a matemática – Corona cuida dela pra nós.

download

Formatos Básicos de Tela

Considere esta imagem tendo 360×570 de largura e altura. Nós devemos fazer nossa imagem de fundo ser maior do que a tela física. Porquê? Simplesmente porque precisamos acomodar diferentes dispositivos. O retângulo interno é um bloco de 320×480. Partes da imagem ao topo, rodapé, esquerda e direita ficarão fora da tela. Quando trocamos para um dispositivo mais alto como um iPhone 5 ou a maioria dos smartphones Android, ele usará a altura total da imagem, mas uma porção da esquerda e direita ficarão fora da tela. Se você tem um iPad, que é bem próximo de um formato quadrado, ele perderá parte da imagem no topo e rodapé, mas usará a largura total da imagem. As porções que ficam fora da tela são referenciadas como “sangria”, um termo tradicional de gráficas para designar onde a tinta escorreria fora da página.

Agora que nós entendemos e podemos ver, visualmente, como o background será usado, vamos definir o nosso arquivo config.lua. Uma vez que este é um arquivo padrão do Corona, nós podemos usar diversas chamadas de API para conseguir o seguinte:

  • ler a largura e altura em pixels do dispositivo
  • usar matemática básica para alguns cálculos
  • ler o número do modelo do dispositivo
  • manipular strings
  • usar lógica if/then/else

Configuração para iPad

A primeira coisa que faremos é determinar se o dispositivo é um iPad. Podemos obter o número do modelo do dispositivo usando uma chamada à API do Corona.

Atualmente, se você estiver testando em um iPad, ele simplesmente retornará a string iPad, mas a Apple pode mudar isto no futuro e retornar algo como iPad Retina. Então, vamos usar essa informação e definir um bloco if para gerenciar aquele bloco:

Usando a função do Lua string.sub(), nós lemos o modelo do dispositivo e olhamos somente os primeiros 4 caracteres, no caso da Apple decidir mudar alguma coisa no final. Neste caso estamos buscando por iPad, e se for verdadeiro nós configuramos a table content da aplicação para incluir os parâmetros largura e altura de 360 e 480 respectivamente. Nós usamos 360 porque nosso background de exemplo possui 360px de largura total e nós queremos que ele fique completamente visível na tela de um iPad. Note que nosso arquivo config.lua está sendo configurado como se estivesse em modo retrato. Se você está desenvolvendo um app em modo paisagem, você ainda assim deve especificar largura e altura em modo retrato – Corona lidará com a alteração para você.

Com 360 de largura, agora temos de calcular a altura que encaixará no formato de tela do iPad. A tela do iPad é de 768×1024, ou 1536×2048 para o iPad Retina (exatamente o dobro, então possui a mesma proporção). Primeiro, divida 1024 por 768 para obter 1.33. Então, para obter a altura, multiplique 1.33 por 360 resultando em 480.

Agora é hora de olharmos os 2 primeiros caracteres da string de modelo. Porquê? Isto irá funcionar para os modelos iPhone e iPod Touch! Também detectamos a altura em pixels do dispositivo, se ela for maior que 960 (a altura do iPhone 4) então sabemos que é um iPhone 5 ou a última geração do iPod Touch. Uma vez que este é um dispositivo 640×1136 quando nós escalonamos ele para 320px, ele se torna um dispositivo 320×568.

Como mencionado acima, nosso objetivo é que o background de exemplo ocupe toda a altura do iPhone 5. A altura nativa do iPhone 5 é 640×1136. Uma vez que nosso retângulo interno no background possui 320px de largura, a matemática é simples:

Note que nossa imagem de background de exemplo tem 570px de altura. Desta maneira, somente 1px sangrará para fora do topo e rodapé da tela do iPhone 5.

iPhone3, 4 e iPod Touch antigo

Desde que manipulamos o iPhone 5 anteriormente, qualquer string de modelo que comece com ‘iP’ será um iPhone ou iPod Touch com uma tela de 320×480 ou 640×960. Convenientemente, podemos usar a largura e altura do nosso retângulo interno neste bloco de configuração: 320 e 480 respectivamente.

Android, Kindle Fire e Nook

Finalmente, precisamos separar os dispositivos Android 16:9 dos dispositivos 5:3 (Nook e Kindle Fire). Os dispositivos 16:9 possuem uma proporção de 1.777:1. O Nook e o Kindle Fire são mais próximos a 1024×600 ou 1.7:1, então podemos usar pixelHeight e pixelWidth para calcular a proporção para o tamanho da tela. Se for maior que 1.72, nós configuramos uma tela parecida com o iPhone 5 (16:9); caso contrário, por padrão usamos uma configuração que se ajusta melhor aos tablets.

Atenção

O arquivo completo está bastante detalhado (config.lua (2,6KB)), e cobre a maioria dos dispositivos (ou chega bem perto). As principais coisas a lembrar são:

  • Em alguns dispositivos partes do background ficarão fora da tela, então não coloque nada crítico nas áreas de sangria
  • objetos posicionados usando números fixos como player.x=64 e player.y=64 sempre serão 64 pontos a partir do topo e da esquerda, mas de acordo com o dispositivo estarão mais ou menos próximos do centro. Objetos posicionados baseados na coordenado central (player.x = display.contentCenterX+100) permanecerá na mesma posição relativa de acordo com o formato da tela.

Seleção Dinâmica de Imagem

Se você é novo com Corona, é assim que o SDK manipula seleção dinâmica de imagem. Por exemplo, você não quer usar a mesma imagem em um iPad Retina e um iPhone 3GS. Ao invés disso, você deve criar ao menos dois diferentes grupos de imagens para acomodar dispositivos normais e Retina/HD.

Cada entrada na table imageSuffix consiste de duas partes:

O primeiro valor pode ser nomeado como quiser, mas deve ser conveniente para colocar no final de cada imagem daquele grupo. O segundo valor é calculado usando a seguinte fórmula:

largura do dispositivo / largura do config.lua = proporção

Se a proporção em um dispositivo particular é maior do que o número que você especificou no registro, Corona usará estas imagens.

Instintivamente, você pode achar que as seguintes entradas são lógicas:

Mas calma lá! Analise os seguintes cálculos, derivados do nosso arquivo de configuração:

Note que se você especificar 4.0 como nossa proporção para imagens Retina/HD, o Kindle Fire HD 8.9 não usará estas imagens, porque a proporção dele é e 3.75 – e você vai querer usar as imagens grandes neste caso também. Por isso escolhemos os seguintes valores:

Eficientemente, isto diz ao Corona como usar as maiores imagens “@4x” para dispositivos Retina/HD como o iPad Retina, Kindle Fire HD 8.9 e o Nexus 10. Para todos outros dispositivos, ele escolherá as imagens “@2x”, economizando memória nos dispositivos.

Um último aviso importante. Para exibir o background usa display.newImageRect() como:

Os últimos dois números, 360 e 570, indicam as imagens base com largura e altura “1x”, mas na prática você não precisa incluir esta versão da imagem no seu projeto compilado a menos que você esteja planejando que seu app rode em dispositivos com resoluções menores ainda. Nos cálculos de exemplo acima, os dispositivos com baixa resolução são o Kindle Fire original e o Nook Color. Para estes e outros dispositivos no grupo “@2x”, Corona requer uma versão em 720×1140. Para o próximo grupo, ele requer uma versão “@4x” em 1440×2280. Em todo caso, manipulará a substituição nos bastidores e você não se preocupará com isso.

Resumindo

Este tutorial é bem detalhado e compreensível, e se você é novo com Corona ele pode ter apresentado muita coisa para aprender de uma vez só. Entretanto, o arquivo config.lua que fornecemos pronto lhe dá pré-configurações que são compatíveis com a maioria dos novos (ou nem tanto) dispositivos a partir do iPhone 3GS e incluindo os novos iPhone 5, iPad Retina, Kindle Fire HD e tablets Nexus. Se você ainda não baixou o arquivo completo, baixe abaixo.

config.lua (2,6KB)

* OBS: curtiu o post? Então dá uma olhada no meu livro de Corona SDK clicando no banner abaixo pra aprender a criar outros tantos apps incríveis!

Livro Corona SDK
Livro Corona SDK
O que achou desse artigo?
[Total: 1 Média: 5]

Publicado por

Luiz Duarte

Pós-graduado em computação, professor, empreendedor, autor, Agile Coach e programador nas horas vagas.