Controles de toques e o truque da detecção do toque

Favourite 270 favourites
Tutorial written by AshleyOriginally published on 22nd, December 2011 - 5 revisions

Translation Team:

1 revision

Hoje em dia é ingênuo assumir que todos na web usam mouse ou teclado. Na web moderna, muitas pessoas estão navegando via dispositivos de toque como o iPhone, iPad, e celulares Androids. Se o seu jogo for controlado somente pelo mouse e/ou teclado, os usuários de dispositivos com toque provavelmente não poderão jogar seu Jogo!

Entretanto, é fácil de ter controles de toque na tela - e há um método eficiente e simples para detectar se o usuário têm um dispositivo de toque ou não, também.

Entradas de mouse para toques

Primeiro de tudo, se você está desenvolvendo um jogo especialmente para disposivitos de toque, ou seu jogo só usa os cliques do mouse, então use o objeto Touch. Configure ele para usar as entradas do mouse (Use mouse input) nas propriedades para sim (Yes) (ele está "não" por padrão). Agora os cliques do mouse irão disparar os eventos de toque como On touch start e Is in touch. Obviamente você só poderá simular toques simples e não simultâneos do mouse - logo, segurando o botão esquerdo do mouse representa um toque, soltá-lo representa não tocar. Então, clicar-e-arrastar representa varrer a tela com o toque.

Isto facilmente lhe permite ambas entradas, de mouse e de toque, para jogos simples.

Controles de toques na tela

Para muitos outros jogos, são necessários botões na tela para o controle. Estes botões podem ser feitos com objetos do tipo Sprites.

Primeiro, se você ainda não tem um, faça um layer que não role (non-scrolling = parallax: 0, 0) pois você não quer que seu controle saia da tela ao mover-se pela fase! Isto fará com que o layer sempre seja exibido no mesmo local da tela.

Agora, tenha certeza de que o layer está selecionado. No canto superior esquerdo do layout estará mostrando o tamanho da janela. Adicione algumas Sprites representando os botões de toque dentro da janela. Um exemplo de controles na tela são as setas do joystick, que normalmente estão em um dos cantos, como mostrado abaixo.

Touch controls
Lembre que botões grandes são fáceis de tocar! Você provavelmente irá querer alterar os poligonos de colisão no editor de imagem para fazer com que a área seja ligeiramente maior que o botão, e assim, mais fácil de tocar.

Agora você pode usar os objetos sensíveis ao toque com as condicionais Is touching object que irão chamar as ações de controle de comportamento, tais como Simulate control iguais abaixo:

Touch control event
Agora você controles na tela que permanecem nos mesmos lugares da tela enquanto você joga e podem controlar o jogador.

Se o seu jogo simplesmente usa os controles direita/esquerda, você pode fazer variações, como por exemplo grandes imagens invisíveis, dividindo a tela em duas, e detectando se o toque foi na direita ou esquerda da tela.

Lembre que, quanto maior a área de detecção do toque, mais fácil é de controlar no jogo.

Alternativas para controles de toques

Há inúmeras maneiras de controlar os jogos em dispositivos de toque. Você não precisa de controles na tela, e algumas alternativas são mais fáceis e divertidas de usar. Aqui vão duas novas sugestões:

1. Toque ao redor do jogador para movê-lo, ao invés de ter um controle na tela. Por exemplo, no Space Blaster, a nave pode se mover para você está tocando. Outros botões na tela podem ser usados para ações alternativas, como por exemplo atirar foguetes.

2. Usar o acelerômetro para controlar o movimento. No objeto "Touch", você pode recuperar as expressões Alpha, Beta e Gamma . Isto lhe permite detectar se o dispositivo está inclinado sobre diferentes eixos, o que pode direcionar alguns movimentos.

Finalmente, você talvez queira adaptar os controles para serem mais fáceis em dispositivos de toque. Controles de toque podem ser mais difíceis de usar que um teclado ou mouse, então simplificar os controles pode fazer seu jogo mais divertido. Por exemplo, um jogador deve segurar a barra de espado para atirar o laser principal no jogo Space Blaster. Alterando o laser para atirar automaticamente enquanto o inimigo estiver na tela faz o jogo mais divertido do que necessitar apertar o botão de tiro. Isto também faz o jogo ficar mais fácil, mas principalmente, tenha certeza de que a principal meta é fazer o jogo ficar ficar mais divertido do que frustrante.

Detectando métodos de entrada

Então agora você têm controles de toque na tela. O que fazer se o usuário está em um computador com um mouse e teclado? Aqui não há porque mostrar os controles na tela. Provisionalmente, existe uma maneira muito simples de detectar se o usuário está usando métodos de entrada via toque ou não: Tenha uma tela de entrada!

Isto é realmente simples. Na tela de entrada, coloque a mensagem "Pressione continuar". Então, se o jogador usar o teclado, você checa On any key pressed ou o Mouse On any click. Estes eventos irão disparar a tela de título, e você saberá se o usuário está usando um dispositivo de toque, mouse ou teclado. Então você poderá configurar uma variável global para indicar qual método de entrada o usuário está usando e prosseguir para a primeira fase. Se a variável global está configurada para Touch, mostre os controles na tela, caso contrário, faça os controles ficarem invisíveis, logo, você estará usando o tipo de controle adequado e não precisará mais se aborrecer quanto a isto!

Isto é tudo a respeito do assunto!

Outras leituras

Dispositivos co toque na tela têm diferentes tamanhos de telas, talvez você queira ler mais a respeito de como configurar e suportar os diferentes tamanhos: Supporting multiple screen sizes.

Testar em dispositivos móveis e tablets é muito mais fácil com previewing on a local network.

Tradução livre, feita por Telles0808 em parceria com a comunidade IGMBrasil

Unlock your full gamedev potential

Upgrade to the Personal Edition of Construct 2, it has way more features and won't holding back from making money and using your full creativity like the free edition does. It's a one off payment and all Construct 2 editor updates are free for life!

View deals

Plus, it's got a lot of additional features that will help you save time and make more impressive games!

Congratulations on finishing this tutorial!

Did you learn a lot from it? Share it now with your friends!

Share and Copy this Tutorial

You are free to copy, distribute, transmit and adapt this work with correct attribution. Click for more info.

Leave a comment

Everyone is welcome to leave their thoughts! Register a new account or login.