Pular para o conteúdo
Jogos Digitais
Nesta página
  1. Objetivos de aprendizagem
  2. Pré-requisitos
  3. Materiais
  4. Conceitos
  5. Exemplos
  6. Tutorial passo a passo
  7. Imagens
  8. Indicação da interface
  9. O código completo
  10. Explicação do código
  11. Resultado esperado
  12. Problemas comuns
  13. Exercício guiado
  14. Desafio individual
  15. Desafio avançado (opcional)
  16. Critérios de avaliação
  17. Checklist de conclusão
  18. Extensão

Módulo 3 · Aula 3.9 · Controles de toque

Carga horáriaDificuldadeFerramentaCompetências
8 h/a⭐⭐⭐GDevelop 5 (gdevelop.io)C2, C3, C5

Objetivos de aprendizagem

  1. Fazer o personagem andar na direção do dedo (ou do mouse).
  2. Usar subeventos para combinar condições.
  3. Usar as ações "simular tecla" do comportamento de movimento.
  4. Explicar a "zona morta" de 8 pixels e por que ela existe.

Pré-requisitos

Aula 3.8. Aula 3.3 (comportamento de movimento).

Materiais

Computador com o GDevelop; um celular para o teste final (Aula 3.11) se houver.

Conceitos

Toque vira mouse. Por padrão o GDevelop trata um dedo na tela como o mouse: a condição Botão do mouse pressionado ou toque mantido vale para os dois. Por isso dá para testar o toque no computador usando o mouse.

Posição do cursor. CursorX() e CursorY() dizem onde está o mouse ou o dedo, em pixels da cena.

Simular tecla. O comportamento Movimento em TopDown tem ações como Simula o pressionamento da tecla esquerda. Elas fazem o personagem andar como se a seta tivesse sido apertada, com a mesma aceleração e o mesmo freio. Não é preciso programar outro movimento.

Zona morta. Se o dedo estiver a menos de 8 pixels do centro do personagem, nenhuma direção é simulada. Sem isso, o personagem treme indo e voltando em cima do dedo.

Subevento. O evento pai testa "o dedo está na tela?". Os quatro filhos testam a direção. Os filhos só rodam se o pai for verdadeiro.

Exemplos

Dedo em relação ao personagemTeclas simuladas
à direita e acimadireita + cima (anda na diagonal)
à esquerda, mesma alturaesquerda
a 5 px do centronenhuma (zona morta)

Tutorial passo a passo

Parte A. Evento pai (20 min)

  1. Novo evento. Condição: Botão do mouse pressionado ou toque mantido, botão "Left".

Parte B. Quatro subeventos (90 min)

  1. Com o evento pai selecionado, adicione um subevento.
  2. Condição: Comparar dois números (aba Outras Condições). Primeira: CursorX(). Sinal: <. Segunda: Jogador.CenterX() - 8.
  3. Ação: Jogador → Simula o pressionamento da tecla esquerda.
  4. Repita para direita (> e + 8), cima (CursorY() < Jogador.CenterY() - 8) e baixo (> e + 8).

Parte C. Teste (60 min)

  1. Visualizar. Segure o botão do mouse em vários lugares da tela. O sertanejo vai até lá e para.
  2. Teste a zona morta: troque 8 por 0 e veja o tremor. Volte para 8.
  3. Peça a um colega que jogue só com o mouse. Anote na ficha: é mais fácil ou mais difícil que as setas?

Imagens

  • Captura real, evento 2 com os quatro subeventos: recursos/imagens/gdevelop/captura-eventos-parte1.png.

A tradução do GDevelop escreve as ações de jeitos diferentes na folha ("Simule pressionando Esquerda", "Simular o pressionar da teda Direita"). O "teda" é um erro de digitação da própria tradução; as quatro ações são do mesmo grupo e fazem a mesma coisa para direções diferentes.

Indicação da interface

ItemOnde fica
Botão do mouse pressionado ou toque mantidoaba Outras Condições, grupo de mouse e toque
Botão de subeventobarra da folha de eventos, com o evento pai selecionado
Comparar dois númerosaba Outras Condições (ou pesquisar "Comparar")
Ações de simular teclaobjeto Jogador, grupo do movimento de cima para baixo

O código completo

Comentário: Toque ou mouse: o sertanejo anda na direção do dedo.
            As setas do teclado já funcionam pelo comportamento.
Condição: Toque ou botão do mouse "Left" está pressionado
  Subevento: CursorX() < Jogador.CenterX() - 8  → Simule pressionando Esquerda para Jogador
  Subevento: CursorX() > Jogador.CenterX() + 8  → Simular o pressionar da teda Direita para Jogador
  Subevento: CursorY() < Jogador.CenterY() - 8  → Simule pressionar teda para cima para Jogador
  Subevento: CursorY() > Jogador.CenterY() + 8  → Simule pressionar teda para baixo para Jogador

Explicação do código

  • São quatro subeventos independentes, não um "se / senão". Dois podem ser verdadeiros ao mesmo tempo (diagonal).
  • Usa-se o centro do jogador (CenterX()), não o canto (X()), para ele parar com o dedo no meio do corpo.
  • O teste automático confirmou: segurando o mouse em (600, 500) com o jogador em (300, 250), em meio segundo ele andou para a direita e para baixo.

Resultado esperado

Com o mouse ou o dedo segurado, o sertanejo anda até o ponto e para lá, com as mesmas animações das setas.

Problemas comuns

SintomaCausaSolução
O personagem treme paradozona morta 0usar 8
Só anda na horizontalfaltam os subeventos de Ycriar os quatro
Os quatro rodam mesmo sem tocarviraram eventos comuns, não subeventosarrastar para dentro do evento pai (recuados)
Anda para o lado opostosinais trocadosesquerda = < e - 8; direita = > e + 8
No celular o toque não funcionajogo aberto direto do arquivo, sem servidorver Aula 3.11

Exercício guiado

Jogador com centro em (400, 300). Quais teclas são simuladas com o dedo em (395, 200)? (Resposta: só cima. O X está dentro da zona morta, 395 > 392.)

Desafio individual

Mude a zona morta para 20 e jogue. Ficou melhor ou pior? Justifique no diário com o que você observou.

Desafio avançado (opcional)

Controle por gamepad (conteúdo opcional da matriz): adicione ao Jogador o comportamento Mapeador de gamepad para movimento top-down (descrição no GDevelop: "Controlar um personagem com movimento top-down com um gamepad."). Se a escola tiver um controle USB, teste. Registre o que funcionou.

Critérios de avaliação

  • Os quatro subeventos corretos.
  • Teste de zona morta registrado.
  • Comparação mouse × setas feita com outra pessoa.

Checklist de conclusão

Extensão

Liste 3 jogos de celular e descreva como cada um é controlado (toque e segura, deslizar, botões na tela). Qual combinaria com o seu Projeto 1?