Bienvenue à votre AOZ Studio Leçon 6 – de Neil Ives (Cette leçon étend la Leçon 3)
Remarque de RayShell : Seul tout le texte dans les cases de code noires dans ces leçons ici est du code AOZ, cliquez dans le coin supérieur droit sur copier pour copier le code dans le presse-papiers. Allez dans l’éditeur AOZ Studio™ et collez le code dans votre programme. Le //texte vert sont des commentaires que vous devez taper ou coller ligne par ligne dans la fenêtre de l’éditeur. Le texte vert après le // est seulement pour votre information et pour comprendre le fonctionnement et la logique de votre code AOZ écrit. C’est toujours une bonne idée et très important de commenter votre code pendant que vous le créez pour votre propre vue d’ensemble du projet, afin de pouvoir lire votre propre code très facilement même des années plus tard.
La chose la plus importante pour vous est de vous sentir libre de jouer et d’essayer les commandes de base apprises dans vos propres projets de test. Changez les valeurs, mettez vos propres mots et idées dans votre programme. Si vous faites une erreur et que vous appuyez sur le bouton Run, la commande Run s’arrêtera et indiquera l’endroit où se trouve l’erreur avec un numéro de ligne en bas dans la fenêtre de message. L’autre chose qui peut arriver est que la commande Run lance votre application mais que vous ne voyez rien ou que vous ne voyez pas ce que vous vous attendiez à voir. Vous devez alors modifier votre code pour qu’il soit dans la syntaxe et l’ordre corrects pour travailler avec AOZ et produire le résultat souhaité.
Dans l’éditeur, clique sur l’icône papier en haut à gauche pour créer un nouveau projet. Sélectionnez Autres dans le menu de gauche et choisissez Projet personnalisable, supprime l’entrée « My Application » et donne au nouveau projet le nom de Leçon 6.
Tu trouveras alors ton programme dans le dossier Documents/My AOZ Applications/Leçon 6. On y trouve également le sous-dossier ‘resources‘ dans lequel les images et les sons sont également enregistrés.
Après avoir créé ton nouveau projet, les dossiers pour les images et les sons ont également été créés dans ton dossier de projet. Pour pouvoir utiliser des images (Images) ou des enregistrements (Samples) dans ton programme, tu dois les mettre à disposition d’AOZ Studio dans le dossier de ton projet. Pour cette leçon, nous allons copier les images et les samples du répertoire des tutoriels AOZ Studio et les insérer dans ton projet Leçon 6. Ouvre via l’explorateur Windows le répertoire C:/AOZ_Studio/app/AOZ Store/ Tutorials/1. Start/Lessons to start with – ENGLISH/AOZ Studio Lesson 6 et là le sous-répertoire resources comme indiqué sur l’image et copie le dossier samples.
Ensuite, va dans ton nouveau dossier de projet dans le dossier Documents/My AOZ Application et insère le dossier de samples copié à cet endroit.
Les images sont enregistrées dans le dossier images. Ouvre via l’explorateur Windows le répertoire C:/AOZ Studio/app/AOZ Store/ Tutorials/1. Start/Lessons to start with – ENGLISH/AOZ Studio Lesson 6 et là le sous-répertoire resources comme indiqué sur l’image et ouvre le dossier images. Sélectionnez-y toutes les images et copiez-les.
Ensuite, va dans ton nouveau projet sous Documents/My AOZ Applications/Leçon 6 /resources et ouvre le sous-dossier 1.images. Colle maintenant à cet endroit toutes les images copiées. Prêt !
Tous les préparatifs sont maintenant terminés, tu peux maintenant commencer à programmer ton premier jeu. Amuse-toi bien 🙂
Nous sommes donc prêts, commençons !
/////////////////////////////////////////////////////////////
// Cette leçon s’appuie sur ce qui a été appris dans les leçons précédentes //
/////////////////////////////////////////////////////////////
Ici, nous allons expliquer et utiliser ce qui suit :
Regroupement de procédures
Ajouter des segments de chaîne, (joindre)
Sprites
Graphique Texte
Boucles While/Wend
Inkey$
Variables booléennes
Répétitions pour If/Else/Endif
Enregistrements sonores (samples)
////////////////////////////
// Paramètres du programme//
////////////////////////////
#splashScreen:False //Réglez-le sur "True" pour voir l'effet.
#fullScreen:true
#googleFont:"acme" //Définir la police graphique, voir note plus loin..
Curs Off //Écran Le curseur n'est pas nécessaire
////////////////////////////////
// Réglage des String segments //
////////////////////////////////
ST9$="Que doit-il faire bouger ? "
ST10$="(H)omme "
ST11$="(R)enard "
ST12$="(P)oulet "
ST13$="(S)ac de maïs"
All$=ST9$+ST10$+ST11$+ST12$+ST13$ //Remarque sur la façon dont les chaînes sont assemblées (en pièce jointe).
Lorsque All$ est dépensé, ceci apparaît sur l’écran : « Que doit-il déplacer ? (H)omme (R)enard (P)oulet (S)ac de maïs ». Pendant le jeu, plusieurs chaînes individuelles sont additionnées pour indiquer au joueur les choix possibles. Remarque : n’oublie pas d’ajouter un espace à la fin de chaque segment de chaîne pour que la chaîne totale soit affichée correctement.
////////////
// Global //
////////////
Comme nous l’avons vu précédemment, la commande « Global » met les variables spécifiées avec à la disposition de tout le programme :
Global All$,ST9$,ST10$,ST11$,ST12$,ST13$,STOPME
//////////////////////
// Boolean Variable //
//////////////////////
STOPME est utilisé comme une variable booléenne. Les valeurs booléennes sont comme un interrupteur, elles ne peuvent être que dans l’un des deux états, par exemple, ‘True/False’, ou ‘0/1’, ou ‘ON/OFF’.
Nous avons utilisé la méthode booléenne pour arrêter le programme.
Voir la remarque après STOPME dans la boucle de programme principale.
////////////////////////
// Fontes graphiques de texte //
////////////////////////
Nous présentons ici les polices de texte graphiques :
Dans les leçons précédentes, nous avons utilisé les polices de texte standard d’AOZ- Studio pour afficher du texte.
Nous les utilisons à nouveau ici pour afficher des textes en haut de l’écran.
Nous allons maintenant utiliser la police Google « Acme », très visuelle, pour l’écran d’accueil et le texte de saisie de l’utilisateur.
Les polices graphiques peuvent être placées à volonté sur l’écran par des coordinateurs au lieu de blocs de texte, par exemple, Texte 40,170.
La couleur d’une police graphique est définie par ‘Ink’ ; par exemple, Ink 1.
Set Font indique au programme quelle police est utilisée et dans quelle taille, par exemple, Set Font « acme »,55
Les chaînes de caractères peuvent être utilisées à la place des guillemets réels, par exemple, Texte 40,170,ST9$ fonctionne.
Comme le message de titre ne s’affiche qu’au démarrage du programme, nous avons placé le texte entre guillemets, par exemple, Texte 40,170, « Un homme doit traverser la rivière et
CLS 14 //Efface l'écran de couleur 11, (vert)
Définir la couleur, le nom et la taille de la fonte
Ink 1,14: Set Font "acme",55 // Ink=couleur du texte, couleur de fond : choisissez une police et une taille
Remarquez comment le texte est affiché avec des coordonnées graphiques.
Text 300,170,"Un homme doit traverser la rivière et prendre trois choses avec lui"
Text 480,300,"Un renard, une poule et un sac de maïs"
Text 450,400,"Il ne peut emporter qu'une chose à la fois"
Remarquez le changement de couleur et de taille de la police.
Ink 1:Set Font "acme",40//petit
Text 800,550,"Mettre le ton"
Ink 0 //Change la couleur de la police
Text 650,630,"Appuie sur une touche pour continuer"
Change de taille
Ink 0:Set Font "acme",20 //petit
Text 750,690,"AOZ Studio - Lesson 6 - Neil Ives - Feb 2020"
Wait Key //Nécessaire !
////////////////////////////
// Réglage de l’écran de jeu //
////////////////////////////
CLS 14//Effacer l'écran avec le vert
Ink 26:Bar 500,0 To 800,1080 //Dessine un flux avec la couleur bleue et la commande BAR x1,y1 to x2,y2
Ink 10: Bar 0,0 to 1920,90 //Créer un message pleine largeur en haut de l'écran
Locate ,1:Paper 10:Pen 1:Centre All$ //Ici, on utilise des polices de texte simples, voir ci-dessus comment All$ a été créé à partir de nombreuses petites chaînes.
Voir ci-dessus comment All$ était composé de chaînes courtes
/////////////
// Sprites //
/////////////
Les sprites sont des objets graphiques qui peuvent être déplacés sur l’écran et changer d’image ; par exemple, dans ce jeu, les images du renard, de la poule et du bateau tournent lorsqu’ils se trouvent de l’autre côté de la rivière.
Fais également attention aux autres changements d’image
Placez les sprites dans les positions de départ en utilisant les coordonnées graphiques.
Le premier sprite est une image d’un petit bateau.
Sprite 1,330,560,6
Les chiffres après le mot Sprite signifient :
Sprite (numéro),(position horizontale),(position verticale),(numéro de l’image).
Dans ce jeu, les images sont au format .png, numérotées de 1 à 16.
Maintenant le reste des sprites…
Sprite 2,0,365,10 //Homme
Sprite 3,400,490,5 //Sac de maïs
Sprite 4,170,430,4 //Renard
Sprite 5,290,470,2 //Poulet
////////////////////
// La logique du jeu //
////////////////////
Dans les versions précédentes de ce jeu, nous utilisions les positions horizontales des chaînes affichées pour décider s’il y avait un faux mouvement ou si le joueur avait perdu.
Ce programme utilise les positions horizontales des sprites pour obtenir la même chose.
////////////////
// While Wend //
////////////////
Ce programme a une boucle While/Wend dans la boucle Do/Loop principale.
While Sélection$= » »
Sélection$=Inkey$
Retournement
La boucle ci-dessus signifie : While Sélection$= » » (= » » signifie une chaîne vide), donc tant qu’il n’y a pas d’entrée, je retourne dans la boucle à While End, (raccourci à Wend)
////////////
// Inkey$ //
////////////
Inkey$ lit les entrées du clavier.
Lorsque Inkey$ reçoit une entrée du clavier, cette entrée est enregistrée dans la variable chaîne Choice$, Choice$ a maintenant une valeur et termine ainsi la boucle While/Wend.
Contrairement à ‘Input’, la combinaison While/Wend et Inkey$ ne nécessite pas d’appuyer sur la touche Entrée après la sélection, ce qui permet au joueur de réagir plus rapidement.
////////////////////////
// Programme principal Rectification //
////////////////////////
Choice$=""
Do
If STOPME=TRUE then Goto MARK //C'est nécessaire pour pouvoir rejouer
While Choice$=""//Ceci est une autre forme de boucle, elle attend une entrée.
Choice$=Inkey$
Wend //envoie la valeur de l'entrée utilisateur à la procédure
PLACER_DES_SPRITES[Choice$]
Choice$=""//Vide la variable Choice$ afin qu'elle puisse être utilisée pour la prochaine boucle While/Wend.
MARK:
loop
/////////////////////
// Regrouper les procédures//
/////////////////////
La procédure utilise une structure ‘If/Else/End If’ pour vérifier d’abord si le sprite 2, (le sprite avec l’image de l’homme) se trouve sur la gauche, (position 0). Elle déplace ensuite l’un des objets sélectionnés ‘M’,’F’,’H’ ou ‘S’ sur la rivière.
Si l’homme n’est pas sur la gauche, il doit être sur la droite et la commande ‘else’ va dans l’autre position.
(Le sprite avec l’image du bateau est toujours déplacé avec l’homme).
Les positions de texte sont enregistrées dans chaque section en TX pour donner un feedback au joueur, « P, « R », etc., devient « poulet », « renard », etc.
Avant l’édition du texte de confirmation, l’écran est effacé dans une zone définie avec la couleur de fond.
Enfin, la procédure VERIFIER_ES est appelée.
////////////////////////
// Procédure VERIFIER_ES //
////////////////////////
Cette procédure fait deux choses : elle change la sélection des textes dans la partie supérieure de l’écran, (voir aussi les remarques précédentes sur l’édition et l’addition de chaînes de texte).
Cela signifie que le joueur ne voit que ce qu’il peut sélectionner. Si le renard n’est pas sur la même page que l’homme, il ne peut pas le sélectionner.
Ensuite, VERIFIER_ES vérifie si la fin du jeu est atteinte.
Cela peut signifier que le joueur a fait traverser la rivière à tous les objets et qu’il a gagné, ou que le renard a mangé le poulet, etc.
A la fin, une valeur numérique est transmise à la procédure FIN_COMMUNICATIONS .
////////////////////////////
// Procedure FIN_COMMUNICATIONS //
////////////////////////////
Cette procédure sélectionne et formate l’un des six messages possibles qui seront affichés à la fin du jeu.
Cette procédure ajoute, par des sons et des changements d’image
//////////////
// Sam Play //
//////////////
Sam Play est utilisé dans la procédure FIN_COMMUNICATIONS. Sam Play joue simplement un échantillon de son.
Les samples utilisés dans ce jeu sont des fichiers .wav, appelés ‘1.wav’, ‘2.wav’ et ‘3.wav’.
Le dossier son s’appelle Samples et se trouve dans le dossier My Applcations, dans le sous-dossier ‘resources’ de chaque projet.
Regarde les messages de fin pour découvrir comment les samples sonores et les temps d’attente peuvent être utilisés pour créer des effets passionnants.
Procedure PLACER_DES_SPRITES[C$]
Place le sprite à l’endroit défini en partant de l’entrée du joueur.
Seules les lettres (H, R, P, S) sont prises en compte.
C$ = Upper$(C$) //Convertir la saisie en majuscules, homme en position gauche
If X Sprite (2)=0 //Sprite 2 est l'homme
If C$="H"
Sprite 1,770,560,7 //Bateau, (va toujours avec l'homme)
Sprite 2,1110,365,10 //Homme
End if
If C$="R"
Sprite 1,770,560,7 //Bateau
Sprite 2,1110,365,10 //Homme
Sprite 4,990,430,1 //Renard
End If
If C$="P"
Sprite 1,770,560,7 //Bateau
Sprite 2,1110,365,10 //Homme
Sprite 5,900,470,3 //Poulet
End If
If C$="S"
Sprite 1,770,560,7 //Bateau
Sprite 2,1110,365,10 //Homme
Sprite 3,800,490,5 //Sac de maïs
End If
TX=900 //Position du texte du message, (voir plus loin)
Else //L'homme n'est pas de gauche, alors on utilise Else
If C$="H"
Sprite 1,330,560,6 //Bateau
Sprite 2,0,365,10 //Homme
End if
If C$="R"
Sprite 1,330,560,6 //Bateau
Sprite 2,0,365,10 //Homme
Sprite 4,170,430,4 //Renard
End If
If C$="P"
Sprite 1,330,560,6 //Bateau
Sprite 2,0,365,10 //Homme
Sprite 5,290,470,2 //Poulet
End If
If C$="S"
Sprite 1,330,560,6 //Bateau
Sprite 2,0,365,10 //Homme
Sprite 3,400,490,5 //Sac de maïs
End If
TX=220 //Position du texte du message
End If //Affiche le message à la position définie dans TX
Ink 10: Bar 0,0 to 1920,90 //Supprimer le texte dans la barre de message
Ink 1:Set Font "acme",40
If C$="P" then Text TX,150,"Poulet"
If C$="R" then Text TX,150,"Renard"
If C$="S" then Text TX,150,"Sac de maïs"
If C$="H" then Text TX,150,"Homme"
VERIFIEZ_LE
//Aller à la procédure qui vérifie les mauvaises décisions
End proc
Procedure VERIFIEZ_LE
//————- Ajuster la sélection supérieure————-
Ink 10: Bar 0,0 to 1920,90// Supprimer le message précédent
Locate 0,1:Paper 10:Pen 1//Régler la couleur d'impression du texte
Utilise les positions horizontales des sprites, en partant de X Sprite() pour ajouter les springs nécessaires, ST10$+ST11$+ST12$+ST13$ etc.
Ce sont tous des choix qui ne déclenchent pas un message ‘Fin de partie’.
//Tous sur la gauche
If X Sprite(2) = 0 and X Sprite(3) = 400 and X Sprite(4) = 170 and X Sprite(5) = 290 Then Centre ST10$+ST11$+ST12$+ST13$
//Homme, renard, maïs sur la gauche
If X Sprite(2) = 0 and X Sprite(3) = 400 and X Sprite(4) = 170 and X Sprite(5) = 900 then Centre ST10$+ST11$+ST13$
//Homme, renard, poule sur la gauche
If X Sprite(2) = 0 and X Sprite(3) = 800 and X Sprite(4) = 170 and X Sprite(5) = 290 then Centre ST10$+ST11$+ST12$
//Homme, poulet, maïs sur la gauche
If X Sprite(2) = 0 and X Sprite(3) = 400 and X Sprite(4) = 990 and X Sprite(5) = 290 then Centre ST10$+ST12$+ST13$
//Homme et poule à gauche
If X Sprite(2) = 0 and X Sprite(3) = 800 and X Sprite(4) = 990 and X Sprite(5) = 290 Then Centre ST10$+ST12$
//Homme, renard, maïs sur la droite
If X Sprite(2) = 1110 and X Sprite(3) = 800 and X Sprite(4) = 990 and X Sprite(5) = 290 then Centre ST10$+ST11$+ST13$
//Homme, renard, poule à droite
If X Sprite(2) = 1110 and X Sprite(3) = 400 and X Sprite(4) = 990 and X Sprite(5) = 900 then Centre ST10$+ST11$+ST12$
//Homme, poulet, maïs à droite
If X Sprite(2) = 1110 and X Sprite(3) = 800 and X Sprite(4) = 170 and X Sprite(5) = 990 Then Centre ST10$+ST12$+ST13$
//Homme et poule à droite
If X Sprite(2) = 1110 and X Sprite(3) = 400 and X Sprite(4) = 170 and X Sprite(5) = 900 Then Centre ST10$+ST12$
//Le renard, la poule et le maïs sont seuls à gauche
If X Sprite(4) = 170 and X Sprite(5) = 290 and X Sprite(3) = 400 and x Sprite(2) = 1110 Then FIN_COMMUNICATIONS[1]
//Le renard et la poule sont seuls sur la gauche
If X Sprite(4) = 170 and X Sprite(5) = 290 and X Sprite(2) = 1110 then FIN_COMMUNICATIONS[2]
//Le poulet et le maïs sont seuls à gauche
If X Sprite(5) = 290 and X Sprite(3) = 400 and X Sprite(2) = 1110 Then FIN_COMMUNICATIONS[3]
//Le renard et la poule sont seuls sur la droite
If X Sprite(4) = 990 and X Sprite(5) = 900 and X Sprite(2) = 0 then FIN_COMMUNICATIONS[4]
//Le poulet et le maïs sont seuls à droite
If X Sprite(5)=900 and X Sprite(3) = 800 and X Sprite(2) = 0 Then: FIN_COMMUNICATIONS[5]
//Le renard, la poule, le maïs et l'homme sont tous à droite
If X Sprite(4) = 990 and X Sprite(5) = 900 and X Sprite(3) = 800 and X Sprite(2)= 1110 Then FIN_COMMUNICATIONS[6]
End Proc
Procedure FIN_COMMUNICATIONS[COMMUNICATION]//Afficher le message de 'fin de partie' qui en résulte
If COMMUNICATION = 1
Ink 10: Bar 0,0 to 1920,90
Sam Play 2 //Jouer l'échantillon sonore de poulet
Locate ,1:Paper 10:Pen 1:Centre "La poule a mangé le maïs…"
Wait 0.5 //Pause d'une demi-seconde pour le suspense
//Sprite Off 3 //Enlever le maïs [Sprite off ne fonctionne pas dans la version bêta de AOZ].
Sprite 3,-100,490,5 //Enlève le maïs de l'écran
Sprite 5,,,13 //L'image se transforme en un gros poulet
Wait 2 //Pause pour un effet dramatique !
//Sprite Off 5//Supprimer le poulet [Sprite off ne fonctionne pas dans la version bêta de AOZ].
Sprite 5,-100,470,2 //Retire le poulet de l'écran
Sprite 4,,,16 //L'image se transforme en un gros renard
Wait 0.5 //à nouveau une pause
Sam Play 3 //Jouer un échantillon de son de rot
Bar 0,0 to 1920,90:Locate ,1:Centre "…puis le renard a mangé le poulet!":Wait 3
End if
If COMMUNICATION= 2 Then Sam Play 3: Sprite 5,-100,470,2:Sprite 4,,,16:Ink 10: Bar 0,0 to 1920,90:Locate ,1:Paper 10:Pen 1:Centre "Le renard a mangé le poulet!":Wait 2
If COMMUNICATION= 3 Then Sam Play 2: Sprite 3,-100,490,5:Sprite 5,,,13:Ink 10: Bar 0,0 to 1300,90:Locate ,1:Paper 10:Pen 1:Centre "Le poulet a mangé le maïs!":Sam Play 2: Wait 2
If COMMUNICATION= 4 Then Sam Play 3: Sprite 5,-100,470,2:Sprite 4,,,15:Ink 10: Bar 0,0 to 1920,90:Locate ,1:Paper 10:Pen 1:Centre "Le renard a mangé le poulet!":Wait 2
If COMMUNICATION= 5 Then Sam Play 2: Sprite 3,-100,490,5:Sprite 5,,,14:Ink 10: Bar 0,0 to 1920,90:Locate ,1:Paper 10:Pen 1:Centre "Le poulet a mangé le maïs!":Sam Play 2: Wait 2
CLS 0
If COMMUNICATION= 6 then Sam Play 1:Ink 10: Bar 0,0 to 1920,90:Locate ,1:Paper 10:Pen 1:Centre "Félicitations, tu as réussi": Wait 1 //L'échantillon 1 est une foule en liesse
Wait 0.5
Locate ,22:Paper 0:Pen 1: Centre "Redémarre le programme pour rejouer"
Wait 1
STOPME=True //État logique (flag) pour maintenir le programme dans la boucle Do/loop.
End proc
**Clique sur le bouton « Run in Browser » ou F1 pour lancer le programme dans le navigateur ou sur « Run in AOZ Viewer » (F2) pour le lancer dans l’éditeur.
Félicitations ! Tu as vraiment beaucoup appris jusqu’ici, continue à t’entraîner avec les commandes et essaie de réaliser tes propres projets de programmes simples.
Un clic sur le ? tout en haut à droite de l’éditeur ouvre le manuel intégré d’AOZ Studio. Tu y trouveras des informations supplémentaires, ainsi qu’un manuel d’utilisation en anglais et en français et un aperçu des commandes d’AOZ Studio en anglais. Les commandes y sont décrites avec toutes les options possibles.
Merci d’avoir programmé avec RayShell.de et d’en parler à tes amis.
Mis à jour le 23.07.2023
Testé avec AOZ Studio™ version 1.0 mise à jour 44 le 23/07/2023