Réalisation d’un jeu de tir au canards. Page d’accueil Télécharger les fichiers sources. Importez les images parchemins et fond_shoot Insérer l’image.

Présentation au sujet: "Réalisation d’un jeu de tir au canards. Page d’accueil Télécharger les fichiers sources. Importez les images parchemins et fond_shoot Insérer l’image."— Transcription de la présentation:

1 Réalisation d’un jeu de tir au canards

2 Page d’accueil Télécharger les fichiers sources. Importez les images parchemins et fond_shoot Insérer l’image parchemin. Ctrl+F8 pour le transformer en symbole. Centrer l’image : fenetre/aligner ou ctrl+K 1

3 Texte dynamique en multiligne Nom de l’occurrence : oublienom Texte de saisie Nom de l’occurrence : pseudo Texte statique Inserer un bouton de la bibliothèque. Nommer l’occurrence : mon_bouton par ex. Ajouter les zones de texte. Ceci constitue la première image clé du projet. Penser à mettre un stop() dans le code pour cette image Page d’accueil

4 Décor de la scène principale Créer une deuxième image clé vide. Ajouter fond_shoot sur la scène et la placer en (0,0). Mettre en fonctionnement le bouton de la fonction d’accueil. on(release) { if (pseudo.text!=""){ var nomJoueur=pseudo.text; gotoAndStop(2); } else {Oublie_nom.text="N'oubliez pas d'entrer votre nom"; }

5 Création du clip canard Créer un clip « canard » ctrl+F8, et cocher exporter pour action script Créer une image clé en 1 et insérer la première image. Les deux autres s’insèrent toutes seules en 2 et 3 Placer les 3 images en (-110, -100) (point de rotation de la chute) Déplacer la dernière image clé en 10 et la deuxième en 5 Image clé en 9, et ajouter gotoAndPlay(1) On gèrera le passage à l’image 10 (mort du canard) plus tard

6 Création d’une classe Nanard  Ajouter des propriétés au movie Clip canard : taille, sens, transparence et les initialiser nanard.prototype=new MovieClip(); function nanard() { this.mort=false ; this.crash=false; this.vitesse=Math.random()*5+3; if (Math.random()<0.5){this.sens=-1; } else { this.sens=1;} this._xscale=this._yscale=(40+Math.random()*30); this._xscale=this._xscale*-this.sens; if (this.sens==1){ this._x=-10; } else { this._x=810;} this._y=100+Math.random()*150; } vitesse aléatoire comprise entre 3 et 8 Taille de l’occurrence entre 40 et 70% On accorde sa taille en x avec son sens puis avec son déplacement Position verticale aléatoire (entre 100 et 250) État des canards : vivant et en vol Sens de circulation dans un sens ou dans un autre de manière aléatoire Object.registerClass("canard",nanard); Liaison du MC canard avec la classe nanard

7 nanard.prototype.onEnterFrame=function(){ if(end){ this.removeMovieClip() } if(not this.crash){ this._x=this._x+this.vitesse*(this.sens); if((this._x 880) and (not this.mort)){ this.sens=-this.sens; this._xscale=-this._xscale; } if (this.mort){ this._y=this._y+1+(this._rotation*this.sens); if(this._rotation<45){ this._rotation+=this.sens; } if (this._y>450){ this.crash=true; } var end=false; Var total:Number=0; Déclaration de la variable booleenne jeu fini ou pas. supprimer le canard quand la partie est terminée Déplacement du canard dans le bon sens Fonction appelée à chaque nouvelle image soit 25 fois par sec Quand le canard sort de l’image vivant il change de sens de déplacement et se retourne On fait tourner et tomber le canard quand il est mort : Accélération de la chute et rotation du canard Gestion temporelle du canard

8 if (this.crash){ --this._alpha; if (this._alpha<0){ total--; this.removeMovieClip(); } on augmente la transparence puis on supprime le canard de la scène avec this.removeMovieClip

9 Ajout dynamique des canards Création d’une fonction qui ajoute un canard: var total:Number=0; var maxCanard:Number=15; Exporter le clip canard pour l’actionScript (clic-droit->Liaison) function ajoutCanard(){ if (total<=maxCanard){ _root.attachMovie("canard",nouveaucanard, profondeur); //instanciation dynamique d’une occurrence canard au niveau=profondeurtotal++; profondeur++;// nouvelle couche } Chaque objet sur la scène est associé à un niveau de profondeur (ici profondeur), chaque niveau de profondeur ne peut accueillir qu’un seul objet). Il permet de définir quel objet chevauche l’autre. Initialisons donc la variable profondeur : Var profondeur:Number=0;

10 Ajout dynamique des canards Ajout de canard au départ: for (i=0;i<maxCanard;i++){ ajoutCanard(); } La fonction SetInterval: SetInterval permet d’exécuter une fonction à intervalle de temps régulier, indépendamment de la cadence de l’animation. Nomdelinterval=SetInterval(nom de la fonction sans les parenthèses, intervalle de temps en milisecondes) nouveaucanard=setInterval(ajoutCanard,700); Toutes les 700 ms, la fonction ajoutCanard() sera appelée.

11 Interactions souris Création de la cible Importer l’image « cible.jpg » dans la bibliothèque Créer un nouveau symbole CibleSouris (Ctrl+F8) Ajouter l’image au centre du symbole (utilisation du panneaux Aligner) Insérer le symbole CibleSouris dans l’image 2 de votre scène nommer l’occurrence « souris » Déplacement de la souris On souhaite remplacer la souris par la cible, pour cela on ajoute le code suivant à l’occurrence du symbole CibleSouris onClipEvent(load){ //lorsque l’on charge le clip Mouse.hide(); // cacher la souris startDrag(this, true); // l’objet suit la souris }

12 Interactions souris Gestion du clic A chaque clic, le nombre de munitions diminue, lorsqu’il n’y a plus de munitions, la partie est terminée. Création d’une variable munitions initialisé à 50 (par exemple…) sur l’image 2 de la scène principale: var munitions:Number=50; A nouveau, sur l’occurrence de CibleSouris: onClipEvent(mouseUp){ //Quand on clique sur l’objet if (_root.end==false){ //tant qu’on est toujours en train de jouer _root.munitions--; // On décrémente les munitions if(_root.munitions==1){ //lorsqu’il n’y a plus de munitions findujeu(); //On lance la fonction findujeu() }

13 Interactions souris Clic sur les canards et morts des canards (niarf!) A chaque clic sur un canard « vivant », celui-ci devient « mort », son animation change et le score est incrémenté. var score:Number=0; nanard.prototype.onPress=function(){ //lorsqu’on clique un objet « nanard » if(this.mort==false){ // s’il est vivant this.gotoAndStop(10);// on remplace l'image du canard par celle du canard mort score++; //on incrémente le score du joueur this.mort=true; // le canard devient "mort" }

14 Un canon de tir Création d’un canon de tir On souhaite maintenant associé à la cible, un canon fixe qui pointe dans la direction de la cible Importation de l’image Création d’un nouveau symbole « canon » Centré l’image dans le symbole Insérer le symbole dans la scène, centré en X, y=450. Nommer le « fusil ». fusil.onMouseMove=function(){ var dx =souris._x-fusil._x; var dy=souris._y-fusil._y; var angle=-Math.atan(dx/dy)*180/Math.PI; if(angle <-40) { angle=-40;} //limitation de l'angle canon if (angle>40){ angle=40;} fusil._rotation=angle;//fait tourner le fusil de l'angle voulu; } On détermine l’angle entre le canon et la cible à chaque mouvement de souris (onMouseMove), puis on fait tourner le canon de cet angle pour l’aligner avec la cible. On limite toutefois cette angle à 40°.

15 Informations aux joueurs Score et Munitions Importer l’image cartouche. Instancier l’image cartouche et l’image duck3 sur la scène Ajouter des zones de texte dynamique en vis-à-vis, dans le champs « variable », taper « score » et « munitions ».

16 Fin du jeu Image de fin du jeu Copier l’image 1 dans l’image trois de votre animation. Retirer les zones de texte. Ajouter de nouvelles zones de texte qui donnent : le nom du joueur et son score. Modifier le code du bouton pour en faire un bouton « Rejouer » Finir la partie Nous allons maintenant créer une fonction qui gère la fin de la partie : _global.findujeu=function():Boolean { //on crée une fonction qui renvoie une valeur booléenne gotoAndStop(3); clearInterval(nouveaucanard); // On arrête l’intervalle qui ajoutait des canards Mouse.show();// on remontre la souris end=true; return findujeu; //on renvoie la dernière valeur (ici celle de end) }

17 Gestion du son Ajout d’un son lors de l’apparition d’un canard Importer les sons « duck », « gunfire » et « musique » Dans le code principal: var son1=new Sound(); son1.loadSound("duck.mp3"); son1.setVolume(80); Dans la fonction ajoutCanard(); _root.son1.start(); A vous d’ajouter un son lorsque l’utilisateur tire. La musique : var musique=new Sound(); musique.loadSound("musique.mp3");//Chargement du son associé à la variable "musique" musique.setVolume(80); musique.onLoad=function(){ musique.start(); } Dans l’image 3, ajouter au code: musique.stop(); pour arrêter la musique.

18 De nombreuses améliorations sont possibles : - Changer les conditions d’arrêt - Ajouter un chrono - Ajouter un commentaire en fonction du score - … A vous de jouer!