Share
Deux fois par mois, nous revoyons certains des articles préférés de nos lecteurs dans l’histoire d’Activetuts +. Ce tutoriel a été publié pour la première fois en février 2010.
Dans ce didacticiel, vous allez créer une classe de score réutilisable qui compte jusqu'au nouveau total lorsque des points sont ajoutés (au lieu de sauter au nouveau score). Nous couvrirons la création graphique ainsi que le code.
Dans certains jeux, lorsque vous gagnez des points, votre score passe immédiatement au nouveau total. Je pense que c'est beaucoup plus cool si le score compte un par un, le joueur peut donc "accumuler des points". C'est ce que nous allons faire ici.
Voici un exemple de la classe de partition en action:
L'idée principale derrière ce didacticiel est de vous apprendre à programmer la fonctionnalité de "comptage", mais je vais également vous montrer comment créer l'écran à LED sympa présenté dans l'aperçu. Nous allons commencer par concevoir les nombres:
Créez un nouveau fichier Flash (ActionScript 3.0). Les paramètres de votre film varient en fonction de votre jeu. Pour cette démo, je configure mon film en 500x300, sur fond noir et à 30 images par seconde.
Créez un nouveau symbole de clip (Insertion> Nouveau symbole). Donnez à ce symbole le nom "digit".
À l'intérieur du clip numérique, utilisez l'outil Texte pour ajouter un chiffre 0 au symbole. J'utilise une police appelée Digital Readout, mais toute police de style LED devrait fonctionner.
Définissez la taille du texte sur 40 points et faites-en une couleur légèrement orange / orange (# F4C28B). Définir le format de paragraphe sur centré.
Ajoutez deux filtres de lueur distincts à votre champ de texte. Définissez la couleur sur rouge (# FF0000) pour les deux et définissez la force des deux sur 200%.
Cochez la case Inner Glow pour un et définissez le flou sur 2px. Laisser l'autre à 5px Blur.
Vous pouvez utiliser une couleur différente si vous le souhaitez (le bleu ou le vert auraient l'air cool). Le truc pour le rendre réaliste est de rendre la couleur du texte un peu délavée et de régler les lueurs sur une couleur plus saturée. Cela donne l'impression qu'il émet de la lumière.
Créez des images clés sur les images 1 à 10 du clip vidéo numérique. Une méthode simple consiste à sélectionner les images 1 à 10 (cliquez sur l’image 1, puis sur Maj et cliquez sur l’image 10) et appuyez sur F6..
Vous devriez maintenant avoir 10 images, chacune avec une image clé avec votre champ de texte brillant 0. Parcourez chaque image et modifiez les chiffres pour obtenir les chiffres de 0 à 9. L'image 1 aura "0", l'image 2 aura "1", l'image 3 aura "2", etc..
Nommez cette couche "nombres".
Nous allons maintenant ajouter un état "éteint" pour les numéros de voyants afin que vous puissiez voir les segments non éclairés de l'affichage à voyants.
Copiez vos 8 chiffres (image 9). Créez un nouveau calque nommé "background". Avec le nouveau calque sélectionné, utilisez Coller à la place (Edition> Coller à la place) pour coller le chiffre à la position exacte de celle que nous avons copiée..
Supprimez les nouvelles lueurs du nouveau chiffre 8 et changez sa couleur en gris foncé (# 333333). Ajoutez un filtre de flou avec le paramètre Flou défini sur 3 pixels. Déplacer ce calque sous le calque "numéros".
Maintenant, vous pouvez parcourir les cadres et voir comment les segments non éclairés de la LED apparaissent derrière chaque numéro..
Créez un autre nouveau calque nommé "actions". Ouvrez le panneau Actions et ajoutez une action stop () sur l'image 1..
Cela gardera l'affichage indiquant «0» jusqu'à ce que nous disions le contraire.
Pourquoi plaçons-nous manuellement chaque chiffre sur son propre cadre au lieu d'utiliser un champ de texte dynamique? Bonne question.
La raison principale en est que cela le rend plus flexible pour la mise à jour ultérieure des graphiques. Si vous voulez modifier la conception et utiliser des bitmaps pour les nombres, ou afficher chaque chiffre dans une police ou une couleur différente, cela est facile à faire..
En outre, si les concepteurs et les développeurs travaillent ensemble sur un projet, il est préférable de créer des éléments permettant aux concepteurs d’avoir facilement accès au plus grand nombre possible de graphiques..
Je pense que cette configuration fait plus que l'utilisation de texte dynamique.
Créez un nouveau clip intitulé "Score". Cochez 'Exporter pour ActionScript' et définissez le nom de la classe sur "Score" également.
Faites glisser le clip numérique de la bibliothèque dans le clip de partition. Dupliquez le clip de chiffres (Edition> Dupliquer) six fois (vous avez donc sept chiffres) et espacez-les uniformément.
Comme nous n’avons que sept chiffres, le score maximum que nous pourrons afficher est 9 999 999. Si votre jeu doit accueillir des scores plus élevés, ajoutez plus de chiffres en conséquence..
Ajoutez un peu plus d'espace entre chaque troisième chiffre pour permettre les séparateurs de virgule.
Sélectionnez le clip avec le chiffre le plus à gauche et donnez-lui le nom d'occurrence "digit1". Nommez le prochain à droite "digit2", puis "digit3" et ainsi de suite.
Créez un nouveau calque appelé "virgule".
Le moyen le plus simple d'obtenir une virgule identique à celle d'un nombre consiste à accéder à l'un des clips de chiffres et à copier l'un des champs de texte du numéro..
De retour dans le clip Scénario, collez le champ de texte dans le calque virgule et remplacez le nombre par une virgule. Dupliquez-le et déplacez-le autant de fois que nécessaire..
Pour l’arrière-plan de la partition, nous allons simplement ajouter un simple rectangle arrondi.
Créez un nouveau calque appelé "arrière-plan" et placez-le derrière les calques de chiffres et de virgules. Sélectionnez l'outil Rectangle et cliquez sur la scène tout en maintenant la touche Option enfoncée. Créez un rectangle de 200px x 40px avec des angles de 3px (faites-le plus long si vous avez plus de chiffres). Rendre le remplissage noir et le trait 1px gris (# 666666).
Pour une raison quelconque, Flash déforme toujours les traits sur des rectangles arrondis. Pour contourner ce problème, sélectionnez le trait et choisissez Modifier> Forme> Convertir les lignes en remplissages. Ceci convertit le trait d'une ligne en une forme remplie et ne déforme plus.
Si vous pensez qu'il s'agit d'une solution de contournement totale pour des fonctionnalités de base qui auraient dû être réparées il y a plusieurs années, je vous encourage à contacter Adobe et à le lui faire savoir..
Quel graphique serait complet sans quelque éclat iPhone-esque?
Créez un nouveau calque au-dessus de tout ce qui est appelé "briller". Ajoutez un nouveau rectangle arrondi, légèrement plus petit que celui de l’arrière-plan. Cette fois, ne lui donnez pas de trait et remplissez-le avec un dégradé de blanc allant de 20% Alpha à 0% Alpha..
Créez un nouveau fichier Actionscript nommé "Score.as". Enregistrez-le dans le même répertoire que votre fichier Flash principal. Le nom de cette classe et le nom de la classe d'exportation de notre clip Score étant identiques, Flash les liera automatiquement..
Ajoutez ce code au fichier Score.as:
package import flash.display.MovieClip; import flash.events.Event; public class Score étend MovieClip // CONSTRUCTOR fonction publique Score ()
Ceci est juste une coquille vide d'une classe pour le moment. Nous devons étendre la classe MovieClip car cette classe est liée à un clip de la bibliothèque. Nous devons donc également importer la classe MovieClip. Nous allons utiliser l'événement ENTER_FRAME, nous importons donc également la classe Event..
Ajoutez ces deux lignes à la classe Score juste au-dessus de la fonction constructeur.
privé const SPEED: int = 1; // combien de temps faut-il pour compter privé const NUM_DIGITS: int = 7; // combien de chiffres y a-t-il dans la partition
Ce sont deux constantes - un peu comme les paramètres de la classe.
Ajoutons maintenant quelques variables. Mettez ces juste en dessous des constantes:
var privé _totalScore: int = 0; private var _displayScore: int = 0;
Ces variables contiendront les deux versions différentes de notre score. "_totalScore" sera le score réel. "_displayScore" sera le numéro qui est actuellement
en cours d'affichage sur l'écran LED. Si j'ajoute 50 au score, le _totalScore sera immédiatement 50, mais le _displayScore sera 1, puis 2, puis 3, jusqu'à ce qu'il atteigne 50.
Si vous avez besoin de connaître le score réel (comme pour l'envoyer à votre tableau des meilleurs scores), vous utiliserez _totalScore, car _displayScore pourrait ne pas être précis..
J'utilise des traits de soulignement au début des noms de variables pour indiquer qu'il s'agit de variables privées.
Donc, si _totalScore est une variable privée, comment allons-nous accéder de l'extérieur de la classe Score? Nous allons utiliser une méthode "accesseur" ou "getter".
Ajoutez cette méthode sous la fonction constructeur:
// accesseur public pour la fonction publique totalScore get totalScore (): int return _totalScore;
Cette méthode renvoie simplement la valeur de la variable _totalScore. Cela nous donne un moyen d'accéder à cette valeur sans avoir à l'exposer comme une variable publique.
Nous aurons besoin d'un moyen d'ajouter des points au score. Ajoutez cette méthode:
// ajouter un montant au score fonction publique add (amount: int): void _totalScore + = amount; addEventListener (Event.ENTER_FRAME, updateScoreDisplay); // démarre l'affichage en comptant
Cette méthode accepte un "montant" entier qu'elle ajoute à la variable _totalScore. La deuxième ligne commence un événement ENTER_FRAME qui appelle une méthode appelée updateScoreDisplay à chaque image. Nous allons ajouter que la prochaine.
Ajoutez maintenant la méthode updateScoreDisplay. C’est là que se dérouleront toutes les fonctionnalités intéressantes de comptage. Il doit accepter un événement puisqu'il est appelé à partir d'un événement ENTER_FRAME..
// ceci exécute chaque image pour mettre à jour la fonction privée de score updateScoreDisplay (e: Event): void
Ajoutons maintenant quelques fonctionnalités. La première chose que cette méthode va faire est d’incrémenter la variable _displayScore du montant que nous avons défini dans notre constante SPEED:
// incrémente le score d'affichage du montant de la vitesse _displayScore + = SPEED;
Il y a un problème potentiel ici cependant. Et si notre vitesse est fixée à 10 et que nous essayons d’ajouter 5 au score? Le displayScore sera supérieur au totalScore. Ajoutons quelques lignes pour résoudre ce problème:
// assurez-vous que le score affiché n'est pas supérieur au score réel si (_displayScore> _totalScore) _displayScore = _totalScore;
Cela vérifie si displayScore est supérieur au totalScore et si tel est le cas, configure le displayScore pour qu'il soit égal à totalScore.
Ensuite, nous devons ajouter les zéros au score. Pour ce faire, nous allons convertir displayScore en String et ajouter des zéros jusqu'à ce que la longueur soit égale au nombre de chiffres définis par la constante NUM_DIGITS:
var scoreStr: String = String (_displayScore); // convertit displayScore sous forme de chaîne // ajoute des zéros non significatifs tandis que (scoreStr.length < NUM_DIGITS) scoreStr = "0" + scoreStr;
Maintenant, pour afficher la partition, nous allons parcourir chacun de nos clips numériques (rappelez-vous que nous avons nommé ensuite "digit1", "digit2", etc.) et utiliser le numéro correspondant dans la chaîne de partition pour définir le numéro de la agrafe:
// boucle et met à jour chaque chiffre pour (var i: int = 0; i < NUM_DIGITS; i ++) var num = int (scoreStr.charAt (i)); this ["digit" + (i + 1)]. gotoAndStop (num + 1); // définit le chiffre mc dans le cadre de droite
La méthode charAt récupère le caractère d'une chaîne à la position spécifiée. Cela nous permet d’avancer caractère par caractère dans la chaîne de partition.
Les crochets dans la ligne suivante nous permettent de créer dynamiquement le nom du clip. Le code, ce ["chiffre" + (i + 1)] accède au clip avec le nom "digit1" ou "digit2", etc., en fonction de la valeur de je.
Nous utilisons "num + 1" comme numéro d'image car les numéros d'image sont décalés de 1 par rapport aux chiffres qu'ils contiennent (l'image 1 indique 0, l'image 2, 1, etc.).
La dernière chose que nous devons faire dans cette méthode est de vérifier si le displayScore et le totalScore sont égaux. Si tel est le cas, nous pouvons supprimer le programme d'écoute et arrêter d'appeler cette méthode pour l'instant..
// si le score affiché est égal au score total, supprime l'événement enterframe if (_totalScore == _displayScore) removeEventListener (Event.ENTER_FRAME, updateScoreDisplay);
Si vous vous êtes perdu n'importe où dans cette étape, vous pouvez extraire les fichiers source pour voir la classe terminée..
Pour utiliser cette classe, faites glisser le clip Score de la bibliothèque sur la scène et attribuez-lui le nom d'instance "myScore". Vous pouvez ajouter des points à votre score en utilisant cette ligne dans votre classe de document:
myScore.add (50);
Vous pouvez voir un exemple de cela dans les fichiers source. J'ajoute au score lorsque l'on clique sur les boutons du pare-chocs, mais il est plus probable que vous appeliez add () lorsque des événements se produisent dans votre jeu..
Si vous avez besoin de connaître le score du joueur, vous pouvez obtenir le totalScore en utilisant:
myScore.totalScore
Cela appellera la méthode d'accès et renverra la valeur de _totalScore.
Vous avez maintenant une classe de score réutilisable que vous pouvez utiliser dans n’importe lequel de vos jeux..
Je pense que le look des LED est cool, mais vous devez absolument modifier le design pour l’adapter au look de votre jeu. Voici quelques idées de modèles différents pour vous aider à démarrer:
Merci d'avoir lu ce tutoriel. Laissez-moi savoir ce que vous pensez!
Accentsconagua