Conseil rapide curseur en forme de croix personnalisé et son au canon

Dans cette astuce, nous allons créer un réticule personnalisé avec un son de coup de feu. Cela pourrait être la base pour un jeu de shoot-'em-up. Dans cet exemple, nous plaçons des trous de balle sur la scène au point où vous cliquez..


Remarque: Malgré la nouvelle fonctionnalité de curseur natif introduite dans FP10.2, cette méthode old-school reste un moyen valable de créer un curseur personnalisé. Il présente l’avantage de vous permettre d’utiliser des graphiques plus volumineux et de fonctionner avec les anciennes versions de Flash Player. Nous allons jeter un oeil à Native Cursor dans FP10.2 demain :)

Bref aperçu

Dans le fichier SWF, vous verrez un bouton Démarrer. Lorsque vous cliquez sur ce bouton, votre souris devient un réticule prêt à faire des dégâts. Lorsque vous cliquez sur la scène, un coup de feu retentit et un graphique de trou de balle s’ajoute à la scène au point où vous avez cliqué avec la souris..


Étape 1: Configuration du document

Ouvrir un nouveau document Flash et définir les propriétés suivantes

  • Taille du document: 500x400px
  • Couleur de fond: #FFFFFF

Étape 2: Configuration des éléments du jeu

Pour le bouton Démarrer, j'ai dessiné un rectangle arrondi et placé du texte avec le mot Démarrer. J'ai ensuite converti le bouton et le texte en MovieClip en traçant une sélection autour d'eux et en appuyant sur F8. J'ai donné le nom au bouton démarrer jeu, et aussi utilisé démarrer jeu en tant que nom d'instance dans le panneau Propriétés. Si le panneau Propriétés ne s'affiche pas pour vous, accédez à Menu-> Fenêtre-> Propriétés ou appuyez simplement sur CTRL + F3.

Les fichiers d’exercice comprennent deux images: l’une est le graphique en forme de croix, et l’autre est le graphique en bullethole. Je les ai importés un à un sur la scène et les ai convertis en MovieClip en cliquant dessus et en appuyant sur F8. Je leur ai donné les noms d'instance "BulletHole" et "CrossHair", en m'assurant que les points d'alignement étaient définis au centre dans les deux cas et en utilisant le même nom pour la classe dans la liaison de chaque symbole. Vous trouverez ci-dessous une image de la configuration du BulletHole. il en va de même pour le CrossHair.

Pour le son, je l'ai importé dans la bibliothèque, puis j'ai cliqué dessus avec le bouton droit de la souris et sélectionné Propriétés. Je lui ai ensuite donné le nom GunShot et défini la classe de liaison en tant que GunShot..

Maintenant que tous nos éléments de jeu sont prêts, nous pouvons plonger dans le code.


Étape 3: Configuration du package et de la classe principale

Ici nous installons notre paquet et la classe principale pour notre jeu

Nous importons d’abord certaines classes dont nous aurons besoin, puis nous configurons notre classe de documents. Cette classe principale doit étendre MovieClip ou Sprite; Ici, nous étendons MovieClip. Nous déclarons ensuite certaines variables que nous allons utiliser et codons notre fonction constructeur. La fonction constructeur ajoute un écouteur d'événement au bouton, qui est l'endroit où nous configurons le reste du jeu..

 package import flash.display.MovieClip; import flash.events.MouseEvent; import flash.ui.Mouse; import flash.media.Sound; import flash.media.SoundChannel; public class Main étend MovieClip // Les clips et le son dans la bibliothèque var crosshair: CrossHair = new CrossHair (); var bullethole: BulletHole; var coup de feu: GunShot = new GunShot (); // Nécessaire pour le son de coup de feu var soundChannel: SoundChannel = new SoundChannel; // Indique si l'utilisateur a cliqué une fois sur var var firstShot = true;  public function Main () // Affiche le curseur de la main lorsque l'utilisateur passe la souris sur le bouton startGame.buttonMode = true; startGame.addEventListener (MouseEvent.CLICK, startTheGame); 

Étape 4: Codage du commencer le jeu() Une fonction

le commencer le jeu() La fonction est appelée lorsque l'utilisateur clique sur le bouton. Cette fonction supprime le bouton de la scène, masque la souris et ajoute le réticule à la scène. Nous ajoutons ensuite deux auditeurs d'événement à la scène.

 fonction privée startTheGame (e: MouseEvent): void // Supprime le bouton de la scène removeChild (startGame); // masque la souris Mouse.hide (); // Ajoute le réticule et définit ses propriétés x et y // aux coordonnées x et y de la souris addChild (réticule); réticule.x = mouseX; réticule.y = mouseY; stage.addEventListener (MouseEvent.MOUSE_MOVE, moveCursor); stage.addEventListener (MouseEvent.CLICK, fireShot); 

Étape 5: codage moveCursor () et Coup de feu()

le moveCursor () Cette fonction est appelée à chaque fois que l'utilisateur déplace la souris, en raison de l'écouteur d'événements MOUSE_MOVE que nous avons ajouté à la scène. Dans cette fonction, nous nous assurons simplement que le réticule est à la même position que la souris en utilisant mouseX et MouseY.

 fonction privée moveCursor (e: MouseEvent): void // Vérifie que le réticule x et y est toujours // où le x et y de la souris est crosshair.x = mouseX; réticule.y = mouseY; 

le Coup de feu() La fonction est appelée chaque fois que l'utilisateur clique sur la scène. Nous vérifions d’abord si c’est la première fois que l’utilisateur a cliqué; si ce n’est pas le cas, nous jouons le son du coup de feu et ajoutons le bulletHole à la même position sur la scène où l’utilisateur a cliqué en utilisant e.stageX ete.stageY. L'événement contient des informations sur lui-même - vous pouvez voir ce qu'il contient en utilisant trace (e.toString ()).

Si nous ne vérifions pas si c'était la première fois, lorsque l'utilisateur clique pour la première fois sur le bouton Démarrer, il ajoute un réticule et lit le son du coup de feu (nous ne voulons pas de cela)..

 fonction privée fireShot (e: MouseEvent): void // S'ils ont cliqué une fois, nous le faisons si (firstShot == false) // Lit le son soundChannel = gunshot.play (); // Crée un nouveau bullethole et l'ajoute à l'étape // à l'endroit où l'utilisateur a cliqué sur bullethole = new BulletHole (); addChild (bullethole); bullethole.x = e.stageX; bullethole.y = e.stageY; // Nous voulons toujours que le réticule soit au-dessus donc nous échangeons les "Profondeurs" // du réticule et de l'échange de ballesChildren (bullethole, crosshair);  firstShot = false;  // Fermer la classe // Fermer le package

Conclusion

Cela pourrait être la base de nombreux jeux de type shoot-'em-up. Il serait très facile de faire apparaître des ennemis et de faire un test hitTestPoint () avec les X et Y de la souris contre l'objet d'affichage de l'ennemi..

J'espère que vous avez apprécié ce tutoriel. Merci d'avoir lu!