Share
Dans ce didacticiel, nous allons dessiner un rectangle de sélection avec la souris (comme dans les jeux de stratégie tels que StarCraft et Command and Conquer), et nous allons également apprendre à sélectionner les unités avec le rectangle.!
Jetons un coup d'œil au résultat final sur lequel nous allons travailler:
Cliquez et faites glisser avec votre souris pour dessiner un rectangle qui sélectionnera n'importe quel soldat qu'il touche.
Si vous utilisez Flash, créez un nouveau fichier ActionScript 3.0 de la taille "550 x 400". Toutefois, si vous n'utilisez pas l'EDI Flash et que vous en utilisez un autre, tel que FlashDevelop ou Flash Builder, ce didacticiel contient les fichiers SWC afin que vous puissiez utiliser MovieClips à partir de votre IDE de préférence. Si vous souhaitez importer MovieClips avec votre IDE, consultez le Guide du débutant pour FlashDevelop et le Guide du débutant en FDT.!
Je dois également noter que j’ai inclus le fichier FLA au cas où vous ne voudriez pas dessiner votre propre matériel..
Ok, maintenant vous pouvez être un peu confus si vous n’avez pas vraiment travaillé avec les cours auparavant. Si vous souhaitez en savoir plus sur l’importance des classes dans la programmation, consultez cet article de kirupa ou ce guide de la classe de document..
Créez une nouvelle "classe ActionScript 3.0" et nommez-la "SelectionDemo". Une fois le fichier créé, enregistrez-le sous «SelectionDemo.as». Vous devriez sauvegarder les fichiers tout le temps. Je ne saurais trop insister là-dessus, mais le nombre de fois où j’ai oublié de sauvegarder le travail que j’ai accompli et tout a perdu ne me laisse pas oublier. Alors s'il vous plaît, sauvegardez les fichiers!
Si vous utilisez un environnement de développement intégré qui génère le code pour vous lorsque vous créez la classe, vous devriez disposer de la plupart du code ci-dessous. Cependant, vous devez toujours ajouter les lignes que j'ai surlignées:
package import flash.display.MovieClip; Classe publique SelectionDemo étend MovieClip fonction publique SelectionDemo ()
Nous n'avons pas encore fini cependant! Si vous utilisez l'IDE Flash, accédez au "Panneau de propriétés" et définissez le "DocumentClass" sur "SelectionDemo". Si vous vous demandez ce que cela fait, cela signifie que lorsque votre application / jeu est exécuté par Flash Player, cette classe sera la classe principale qui gère le jeu. Cool hein?
Lancer le programme; si vous n'obtenez aucune erreur, alors vous devriez être prêt à partir!
Nous devrions maintenant être prêts à créer le rectangle! Cette partie contiendra quelques fonctions, c'est tout. Voici le code pour dessiner le rectangle:
package // IMPORTATION DES CLASSES DONT NOUS AVONS BESOIN import flash.display.MovieClip; import flash.events.MouseEvent; import flash.geom.Rectangle; import flash.display.Sprite; public class SelectionDemo étend MovieClip public var selectionRect: Rectangle; // tiendra les données pour notre rectangle. public var selectionSprite: Sprite = new Sprite (); // Créer un nouveau Sprite pour dessiner le rectangle. fonction publique SelectionDemo () // Ajout d'auditeurs stage.addEventListener (MouseEvent.MOUSE_DOWN, SetStartPoint); fonction publique SetStartPoint (me: MouseEvent): void selectionRect = new Rectangle (stage.mouseX, stage.mouseY); // Création du rectangle de sélection.
Maintenant, c'est un peu inutile d'avoir un rectangle que nous ne pouvons pas voir, non? Exactement, alors commençons!
Génial, il faut maintenant tracer le rectangle à l’écran en utilisant le sélectionSprite variable que vous avez vue dans le dernier extrait. Pourquoi utiliser un sprite, demandez-vous? Tous les sprites contiennent un graphique objet, qui contient à son tour une méthode appelée drawRect () cela nous permet de dessiner facilement un rectangle de manière dynamique dans AS3.
Ci-dessous, j'ai placé le code pour dessiner le rectangle, avec des commentaires:
package // IMPORTATION DES CLASSES DONT NOUS AVONS BESOIN import flash.display.MovieClip; import flash.events.MouseEvent; import flash.geom.Rectangle; import flash.display.Sprite; import flash.events.Event; public class SelectionDemo étend MovieClip public var selectionRect: Rectangle; // tiendra les données pour notre rectangle. public var selectionSprite: Sprite = new Sprite (); // Créer un nouveau Sprite pour dessiner le rectangle. public var isMouseHeld: Boolean; // Nous dira si le bouton de la souris est une fonction publique Haut / Bas SelectionDemo () // Initializing isMouseHeld = false; // La souris n'est pas encore tenue. stage.addChild (selectionSprite); // Ajout de selectionSprite à la scène. stage.addEventListener (MouseEvent.MOUSE_DOWN, SetStartPoint); // Ecoute la souris. stage.addEventListener (MouseEvent.MOUSE_UP, RemoveRectangle); // Ecoute la libération de la souris. stage.addEventListener (Event.ENTER_FRAME, UpdateGame); // Exécute cette fonction chaque image (24 FPS). fonction publique SetStartPoint (me: MouseEvent): void selectionRect = new Rectangle (stage.mouseX, stage.mouseY); // Création du rectangle de sélection. isMouseHeld = true; // La souris est maintenant tenue. fonction publique RemoveRectangle (me: MouseEvent): void isMouseHeld = false; // La souris n'est plus tenue. fonction publique UpdateGame (e: Event): void selectionSprite.graphics.clear (); // Efface le rectangle pour qu'il soit prêt à être dessiné à nouveau. if (isMouseHeld) selectionRect.width = stage.mouseX - selectionRect.x; // Définit la largeur du rectangle. selectionRect.height = stage.mouseY - selectionRect.y; // Définit la hauteur du rectangle. selectionSprite.graphics.lineStyle (3, 0x3B5323, 0.6); // Définit la bordure du rectangle. selectionSprite.graphics.beginFill (0x458B00, 0.4); // Définit le remplissage et la transparence du rectangle. selectionSprite.graphics.drawRect (selectionRect.x, selectionRect.y, selectionRect.width, selectionRect.height); // Dessine le rectangle sur la scène! selectionSprite.graphics.endFill (); // Arrête de remplir le rectangle.
Si vous avez ce code, lancez votre application et regardez-la fonctionner!
En flash, créez un nouveau MovieClip et dessinez une unité. Dans le premier cadre, dessinez simplement une unité; dans le deuxième cadre, ajoutez un cercle vert sous l'unité ou tout élément permettant au joueur de savoir que l'unité a été sélectionnée. Ça devrait ressembler a quelque chose comme ca:
Je viens aussi de dessiner un fond d'herbe rapide sur la scène pour le rendre joli :)
Maintenant que vous avez créé le MovieClip, cliquez avec le bouton droit sur le symbole dans votre bibliothèque et sélectionnez Propriétés. Cochez les cases "Exporter vers ActionScript" et "Exporter dans l'image 1". Ensuite, donnez-lui le nom "Unité". Vos propriétés devraient ressembler à ceci:
Remarque: lorsque vous cliquez sur "OK", vous pouvez recevoir un avertissement car aucune classe de ce type "Unité" n'existe encore. Si c'est le cas, cliquez sur OK et nous allons résoudre ce problème maintenant en créant une nouvelle classe.!
Rappelez-vous avant quand vous avez exporté l'unité MovieClip? C'est ici que nous créons la classe pour ce MovieClip. Créez donc un nouveau fichier de classe ActionScript nommé 'Unit.as' et placez ce code dans la classe:
package import flash.display.MovieClip; Classe publique Unit extension MovieClip public var isActive: Boolean; // Indique si l'unité est sélectionnée ou non. fonction publique Unit () isActive = false; // L'unité n'a pas encore été sélectionnée. gotoAndStop (1); // Aller à et rester sur la première image (pas de bague de sélection).
À venir, camarades!
Il est maintenant temps d'ajouter les unités à la scène et de leur donner une position. De plus, nous allons placer chaque unité dans un «tableau». Un tableau est fondamentalement une liste qui nous permet d'accéder aux éléments qu'il contient à l'aide d'un index. Republic of Code est un bon exemple de tableaux. ils ont également été expliqués ici dans AS3 101: Tableaux.
Voici le code mis à jour pour 'SelectionDemo.as'. Tout d'abord, nous ajoutons un nouvel Array public appelé unitList juste après les autres variables:
public var selectionRect: Rectangle; // tiendra les données pour notre rectangle. public var selectionSprite: Sprite = new Sprite (); // Créer un nouveau Sprite pour dessiner le rectangle. public var isMouseHeld: Boolean; // nous dira quand la souris est haut / bas public var unitList: Array; // Toutes les unités auront lieu ici
Ensuite, nous mettons à jour le Principale fonction en plaçant une fonction appelée PlaceUnits (15);. Nous allons créer cela dans un instant.
fonction publique SelectionDemo () // Initialisation isMouseHeld = false; // La souris n'est pas encore tenue. stage.addChild (selectionSprite); // Ajout de selectionSprite à la scène. PlaceUnits (15); // Appel d'une fonction pour placer les unités sur la scène. // Ajout des écouteurs stage.addEventListener (MouseEvent.MOUSE_DOWN, SetStartPoint); // Ecoute la souris. stage.addEventListener (MouseEvent.MOUSE_UP, RemoveRectangle); // Ecoute la libération de la souris. stage.addEventListener (Event.ENTER_FRAME, UpdateGame); // Exécute cette fonction chaque image (24 FPS).
Il est temps de faire la fonction! Ok, nous allons placer cette fonction après le UpdateGame (e: Event): void fonction et ce que cette fonction va faire est d’ajouter à la scène la quantité d’unités que vous avez spécifiée entre parenthèses. Nous allons également ajouter les unités à la liste et leur donner des positions aléatoires sur la scène tout en veillant à ce qu'elles ne puissent pas apparaître hors de la scène..
fonction publique PlaceUnits (amount: int): void unitList = new Array (); // Création d'un nouveau tableau (liste) pour contenir toutes les unités. pour (var i: int = 0; i < amount; i++ ) // Run whatever is inside the brackets 'amount' times. var unit:Unit = new Unit(); // Creating a new unit. unit.x = Math.random() * (550 - unit.width); // Setting a random X Position. unit.y = Math.random() * (400 - unit.height); // Setting a random Y Position. stage.addChild(unit); // Adding the new unit to the stage. unitList.push( unit ); // Placing the unit in the Array(list).
Lorsque vous exécutez ceci, vous devriez avoir 15 unités placées au hasard. Temps pour passer à autre chose et programmer la sélection de l'unité.
Lorsque vous exécutez le jeu, vous constaterez probablement un chevauchement étrange des unités. Réparons-le! C’est extrêmement facile et ne nécessitera qu’un léger changement de PlaceUnits () une fonction.
Fondamentalement, nous devons ajouter toutes les unités à un tableau (liste), puis trier la liste en fonction de la position Y (position verticale) des unités. Plus la propriété Y est basse, plus elle devrait être en arrière. Nous allons changer le PlaceUnits () fonction à:
Accentsconagua
fonction publique PlaceUnits (amount: int): void unitList = new Array (); // Création d'un nouveau tableau (liste) pour contenir toutes les unités. pour (var i: int = 0; i < amount; i++ ) // Run whatever is inside the brackets 'amount' times. var unit:Unit = new Unit(); // Creating a new unit. unit.x = Math.random() * (550 - unit.width); // Setting a random X Position. unit.y = Math.random() * (400 - unit.height); // Setting a random Y Position. unitList.push( unit ); // Placing the unit in the Array(list). unitList.sortOn("y", Array.NUMERIC); // Sorting the list in order of the 'y' properties! for( var j:int = 0; j < amount; j++ ) // We will run through this loop again to add the units. stage.addChild( unitList[j] ); // This adds the 'sorted' unit to the stage. Là nous l'avons? plus de chevauchement!
Maintenant, chaque cadre, nous allons vérifier si des unités ont été sélectionnées; s'ils ont alors nous ferons apparaître leur bague de sélection.
Modifier le UpdateGame () fonction à la suivante:
fonction publique UpdateGame (e: Event): void selectionSprite.graphics.clear (); // Efface le rectangle pour qu'il soit prêt à être dessiné à nouveau. if (isMouseHeld) selectionRect.width = stage.mouseX - selectionRect.x; // Définit la largeur du rectangle. selectionRect.height = stage.mouseY - selectionRect.y; // Définit la hauteur du rectangle. selectionSprite.graphics.lineStyle (3, 0x3B5323, 0.6); // Définit la bordure du rectangle. selectionSprite.graphics.beginFill (0x458B00, 0.4); // Définit le remplissage et la transparence du rectangle. selectionSprite.graphics.drawRect (selectionRect.x, selectionRect.y, selectionRect.width, selectionRect.height); // Dessine le rectangle sur la scène! selectionSprite.graphics.endFill (); // Arrête de remplir le rectangle. CheckForSelection (); // Nous vérifierons si des unités ont été sélectionnées.
Comme vous pouvez le constater, nous avons ajouté une fonction appelée CheckForSelection (). Créons cette fonction après les autres:
fonction publique CheckForSelection (): void pour chaque (unité var: unité dans unitéList) // pour chaque unité figurant dans le tableau d'unités (liste)? if (unit.hitTestObject (selectionSprite)) // // Si selectionSprite touche l'unité. unit.select (); // Fait l'unité sélectionnée. else unit.deselect (); // désélectionne l'unité.
Comme vous pouvez le voir dans les lignes en surbrillance, le sélectionner() et désélectionner () les fonctions n'existent pas. Ouvrez «Unit.as» et plaçons-les dans:
package import flash.display.MovieClip; Classe publique Unit extension MovieClip public var isActive: Boolean; // Indique si l'unité est sélectionnée ou non. fonction publique Unit () isActive = false; // L'unité n'a pas encore été sélectionnée. gotoAndStop (1); // Aller à et rester sur la première image (pas de bague de sélection). fonction publique select (): void isActive = true; // L'unité est sélectionnée. gotoAndStop (2); // Montre la bague. fonction publique deselect (): void isActive = false; // L'unité n'est pas sélectionnée. gotoAndStop (1); // Ne montre pas la bague.
Lancer le jeu et tout devrait fonctionner!
Maintenant que vous avez terminé ce didacticiel avec succès, je dois maintenant relever quelques défis. N'hésitez pas à les ignorer, mais les suivre vous aidera à apprendre.
Débutant:
Intermédiaire:
Avancée:
Ne faites que les défis avec lesquels vous vous sentez à l'aise!
Merci d'avoir lu ce tutoriel et j'espère que vous avez appris quelque chose de nouveau. Je voudrais aussi remercier Tomas Banzas pour son art.!
Si vous avez terminé certains des défis et que vous souhaitez afficher les résultats, merci de poster un lien dans les commentaires - j'aimerais les voir.!
