Android - Adaptando o jogo a resoluções diferentes

Android - Adaptando o jogo a resoluções diferentes

A maior dificuldade de quem comprou o Game Maker Studio é adaptar a tela de jogo aos diferentes formatos de telaexistentes, não é uma tarefa muito simples de se fazer, porque precisa ser pensada desde o início do projeto, tornando mais difícil a adaptação de um projeto já concluído se certas regras não forem seguidas.
Primeiro uma foto:


A foto apresenta dois celulares com telas em formatos e resoluções diferentes,
quanto a resolução não é preciso se preocupar o GMS ajusta automaticamente.
O GMS também ajusta o formato da tela, o problema é que as imagens podem ficar esticadas ou achatadas.
Pra resolver isto é necessário trabalhar com views mesmo que seu jogo rodando no pc não necessite.

Existem celulares Android com diversos formatos de tela, mas devemos nos concentrar nos smartphones com resolução apartir de 320x240.
ou seja aspecto de 1.333, seria esta a tela mais quadrada a ser levada em consideração.
Como o GMS adapta a resolução, uma boa resolução proporcional a este formato é a 900x600.

O celular da esquerda tem uma resolução de 480x320, portanto um aspecto de 1.5, o outro tem 800x480, aspecto de 1.666.

Note que o da esquerda com tela mais quadrada, mostra um pouco mais de imagem que o celular da direita, observe a área após a linha vermelha, aparece um ramo que não aparece no outro cel,
a view se move acompanhando o personagem, embora o jogo tenha uma pequena diferença de um celular para outro isto não afeta o gameplay e
mantem os sprites com o formato correto.
isto foi possível com um pequeno código no create do primeiro objeto da room.

if os_type = os_android{
larg = display_get_width()
alt = display_get_height()

asp=800/alt

view_wview=(larg*asp)
view_hview=alt*asp}



Neste jogo específico a room tem 600x10000, a view foi definida pelo código, lembre-se de habilitar o uso views na room e indicar para seguir o player
no caso deste jogo foi o sapo.

Entenda que estes números são para um jogo com gameplay vertical, na horizontal os valores seriam invertidos.

Então em um celular com aspecto 1.666 (exemplos 900x600 e 320x240) a view não se moveria porque já estaria mostrando a largura máxima.
mas em um celular com tela mais estreita (exemplos 800x480 e 1280x720) a view se moveria acompanhando o personagem.
Lembre-se de não colocar informações relevantes nas áreas próximas a borda da tela, o placar e outras informações devem acompanhar a
o movimento da view, pra isto foi lançada a função Draw_gui.
(ainda não usei, não me pergunte como usa, fiz no método tradicional com o x e y do obj acompanhando o view_xview e o view_yview).

Explicando o código:

if os_type = os_android{ <--só habilita no celular, pra não bugar os testes no pc.
larg = display_get_width() <--Pega a largura da tela do cel
alt = display_get_height() <--Pega a altura da tela do cel

asp=800/alt <--calcula o aspecto da view,(o valor 800 é a resolução mais comum em smartphones, será usada como padrão).

view_wview=(larg*asp) <--Ajusta a largura da room multiplicando a largura pelo aspecto
view_hview=alt*asp} <--Ajusta a altura da room multiplicando a altura pelo aspecto

Não parece uma coisa muito simples, até que se entenda a lógica da coisa, mas pra entender só fazendo mesmo.


recapitulando:
-A room de jogo deve ter pelo menos 600 de largura se o jogo for na vertical ou 600 de altura se for na horizontal.
-Habilite o uso de views
-Defina a View colocando o código no create do primeiro objeto da room.
-Na room defina o personagem que a view deve seguir.
-Desenvolva seu jogo com a view habilitada na room com 480x800, ou o contrário pra formato horizontal, isto seria
para poder testar o jogo no PC. Quando executar no celular o código fornecido vai substituir pelo formato correto.


Não aconselho a usar o código nas telas de menus do jogo, pois os celulares com telas mais quadradas geralmente
tem resolução bem menor e os elementos podem ficar muito pequenos e ilegíveis ou podem ser cortados em telas mais estreitas, as vezes é melhor deixar esticar ou achatar um pouco aproveitando melhor a área da tela pra mostrar as informações. Uma solução seria fazer telas específicas de menus e titulos para resoluções menores com aspectos muito diferentes.

Valeu amigo, esse tutorial estava realmente faltando na GMBR, vou precisar disso em breve!
Flws!!!!

da hora cascavelo bem completo fico filé seu tutorial, poderia fazer um exemplos da funcão: YoYo_GetTiltX se possivel movimentar um quadradinho de um lado para outro com essa função, e mais uma pergunta nao sei configurar meu android para rodar YoYo Runner Application on Android , entao tenho q ficar upando o apk pra pasta download td hora , como ativa o android pra rodar direto o YoYo Runner ? vlw mano

da hora cascavelo bem completo fico filé seu tutorial, poderia fazer um exemplos da funcão: YoYo_GetTiltX se possivel movimentar um quadradinho de um lado para outro com essa função, e mais uma pergunta nao sei configurar meu android para rodar YoYo Runner Application on Android , entao tenho q ficar upando o apk pra pasta download td hora , como ativa o android pra rodar direto o YoYo Runner ? vlw mano

Eu tinha gravado um vídeo do jogo rodando nos dois celulares, mas gravei com o ipad, embora tenha ficado bom não consigo editar por ser em alta definição, no vídeo dá pra ver claramente como a view se comporta sem alterar o gameplay. Mas vou fazer novamente o vídeo, com 4 aparelhos diferentes rodando o mesmo jogo. Acho que vai ser bem útil.
Você consegue acessar as pastas do cartão de memória do tablet pelo PC?

consigo sim pelo pc da pra ir em tds as pastas , queria saber como configura o tablet pra rodar o jogo direto do GM-S via runner, não faço nem ideia como é

Primeiro faz este teste aqui:
1.Ligue o dispositivo no computador, usando o cabo de dados USB, ative no tablet "Aplicativos - Desenvolvimento - Depuração".
2.No PC, no Executar tecle CMD e tecle enter para abrir um prompt de comando
3. Digite cd depois enter, cd Android/android-sdk e enter - se você instalou no C:, pra ir ao diretório onde instalou.
4.Digite "cd platform-tools" e pressione enter
5.Digite agora "adb get-state"



Se tudo correr bem, você deve receber a mensagem "device", sinalizando que o dispositivo foi reconhecido e está tudo bem. No entanto, se você receber a mensagem "unknown", isto significa que o dispositivo não é reconhecido.

Faz o teste e me diz o resultado.

cascavelo segui tds os passos só que não achei essas opcões no tablet
"Aplicativos - Desenvolvimento - Depuração"

a opcão aplicativo tem o resto não, e agora ?

Esta em: Configurações / Aplicativos / Desenvolvimento / Depuração de USB

Ative que vai funcionar

Esse é o melhor método na minha opinião, mas você ainda precisa levar em conta o viewport e não só o tamanho da view além da possibilidade de ser multiplataforma para tornar o script universal.
Para legendas e menus o meio mais fácil é construir o jogo com fontes no maior tamanho possível independente da resolução.
Por exemplo, estou fazendo um jogo em pixel art com resolução de 160x120 o que é bem pequeno mas o viewport dele é 3 vezes maior ficando em 640x480.


Se considerar que o jogo poderá estar rodando em um aparelho pelo browser em html5, então a tela deveria ser escalada para o tamanho do navegador.
O script que uso e serve para todos os casos é esse:

Código:

if (os_type = os_android || os_type = os_ios) {
    if os_browser != browser_not_a_browser window_set_size(browser_width,browser_height); // escalar tela para navegador

    var a,w,h;
    w = browser_width;
    h = browser_height;
    a = max(w,h)/min(w,h);
    view_wview = view_hview*a;
    view_wport = view_hport*a;

    display_set_gui_size(view_wview,view_hview); // definir Draw GUI com a novo resolução
}

Em um celular de 320x480 que o aspecto é bem diferente da resolução original a imagem acima fica ótima sendo em um app comum como no navegador do android.

Se considerar que o jogo poderá estar rodando em um aparelho pelo browser em html5, então a tela deveria ser escalada para o tamanho do navegador

Exato, minhas experiênicias foram somente com apk , não me atrai muito o html5, devido ao desempenho dos jogos.
Kabeção, tive muito problema pra tentar centralizar objetos na view, tentei de várias maneiras, mas se ficava correto em um aparelho, não ficava em outro, desisti de centralizar e coloquei um fator que ficava mais ou menos no meio, o que impossibilitou usar este recurso da view nas tela de menu, será que agora eu consigo como Draw_gui?
Não entendi bem este comando ainda, se você já o usa me dê uma explicação da utilidade dele, testei e testei e não ví diferença pro draw normal, tudo que tentei se comportou da mesma maneira. (já em um faz bom tempo, talvez fosse bug).

Esse é o melhor método na minha opinião, mas você ainda precisa levar em conta o viewport e não só o tamanho da view além da possibilidade de ser multiplataforma para tornar o script universal.

O GMS não ajusta o viewport? Nos testes que fiz não tive problemas, ou você quer dizer no caso de pixel art que a resolução do jogo é menor que a do display?

cascavelo instalei o unloke root e o gm-s reconheceu o android,
reinstalei e agora ta funcionando sem erros vlw mano

testou o apk que eu crie pra redirecionar a resolução ?

Não entendi bem este comando ainda, se você já o usa me dê uma explicação da utilidade dele, testei e testei e não ví diferença pro draw normal, tudo que tentei se comportou da mesma maneira. (já em um faz bom tempo, talvez fosse bug).

De modo simples serve apenas para separar o draw de objetos e afins da HUD, organizar assim como o Begin Step, Step e End Step.
Além disso ele evita aqueles problemas do desenho tremer ou não acompanhar a tela pois desenha em posição absoluta no display, ou seja, ignora o view_xview e view_yview. Então para desenhar no canto da tela o normal seria:

Código:

draw_text(view_xview,view_yview,'TEXTO')

Mas no Draw GUI a posição da view não faz diferença.

Código:

draw_text(0,0,'TEXTO')

Você pode até mudar a view de tamanho (tipo dar zoom) e o texto não terá nem uma distorção. É muito útil em casos como o Android, quando o jogador pode definir a resolução ou no HTML5 porque as posição dos desenhos são sempre arredondadas dando a impressão das imagens tremer.
O Draw GUI executa depois e por isso ele sempre desenha por cima do Draw normal.

Agora outra coisa interessante é a função display_set_gui_size(view_wview,view_hview).
Ela muda a proporção do Draw GUI.
Veja a primeira imagem que postei o texto esta na proporção original, mas e se eu dobrar os valores:

Código:

display_set_gui_size(view_wview*2,view_hview*2)

Resultado:
Agora ele está em uma proporção totalmente diferente do resto do jogo.
Assim posso tornar o texto mais nítido mesmo que a resolução original seja muito baixa.

O GMS não ajusta o viewport? Nos testes que fiz não tive problemas, ou você quer dizer no caso de pixel art que a resolução do jogo é menor que a do display?

Hum, o viewport não atualiza sozinho.
Deve-se notar que o tamanho da janela, tamanho da view e viewport são coisas diferentes apesar de fazer parte do mesmo conjunto.
Elas podem ter valores totalmente diferentes por isso dão bastante controle para o programador mas causam muita confusão.

quando sai esse jogo ai kabeção ?

Valeu kabeção, desconfiava que a função fazia isto mesmo, só que nos meus primeiros testes não funcionou bem, vou refazer.

Muito bom algo necessario.

você pode me ajudar? eu programo no gamemaker normal... mas nao sei as funções android do gamemaker studio... voce poderia me passar?

Cascavelo estava tentando usar esse código que você deu de exemplo, mas observei que você esta multiplicando ambos largura e altura pelo aspect ration, isso é correto? Pois assim não manter o mesmo problema?


view_wview=(larg*asp)
view_hview=alt*asp 

Nao seria apenas um ou outro dependendo se estivesse em landscape ou não? 
Flws!

É assim mesmo, porque se muda o formato da tela muda também o valor da variável asp. Isto será diferente em celulares diferentes.
 Note que este código que postei no tutorial é pra jogos  na vertical.
Pra jogos com tela na horizontal use este:

if os_type = os_android{
larg = display_get_width()
alt = display_get_height()
asp=480/alt
view_wview=(larg*asp)
view_hview=(alt*asp)}
display_set_gui_size(view_wview,view_hview);

Este código considera a altura da tela com 480 px como ideal, pois esta é a resolução da maioria dos aparelhos, você pode testar outros números para largura ou altura. Eu sempre uso 480 na altura para jogos com a tela na horizontal e 800 para jogos com o celular na vertical. Ou seja views de 800x480 ou 480x800.

  Mas se o seu jogo for em hd  com resolução da view em 1280x720 você deve mudar pra estes números, mas somente celulares high end tem resolução alta assim, a resolução mais baixa de 800x480 apresenta uma boa imagem até em tablets com resoluções bem maiores. 

  Se a view de seu jogo tem uma resolução diferente, tente substituir o "480" pela altura da sua room, eu sempre aconselho a fazer o jogo destinado a mobiles com view de 480x800 pra não ter que ficar fazendo testes, é só colocar o código e pronto.

Lembrando que ele deve estar no create de todas as rooms do jogo.

Valeu, vou testar bem direitinho aqui pra ver se funciona no meu jogo. Estou precisando disso agora mais que nunca pois neste jogo preciso de um touch preciso e percebi que se deixar sem view com o GM esticando as vezes o touch nem funciona e custei pra saber que era esse o motivo.
Flws!

Vinians, antes dá uma olhadinha também no meu tuto sobre resoluções em dispositivos móveis... pode te ajudar bastante.