GameMaker: Adaptando a tela para dispositivos móveis utilizando View

Esse é o meu novo brinquedo! Uma engine de jogo, que apesar de ser uma das mais simples, satisfaz minhas necessidades. E o melhor dela é o fato de poder unificar o projeto, não necessitando fazer diversos projetos, sendo exclusivo para Android, outra para iOS e outra para Mobile. E ainda posso exportat também para Windows, Mac, HTML5 e Windows 8 e para projetos de brincadeira: Steam Workshop.

Mas com essa versatilidade, chega ao mesmo problema que falei ontem: tamanhos de telas e suas diversificadas resoluções. Então, as dicas que usei no outro post continuam valendo, entretanto, temos outra abordagem que podemos utilizar usando um dos recursos que o GameMaker permite utilizar: as View.


A View é o que podemos chamar de câmeras, ou seja, ela é que mostra as imagens do mundo do jogo e joga para o computador. Se tiver um caso, como em jogos de corridas, em que tenha dois ou mais jogadores e a tela fica dividida para cada jogador. Cada imagem dessas é uma View diferente. Sendo que GameMaker suporta até 8 views.

Bem, chega de papo e vamos ao tutorial. Só para avisar que estou assumindo que você sabe o básico do GameMaker e leu/fez os tutoriais que vieram nele, portanto, não vou perder tempo em definir o que já era para saber.

A primeira coisa que vamos fazer é criar uma Room de inicialização. Por quê? Certas propriedades da Room não podem ser modificadas enquanto estivermos nessa mesma Room. Se iniciarmos o jogo direto do menu, não conseguiríamos adaptá-lo para a dimensão da tela. Vou dar o nome de init.

Criada a Room que vai iniciar o jogo, agora precisamos preparar a próxima Room. Mas primeiro, temos que criá-la. Crie essa segunda Room, e eu vou chamá-la de menu.

Abra a Room menu e clique na aba Views, e marque a opção "Enable the use of Views". Entã, na lista selecione a View 0 e marque a opção "Visible when room starts". Pronto, agora podemos usar a view no menu.

Agora abra a Room init e selecione a aba settings e lá tem um botão escrito "Creation Code", que é o código que é execudo quando a Room é criada (e ela ocorre depois que os Objetos serem criados). Clique nele e vai abrir o editor de código.

Vamos primeiro é pegar as dimensões da tela:

global.device_w=display_get_width();
global.device_h=display_get_height();

A primeira linha estamos pegando a largura da tela e armazenando em uma variável global chamada device_w. Na segunda linha estamos fazendo a mesma coisa, só que para a altura. Então agora vamos usar uma função para  setar a dimensão da View, que é:
  
room_set_view(ind, vind, vis, xview, yview, wview, hview, xport, yport, wport, hport, hborder, vborder, hspeed, vspeed, obj)

Calma, vamos ver o que cada um dos 16 parâmetros significa.

• ind: é o índice da Room que queremos modificar. No nosso caso é o menu;
• vind: é indica qual View queremo modificar, que é um valor entre 0 e 7. Neste caso, é a view 0;
• vis: se a view está visível. Então true;
• xview: posição x inicial da view em relação ao Room. No meu caso quero começar no canto superior esquerdo, então vou colocar 0;
• yview: posição y inicial da view em relação ao Room. Também 0.
• wview: aqui é a largura da view, então vou colocar a largura de tela que temos disponível, que está na global.device_w;
• hview: a altura do view. Como no anterior, vou usar o que armazenamos anteriormente, só que na variável global.device_h;
• xport: essa é a posição x da tela em que a view será exibida. Como queremos que a tela ocupa toda a tela do dispositivo, então o o valor aqui é 0;
• yport: a mesma da anterior, só que para posição y. Logo o valor é 0;
• wport: largura da parte que a view será exibida. Novamente, queremos que ocupe toda a tela, então a largura será igual a largura da tela, que está armazenada em
  global.device_w;
• hport: a mesma que anterior, só que para a altura. Ela será igual a
  global.device_h;
• hborder: Este parâmetro é usado quando você indica para a View seguir um objeto. A view manterá uma distância horizontal entre o objeto e as bordas. Como não estamos seguindo um objeto, isso é indiferente. Então coloco 0 e ponto.
• vborder: Mesma coisa que o anterior, só que mantém um espaçamento vertical. Também 0;
• hspeed: Velocidade horizontal que a view anda quando está seguindo um objeto. Também é indiferente para o nosso exemplo, então 0.
• vspeed: Semelhante ao anterior, porém é na velocidade vertical. Zera ele também para o nosso exemplo.
• obj: Objeto que será seguido pela view. Como não temos nenhum objeto, atribuimos ao um valor de -1.

Aqui nós podemos ver que existe grupos de configurações. O primeiro grupo, que consiste nos parâmetros ind, vind e vis e configuram a view na room. O segundo grupo, composto de xview, yview, wview e hview formam a área da room que será visualizada pela view.

O terceiro grupo, composto pelo xport, yport, wport e hport, definem a área da tela que será mostrada o que a view está exibindo. Nesta configuração é importante que esteja na mesma proporção do grupo anterior. Por exemplo, na view você definiu uma área de 800x600, isso dá uma proporção 4:3, então, para evitar deformações, a área da tela tambpem tem que seguir a proporção 4:3. Por exemplo, se o jogo é para quatro jogadores, pode ser criada quatro view de 400x300, que mantém a proporção dos 4:3. Agora, se for pegar para dois jogadores e quiser manter a tela toda ocupada, vai ser dificil com a proporção 4:3, pois para ocupar toda área e que ambas sejam iguais, ou é uma view 800:300 (8:3, ou seja, vai esticar para o lado), ou 400x600 (2:3, esticando para cima). Nesse caso, para evitar distorção, podemos modificar o grupo anterior para que visualize uma área usando as mesmas proporções.

Por fim, o último grupo é o de movimento automático da view. Você configura a view para seguir um objeto, por exemplo, o jogador e você nem se preocupa em ter que assumir o controle de movimento.

Enfim, baseado no que escrevi, a função tem a seguinte configuração:

room_set_view(menu, 0, true, 0, 0, global.device_w, global.device_h, 0, 0, global.device_w, global.device_h, 0, 0, 0, 0, -1);

Basicamente, estamos ajustando na room menu, a view 0 que será visível. Setamos a view para exibir uma área do menu igual ao espaço as dimensões da tela e usamos a mesma configuração para definir qual é a área da tela que vai ser exibida. E tirando o último parâmetro que tem que ser -1, todos os outros são indiferentes para o nosso exemplo.

Pois bem pessoal, esse foi o meu tutorial de como utilizar as views para adaptar as telas independente do aparelho. Também vale a pena lembrar desse outro artigo que escrevi falando sobre adaptação de aparelhos. Isso também ajuda bastante.