Réalisation d'un jeu de tir aux Canards Florian GAUCHER Alexandre LEVY SI 28 Exposé Flash 3.

Présentation au sujet: "Réalisation d'un jeu de tir aux Canards Florian GAUCHER Alexandre LEVY SI 28 Exposé Flash 3."— Transcription de la présentation:

1 Réalisation d'un jeu de tir aux Canards Florian GAUCHER Alexandre LEVY SI 28 Exposé Flash 3

2 Création de l’interface d’accueil Propriétés du document Fond : noir Taille : 800*600 px Nombre d’images par seconde : 24 Zone de « texte statique » Zone de « texte de saisie » Bouton de la bibliothèque commune Fond : une image

3 Création de l’interface d’accueil Propriété du document : - couleur de fond : noir, - taille du document : 800px X 600px, - nombre d'images par seconde : 24 (pour avoir une animation fluide). · Fond d'écran : - importer "parchemin.png" (Fichier/Importer), - le placer au centre (outil « Aligner » : CTRL + K pour afficher le panneau). Insertion du bouton : - lui donner "mon_bouton" comme nom d’occurrence (panneau « propriétés ») Création des différentes zones de texte

4 Mise en place du décor du jeu · Création de la deuxième image clé : - importer l'image "fond_shoot.png" dans la scène, - la positionner en 0px, 0px (panneau « Propriétés »). Stopper la tête de lecture sur le première image clé : Mettre en fonctionnement le boutton de l'écran d'acceuil:

5 Création d’un clip « canard » animé · Création du clip : - créez un nouveau symbole de type clip (raccourci Ctrl + F8), - appelez le "canard", - puis cochez "Exporter pour l'action script". (pour que le clip soit utilisable dans le code Action Script)

6 Création d’un clip « canard » animé · Insertion des images dans le clip « canard » : - importer dans la séquence la séquence d'image : les images duck1.png, duck2.png et duck3.png vont être chargées automatiquement dans des images clés différentes, - pour les trois images, placez l'image du canard en (-110, -100), cela va définir le point de rotation au centre des canards pour qu'ils tournent correctement en tombant par la suite, - déplacez la dernière image clé sur l'image 10 et la deuxième en image 5. Ajouter le code pour gérer la lecture du clip : - créer un image clé sur l'image 9, - dans le code de cette image, ajoutez la commande : gotoAndPlay(1);

7 Remplacement du curseur de la souris · Création du clip « souris » - créer un nouveau symbole de type clip (touche Ctrl + F8) - nommer ce clip "souris", - cocher la case « exporter pour Action Script », - importer l'image cible.png, - placer l'image en (-35, -35) de manière à la centrer. · Créer une instance du symbole « souris » sur la scène : - créer un objet souris sur la scène en faisant glisser le symbole « souris » de la bibliothèque vers la scène (image 2 de la séquence principale). - nommer cet objet « souris » également. - afficher la fenêtre « Actions » et ajouter le code suivant : onClipEvent(load) { // Quand ce clip sera chargé sur la scène (autrement dit quand l'image sera affichée ) startDrag(this, true); // On dit que 'cet' objet (l'image de la souris) suit la souris. Mouse.hide(); // On cache l'image de la souris standard (la flèche blanche). }

8 Écriture de la classe « daffy » Pour intégrer l’animation du canard à la séquence : utilisation d’une classe · Définition de la classe « daffy » : Nous allons lier notre classe « daffy » et notre clip « canard » de manière à ce que les actions que nous allons programmer dans daffy s'ajoute à notre clip canard. Le canard est un Clip, ou plutôt un MovieClip dans le langage Action Script, ainsi pour accéder aux propriétés du canard (comme sa taille, sa position, sa transparence) nous devons dire que notre classe daffy hérite des propriétés des objets graphiques en général. Insérer dans les actions de l'image 2 de la séquence principale : /* La classe hérite des propriété d'un clip car notre canard est un objet de la bibliothèque */ daffy.prototype = new MovieClip();

9 Écriture de la classe « daffy » · Constructeur de la classe daffy : Grâce à cette classe nous allons pouvoir initialiser chaque canard avec des valeurs différentes à leur arrivée sur la scène, pour cela nous utilisons le constructeur qui est appelé lorsqu'un nouveau canard est créé : function daffy() { this.mort = false; // Un canard est vivant par défaut this.crash = false; // Un canard vole par défaut this.vitesse = Math.random() * 5 + 3; // La vitesse est aléatoire this.sens = int(Math.random()); // sens aléatoire également (ici sens = 0 ou 1) if(this.sens == 0) this.sens = -1; // fait en sorte que sens soit -1 ou 1 uniquement. this._xscale = this._yscale = Math.random() * 40 + 20; // lui donne une grosseur aléatoire this._x = Math.random() * 900 - 50; // donne une position aléatoire au canard this._y = Math.random() * 150 + 40; this._xscale = this._xscale * -this.sens; // le canard est dirigé vers le sens ou il va }

10 Création dynamique d’un canard · Tout d'abord il faut dire à Flash que notre classe est liée à l'objet canard de la bibliothèque : /* Liaison de notre classe avec l'objet de la bibliothèque */ Object.registerClass("canard",daffy); · Mais nous voulons plusieurs canards et nous voulons limiter leur nombre à 10. - Pour cela nous allons créer une fonction : var niveau = 1; // "Calques Action Script" où sera placé le prochain canard var total = 0; // Combien y a t-il de canards affichés /* Affiche le canard */ function nouveau_canard() { if(total < 10) { _root.attachMovie("canard","mon_canard",niveau); niveau++; total++; } } nouveau_canard();

11 Création dynamique du canard - Nous allons faire une temporisation pour appeler régulièrement la fonction nouveau_canard(); pour qu'il y ait toujours des canards à shooter sur la scène. - Ajoutez tout simplement à la fin du code que nous venons d’écrire : setInterval(nouveau_canard, 700); Ceci va ajouter un nouveau canard à l'écran toutes les 700 millisecondes. - Lancer l’animation pour tester (CTRL + Entrée)

12 Animation dynamique du canard · Maintenant il nous faut animer tous ces canards. La fonction « onEnterFrame » de la classe « daffy » est appelée 24 fois par secondes, à chaque rafraîchissement de l'image de canard. Donc à chaque rafraîchissement, nous allons faire avancer chaque canard. Pour faire avancer le canard, il suffit de modifier les propriétés _x de chaque canard, donc _x = _x + 1; ferait avancer chaque canard vers la droite. Nous pouvons directement gérer les cas où le canard à été touché (il tombe), où il est par terre (il disparaît) et où il est sortit de l'écran (dans ce cas on change son sens). Pour réaliser toute cette gestion du déplacement du canard, saisir le code :

13 Animation dynamique du canard daffy.prototype.onEnterFrame = function() { if(not this.crash) { // Si le canard n'est pas au sol this._x = this._x + this.vitesse * this.sens; // Déplace le canard horizontalement if(((this._x - this._width > 800) or (this._x + this._width < 0)) and not this.mort) { this.sens = -this.sens; // On change son sens this._xscale = -this._xscale; // On inverse horizontalement l'image } if(this.mort) { // S'il a été touché, il faut qu'il tombe this._y = this._y + 1 + (this._rotation*this.sens) / 4; // Fait descendre le canard if(this._rotation < 30) this._rotation += this.sens; // Fait tourner l'image du canard if(this._y > 450) this.crash = true; // S'il touche terre : il est crashé } } else { // Le canard est par terre this._alpha--; // On réduit sa transparence if(this._alpha < 0) { // S'il n'est plus visible total--; // On le retire du total des canard affichés this.removeMovieClip(); // On le retire de la scène }

14 Interaction à la souris · Pour que le canard soit touché, il suffit de cliquer dessus, donc de définir l'événement onPress de la classe daffy : /* Action quand on clique dessus */ daffy.prototype.onPress = function() { this.mort = true; // Change l'état du canard this.gotoAndStop(10); // Change l'image du canard } La variable "mort" est passée à « true », d'après la fonction d'affichage précédemment programmée, le canard commencera sa chute. De plus, on arrête l'animation du canard et on affiche une image de canard touché pour plus de réalisme (image 10 du clip canard).

15 Sonorisation Avec action script, on peut facilement charger et lancer la lecture de sons dynamiquement. · Musique de fond : Ajouter une musique de fond : dans le code de l'image 2 de la séquence principale, ajoutez : var son3 = new Sound(); // créer une nouvelle instance de l’objet Sound son3.onLoad = function() { son3.start(); } son3.loadSound("zikette.mp3"); // bien mettre le chemin relatif vers le son son3.setVolume(80); // volume en pourcentage son3.onSoundComplete = function() { son3.start(); //pour que la musique soit jouée en continu }

16 Sons événementiels · « Coup de feu » lors du clic et « coin coin » quand un nouveau canard apparaît. - Ajouter le code dans l'image 2 pour charger les sons sans qu'ils soient joués : // variables des sons son1 = new Sound(); son2 = new Sound(); son1.loadSound("duck.mp3"); // Charge les fichiers son2.loadSound("gunfire.mp3"); // Charge les fichiers son1.setVolume(80); // définit les volumes son2.setVolume(100); // définit les volumes - Ajouter cette commande dans la fonction nouveau_canard() dans la boucle if : son1.start(); Vous pouvez tester, quand un nouveau canard arrive, il fait « coin coin » ﾲ

17 Sons événementiels · « Coup de feu » lors du clic et « coin coin » quand un nouveau canard apparaît. - Sélectionner Actions sur « souris » en haut de la fenêtre de code action script : on va ajouter la lecture du coup de feu lorsqu'on clique. - Créer un nouvel événement « onMouseDown » comme ceci : onClipEvent(mouseDown) { _root.son2.start(); } La présence du _root est obligatoire pour indiquer que l'on s'adresse à une variable située "dans le code de l'image" et non pas à une variable de l'objet souris. - Tester l’animation : à chaque clic de souris, un coup de feu se fait entendre…

18 Interactivité au clavier : le canon · Nous allons ajouter un dernier élément : le canon du fusil. Il se dirigera automatiquement vers le pointeur de la souris. - importer l’image canon.png - charger l'image canon.png dans un nouveau clip nommé canon, - placer l'image en (-52px, -170px), - placer une instance du clip sur la scène en position (350, 430), - donner le nom "fusil" à cette instance, - dans le code "Actions sur fusil (canon)", nous allons ajouter une gestion des événements du clavier pour le déplacer latéralement. Il faut utiliser :

19 Interactivité au clavier : le canon Enfin, nous allons diriger le canon du fusil vers la cible, nous cela nous allons détecter l'événement souris "onMouseMove" appelé à chaque mouvement de la souris, et faire une rotation du fusil pour qu'il soit dirigé vers la cible. - Pour cela il faut mettre dans le code de l'image 2 de la séquence principale : fusil.onMouseMove = function () { var mx = souris._x - fusil._x; // calcul d'angle var my = souris._y - fusil._y; var angle = -Math.atan(mx / my) * 180 / Math.PI; if(angle 40) angle = 40; fusil._rotation = angle; // définit l'orientation };

20 Affichage du score Nous pouvons enfin ajouter le score au fur et à mesure que le joueur tue des canards - ajouter une variable score initialisée à 0 sur la séquence principal à l’image 1 : var score=0; - à chaque canard tué, il faut augmenter le score de 1 point : après le code : daffy.prototype.onPress = function() { this.mort = true; // Change l'état du canard ajouter cette ligne : score++; - sur l’image 2 de la séquence principale, on peut ajouter deux champs de texte :. un champ de texte statique, dans lequel on écrit : « Score : ». un champ de texte dynamique auquel on affecte la variable « score » :