Como criar um joystick virtual para o seu jogo HTML5

Muitos jogos HTML5 baseados em toque usar um mecanismo de joystick virtual. O usuário toca a tela para começar a entrada e furtos para fornecer entrada. Deslizando para a esquerda é lido apenas como mover um joystick para a esquerda. Quanto mais o usuário furtos, maior o valor da entrada é. o simpleGame biblioteca tem um objeto joystick virtual que facilita a implementação de um joystick virtual em seus dispositivos baseados em toque.

O joystick virtual funciona através do envio de dados numéricos. Muitas vezes é mais fácil de entender como ele funciona, olhando para a saída numérica antes de mapeá-lo a um elemento visual.

 
Nada aqui ainda

O joystick virtual é muito fácil de usar:

1. Criar uma variável para o joystick.

   Você pode chamá-lo controle de video game. Tipo de atrativo.

2. Criar o joystick se possível.

   Use o game.touchable propriedade para determinar se uma interface de toque está presente. Se não, enviar uma mensagem para o utilizador.

3. Obter a posição do mouse.

   Quando o J Virtualoystick objeto detecta um toque na tela, ele aciona mouseX e mouseY valores. Use o joystick do GetMouseX () e GetMouseY () métodos para determinar as posições de X e Y do toque. Neste modo, a interface de toque actua muito como o rato tradicional.

4. obter uma Diffx e Diffy leitura do joystick.

   Quando o utilizador toca no ecrã, a biblioteca controla as coordenadas do contacto inicial. Em seguida, ele mede o quão longe o usuário tenha fraudado. A diferença em X é chamada Diffx, e a diferença em Y é chamada Diffy. Use o getDiffX () e getDiffY () métodos do objeto joystick virtual para determinar quantos pixels em X e Y que o usuário tenha se movido desde que tocar na tela.

5. Indicar os valores atuais.

   Para esta primeira passagem, é importante entender o que o joystick está exibindo, então, basta tomar os valores e imprimi-los para uma saída na tela.

É claro, o ponto de um joystick virtual é mover o material no ecrã.

Aqui está o código:

Este exemplo é ainda mais simples que a anterior.

1. Criar um sprite simples bola.

   Para este exemplo, é usado um simples bola. Criá-la como qualquer outra entidade gráfica básica.

2. Construir um objeto joystick.

   Fazer um objeto joystick virtual.

3. Mapear o joystick do Diffx e Diffy para a bola dx e dy valores.

   Isto dá o movimento extremamente sensível, então você pode querer ajustar a sensibilidade dividindo o Diffx e Diffy por algum fator de escala.