Conectar-se
Quem está conectado
25 usuários online :: 1 usuário cadastrado, Nenhum Invisível e 24 Visitantes

WellingtonBecker

Ver toda a lista


Compartilhe
Ver o tópico anteriorIr em baixoVer o tópico seguinte
avatar
Ranking : Sem avaliações
Data de inscrição : 14/04/2011
Número de Mensagens : 691
Insígnias de JAM :

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

Prêmios
   : 0
   : 0
   : 0
Ver perfil do usuário

Trabalhando com resoluções em dispositivos móveis

em Qua 11 Set 2013, 19:46
Reputação da mensagem: 100% (4 votos)
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)
avatar
Ranking : Nota A
Notas recebidas : B-B-B-A-A
Data de inscrição : 02/08/2013
Número de Mensagens : 306
Insígnias de JAM :

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

Prêmios
   : 0
   : 0
   : 0
Ver perfil do usuário

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

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?
avatar
Ranking : Sem avaliações
Data de inscrição : 14/04/2011
Número de Mensagens : 691
Insígnias de JAM :

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

Prêmios
   : 0
   : 0
   : 0
Ver perfil do usuário

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

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
    }
avatar
Ranking : Nota A
Notas recebidas : B-B-B-A-A
Data de inscrição : 02/08/2013
Número de Mensagens : 306
Insígnias de JAM :

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

Prêmios
   : 0
   : 0
   : 0
Ver perfil do usuário

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

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 
avatar
Ranking : Sem avaliações
Data de inscrição : 14/04/2011
Número de Mensagens : 691
Insígnias de JAM :

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

Prêmios
   : 0
   : 0
   : 0
Ver perfil do usuário

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

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 ?
avatar
Ranking : Nota A
Notas recebidas : B-B-B-A-A
Data de inscrição : 02/08/2013
Número de Mensagens : 306
Insígnias de JAM :

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

Prêmios
   : 0
   : 0
   : 0
Ver perfil do usuário

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

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
avatar
Ranking : Sem avaliações
Data de inscrição : 14/04/2011
Número de Mensagens : 691
Insígnias de JAM :

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

Prêmios
   : 0
   : 0
   : 0
Ver perfil do usuário

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

em Qua 11 Set 2013, 22:23
Vc está usando que versão do Game Maker ?
avatar
Ranking : Nota A
Notas recebidas : A - A - A - A - A -A -C
Data de inscrição : 08/12/2011
Número de Mensagens : 1011
Insígnias de JAM :

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

Prêmios
   : 1
   : 2
   : 1
Ver perfil do usuário

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

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.
avatar
Ranking : Nota A
Notas recebidas : B-B-B-A-A
Data de inscrição : 02/08/2013
Número de Mensagens : 306
Insígnias de JAM :

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

Prêmios
   : 0
   : 0
   : 0
Ver perfil do usuário

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

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!
avatar
Ranking : Sem avaliações
Data de inscrição : 14/04/2011
Número de Mensagens : 691
Insígnias de JAM :

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

Prêmios
   : 0
   : 0
   : 0
Ver perfil do usuário

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

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.
avatar
Ranking : Nota A
Notas recebidas : A - A - A - A - A -A -C
Data de inscrição : 08/12/2011
Número de Mensagens : 1011
Insígnias de JAM :

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

Prêmios
   : 1
   : 2
   : 1
Ver perfil do usuário

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

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.
avatar
Data de inscrição : 15/08/2010
Número de Mensagens : 1598
Insígnias de JAM :

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

Prêmios
   : 0
   : 0
   : 0
Ver perfil do usuáriohttp://spyreserver.16mb.com

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

em Qua 29 Jan 2014, 12:40
Olá, uma perguntinha. tem como manter o jogo SEMPRE em landscape?
avatar
Ranking : Nota A
Notas recebidas : B-B-B-A-A
Data de inscrição : 02/08/2013
Número de Mensagens : 306
Insígnias de JAM :

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

Prêmios
   : 0
   : 0
   : 0
Ver perfil do usuário

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

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
avatar
Data de inscrição : 15/08/2010
Número de Mensagens : 1598
Insígnias de JAM :

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

Prêmios
   : 0
   : 0
   : 0
Ver perfil do usuáriohttp://spyreserver.16mb.com

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

em Seg 03 Fev 2014, 01:52
Obrigado willyruduit!
avatar
Data de inscrição : 10/08/2014
Número de Mensagens : 30
Insígnias de JAM :

Insignia 1x 0 Insignia 2x 0 Insignia 3x 0
Reputação : 0
Ver perfil do usuário

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

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"?
avatar
Data de inscrição : 15/08/2010
Número de Mensagens : 1598
Insígnias de JAM :

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

Prêmios
   : 0
   : 0
   : 0
Ver perfil do usuáriohttp://spyreserver.16mb.com

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

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...
avatar
Data de inscrição : 27/01/2015
Número de Mensagens : 11
Insígnias de JAM :

Insignia 1x 0 Insignia 2x 0 Insignia 3x 0
Reputação : 0
Ver perfil do usuário

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

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
avatar
Ranking : Nota D
Notas recebidas : D
Data de inscrição : 09/05/2013
Número de Mensagens : 822
Insígnias de JAM :

Insignia 1x 0 Insignia 2x 0 Insignia 3x 0
Reputação : 105
Ver perfil do usuário

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

em Seg 09 Mar 2015, 19:11
avatar
Data de inscrição : 27/01/2015
Número de Mensagens : 11
Insígnias de JAM :

Insignia 1x 0 Insignia 2x 0 Insignia 3x 0
Reputação : 0
Ver perfil do usuário

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

em Ter 10 Mar 2015, 23:07
Cara ja fiz e refiz esse tutorial varias vezes mais sempre da uma tela corta
avatar
Data de inscrição : 27/01/2015
Número de Mensagens : 11
Insígnias de JAM :

Insignia 1x 0 Insignia 2x 0 Insignia 3x 0
Reputação : 0
Ver perfil do usuário

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

em Qua 11 Mar 2015, 19:50
se alguem poder me ajudar
Ver o tópico anteriorVoltar ao TopoVer o tópico seguinte
Permissão deste fórum:
Você não pode responder aos tópicos neste fórum