Resolução Mobile
Enviado: Sex Nov 25, 2016 9:44 pm
Resolução Mobile
Fazendo a escolha certa!
Um dos grandes problemas ao se desenvolver para mobile é a grande variedade no tamanho das telas dos dispositivos. Como garantir que o meu projeto ficará bem adaptado em todos os aparelhos do mercado? Compilar uma versão para cada situação é totalmente inviável. É importante resolver esta questão antes mesmo de iniciar o seu projeto, caso contrário, você terá uma enorme dor de cabeça. Neste artigo, ensinarei a primeira etapa para resolver este problema, escolher uma resolução!.
Aspect Ratio (AR)
Se você pegar o a resolução do seu celular e multiplicar o horizontal pelo vertical (ou vice-versa), você obterá um valor. Este valor é chamado de Aspect Ratio. Essa informação é muito valiosa, pois com ela conseguiremos manter a proporção de nossos gráficos, evitando uma desagradável distorção na imagem. O meu celular possuí a resolução 1280 x 720. Ou seja:
AR: 1280 / 720 = 1.77
O AR aqui foi representado como 1.77. Porém, você também pode encontrar o mesmo AR mostrado como 16:9. Isso nada mais é do que o valor mínimo da largura e da altura necessário para conseguirmos o AR 1.77. Observe:
AR: 16 / 9 = 1.77
Dots Per Inch (DPI)
Outro ponto crucial na escolha da resolução do seu jogo é o DPI (Pontos por Polegada). Quanto maior o DPI, maior será a quantidade de pixels contido na sua tela, logo, melhor será a qualidade da imagem. Se seu jogo é feito em Pixel Art, você poderá usar um DPI baixo, se seu jogo for feito de vetores, deverá usar um DPI mais alto.
A resolução do seu projeto é diretamente relacionada com o DPI. Quanto maior a resolução, maior é o DPI. Uma resolução de 1280 x 720 é considerada como HD (High Definition) e é a resolução mais indicada para trabalhar, uma vez que a mesma foi adotada como padrão para amenizar os problemas de compatibilidade. Existem vários tipos de resolução além do HD com qualidade de imagem superior e inferior. Você pode ver como são classificados através deste link e também ver algumasrecomendações de resolução para cada um deles.
Escolhendo o AR e o DPI
Agora que você já sabe o conceito de Aspect Ratio e de DPI, chegou a hora de finalmente escolher qual deverá ser a resolução.
Primeiro você deve escolher um Aspect Ratio. Eu recomendo que você use o 16:9 (1.77) por ser HD e por ser uma resolução muito bem aceita, mas nada impede que você escolha outro. Depois de escolher um AR, você deve escolher o DPI. Isso é bem simples, basta escolher um “tamanho padrão” para a grade (entenda como o grid da room) do seu projeto. Recomendo que use múltiplos de quatro, como 4x4, 8x8, 16x16, 32x32 e assim por diante. Agora, pegue a grade que você definiu e multiplique pela proporção do Aspect Ratio. Supondo que escolhemos 64x64 e que nossa proporção seja 16:9 (1.77):
Largura = 64x16 = 1024;
Altura = 64x9 = 576;
Resolução: 1024x576.
Ainda sim, você pode escolher um número qualquer para usar como resolução, desde que você respeite o AR e a grade escolhida. Por exemplo, se eu quiser uma tela com 20 blocos horizontais de 64 x 64, devo multiplicar 64 por 20, resultando em uma resolução de 1280, agora, basta dividir este número pelo Aspect Ratio e arredondar o resultado para baixo em um múltiplo de 10:
(1280 / 1.77) = 723.16 = 720 (Arredondado)
Resolução: 1280x720 (landscape) ou 720x1280 (portrait)
Quando você divide um valor, você obtém a segunda dimensão que é sempre menor. Porém, você também pode fazer o mesmo processo para obter um numero maior, para isso, basta multiplicar por 1.77:
720 * 1.77 = 1274.4 = 1280 (Arredondado pra cima)
Não se esqueça! Respeitar o Aspect Ratio garantirá que seu jogo não tenha distorções!
View e Viewport
Como deve saber, a View nada mais é do que um pedaço da room que será mostrado na janela do jogo. A janela, por sua vez, é chamada de Viewport. Tanto a view quando a viewport, mesmo que sejam de tamanhos diferentes, devem respeitar o Aspect Ratio, caso contrário, todo seu esforço será em vão. É importante ressaltar quea viewport será sempre a que for definida na primeira room, portanto, não espere alterar o tamanho da janela durante a execução do projeto porque não tem como.Lembre-se, o tamanho do viewport será definido na primeira room!
Aplicando no projeto
Agora que temos uma resolução definida, devemos aplica-lo no projeto. O ideal é que você use Views, mesmo que não seja necessário no momento. Fazer isso é bem simples e requer menos de um minuto do seu tempo:
Crie uma room, defina o tamanho da room, coloque um background e vá para a aba Views.
-Marque as caixas que estão destacadas de vermelho. Isso habilitará o uso das Views.
-No campo verde, coloque o tamanho da view desejado (neste caso, 1920 x 1080). Lembre-se de manter o AR.
-No campo azul, coloque a resolução a ser usada (neste caso, 1280 x 720).
-Repita esse procedimento para todas as rooms do jogo.
Vendo se tudo está funcionando
Se você fez tudo certo, você conseguirá testar o projeto no seu aparelho e verá que a tela ocupará toda a área disponível. Ou será que não?
Se o seu aparelho tem o AR igual o meu (1.77), é certo que a área será totalmente preenchida. Se não, significa que o AR do seu dispositivo é maior ou menor que o meu. Você está diante de um dos maiores pesadelos do desenvolvimento para mobile, a incompatibilidade. Veja como fica este Aspect Ratio em um dispositivo com resolução 480 x 320 (AR 1.5) e repare nas bordas pretas.
Se seu aparelho não aceitou bem este AR, modifique os valores do campo verde e azul de acordo com o AR do seu dispositivo. Se você fez tudo certo, a tela será totalmente preenchida. Na próxima aula, ensinarei como minimizar este problema com a tela.
Encontrou algum erro no artigo? Algum comentário, dúvida, crítica ou sugestão? Fique a vontade! Responderei o mais breve possível. Até a próxima!
Fazendo a escolha certa!
Um dos grandes problemas ao se desenvolver para mobile é a grande variedade no tamanho das telas dos dispositivos. Como garantir que o meu projeto ficará bem adaptado em todos os aparelhos do mercado? Compilar uma versão para cada situação é totalmente inviável. É importante resolver esta questão antes mesmo de iniciar o seu projeto, caso contrário, você terá uma enorme dor de cabeça. Neste artigo, ensinarei a primeira etapa para resolver este problema, escolher uma resolução!.
Aspect Ratio (AR)
Se você pegar o a resolução do seu celular e multiplicar o horizontal pelo vertical (ou vice-versa), você obterá um valor. Este valor é chamado de Aspect Ratio. Essa informação é muito valiosa, pois com ela conseguiremos manter a proporção de nossos gráficos, evitando uma desagradável distorção na imagem. O meu celular possuí a resolução 1280 x 720. Ou seja:
AR: 1280 / 720 = 1.77
O AR aqui foi representado como 1.77. Porém, você também pode encontrar o mesmo AR mostrado como 16:9. Isso nada mais é do que o valor mínimo da largura e da altura necessário para conseguirmos o AR 1.77. Observe:
AR: 16 / 9 = 1.77
Dots Per Inch (DPI)
Outro ponto crucial na escolha da resolução do seu jogo é o DPI (Pontos por Polegada). Quanto maior o DPI, maior será a quantidade de pixels contido na sua tela, logo, melhor será a qualidade da imagem. Se seu jogo é feito em Pixel Art, você poderá usar um DPI baixo, se seu jogo for feito de vetores, deverá usar um DPI mais alto.
A resolução do seu projeto é diretamente relacionada com o DPI. Quanto maior a resolução, maior é o DPI. Uma resolução de 1280 x 720 é considerada como HD (High Definition) e é a resolução mais indicada para trabalhar, uma vez que a mesma foi adotada como padrão para amenizar os problemas de compatibilidade. Existem vários tipos de resolução além do HD com qualidade de imagem superior e inferior. Você pode ver como são classificados através deste link e também ver algumasrecomendações de resolução para cada um deles.
Escolhendo o AR e o DPI
Agora que você já sabe o conceito de Aspect Ratio e de DPI, chegou a hora de finalmente escolher qual deverá ser a resolução.
Primeiro você deve escolher um Aspect Ratio. Eu recomendo que você use o 16:9 (1.77) por ser HD e por ser uma resolução muito bem aceita, mas nada impede que você escolha outro. Depois de escolher um AR, você deve escolher o DPI. Isso é bem simples, basta escolher um “tamanho padrão” para a grade (entenda como o grid da room) do seu projeto. Recomendo que use múltiplos de quatro, como 4x4, 8x8, 16x16, 32x32 e assim por diante. Agora, pegue a grade que você definiu e multiplique pela proporção do Aspect Ratio. Supondo que escolhemos 64x64 e que nossa proporção seja 16:9 (1.77):
Largura = 64x16 = 1024;
Altura = 64x9 = 576;
Resolução: 1024x576.
Ainda sim, você pode escolher um número qualquer para usar como resolução, desde que você respeite o AR e a grade escolhida. Por exemplo, se eu quiser uma tela com 20 blocos horizontais de 64 x 64, devo multiplicar 64 por 20, resultando em uma resolução de 1280, agora, basta dividir este número pelo Aspect Ratio e arredondar o resultado para baixo em um múltiplo de 10:
(1280 / 1.77) = 723.16 = 720 (Arredondado)
Resolução: 1280x720 (landscape) ou 720x1280 (portrait)
Quando você divide um valor, você obtém a segunda dimensão que é sempre menor. Porém, você também pode fazer o mesmo processo para obter um numero maior, para isso, basta multiplicar por 1.77:
720 * 1.77 = 1274.4 = 1280 (Arredondado pra cima)
Não se esqueça! Respeitar o Aspect Ratio garantirá que seu jogo não tenha distorções!
View e Viewport
Como deve saber, a View nada mais é do que um pedaço da room que será mostrado na janela do jogo. A janela, por sua vez, é chamada de Viewport. Tanto a view quando a viewport, mesmo que sejam de tamanhos diferentes, devem respeitar o Aspect Ratio, caso contrário, todo seu esforço será em vão. É importante ressaltar quea viewport será sempre a que for definida na primeira room, portanto, não espere alterar o tamanho da janela durante a execução do projeto porque não tem como.Lembre-se, o tamanho do viewport será definido na primeira room!
Aplicando no projeto
Agora que temos uma resolução definida, devemos aplica-lo no projeto. O ideal é que você use Views, mesmo que não seja necessário no momento. Fazer isso é bem simples e requer menos de um minuto do seu tempo:
Crie uma room, defina o tamanho da room, coloque um background e vá para a aba Views.
-Marque as caixas que estão destacadas de vermelho. Isso habilitará o uso das Views.
-No campo verde, coloque o tamanho da view desejado (neste caso, 1920 x 1080). Lembre-se de manter o AR.
-No campo azul, coloque a resolução a ser usada (neste caso, 1280 x 720).
-Repita esse procedimento para todas as rooms do jogo.
Vendo se tudo está funcionando
Se você fez tudo certo, você conseguirá testar o projeto no seu aparelho e verá que a tela ocupará toda a área disponível. Ou será que não?
Se o seu aparelho tem o AR igual o meu (1.77), é certo que a área será totalmente preenchida. Se não, significa que o AR do seu dispositivo é maior ou menor que o meu. Você está diante de um dos maiores pesadelos do desenvolvimento para mobile, a incompatibilidade. Veja como fica este Aspect Ratio em um dispositivo com resolução 480 x 320 (AR 1.5) e repare nas bordas pretas.
Se seu aparelho não aceitou bem este AR, modifique os valores do campo verde e azul de acordo com o AR do seu dispositivo. Se você fez tudo certo, a tela será totalmente preenchida. Na próxima aula, ensinarei como minimizar este problema com a tela.
Encontrou algum erro no artigo? Algum comentário, dúvida, crítica ou sugestão? Fique a vontade! Responderei o mais breve possível. Até a próxima!
