Como adicionar botões ao seu jogo HTML5 para acesso móvel - dummies

A biblioteca do SimpleGame possui um recurso útil chamado GameButton para adicionar um botão à tela de um dispositivo móvel para o seu jogo HTML5. O teclado é uma das maneiras mais fáceis de obter entrada em um navegador padrão, mas a maioria dos dispositivos móveis não possui teclados. O primeiro problema é descobrir como obter entrada do usuário quando não há teclado.

O botão do botão GameButton começa com os recursos de um botão HTML padrão, mas adiciona alguns truques para torná-lo adequado para jogos. Você pode ativar o botão com um mouse regular ou com os controles de toque, tornando-o ideal para jogos que podem ser jogados em ambos os tipos de dispositivos. O botão. A página html ilustra o botão em ação: botão

. html var btnMove; jogo var; bola var; function init () {game = new Scene (); jogos. setSize (200, 200); bola = novo Sprite (jogo, "redBall. png", 25, 25); bola. setSpeed ​​(0); bola. setPosition (100, 100); btnMove = novo GameButton ("Mover"); btnMove. setPos (70, 150); btnMove. setSize (60, 30); jogo. start ();} // fim init função update () {jogo. Claro(); checkButtons (); bola. update ();} // fim de atualização função checkButtons () { se (btnMove. isClicked ()) { bola. setSpeed ​​(3); } else { bola. setSpeed ​​(0); } // fim se } // fim verificarButtons

Como de costume, os elementos novos e interessantes são indicados em negrito. Veja como você adiciona um botão de jogo a um jogo:

1. Crie uma variável para o botão.

   Como qualquer outro elemento do jogo, você começa criando uma variável para se referir ao botão.

2. Construa o objeto GameButton.

   Crie o objeto GameButton no método init (). O único parâmetro indica a legenda do botão.

3. Defina o tamanho e a posição do botão.

   Você vai querer pensar um pouco sobre como sua jogabilidade funcionará em dispositivos móveis. Coloque seus botões onde eles podem ser facilmente alcançados pelo jogador sem bloquear demais a visão. Observe que você também quererá fazer os botões suficientemente grandes para serem pressionados durante o calor do jogo. (Os botões na tela são muito melhores para jogos baseados em tablets.)

4. Verifique o status do botão durante a atualização ().

   Assim como você normalmente verifica o status do teclado durante a função de atualização (), você também pode chamar uma função para verificar o status do botão. Claro, você precisará escrever essa função.

5. Leia o método isClicked () do botão.

   Se o botão estiver sendo pressionado, o valor de isClicked () é verdadeiro. Se o botão não estiver sendo pressionado no momento, isClicked () retorna falso.Use este método para determinar o estado atual de cada botão e atue em conformidade.

6. Trate um botão como o teclado.

   Como o teste dos botões retorna valores Booleanos (verdadeiros ou falsos), verificar se há botões geralmente se parece muito com a verificação do teclado.

7. Considere adicionar botões somente quando necessário.

   Se você quiser, você pode projetar um jogo para exibir botões (e testar) somente quando uma tela de toque estiver disponível. O objeto Scene possui uma variável especial chamada touchable. Essa variável é verdadeira se a biblioteca detecta uma tela sensível ao toque e falhe de outra forma. Você pode usar essa variável para gerar uma interface personalizada que se adapta ao ambiente de jogo.

Normalmente, você adicionará vários botões à sua interface, um para substituir cada tecla que você espera que o usuário use (por exemplo, setas e barra espaciadora). Desta forma, você pode criar um teclado virtual na tela. Talvez seja necessário testar o tamanho e a posição de cada chave para obter uma experiência de jogo confortável.

Observe que a legenda do botão é HTML comum, então, se você deseja criar seus botões com base em imagens, basta adicionar a marca

apropriada como uma legenda de botão.