Exposé Flash 3 - Tir aux canards - BRIGOLLE Mathieu GI04Printemps 07.

Présentation au sujet: "Exposé Flash 3 - Tir aux canards - BRIGOLLE Mathieu GI04Printemps 07."— Transcription de la présentation:

1 Exposé Flash 3 - Tir aux canards - BRIGOLLE Mathieu GI04Printemps 07

2 Exposé Flash 3 Objectif : Réalisation dun jeu de tir aux canards http://wwwetu.utc.fr/~mbrigoll/TirOCanard.swf

3 Quelques mots sur la POO1. - Quest-ce que la POO ? Technique de programmation Chaque tâche de lapplication est réalisée par un objet spécialisé dans sa réalisation - Classes et Objets : ne pas confondre ces deux notions var _sonCanard:Sound = new Sound(); var _sonTir:Sound = new Sound(); Ici, « Sound » désigne la Classe, « _sonCanard » et « _sonTir » désignent deux Objets de type « Sound ». - Notion dhéritage Une classe peut hériter/dériver dune autre classe. http://wwwetu.utc.fr/~mbrigoll/Objet.zip

4 Jeu de Tir aux Canards2. http://wwwetu.utc.fr/~mbrigoll/Flash3_files.zip Créer un document fla, paramétrage du document : Dimensions : 800 x 600 pixels Arrière-plan : noir 30 images par seconde Créer deux calques : lun pour le code, lautre pour linterface. Chaque calque doit contenir 3 images clefs vides : Sur lun des calques, les nommer « Menu », « Jeu » et « Fin » Dans la bibliothèque, créer trois répertoires avec les mêmes noms que les images.

5 Création du menu2.1. txtPseudo rdFacile rdNormal rdCauchemar btnPlay Sur le calque Interface, Image 1 :

6 Code à placer dans le calque Code de limage 1 : stop(); // Initialiser le contenu du champs de saisi contenant le pseudo txtPseudo.text = ""; // Changer la couleur de fond du champ de texte txtPseudo.backgroundColor = "0xC9C072"; txtPseudo.background = true;// Activer la couleur de fond rdFacile.fontName = "Garamond"; rdFacile.fontSize = 22; rdNormal.fontName = "Garamond"; rdNormal.fontSize = 22; rdCauchemar.fontName = "Garamond"; rdCauchemar.fontSize = 22; Création du menu2.1.

7 Suite du code à placer dans le calque Code de limage 1 : btnPlay.onRelease = function() // quand on relâche le bouton { if(txtPseudo.text != "") // Si le pseudo a été saisi { // on mémorise la difficulté qui va servir dans l'image suivante if(rdFacile.selected) _global.difficulte = "facile"; else if(rdNormal.selected) _global.difficulte = "normal"; else if(rdCauchemar.selected) _global.difficulte = "cauchemar"; // on mémorise le pseudo _global.pseudo = txtPseudo.text; // Aller à l'image 2 et s'arrêter là gotoAndStop("Jeu"); } } Création du menu2.1.

8 Création de la partie jeu2.2. Sur le calque Interface, Image 2 : importer le fond (fond_shoot.png)

9 Création du clip « fusil » : - Insérer limage « canon » en -52 ; -170 - Placer une occurrence nommée « fusil » du clip créé sur le calque Interface de limage 2 - La placer en : 350 ; 430 Création du clip « souris » : - Exporte le clip pour ActionScript car il sera uniquement utilisé par lintermédiaire dActionScript - Insérer limage « cible » en -35 ; -35 Création des clips2.2.1.

10 Création du clip « canard » : - Exporter pour ActionScript - Insérer limage « duck1 » Lorsque Flash vous propose dimporter toute la séquence, répondez oui, il importera les images « duck2 » et « duck3 » dans les images 2 et 3 - Placer les trois images en : -110 ; -100 Ce placement définit le centre de rotation de limage pour plus tard. - Déplacer limage 3 en image 10 et limage 2 en image 5 - Insérer une image clef non vide en image 9 - Placer le code suivant dans limage 9 : gotoAndPlay(1); Création des clips2.2.1.

11 Code à placer dans un nouveau fichier nommé « souris.as » : // Classe qui sera liée au clip souris class souris extends MovieClip { // Quand ce clip sera chargé sur la scène function onLoad() { // Méthode permettant d'automatiquement suivre la souris this.startDrag(true); // On cache l'image de la souris (la flèche blanche) Mouse.hide(); } // Quand ce clip sera détruit function onUnload() { this.stopDrag(); // On arrête de suivre la souris Mouse.show(); // On réaffiche la souris } } Création de la classe souris2.2.2.

12 Code à placer dans un nouveau fichier nommé « daffy.as » : // Classe daffy dérivant de la classe MovieClip class daffy extends MovieClip { // Constructeur function daffy() { // Code qui sera remplacé plus tard _x = _y = 150; } // Fonction appelée à chaque rafraichissement d'image function onEnterFrame() { } /* Action quand on clique sur le canard */ function onPress() { // Change l'image du canard this.gotoAndStop(10); } } Création de la classe daffy – Partie 12.2.3.

13 Code à placer dans un nouveau fichier nommé « jeu.as » : // Importation des classes daffy et souris utilisées import daffy; import souris; class jeu { // Profondeur courante pour la création de clip sur la scène private var _profondeurCourante:Number = 1; // Interval de temps entre l'apparition des canards private var _tempsCanard:Number = 700; // Tableau qui va contenir les références aux callbacks : // [0] interval entre l'apparition de chaque canard // [1] timer pour le chrono du jeu private var _interval:Array = new Array( 2 ); // Référence le clip de la souris private var _souris:souris = null; Création de la classe jeu – Partie 12.2.4.

14 // Constructeur de la classe : function jeu() { // Cré les derniers éléments d'interface setInterface(); // Définition des timers _interval[0] = setInterval(this, "nouveau_canard", _tempsCanard); } private function setInterface() { // Création d'une instance du clip souris // Le clip est créé à la profondeur 1048574 car : // - On veut être sûr quil soit au-dessus des canards // - 1048575 est le dernier index pouvant être supprimé mais // il est réservée par les composants AS2 // Voir l'aide de removeMovieClip _root.attachMovie("souris", "souris", 1048574); // On garde la référence de la souris pour la détruire à la fin _souris = _root.souris; } Création de la classe jeu – Partie 12.2.4.

15 // Fonction permettant de créer un nouveau canard sur // la scène private function nouveau_canard() { _root.attachMovie("canard","mon_canard" + _profondeurCourante, _profondeurCourante); _profondeurCourante++; // Le temps du test, on détruit le timer pour ne // créer quun seul canard… clearInterval(_interval[0]); } } Création de la classe jeu – Partie 12.2.4.

16 Premier test du travail réalisé Insérer le code suivant dans le calque Code de limage 2 : // Importer le fichier jeu.as import jeu; /* Liaison de notre classe souris avec l'objet souris de la bibliothèque */ Object.registerClass("souris",souris); /* Liaison de notre classe daffy avec l'objet canard de la bibliothèque */ Object.registerClass("canard",daffy); /* On instancie un objet jeu */ var monJeu:jeu = new jeu(); En testant, vous devriez avoir un canard qui bat des ailes, la cible qui suit votre souris sans que le curseur soit visible. Si vous cliquez sur le canard, celui-ci sera tué.

17 Nous allons maintenant animer le canard. // Classe daffy dérivant de la classe MovieClip class daffy extends MovieClip { // Déclaration et initialisation des variables // Indique si le canard est mort ou non private var mort:Boolean = false; // Indique si le canard est tombé par terre private var crash:Boolean = false; private var vitesse:Number = 0; // Vitesse du canard // Dans quel sens va le canard : // (1 de gauche à droite, et -1 de droite à gauche) private var sens:Number = 1; // Déclaration et initialisation de la variable statique total // Permet de compter combien de canard sont utilisés private static var total:Number = 0; public static function get Total() { return total; } public static function set Total(newTotal:Number) { total = newTotal;} Création de la classe daffy – Partie 22.2.5.

18 // Constructeur function daffy() { // La vitesse est pseudo-aléatoire : entre 3 et 8 vitesse = Math.random() * 5 + 3; // sens également pseudo-aléatoire (ici sens = 0 ou 1) sens = Math.round(Math.random()); if(sens == 0) sens = -1; // sens = -1 ou 1 uniquement // Donne une grosseur pseudo-aléatoire aux canards _xscale = _yscale = Math.random() * 40 + 20; // le canard est dirigé vers le sens ou il va _xscale = _xscale * -sens; // donne une position pseudo-aléatoire aux canards _y = Math.random() * 150 + 40; if(sens == 1) // sil va de gauche à droite, il arrive par la gauche _x = -_width; else // sinon par la droite _x = 800; // Un canard de plus vient d'être créé total++; } Création de la classe daffy – Partie 22.2.5.

19 // Fonction appelée à chaque rafraichissement d'image function onEnterFrame() { if(not crash)// Si le canard n'est pas au sol { // Déplace le canard horizontalement _x += vitesse * sens; // Si le canard est sortit de l'écran : if(((_x - _width > 800) or (_x + _width 450) crash = true; } } Création de la classe daffy – Partie 22.2.5.

20 else// Le canard est par terre { _alpha--; // On réduit sa transparence if(_alpha < 0)// S'il n'est plus visible { // On le retire du total des canard affichés total--; // On le retire de la scène this.removeMovieClip(); } } } /* Action quand on clique sur le canard */ function onPress() { // Si le canard n'est pas déjà mort if(!mort) { mort = true; // Change l'état du canard this.gotoAndStop(10); // Change l'image du canard } } }// Fin de la classe daffy Création de la classe daffy – Partie 22.2.5.

21 Création de la classe jeu – Partie 22.2.5. Ajoutez le code suivant à la classe jeu : 1 – Dans la partie de déclaration des variables : // Nombre de canard maximal en même temps durant le jeu private var _nbCanardMax:Number = 10; 2 – A la place de la fonction nouveau_canard : // Fonction permettant de créer un nouveau canard sur la scène private function nouveau_canard() { if(daffy.Total < _nbCanardMax) { _root.attachMovie("canard", "mon_canard" + _profondeurCourante, _profondeurCourante); _profondeurCourante++; } } 3 – Tester le résultat

22 Création de la classe jeu – Partie 22.2.6. Nous allons maintenant animer le canon et mettre un peu dambiance. Commencez par ajouter le code suivant à la classe jeu : 1 – Dans la partie de déclaration des variables : // Son joué lors de l'apparition d'un canard private var _sonCanard:Sound = null; // Musique jouée pendant une partie private var _sonMusique:Sound = null; // Son joué lors d'un tir private var _sonTir:Sound = null; 2 – Dans le constructeur de la classe : // Charge les sons setSounds(); // Indique aux objets Key et Mouse (gérés par Flash) que // cette classe est à l'écoute des évènements provenants // respectivements du clavier et de la souris Key.addListener(this); Mouse.addListener(this);

23 Création de la classe jeu – Partie 22.2.6. 3 – Les procédures suivantes : // Chargements des trois sons du jeu private function setSounds() { _sonCanard = new Sound(); _sonCanard.loadSound("sons/duck.mp3"); _sonCanard.setVolume(80); _sonMusique = new Sound(); _sonMusique.onLoad = function() { // Dès que zikette est chargée, on commence // à le jouer this.start(); }; _sonMusique.loadSound("sons/zikette.mp3"); _sonMusique.setVolume(80); _sonTir = new Sound(); _sonTir.loadSound("sons/gunfire.mp3"); _sonTir.setVolume(100); }

24 Création de la classe jeu – Partie 22.2.6. // Fonction qui sera déclenchée par l'objet Key lorsque l'utilisateur // appuie sur une touche. Elle ne sera bien sûr déclenchée que si la // commande Key.addListener(this) a déjà été exécutée... private function onKeyDown() { // On teste si la flèche gauche est enfoncée if(Key.isDown(Key.LEFT)) _root.fusil._x = _root.fusil._x - 4; else if(Key.isDown(Key.RIGHT)) _root.fusil._x = _root.fusil._x + 4; } // Fonction qui sera déclenchée par l'objet Mouse lorsque l'utilisateur // bouge la souris. Elle ne sera bien sûr déclenchée que si la commande // Mouse.addListener(this) a déjà été exécutée... private function onMouseMove() { // calcul d'angle (trigo de 5eme ;) var x = _root.souris._x - _root.fusil._x; var y = _root.souris._y - _root.fusil._y; var angle = -Math.atan(x / y) * 180 / Math.PI; if(angle 40) angle = 40; _root.fusil._rotation = angle; // définit l'orientation }

25 Création de la classe jeu – Partie 22.2.6. // Fonction qui sera déclenchée par l'objet Mouse lorsque // l'utilisateur appuie sur un bouton de la souris. Elle ne sera // bien sûr déclenchée que si la commande Mouse.addListener(this) // a déjà été exécutée... private function onMouseDown() { _sonTir.start(); // on joue le le son pour le tir du fusil } 4 – Dans la fonction nouveau_canard, complétez lancienne ligne commençant par « _root » : _root.attachMovie("canard", "mon_canard" + _profondeurCourante, profondeurCourante, {son:_sonCanard}); 5 – Dans la classe daffy : ligne 1 dans les variables, ligne 2 dans le constructeur // Son à utiliser lors de l'initialisation du canard private var son:Sound = null; // Si le son a été créé à l'initialisation, on le joue if(son != null) son.start(); Testez votre jeu de tir au canard

26 Niveaux de jeu et Score2.2.7. Ajoutez le canard mort (duck3), le chrono et les cartouches

27 Niveaux de jeu et Score2.2.7. Ajoutez les codes suivants dans la classe jeu : 1 – Dans la zone de déclaration des variables private var _temps:Number = 60; // Chrono du jeu private var _munitions:Number = 60; // Munitions restantes private var _canardTues:Number = 0; // Nombre de canards tués // Référence un champ de texte qui va afficher le nombre de canard tués private var _txtCanardTues:TextField = null; // Référence au champ de texte qui va afficher le temps de jeu restant private var _txtChrono:TextField = null; // Référence au champ de texte qui affichera le nombre de munitions restantes private var _txtMunitions:TextField = null; 2 – Au niveau du constructeur : function jeu(maxDuck:Number, time:Number, ammo:Number, tpsCanard:Number) { _nbCanardMax = maxDuck; _temps = time; _tempsCanard = tpsCanard; _munitions = ammo; _interval[1] = setInterval(this, "timer", 1000); … }

28 Niveaux de jeu et Score2.2.7. 3 – Dans la fonction setInterface() : /* Création des 3 textFields pour les indicateurs, format des champs de texte */ var formatTxt:TextFormat = new TextFormat(); formatTxt.bold = true; formatTxt.size = 32; /* Afficheur pour le nombre de canards tués */ _root.createTextField("CanardTues_txt", _profondeurCourante, 70, 507, 102, 63); _txtCanardTues = _root.CanardTues_txt; _txtCanardTues.setNewTextFormat(formatTxt); _txtCanardTues.text = "0"; _profondeurCourante++; /* Afficheur pour le chrono */ _root.createTextField("Chrono_txt", _profondeurCourante, 200, 507, 102, 63); _txtChrono = _root.Chrono_txt; _txtChrono.setNewTextFormat(formatTxt); _txtChrono.text = _temps.toString(); _profondeurCourante++;

29 Niveaux de jeu et Score2.2.7. /* Afficheur pour les munitions */ _root.createTextField("Munitions_txt", _profondeurCourante, 660, 507, 102, 63); _txtMunitions = _root.Munitions_txt; _txtMunitions.setNewTextFormat(formatTxt); _txtMunitions.text = _munitions.toString(); _profondeurCourante++; 4 – Dans la fonction nouveau_canard, complétez lancienne ligne commençant par « _root » : _root.attachMovie("canard","mon_canard" + _profondeurCourante, _profondeurCourante, {son:_sonCanard,_jeu:this}); 5 – Modifiez la procédure onMouseDown : private function onMouseDown() { _sonTir.start(); // on joue le le son pour le tir du fusil munitions = munitions - 1; _global.score--; if (_munitions == 0) fin(); }

30 Niveaux de jeu et Score2.2.7. 6 – Ajoutez les fonctions suivantes : // Propriété publique qui retourne ou modifie le nombre de munitions restantes public function get munitions():Number { return _munitions; } public function set munitions(n:Number) { _munitions = n; _txtMunitions.text = n.toString(); } // Propriété publique qui retourne ou modifie le temps restants public function get temps() { return _temps; } public function set temps(n:Number) { _temps = n; _txtChrono.text = n.toString(); }

31 Niveaux de jeu et Score2.2.7. // Propriété publique qui retourne ou modifie le nombre de canards tués public function get canardTues():Number { return _canardTues; } public function set canardTues(n:Number) { _canardTues = n; _txtCanardTues.text = n.toString(); } // Fonction appelée chaque seconde par l'un des timers définient dans la // variable _interval. Elle permet de compter le temps écoulé private function timer() { temps = temps - 1; _global.score = _global.score - 0.1; if(_temps == 0) fin(); }

32 Niveaux de jeu et Score2.2.7. // Fonction appelée à la fin du jeu pour supprimer tous les éléments // qui doivent l'être : // - éléments d'interface créés dynamiquement (sinon ils resteront // sur les images suivantes) // - timers, Listeners… private function fin() { // On détruit les intervales, puis linterface. if(_interval[0] != null) clearInterval(_interval[0]); if(_interval[1] != null) clearInterval(_interval[1]); _souris.removeMovieClip(); _txtCanardTues.removeTextField(); _txtChrono.removeTextField(); _txtMunitions.removeTextField(); // On retire les écouteurs sur le clavier et la souris Key.removeListener(this); Mouse.removeListener(this); _sonMusique.stop(); // On arrête la musique // On redirige vers l'image 3 _root.gotoAndStop("Fin"); }

33 Niveaux de jeu et Score2.2.7. 7 – Gestion du jeu dans la classe daffy : - Dans les déclarations de variables // Référence à la partie dans laquelle le canard est utilisé private var _jeu:jeu = null; - Au début de onEnterFrame (ne pas oublier de rajouter un else avant le if qui suit) if(_jeu.temps == 0 || _jeu.munitions == 0) { // jeu terminé on retire toutes les instances de la scène. this.removeMovieClip(); total--; } - Dans le if de onPress : _jeu.canardTues = _jeu.canardTues + 1; // Un canard de plus de tué _global.score = _global.score + 4

34 Niveaux de jeu et Score2.2.7. 8 – Modification de la création de lobjet monJeu dans le code de limage 2 : A la place de : /* On instancie un objet jeu */ var monJeu:jeu = new jeu(); Mettre : _global.score=0; /* On instancie le jeu et on lance la partie */ var monJeu:jeu = null; if(_global.difficulte == "facile") monJeu = new jeu(10, 60, 80, 700); else if(_global.difficulte == "normal") monJeu = new jeu(20, 60, 70, 500); else if(_global.difficulte == "cauchemar") monJeu = new jeu(40, 60, 60, 300);

35 Création de la partie daffichage du score2.3. Sur le calque Interface, Image 3 : txt_msg : variable msg txt_score : variable scorefinal btnMenu btnTryAgain

36 Dans le calque Code, ajouter le code suivant : scorefinal = _global.score; msg = "Bravo " + _global.pseudo + " !"; btnMenu.onRelease = function() { gotoAndStop("Menu"); } btnTryAgain.onRelease = function() { gotoAndStop("Jeu"); } Création de la partie daffichage du score2.3.