Trabalhando com resoluções em dispositivos móveis

Título: Trabalhando com resoluções em dispositivos móveis
Versão do GM:Studio
Dificuldade:Intermediário
Link para download da Engine: Resolucao.zip
Requer Extensões:Não.
Requer DLLs:Não.
Tags: Resoluçao,display,android,ios,mobile,width,height;

Trabalhando com resoluções em dispositivos móveis
Como não deixar seu jogo distorcido em diferentes dispositivos

INTRODUÇÃO

Muitas vezes vejo usuários deste fórum e do próprio GMC (fórum oficial da Yoyogames) com dúvidas sobre como adequar a room do seu jogo na tela do seu dispositivo. Isso é uma dúvida que sempre ocorre pelo fato de que os dispositivos possuem diferentes resoluções entre si.

Então, é muito comum que o seu jogo pareça ficar bom no seu celular, mas quando vc roda em outro aparelho fica horroroso (as imagens todas distorcidas).

Isso ocorre porque a proporção entre largura e altura (width e height) entre os aparelhos varia constantemente.

Essa proporção (width / height) é bastante conhecida como Aspect Ratio.

O mesmo efeito (desagradável) ocorre quando você projeta seu jogo na orientação landscape (paisagem) por exemplo, e decide rodá-lo na resolução portrait (retrato). Quando vc faz isso, acaba invertendo o WIDTH e o HEIGHT do seu aparelho, mudando assim o ASPECT RATIO e consequentemente "cagando" toda a visualização (para previnir isso muitos vão no Global Game Settings e botam o jogo pra rodar em Landscape only, ou Portrait only, por exemplo).

Se vc está boiando na maionese, essas figuras ilustram o conceito de muitas palavras usadas até então:




Esse tutorial visa criar um mecanismo que automaticamente vai corrigir as proporções do seu jogo, independentemente da resolução do aparelho ou mesmo da orientação em que vc está jogando.

UAU!! TUdo que eu sonhava!!!
 


BOTANDO A MÃO NA MASSA!

Gente, a técnica é muito simples:

Vamos precisar apenas de um OBJETO persistente e fazer o uso de VIEWS.

Consiste em basicamente criar um objeto persistente na primeira room do jogo que vai pegar o HEIGHT, WIDTH e ASPECT RATIO do dispositivo deixar a view proporcional a estas dimensões.
Pergunta: Como deixar sempre proporcional ?
Resposta: Simples, vamos deixar um HEIGHT fixo e o WIDTH vai ser calculado a partir do ASPECT RATIO.

Pasmem, é só isso, mais nada... também me sentia um idiota por não ter pensado nisso antes...

Obs: To falando que o objeto deve ser persistente para que ele possa continuar trabalhando durante todas as rooms do jogo. Se vc não sabe o que é um objeto persistente, vai estudar mais.


Então, na primeira room do jogo, coloque esse objeto, e, no evento CREATE deste:

Código:



device_w=display_get_width(); //pegando o width do device e salvando na variável
device_h=display_get_height(); //pegando o height do device e salvando na variável


aspect_ratio=device_w/device_h; //calculando o aspect ratio do device

height=720; //escolhendo um height fixo


view_hview[0]=height; //botando o height da view fixo
view_hport[0]=height; //"

view_wview[0]=height*aspect_ratio; //colocando o width proporcional ao height
view_wport[0]=height*aspect_ratio; //"


alarm[0]=60; //a cada 2 segundos vamos atualizar esses valores (caso a orientaçao do dispositivo tenha mudado)



Agora, vá no evento alarm0 e coloque esse mesmo código (para que ele possa fazer a checagem a cada segundo), pois vai que o mané que tá jogando o seu jogo virou o celular de posição.

Bom agora isso não é mais problema
=)

Dicas Finais

Como eu sou bonzinho, criei uma engine que faz esse trabalho sujo e ainda mostra na tela o valor de todas as variáveis que interessam. Inclusive, se vc clicar com o botão direito do mouse (ou der 2 cliques no touch do seu dispositivo móvel) vc pode mudar o valor do Height Fixo. Assim vcs vão entender exatamente o que esse código está fazendo no seu jogo. A engine está no cabeçalho deste tutorial.

Como sabemos que alguns dispositivos tem uma resolução relativamente baixa (como alguns celulares xing ling) e outros (como o IPAD Retina) tem resoluções muito altas uma dica que eu dou é ajustar o valor do Height Fixo de acordo com o dispositivo onde o jogo vai rodar.

EX:
Se for IPAD Retina, o height vale 1024.
Se for Iphone, o height vale 720.
Se for Android, o height vale 640. E assim por diante.

Isso pode ser feito através do exemplo de código abaixo (não contemplado na engine).

Código:


switch (os_type)
    {
    case os_windows: height=768 ;break;
    case os_android: height=420; break;
    case os_psp: height=420; break;
    case os_linux: height=768; break;
    case os_macosx: height=768; break;
    case os_ios: height=768; break;
    case os_winphone: height=420; break;
    }


Choro: Ah, Fred... quando eu giro o celular e fica no modo retrato eu quase não enxergo a fase. =(
Resposta: É claro, porra. Seu Width ficou muito menor (veja a primeira figura desse tutorial, cabeçudo). O que vc pode fazer pra compensar é aumentar a resolução da view para pegar um pedaço maior da room.

Então, nesse caso esse pedaço de código vai bem a calhar no evento Alarm0 (embora possa tbm ser usado no step).

Código:


//height=720; (essa linha obviamente vc vai comentar)
if display_get_orientation() = display_landscape //se tiver no formato paisagem (landscape)
    {
    height=720 //a resolução da view pode ser menor
    }
 else //se estiver no formato retrato (portrait)
    {
    height=1240 //vamos aumentar a view (ou seja, afastar um pouco da room pra eu poder enxergar mais da sala)
    }


E por aí vai, é só lerem um pouquinho o manual do GMS que vcs verão como reconhecer o modelo do dispositivo onde está sendo rodado o seu lindo jogo.


É isso pessoal, espero ter contribuído com mais um tuto.

Bons jogos e bons estudos.

Abraço
Titio Fred

Não funcionou aki testei no galaxy s2lite Android
mudei o height para 720,420,600 e nada
em landscap até da mas se viro o telefone aparece só um pedaço do game!

tens a solução?

Amigo, vc não entendeu. Na verdade deu certo.
Só aparece um pedaço do game porque a largura da view diminuiu...

Mas a sprite do player continua nas proporções normais.

Faça o teste com um height maior (tipo 1280) que vc vai entender.


Obs>> Para dar o efeito que vc está querendo, basta colocar esse código no evento de alarm0:

Código:


if display_get_orientation() = display_landscape
    {
    height=720
    }
 else
    {
    height=1240
    }


Apareceu uma tarja preta em cima da view nos dois sentidos  

uso a view 800x600 tem como deixar bom para todas as resoluções dos aparelhos?
não saquei ainda  

willyruduit escreveu:Apareceu uma tarja preta em cima da view nos dois sentidos  

uso a view 800x600 tem como deixar bom para todas as resoluções dos aparelhos?
não saquei ainda  

Deve ser pq a sua view está menor que a room.

Vc habilitou a view0 na room ?

Faz um teste e bota a view pra seguir o objeto.

A propósito, vc está usando minha engine mesmo ?

Não consegui abrir sua engine

minha room tem width=8000 heigth=600

view0 ativada seguir obj_per

view in room W800 H600
port on screen W800 H600

HBOR 400
VBOR 300

visível em room starts

Vc está usando que versão do Game Maker ?

É sempre necessário marcar a orientação correta do jogo na aba correspondente ao sistema em global game setings.

Há mais deu ano eu postei um tutorial explicando o método utilizado pra fazer um jogo funcionar na maioria das telas,
https://gmbr.forumeiros.com/t23783-android-adaptando-o-jogo-a-resolucoes-diferentes?highlight=resolu%E7%F5es+android

É um código bem pequeno que eu uso em todos os meus jogos, já nem penso mais a respeito.
Apenas copio e colo no novo projeto.

Cascavelo

Testei o seu no galaxy deu certo mas em um lgpf350 não deu cortou a tela!

Casca, vou mover seu tuto pra seção correta, ok? Ele tá em Engines em vez de Tutoriais.

Casca, vou mover seu tuto pra seção correta, ok? Ele tá em Engines em vez de Tutoriais.

OK, estas informações são muito úteis.

Testei o seu no galaxy deu certo mas em um lgpf350 não deu cortou a tela!

Você em que colocar o personagem para seguir a view, baixe meu jogo do sapo e teste nos dois aparelhos pra você entender como funciona.
Em telas mais estreitas vai cortar mais, mas a view se movimenta pra os dois lados acompanhando o personagem.
Em telas mais largas a view pode ate ficar parada se for bem larga.
Lembrando que a hud, placares e outras informações devem ser colocadas na tela com o evento Draw_gui pra ficarem sempre no mesmo lugar. Tendo o cuidado de não colocar informações próximas as bordas pra não cortar.

Olá, uma perguntinha. tem como manter o jogo SEMPRE em landscape?

Isaque Onix escreveu:Olá, uma perguntinha. tem como manter o jogo SEMPRE em landscape?

cê define isso

Sim você define isso em global game settings -> android -> general: Orientation

Obrigado willyruduit!

so uma coisa, eu boto o alarm 0 onde? na primeira room tb como se fosse um objeto "controle"?

você poe só na primeira room, e marca como persistent...
[edit]
você cria um objeto para "controlar" a resolução, depois coloca o alarm[0] nele, marca persistent, e coloca esse objeto na primeira room do seu jogo...

willyruduit escreveu:Não funcionou aki testei no galaxy s2lite Android
mudei o height para 720,420,600 e nada
em landscap até da mas se viro o telefone aparece só um pedaço do game!

tens a solução?

minha tela esta cortada alguem pode me ajudar

Douglas Felipe talvez esse tutorial possa ajuda-lo:

https://gmbr.forumeiros.com/t23783-android-adaptando-o-jogo-a-resolucoes-diferentes?highlight=resolu%E7%F5es+android

Cara ja fiz e refiz esse tutorial varias vezes mais sempre da uma tela corta

se alguem poder me ajudar