Tutoriel – App Inventor : balle rebondissante

Le design

Etape 1 : Paramétrer l’écran (Screen)

Tout d’abord, occupons-nous des paramètres de l’écran en allant dans la partie « Properties » tout àdroite.
Il faut changer le titre de l’écran pour qu’il affiche « balle rebondissante », voici comment faire :

Etape 2 : Ajouter un texte (Label)

Allez dans « Palette/Drawing and Sensors » et importez un tableau (Canvas) et modifiez sa taille pour qu’il remplisse l’écran entier:

En modifiant le taille de la toile sur « Fill parent », celle-ci va occupée tout l’espace disponible de l’élément qui la contient (ici l’écran).

Etape 4 : Ajouter une balle (Ball)

Depuis la partie gauche Palette, ajouter une balle (ball) vous la trouverez dans la partie « Drawing and Animations ». Changez son rayon pour le mettre à 15 :

Etape 5 : Ajouter un bouton cliquable (Button)

Depuis la partie gauche Palette/User Interface, ajoutez un bouton cliquable (Button) à votre
application. Lorsque l’utilisateur appuiera dessus, le score se réinitialisera. Changez son nom en “Reset” dans Properties.

Etape 6 : Ajouter une image (ImageSprite)

Importez une image de petit monstre (venant de pixabay.fr par exemple) via le menu sur la droite:

Ensuite dans “Palette/Drawing and Sensors”, importez une image (ImageSprite) changez “Picture” par votre image. Changez sa taille pour par exemple 50 par 50 pixels:

Enfin allez dans Palette/Sensors et importez une horloge (Clock).

Votre application devrait ressembler à cela :

Les composantes de votre application

La programmation

Nous allons maintenant programmer l’application. Rendez-vous dans la partie Blocks. Si vous ne trouvez pas un des blocs utiles, n’hésitez pas à consulter l’annexe.

Etape 1 : Gérer le comportement de la balle

Nous allons d’abord nous occuper d’avoir une balle qui bouge quand on tire dessus et qui rebondit contre les murs, créez les blocs suivant :

Quand la balle touche une extrêmité (Edge), on la fait rebondir (Bounce) dessus. Quand on glisse le doigt sur la balle, on récupère sa position (x et y), sa vitesse (speed), sa direction (Heading) et la vitesse horizontale et verticale du doigt (xvel et yvel). On la fait se diriger dans le sens du mouvement (Heading) puis on modifie sa vitesse (Speed), nous la multiplions par 4 pour rendre les tirs plus impressionnantes.

Etape 2 : Interaction avec le petit monstre

Quand le petit monstre est touché par la balle, il disparaît et on augmente le score. Toutes les secondes, le petit monstre change d’endroit:

On initialise le score à 0. Quand l’image rentre en collision avec la balle (CollidedWith), on la cache (Visible = false), on augmente le score de 1 et on change l’étiquette qui montre le score. Chaque seconde (When Clock1.Timer do), on change la position de l’image via les deux premières lignes vers une position aléatoire (random integer renvoie un entier aléatoire entre 1 et le deuxième chiffre, ici la taille de l’écran ) puis on la rend visible.

Etape 3 : Remettre à zéro le score

On utilise le bouton “Reset” pour remettre le score à 0:

Quand on clique sur le Bouton 1 (Click), on remet le score à 0 et on met à jour l’étiquette de score.
Voilà votre application est terminée !

Pour développer

Voici une liste (non exhaustive bien sûr) des améliorations possibles :

• Améliorer l’interface graphique.
• Ajouter d’autres ennemis.
• Modifier la vitesse de la balle, de l’ennemi.
• Rajouter un parcours.

Annexe