GMBR
Gostaria de reagir a esta mensagem? Crie uma conta em poucos cliques ou inicie sessão para continuar.
Entrar

Esqueci-me da senha

Últimos assuntos
» Procuro Programador de game maker
por Wou Sex 15 Mar 2024, 10:27

» Retorno da GMBR!!!
por vinians Qui 14 Mar 2024, 19:07

» Mod APK
por gamerainha Qua 13 Mar 2024, 06:30

» Mudar cor de apenas uma palavra
por lunalol Sex 01 Mar 2024, 13:42

» Aceito pedidos de sprites (Com exemplos meus)
por Sevilha Qua 28 Fev 2024, 12:17

» Inventário simples
por Isquilo_Roedor Qui 22 Fev 2024, 15:18

» Problemas na programaçnao de inimigo [jogo DOOM LIKE]
por Black Mirror Dom 11 Fev 2024, 13:34

» ANDROID MULTI TOUCH
por DiegoBr Dom 04 Fev 2024, 12:13

» Servidor de Discord do fórum?
por Lighter Sáb 27 Jan 2024, 17:18

» Save e Load Json
por Klinton Rodrigues Qui 25 Jan 2024, 11:12

» Colisão com mais de um objeto
por aminaro Seg 22 Jan 2024, 15:02

» Oi sou novo aqui
por Thiago Silveira Alexandre Sáb 20 Jan 2024, 20:55

» Como acessar conteudo comprado no marketplace
por macmilam Sex 19 Jan 2024, 07:42

» Devlogs em vídeos do Block Room
por Joton Seg 15 Jan 2024, 16:56

» Alguém aqui já ganha dinheiro com seus games?
por Joton Seg 15 Jan 2024, 16:49

» ACERVO GMBR MAGAZINE
por Joton Qui 11 Jan 2024, 19:21

» como aumentar o obj sem aumentar a colisão??
por GabrielXavier Qua 10 Jan 2024, 07:21

» Asteroid Core - Early Acesse Update [0.2.0.0]
por JOZ. Seg 08 Jan 2024, 14:39

» Versionamento de código com GitHub
por GabrielXavier Seg 08 Jan 2024, 07:32

» Rio Rise - novo launcher do Gta San Andreas SAMP Brasil
por kolesovsup Sex 29 Dez 2023, 07:16

» a funçao approach ainda existe?
por PEDRINDEV Ter 26 Dez 2023, 20:05

» Inimigo ataca até por trás! >:(
por saim Sex 22 Dez 2023, 08:55

» [RESOLVIDO]Spawn após morte
por Deception_1999 Dom 17 Dez 2023, 16:39

» Remunerado $$$ - Procuro programador para ajudar a "montar" um jogo
por theguitarmester Sáb 02 Dez 2023, 16:28

» Game maker nao abre
por Cerf Dom 26 Nov 2023, 12:01


[Tutorial] Resolução Mobile

Ir para baixo

[Tutorial] Resolução Mobile Empty [Tutorial] Resolução Mobile

Mensagem por Willy Qui 27 Jul 2017, 14:22

[Tutorial] Resolução Mobile AocQQHs

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.
[Tutorial] Resolução Mobile W3KgqXk

-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.
[Tutorial] Resolução Mobile RTPflsP

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 
Willy
Willy

Games Ranking : Nota A

Notas recebidas : C + B + A + A
Data de inscrição : 08/06/2009
Reputação : 264
Número de Mensagens : 1890
Prêmios : [Tutorial] Resolução Mobile Empty

Medalhas x 0 Tutoriais x 2 Moedas x 0

Ouro x 2 Prata x 1 Bronze x 1

Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0

http://willy-gmbr.blogspot.com/

Ir para o topo Ir para baixo

Ir para o topo

- Tópicos semelhantes

 
Permissões neste sub-fórum
Não podes responder a tópicos