Share
Dans ce petit conseil, vous apprendrez à créer un système de points simple pouvant être étendu à vos propres jeux. Ce didacticiel s’adresse aux débutants. Vous y apprendrez comment créer un ensemble de boutons sur lesquels le joueur peut cliquer pour ajouter ou soustraire des points à son score. Simple!
Bien que ce tutoriel s'adresse aux débutants en programmation Flash, vous devez en savoir un peu plus sur l'utilisation des outils de dessin de Flash Professional. Si vous devez apprendre à utiliser les outils de dessin, lisez cet article..
Jetons un coup d'œil au résultat final sur lequel nous allons travailler:
Ouvrez Flash et créez un nouveau document Flash. Définissez Taille du document sur 550x400px, FPS (images par seconde) sur 24 et définissez la classe de document sur Principale.
Pour créer les graphiques, utilisez l'outil Ovale pour créer quatre cercles avec un contour # 000000 (Noir) et une taille de trait de 12,50..
Chaque cercle doit avoir une couleur de remplissage différente. Les couleurs de remplissage sont les suivantes:
Après avoir créé les pièces, utilisez des zones de texte statiques pour écrire leurs valeurs respectives comme indiqué dans l'image ci-dessus. La police que je vais utiliser tout au long de ce didacticiel est Futura LT Heavy, d’une taille de 50, mais n'hésitez pas à utiliser vos propres polices. Après avoir terminé les instructions, vous devriez avoir une pièce de 10, 50 pièces, 100 pièces et une pièce de -30..
Nous allons maintenant convertir chaque pièce en un MovieClip. Sélectionnez la pièce 10 et appuyez sur F8. Vous devriez voir un dialogue comme celui-ci:
Répétez cette étape pour les pièces de 50, 100 et de -30 et entrez les informations suivantes sous les zones Nom et Classe pour chaque pièce:
Une fois que vous avez créé des MovieClips à partir de toutes les pièces, sélectionnez-les tous et supprimez-les de la scène. Nous les rajouterons plus tard, en utilisant du code.
Pour terminer cette étape, créez une zone de texte statique avec le texte "SCORE:" et positionnez-la avec une valeur X de 135 et une valeur Y de 327..
Dans cette étape, nous allons configurer notre paquet et la classe principale.
Créer une nouvelle classe ActionScript et sous le type Nom de la classe Principale. Une fois que vous avez créé la classe, enregistrez-la dans le même dossier que votre fichier Flash et assurez-vous qu’elle est bien enregistrée. Main.as.
Entrez le code ci-dessous dans votre fichier Main.as, puis enregistrez-le..
Accentsconagua
package // importe les classes nécessaires import flash.display.MovieClip import flash.events.MouseEvent; import flash.text.TextField; import flash.text.TextFormat; import flash.text.TextFieldType; import flash.events.Event; Classe publique Main étend MovieClip var tenCoin: TenCoin = new TenCoin (); // Crée une nouvelle instance de la dix pièces. Var fiveCoin: FiftyCoin = new FiftyCoin (); // Crée une nouvelle instance du Fifty Coin var centCoin: HundredCoin = new HundredCoin (); // Crée une nouvelle instance de la pièce de cent cents var badCoin: BadCoin = new BadCoin (); // Crée une nouvelle instance de -30 Coin var score: Number = 0; // met le score à zéro var scoreText: TextField = new TextField (); // Crée un champ de texte pour afficher le score var scoreTextFormat: TextFormat = new TextFormat ("Futura LT Heavy", 50, 0x000000); // Crée un nouveau format pour Score textfield, remplacez "Futura LT Heavy" par la police utilisée par la fonction publique main () displayObjects (); // La fonction que nous allons utiliser pour afficher tout le graphique sur la scène setUpEventListeners (); // La fonction que nous allons utiliser pour ajouter nos écouteurs d'événement Nous importons d’abord les classes dont nous avons besoin, puis nous définissons notre classe de documents. Nous étendons ensuite la classe principale de MovieClip; nous pourrions utiliser Sprite, mais cela n'a pas vraiment d'importance. Ensuite, nous déclarons les variables que nous utilisons et ajoutons du code à notre Principale() fonction (notre "fonction constructeur").
le Principale() Cette fonction affichera toutes les pièces que nous avons créées sur la scène et ajoutera également les écouteurs d’événement que nous devons utiliser..
Remarque: Vous devrez incorporer la police dans votre fichier FLA pour pouvoir l'afficher dans des champs de texte dynamiques si la police n'est pas installée sur votre utilisateur. Je n'ai pas fait ça ici, pour garder les choses simples.
displayObjects () Une fonctionle displayObjects () La fonction est appelée depuis le Principale() une fonction. Le but de cette fonction est d’ajouter les pièces et la zone de texte du score à la scène et de les positionner à leur emplacement approprié.
function displayObjects () // Définit la position du Ten Coin tenCoin.x = 72; tenCoin.y = 200; // Définit la position de la Cinquante Pièce cinquanteCoin.x = 207; cinquanteCoin.y = 200; // Définit la position de la centaine de cent centCoin.x = 342; centCoin.y = 200; // Définit la position du -Thirty Coin badCoin.x = 477; badCoin.y = 200; // Positionne la zone de texte de la partition et définit son type sur dynamique afin qu'il puisse être modifié via le code scoreText.type = TextFieldType.DYNAMIC; scoreText.x = 305; scoreText.y = 327; scoreText.width = 300; // Définit le format de la zone de texte partition scoreText.defaultTextFormat = scoreTextFormat; // Ajoute tout à la scène addChild (tenCoin); addChild (cinquanteCoin); addChild (centCoin); addChild (badCoin); addChild (scoreText);
setUpEventListeners () Fonction et les gestionnaires d'événementsMaintenant que nous avons ajouté des objets à la scène, nous devons créer des fonctions de gestionnaire d'événements déclenchées lorsque vous cliquez sur les pièces. Nous aurons également besoin d'un updateScore () fonction à utiliser pour que le score soit mis à jour et ne reste pas le même.
function setUpEventListeners () // Change tous nos MovieClips en boutons tenCoin.buttonMode = true; cinquanteCoin.buttonMode = true; centCoin.buttonMode = true; badCoin.buttonMode = true; // Ajoute les écouteurs d'événement pour ajouter des points à la partition tenCoin.addEventListener (MouseEvent.CLICK, addTenPoints); cinquanteCoin.addEventListener (MouseEvent.CLICK, addFiftyPoints); centCoin.addEventListener (MouseEvent.CLICK, addHundredPoints); badCoin.addEventListener (MouseEvent.CLICK, removeThirtyPoints); // Ajoute la fonction de mise à jour pour mettre à jour la partition stage.addEventListener (Event.ENTER_FRAME, updateScore);
Maintenant, nous devons coder les fonctions qui changent et mettre à jour le score.
fonction addTenPoints (evt: MouseEvent) score + = 10; // Ajoute 10 points au score function addFiftyPoints (evt: MouseEvent) score + = 50; // Ajoute 50 points au score function addHundredPoints (evt: MouseEvent) score + = 100; // Ajoute 100 points au score function removeThirtyPoints (evt: MouseEvent) score - = 30; // Soustrait 30 points du score // Cette instruction if ne permet pas au score de descendre sous zéro si (score < 10) score -= score; function updateScore(evt:Event) scoreText.text = String(score); //This converts the score variable from a number to a string, because our score textbox can only display strings //Closes the class //Closes the package
Votre code est maintenant prêt pour le test. Appuyez sur CTRL + Entrée (CMD + Entrée sur un Mac) et regardez votre système de points prendre vie.!
Maintenant, vous pensez peut-être: "J'ai perdu mon temps, tout ce tutoriel m'a appris à faire, c'était de créer des boutons qui vous donneraient des points lorsque vous cliquez dessus" - mais vous en avez appris plus.
Regardez cela comme la base d'un système de points plus avancé. Vous avez appris à utiliser + = et - = pour ajouter ou soustraire un nombre, à utiliser les écouteurs d'événement, à créer une fonction pour mettre à jour des objets pendant l'exécution du fichier SWF et à changer un nombre. en une chaîne et l'afficher dans une zone de texte dynamique créée entièrement à l'aide de code!
Ce système de points peut facilement être étendu à vos propres jeux. Pour ceux d'entre vous qui sont plus expérimentés chez Flash, essayez de créer un jeu qui utilise une fonction hitTestObject et ajoute des points lorsque vous frappez un objet..
J'espère que vous avez appris quelque chose de nouveau aujourd'hui. Merci d'avoir lu!
