Fling, TouchUp, TouchDown Gestures pour App Inventor 2


Cette mini-application de golf montre comment utiliser les mouvements Fling, TouchUp et TouchDown pour les sprites
Notez que ces gestionnaires d’événements sont également disponibles pour le canevas.

Pour jouer à cette application de mini-golf, le joueur place d’abord sa balle dans les limites du tee, puis lance la balle vers le trou. La balle rebondira sur l’obstacle rectangulaire et les côtés du parcours. Pour chaque lancer de balle, le nombre de coups augmente de un. Le score total est le nombre de coups qu’il faut pour terminer la totalité du cours.

Ce tutoriel couvre:

  • En utilisant le Lutin et les événements TouchUp, TouchDown et Flung
  • Utilisant un L’horloge composant
  • Positionnement dynamique des sprites sur une toile, en fonction de la taille de l’écran
  • Collisions de sprites

Ce didacticiel suppose que vous connaissez les bases d’App Inventor – en utilisant le Concepteur de composants pour créer une interface utilisateur et en utilisant l’éditeur de blocs pour spécifier le comportement de l’application. Si vous n’êtes pas familier avec les bases, essayez de parcourir certains des didacticiels de base avant de continuer.


Partie I: démarrer une nouvelle application et créer une balle qui répond aux événements de fling

Nous allons construire cette application par étapes, en ajoutant un peu de jeu à la fois. Connectez-vous à App Inventor et démarrez un nouveau projet. Nommez-le « MiniGolf ». Lorsque la fenêtre de conception s’ouvre, notez que App Inventor nomme automatiquement l’écran « Screen1 », mais vous pouvez définir le titre de l’écran, qui apparaîtra dans la barre supérieure de l’application. Pensez à un titre lié à Mini Golf, ou n’hésitez pas à utiliser le titre suggéré « Fling It Mini Golf », et tapez-le dans le volet Propriétés sur le côté droit du Designer.

Dans les propriétés de l’écran (affichées dans le volet de droite): Décochez la case intitulée « Défilable » pour que l’écran ne défile pas lorsque l’application est en cours d’exécution. Les écrans configurés pour défiler n’ont pas de hauteur. Nous aurons besoin que notre écran ait une hauteur définie pour configurer correctement le parcours de golf.

Ajoutez les composants suivants dans Designer:

Type de composant

Groupe de palettes

Comment vous l’appellerez

Objectif

Propriétés

Toile

Dessin et animation

Toile1

La toile sert de terrain de golf

Hauteur: 300
Largeur: FillParent
Couleur de fond: vert (ou tout ce que vous aimez!)

Balle

Dessin et animation

Balle de golf

C’est la balle que le joueur lancera pour essayer de frapper le trou

Rayon = 10
Couleur: Blanc (ou votre choix!)
Vitesse: 0
Intervalle: 1 (ms)

Z = 2 (lorsque les sprites se chevauchent, celui avec le z supérieur apparaîtra en haut)

Balle

Dessin et animation

Trou

Ce sera la cible du GolfBall

Rayon = 15
La couleur noire
Vitesse: 0

L’horloge

Capteurs

Clock1

L’horloge se déclenchera en continu pour contrôler le mouvement de la balle

La minuterie se déclenche toujours

Minuterie activée

Minuterie Intervalle: 100

Ouvrez l’éditeur de blocs

Programmer le comportement du ballon:

Tout d’abord, utilisez le GolfBall.Flung gestionnaire d’événements pour déplacer la balle de golf lorsqu’elle est lancée. Remarquez comment ce gestionnaire d’événements prend en 6 arguments différents:

  • X, la position x sur la grille Canvas du doigt de l’utilisateur
  • y, la position y sur la grille Canvas du doigt de l’utilisateur
  • la vitesse, la vitesse du geste lancinant de l’utilisateur
  • titre, la direction (en degrés) du geste de lancer de l’utilisateur
  • xvel, la vitesse dans le sens x du lancer de l’utilisateur
  • yvel, la vitesse dans le sens y du lancer de l’utilisateur

Essentiellement, vous souhaitez définir la vitesse et le cap du GolfBall pour correspondre à la vitesse et au cap du geste de lancer du joueur. Vous voudrez peut-être augmenter la vitesse un peu parce que la vitesse du lancer est un peu plus lente que la façon dont une balle de golf se déplacerait. Vous pouvez jouer avec ce « facteur d’échelle » pour rendre le ballon plus ou moins réactif à une aventure.

Programmer le comportement de l’horloge:

Utilisez l’événement de la minuterie pour ralentir la balle afin qu’elle ne rebondisse pas indéfiniment.

Chaque fois que l’horloge tire, cela réduira légèrement la vitesse du ballon. Notez que si la balle ne bouge pas, ces blocs ne feront rien. Si vous n’en avez pas, la balle rebondira pour toujours.

Vous devrez utiliser la fonction if mutator pour modifier si bloquer dans un sinon bloquer. Pour un résumé des mutateurs, consultez la page Mutateurs

Programmer une nouvelle procédure appelée SetupNewHole:

Cette procédure sera appelée lorsqu’un trou est marqué et que la balle doit être replacée au point de départ. Notez que le Hole.MoveTo bloc définit le trou dans un nouvel emplacement aléatoire pour la prochaine partie.

Programmer le comportement du trou: Lorsque la balle entre en collision avec le trou, la balle disparaît et se réinitialise au bas de l’écran.

Remarque: lorsque vous faites glisser le GolfBall.CollidedWith gestionnaire d’événements, le paramètre nommé est appelé « autre ». Notez que le si donc des tests de bloc pour voir si l’objet impliqué dans la collision avec la balle de golf (autre) est le sprite boule noire représentant le trou. Vous ne pouvez pas simplement mettre un bloc de texte avec le mot « trou », vous devez utiliser le Trou qui se trouve dans le tiroir du sprite d’image Hole. N’utilisez pas de bloc de texte ici.

Test this Behavior. Connect your device to AppInventor, or start the emulator to load your app. When you fling the ball it should move in the direction of your fling, with a speed similar to the strength of your fling. The ball should slow down as it moves, eventually stopping. When the ball hits the hole, the ball should reset at the bottom of the screen and the hole should move to a new random location.

Votre balle se coince-t-elle si elle touche le bord?

Ceci est facile à résoudre avec le EdgeReached un événement. Notez que vous pouvez trouver le bloc de valeur « bord » en utilisant un avoir bloquer et en sélectionnant « bord » dans la liste déroulante.

Vérifiez que votre code est correct: lancez la balle plusieurs fois et voyez que cette balle rebondit maintenant sur les bords du parcours.

Partie II: Garder le score

Les jeux sont plus amusants si vous avez un moyen de voir comment vous allez. Ajoutons un compteur de traits. En mini-golf, votre score augmente à mesure que vous effectuez plus de coups. L’objectif est d’avoir le score le plus bas possible. Montrons au joueur combien de coups il ou elle a effectués sur ce trou. Indiquons également le nombre de coups effectués pendant toute la partie.

Revenez dans Designer et configurez les composants suivants:

Type de composant

Groupe de palettes

Ce que vous allez lui donner

Objectif

Propriétés

Disposition horizontale

Disposition

Arrangement horizontal1

Contient LabelScore et LabelStroke

Placer en haut de l’écran

Étiquette

Interface utilisateur

LabelScore

Affiche le nombre total de coups pour l’ensemble du jeu

Étiquette

Interface utilisateur

LabelStroke

Affiche le nombre de coups pour le trou sur lequel le joueur se trouve actuellement

Dans l’éditeur de blocs, vous pouvez programmer des mises à jour des étiquettes de partition et de trait. Tout d’abord, définissez deux nouvelles variables globales appelées StrokeCount et Butet définissez leurs valeurs initiales sur 0.

Ajoutez ensuite les blocs suivants au GolfBall.Flung événement (un rectangle rouge indique de nouveaux blocs):

Ajoutez ensuite les blocs suivants à l’événement qui gère la balle frappant le trou:

Test the behavior. With these new changes, you should have a "Total Strokes" count and "This Hole" count at the top of the screen. When you fling the ball, the "This Hole" count  and "Total Strokes" count should both increase by one, and when you make the ball go into the hole the "This Hole" count should reset to 0.

Partie III: Positionnement de la balle sur le tee à l’aide des événements TouchUp et TouchDown

Ok, maintenant vous avez un jeu qui fonctionne! Maintenant, rendons cela un peu plus intéressant et amusant. Nous allons d’abord ajouter un tee et laisser le joueur positionner la balle de golf sur le tee avant de lancer la balle.

Revenez dans Designer et ajoutez trois nouveaux composants d’image-objet d’image:

Type de composant

Groupe de palettes

Ce que vous allez lui donner

Objectif

Propriétés

ImageSprite

Dessin et animation

Tee

Une zone rectangulaire dans laquelle le joueur peut positionner sa balle avant le départ.

Téléchargez l’image Tee (clic droit sur ce lien, ou voir ci-dessous).

ImageSprite

Dessin et animation

LeftSprite

Il s’agit d’une flèche pointant vers la gauche que le joueur utilisera pour déplacer la balle vers la gauche sur le tee

Téléchargez le graphique de la flèche gauche (clic droit sur ce lien

ImageSprite

Dessin et animation

RightSprite

Il s’agit d’une flèche pointant vers la droite que le joueur utilisera pour déplacer la balle vers la gauche sur le tee

Téléchargez le graphique flèche droite (clic droit sur ce lien

Programmez la taille de la toile et le placement des images-objets boule et image sur la toile:

Tout d’abord, programmez la configuration de ces composants à l’écran. Il est préférable de s’adapter à toutes les tailles d’écran en plaçant les sprites sur l’écran par rapport à la taille de l’écran. Les blocs ci-dessous montrent comment configurer l’écran dynamiquement pour que tout rentre dans le bon sens. Nous commençons par créer la taille de la toile en fonction de la taille de l’écran, puis nous plaçons chaque image-objet en fonction de la largeur et de la hauteur de la toile. Nous allons faire une procédure pour le faire pour nous. Essayez de comprendre tous ces blocs avant de continuer.

Positionnez la balle de golf sur le tee en utilisant TouchUp et TouchDown sur les sprites Arrow:

Pour gérer cela, commencez par configurer deux variables globales qui sont basculées chaque fois qu’une flèche est enfoncée.

Programmer le comportement des flèches droite et gauche

Les flèches gauche et droite sont des images-objets, elles sont donc équipées de la capacité de savoir quand le joueur tient son doigt vers le bas. Les blocs suivants basculent les variables globales selon que l’utilisateur appuie sur l’une ou l’autre de ces flèches.

Procédure MoveBallOnTee:

Faire une nouvelle procédure moveBallOnTee ce qui fait que la balle de golf se déplace vers la gauche ou la droite sur le tee selon les variables globales. Bien que les calculs ici semblent compliqués, c’est assez simple. Si la balle est supposée se déplacer vers la gauche, vérifiez d’abord que le déplacement de la balle de 2 pixels vers la gauche ne dépassera pas la coordonnée la plus à gauche du tee. Si vous déplacez la balle de golf vers la droite, vous devez d’abord vérifier que déplacer la balle vers la droite de 2 pixels ne la fera pas dépasser les coordonnées les plus à droite du tee.

Remarque: si les blocs semblent différents sur cette image que sur votre propre écran, c’est parce qu’ils étaient alignés différemment. Si vous cliquez avec le bouton droit sur les blocs, une liste d’options apparaît et l’une d’entre elles est les entrées externes. Lorsque vous sélectionnez cette option, cela modifie la configuration des blocs. Cela ne change pas le fonctionnement des blocs. Si vous voulez changer cela, cliquez de nouveau avec le bouton droit et sélectionnez les entrées internes.

Procédure MoveBallOnCourse

Notez que les blocs que nous avions à l’intérieur du Clock1.Timer sont désormais déplacés vers une nouvelle procédure appelée moveBallOnCourse:

Sur chaque nouveau parcours, les joueurs peuvent positionner la balle sur le tee avant d’essayer de lancer la balle vers le trou. Pour programmer cela, vous devez d’abord vérifier que c’est un nouveau parcours et que le ballon n’a pas encore été lancé. Si StrokeCount = 0 alors nous savons que ce parcours est flambant neuf et que le joueur n’a pas encore tenté de mettre la balle dans le trou.

Comme le montrent les blocs ci-dessus, après avoir vérifié que le StrokeCount est égal à 0, vous souhaitez ensuite déplacer la balle de golf vers la gauche ou la droite selon la flèche sur laquelle vous appuyez.

Test the behavior. Make sure your app is doing what you expect: play the game on your device or emulator. Before you tee off, are you able to move the ball left and right on the tee by using the left and right arrows? After you tee off, you should no longer be able to use the left and right arrows (pressing them will do nothing). After the ball goes into the hole and the screen resets, you should then be able to move the ball left and right on the tee before teeing off again.

Gardez une trace du nombre de trous joués et autorisez une réinitialisation du jeu

Le jeu fonctionne plutôt bien maintenant, mais qu’en est-il de donner au joueur un moyen de réinitialiser le jeu? De plus, il serait bon de donner au joueur quelques instructions pour qu’il sache comment jouer au jeu. Pendant que nous y sommes, donnons également une indication du nombre de trous terminés par le joueur. Ajoutez les composants suivants dans Designer:

Type de composant

Groupe de palettes

Ce que vous allez lui donner

Objectif

Propriétés

Disposition horizontale

Disposition

Disposition horizontale2

Contient le bouton NewGame et l’étiquette HoleNum

Bouton

Interface utilisateur

ButtonNewGame

Réinitialise le jeu au trou n ° 1 avec un score de 0.

Texte: « Nouveau jeu »

Étiquette

Interface utilisateur

LabelHoleNum

Affiche le numéro du trou actuel, incrémente de un à chaque fois qu’un trou est terminé.

Texte = « Trou # 1 »
Police: gras, 28, bleu

Étiquette

Interface utilisateur

LabelInstruct

Affiche les instructions

Text = « Utilisez les flèches pour positionner la balle sur le tee. Frappez la balle en la jetant avec votre doigt. »

Définissez une nouvelle variable globale pour garder une trace du numéro du trou:

Ajoutez les blocs suivants au setupNewHole procédure: définir global HoleCount Et mettre LabelHoleNum.Text

Programmez le comportement du bouton « Nouveau jeu », ce qui est assez simple. Lorsque le bouton est enfoncé, définissez une nouvelle trajectoire et remettez à zéro le compteur de course de trou et le compteur de course totale. Redéfinissez également le numéro du trou sur 1, en affichant « Trou n ° 1 » dans LabelHoleNum. Les blocs ressemblent à ceci:

Test the behavior.

Go back to your device or emulator and play the game some more. Now you should see the Hole # displayed in the lower right. Hitting "New Game" button should reset the game, returning both scores to 0, resetting the screen, and setting the Hole number to #1.

Partie IV: introduire un obstacle

La plupart des mini-golfs ont des obstacles sur eux. Ajoutons un simple obstacle rectangulaire qui se positionnera aléatoirement sur le parcours quelque part entre le tee et le trou. Chaque fois qu’un nouveau parcours est présenté, l’obstacle se déplacera, de la même manière que le trou se déplace chaque fois qu’un nouveau parcours est configuré.

Ajoutez le composant suivant dans Designer:

Type de composant

Groupe de palettes

Ce que vous allez lui donner

Objectif

Propriétés

ImageSprite

Dessin et animation

ObstacleSprite1

Ce sprite sera quelque part entre la balle de golf et le trou et rendra plus difficile l’entrée de la balle dans le trou

Téléchargez le graphique d’obstacle (rectangle) (clic droit sur ce lien, ou voir ci-dessous).

Programmez le comportement de l’obstacle dans l’éditeur de blocs. Tout d’abord, définissez le comportement lorsque le ballon frappe l’obstacle. * Remarque: Utiliser Heading = 0 – le titre fonctionne parce que nous avons affaire à un rebond sur des surfaces horizontales, cela ne fonctionnera pas pour un rebond sur des surfaces verticales ou inclinées. Pour nos besoins, cela fonctionne très bien. Voir le défi n ° 2 ci-dessous pour plus d’informations.

Chaque fois que le parcours est réinitialisé, la position de l’obstacle sera positionnée au hasard. Ajoutez ces blocs au setupNewHole procédure:

Test the behavior. Play the game again. Notice that the ball bounces off when it hits the obstacle. When the ball goes into the hole, or when the New Game button is pressed, the obstacle appears in a new location somewhere between the tee and the hole.

C’est ça! Partagez votre jeu avec vos amis en créant un APK ou en téléchargeant la source et en partageant le fichier zip avec d’autres inventeurs d’applications!

Partie V: Défis

Voici quelques défis supplémentaires pour améliorer votre jeu.

Défi 1: Programmez la collision de balle en trou de sorte que la balle n’entre dans le trou que si la vitesse de la balle de golf n’est pas trop rapide. Dans le vrai mini-golf, la balle rebondit juste au-dessus du trou si vous la frappez trop fort.

Défi 2: Il y a un léger bug lorsque la balle frappe les côtés verticaux de l’obstacle. Découvrez comment programmer le ballon en cas de collision avec des obstacles afin qu’il rebondisse comme vous vous y attendriez lorsque le ballon frappe les côtés verticaux.

Défi 3: Limitez le nombre de trous par partie. Gardez une trace du nombre de trous et terminez le jeu après un nombre défini. (Un mini-golf typique a 18 trous.)

Voici un résumé de tous les composants:

Scannez le code-barres suivant sur votre téléphone pour installer et exécuter l’exemple d’application.

Si vous souhaitez travailler avec cet exemple dans App Inventor, téléchargez le code source sur votre ordinateur, puis ouvrez App Inventor, cliquez sur Projets, choisissez Importer un projet (.aia) depuis mon ordinateur …et sélectionnez le code source que vous venez de télécharger.

Done with Mini Golf? Return to the other tutorials.