Conectar-se
Últimos assuntos
Slot do Menu PrincipalDom 16 Dez 2018, 12:36NoneSlopes 360°Sab 15 Dez 2018, 22:43NoneQuem sou eu Sex 07 Dez 2018, 15:23CG_2004Checkpoint Qui 06 Dez 2018, 14:52CG_2004GM:S2 - Colisões: Travamento no Ar e SobreposiçõesDom 25 Nov 2018, 15:33CG_2004Como mirar e atirar pelo mouse?Dom 18 Nov 2018, 09:18CG_2004Jogo de 7 erros diferenciadoDom 18 Nov 2018, 01:11luizinhoofodaPedido ou ajudaSex 16 Nov 2018, 21:12BulletGame Maker Studio - Jogo da CobrinhaSeg 12 Nov 2018, 16:29didipimentaItens equipaveis e troca de skinSab 10 Nov 2018, 11:43None
Quem está conectado
28 usuários online :: Nenhum usuário registrado, Nenhum Invisível e 28 Visitantes

Nenhum

Ver toda a lista


Compartilhe
Ir em baixo
avatar
Ranking : Nota A
Notas recebidas : C + B + A + A
Data de inscrição : 08/06/2009
Número de Mensagens : 1846
Insígnias de JAM :

Insignia 1x 0 Insignia 2x 0 Insignia 3x 0
Reputação : 254

Prêmios
   : 2
   : 1
   : 1
Ver perfil do usuáriohttp://willy-gmbr.blogspot.com/

[Tutorial] Resolução Mobile

em Qui 27 Jul 2017, 14:22
Reputação da mensagem: 100% (1 votos)

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 algumas recomendaçõ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 = 64 x 16 = 1024;
Altura = 64 x 9 = 576;
Resolução: 1024 x 576.
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: 1280 x 720 (landscape) ou 720 x 1280 (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 que a 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! blz 
Voltar ao Topo
Permissão deste fórum:
Você não pode responder aos tópicos neste fórum