Trabalhando com resoluções em dispositivos móveis

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

Trabalhando com resoluções em dispositivos móveis

Mensagem por fredcobain em Qua 11 Set 2013, 19:46

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

Cool 


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


Última edição por fredcobain em Qua 11 Set 2013, 22:16, editado 4 vez(es)

fredcobain

Ranking : Sem avaliações
Número de Mensagens : 691
Idade : 35
Data de inscrição : 14/04/2011
Reputação : 162
Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0
Prêmios
   : 0
   : 0
   : 0

Voltar ao Topo Ir em baixo

Re: Trabalhando com resoluções em dispositivos móveis

Mensagem por willyruduit em Qua 11 Set 2013, 21:22

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?

willyruduit

Ranking : Nota A
Número de Mensagens : 306
Idade : 28
Data de inscrição : 02/08/2013
Notas recebidas : B-B-B-A-A
Reputação : 33
Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0
Prêmios
   : 0
   : 0
   : 0

Voltar ao Topo Ir em baixo

Re: Trabalhando com resoluções em dispositivos móveis

Mensagem por fredcobain em Qua 11 Set 2013, 21:40

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
    }

fredcobain

Ranking : Sem avaliações
Número de Mensagens : 691
Idade : 35
Data de inscrição : 14/04/2011
Reputação : 162
Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0
Prêmios
   : 0
   : 0
   : 0

Voltar ao Topo Ir em baixo

Re: Trabalhando com resoluções em dispositivos móveis

Mensagem por willyruduit em Qua 11 Set 2013, 21:56

Apareceu uma tarja preta em cima da view nos dois sentidos Suspect 

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

willyruduit

Ranking : Nota A
Número de Mensagens : 306
Idade : 28
Data de inscrição : 02/08/2013
Notas recebidas : B-B-B-A-A
Reputação : 33
Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0
Prêmios
   : 0
   : 0
   : 0

Voltar ao Topo Ir em baixo

Re: Trabalhando com resoluções em dispositivos móveis

Mensagem por fredcobain em Qua 11 Set 2013, 22:03

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

uso a view 800x600 tem como deixar bom para todas as resoluções dos aparelhos?
não saquei ainda confused 
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 ?

fredcobain

Ranking : Sem avaliações
Número de Mensagens : 691
Idade : 35
Data de inscrição : 14/04/2011
Reputação : 162
Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0
Prêmios
   : 0
   : 0
   : 0

Voltar ao Topo Ir em baixo

Re: Trabalhando com resoluções em dispositivos móveis

Mensagem por willyruduit em Qua 11 Set 2013, 22:22

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

willyruduit

Ranking : Nota A
Número de Mensagens : 306
Idade : 28
Data de inscrição : 02/08/2013
Notas recebidas : B-B-B-A-A
Reputação : 33
Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0
Prêmios
   : 0
   : 0
   : 0

Voltar ao Topo Ir em baixo

Re: Trabalhando com resoluções em dispositivos móveis

Mensagem por fredcobain em Qua 11 Set 2013, 22:23

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

fredcobain

Ranking : Sem avaliações
Número de Mensagens : 691
Idade : 35
Data de inscrição : 14/04/2011
Reputação : 162
Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0
Prêmios
   : 0
   : 0
   : 0

Voltar ao Topo Ir em baixo

Re: Trabalhando com resoluções em dispositivos móveis

Mensagem por cascavelo em Qua 11 Set 2013, 22:48

É 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,
http://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

Ranking : Nota A
Número de Mensagens : 1011
Idade : 46
Data de inscrição : 08/12/2011
Notas recebidas : A - A - A - A - A -A -C
Reputação : 71
Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0
Prêmios
   : 1
   : 2
   : 1

Voltar ao Topo Ir em baixo

Re: Trabalhando com resoluções em dispositivos móveis

Mensagem por willyruduit em Qua 11 Set 2013, 22:53

Cascavelo

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

willyruduit

Ranking : Nota A
Número de Mensagens : 306
Idade : 28
Data de inscrição : 02/08/2013
Notas recebidas : B-B-B-A-A
Reputação : 33
Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0
Prêmios
   : 0
   : 0
   : 0

Voltar ao Topo Ir em baixo

Re: Trabalhando com resoluções em dispositivos móveis

Mensagem por fredcobain em Qua 11 Set 2013, 22:58

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

fredcobain

Ranking : Sem avaliações
Número de Mensagens : 691
Idade : 35
Data de inscrição : 14/04/2011
Reputação : 162
Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0
Prêmios
   : 0
   : 0
   : 0

Voltar ao Topo Ir em baixo

Re: Trabalhando com resoluções em dispositivos móveis

Mensagem por cascavelo em Qui 12 Set 2013, 08:35

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.

cascavelo

Ranking : Nota A
Número de Mensagens : 1011
Idade : 46
Data de inscrição : 08/12/2011
Notas recebidas : A - A - A - A - A -A -C
Reputação : 71
Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0
Prêmios
   : 1
   : 2
   : 1

Voltar ao Topo Ir em baixo

Re: Trabalhando com resoluções em dispositivos móveis

Mensagem por Isaque Onix em Qua 29 Jan 2014, 12:40

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

Isaque Onix

Número de Mensagens : 1597
Idade : 23
Data de inscrição : 15/08/2010
Reputação : 147
Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0
Prêmios
   : 0
   : 0
   : 0

http://spyreserver.16mb.com

Voltar ao Topo Ir em baixo

Re: Trabalhando com resoluções em dispositivos móveis

Mensagem por willyruduit em Qua 29 Jan 2014, 19:17

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

willyruduit

Ranking : Nota A
Número de Mensagens : 306
Idade : 28
Data de inscrição : 02/08/2013
Notas recebidas : B-B-B-A-A
Reputação : 33
Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0
Prêmios
   : 0
   : 0
   : 0

Voltar ao Topo Ir em baixo

Re: Trabalhando com resoluções em dispositivos móveis

Mensagem por Isaque Onix em Seg 03 Fev 2014, 01:52

Obrigado willyruduit!

Isaque Onix

Número de Mensagens : 1597
Idade : 23
Data de inscrição : 15/08/2010
Reputação : 147
Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0
Prêmios
   : 0
   : 0
   : 0

http://spyreserver.16mb.com

Voltar ao Topo Ir em baixo

Re: Trabalhando com resoluções em dispositivos móveis

Mensagem por MatheusMM em Ter 12 Ago 2014, 14:28

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

MatheusMM

Número de Mensagens : 30
Data de inscrição : 10/08/2014
Reputação : 0
Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0

Voltar ao Topo Ir em baixo

Re: Trabalhando com resoluções em dispositivos móveis

Mensagem por Isaque Onix em Ter 12 Ago 2014, 15:02

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

Isaque Onix

Número de Mensagens : 1597
Idade : 23
Data de inscrição : 15/08/2010
Reputação : 147
Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0
Prêmios
   : 0
   : 0
   : 0

http://spyreserver.16mb.com

Voltar ao Topo Ir em baixo

Re: Trabalhando com resoluções em dispositivos móveis

Mensagem por Douglas Felipe em Seg 09 Mar 2015, 18:10

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

Número de Mensagens : 11
Data de inscrição : 27/01/2015
Reputação : 0
Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0

Voltar ao Topo Ir em baixo

Re: Trabalhando com resoluções em dispositivos móveis

Mensagem por WellingtonBecker em Seg 09 Mar 2015, 19:11


WellingtonBecker

Ranking : Nota D
Número de Mensagens : 820
Idade : 35
Data de inscrição : 09/05/2013
Notas recebidas : D
Reputação : 105
Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0

Voltar ao Topo Ir em baixo

Re: Trabalhando com resoluções em dispositivos móveis

Mensagem por Douglas Felipe em Ter 10 Mar 2015, 23:07

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

Douglas Felipe

Número de Mensagens : 11
Data de inscrição : 27/01/2015
Reputação : 0
Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0

Voltar ao Topo Ir em baixo

Re: Trabalhando com resoluções em dispositivos móveis

Mensagem por Douglas Felipe em Qua 11 Mar 2015, 19:50

se alguem poder me ajudar

Douglas Felipe

Número de Mensagens : 11
Data de inscrição : 27/01/2015
Reputação : 0
Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0

Voltar ao Topo Ir em baixo

Re: Trabalhando com resoluções em dispositivos móveis

Mensagem por Douglas Felipe em Qua 11 Mar 2015, 19:52

o meu corto a tela oq faço???

Usuário alertado por "Flood"

Douglas Felipe

Número de Mensagens : 11
Data de inscrição : 27/01/2015
Reputação : 0
Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0

Voltar ao Topo Ir em baixo

Re: Trabalhando com resoluções em dispositivos móveis

Mensagem por WellingtonBecker em Qua 11 Mar 2015, 20:57

Veja se esse link te ajuda:
http://gmc.yoyogames.com/index.php?showtopic=565614

E por gentiliza, pare de fazer "Flood".

WellingtonBecker

Ranking : Nota D
Número de Mensagens : 820
Idade : 35
Data de inscrição : 09/05/2013
Notas recebidas : D
Reputação : 105
Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0

Voltar ao Topo Ir em baixo

Re: Trabalhando com resoluções em dispositivos móveis

Mensagem por cascavelo em Qui 12 Mar 2015, 11:56

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

 Não funciona nas últimas versões do GMS, parece ser um bug inexplicável. Fiz vários testes recompilando os jogos novamente e deram problema, em alguns dispositivos aparecem barras pretas nas laterais.
 Acredito que seja devido a nova função application_surface. Será necessário outro método que inclusa esta função.

cascavelo

Ranking : Nota A
Número de Mensagens : 1011
Idade : 46
Data de inscrição : 08/12/2011
Notas recebidas : A - A - A - A - A -A -C
Reputação : 71
Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0
Prêmios
   : 1
   : 2
   : 1

Voltar ao Topo Ir em baixo

Re: Trabalhando com resoluções em dispositivos móveis

Mensagem por Conteúdo patrocinado Hoje à(s) 12:35


Conteúdo patrocinado


Voltar ao Topo Ir em baixo

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

 
Permissão deste fórum:
Você não pode responder aos tópicos neste fórum