Share
Dans ce tutoriel, nous allons créer un système de texte similaire à ce que vous voyez dans beaucoup de jeux de rôle. Notre classe affichera dynamiquement une icône pour les caractères au fur et à mesure qu'ils parlent et tapera chaque bloc de texte lettre par lettre..
Voici un exemple du système de texte que nous allons créer:
Créez un nouveau fichier Flash (Actionscript 3). Les paramètres de votre film varient en fonction de votre jeu. Pour cette démo, je configure mon film en 500x300, avec un fond noir et 30 images par seconde.
Vous montrerez probablement le module de texte sur une image ou une animation de votre jeu. Pour cette démo, je me sers simplement d'une image que j'ai jeté avec quelques-uns des personnages de mes jeux debout dans un champ de neige.
Placez votre image de fond sur un calque appelé "fond".
Créez un nouveau MovieClip sur la scène (Insertion> MovieClip) nommé "RPGText".
Dans les propriétés du symbole, cochez la case "Exporter pour Actionscript" et définissez le nom de la classe sur "RPGText". Nous utiliserons ce nom de classe ultérieurement pour lier le code à ce MovieClip.
Cliquez sur OK. Si vous voyez ici un avertissement indiquant que la définition de la classe n'a pas pu être trouvée, c'est correct. Cela signifie simplement qu'il n'y a pas encore de code permettant de créer un lien vers ce symbole..
Donnez à votre MovieClip le nom d’instance "rpgText". Rappelez-vous, quand je parle de "RPGText" (majuscule), je parle de la classe (ou de MovieClip); "rpgText" (minuscule) est le nom d'un exemple de cette classe.
Dessine un rectangle dans ton nouveau RPGText MovieClip. Ce sera le fond pour les icônes de caractère et la bulle de dialogue. Concevez-le comme vous le souhaitez, mais il doit couvrir toute la largeur de votre film et être suffisamment court pour ne pas couvrir trop de votre jeu..
J'ai fait le mien 500px large (pour correspondre à mon film) et 100px haut. Je l'ai rempli avec un dégradé de # 666666 à # 999999 (gris foncé à gris clair).
Conseil rapide: pour dessiner un rectangle d'une taille spécifique, sélectionnez l'outil Rectangle et maintenez la touche Alt enfoncée tout en cliquant sur la scène. Vous obtiendrez une boîte de dialogue dans laquelle vous pourrez entrer les dimensions de votre rectangle..
Créer un nouveau calque dans le RPGText MovieClip appelé "icône". Créez un nouveau MovieClip sur ce calque appelé "characterIcon" et donnez-lui le nom d'occurrence "characterIcon".
À l'intérieur de characterIcon MovieClip crée deux nouveaux calques: "icônes" et "étiquettes". La couche d'icônes contiendra toutes les icônes de votre personnage (chacune sur sa propre image clé) et la couche d'étiquettes contiendra des étiquettes d'image que nous utiliserons pour afficher les caractères au bon moment..
Importez (ou dessinez en Flash) une icône pour chacun des personnages de votre jeu qui va parler. Pour cette démo, j'ai créé un fichier JPG de 75 x 75 pixels pour chacun de mes personnages. Ajouter les icônes au des icônes couche, créant une nouvelle image clé pour chaque personnage. L'ordre dans lequel elles apparaissent n'est pas important, mais assurez-vous que chaque icône est placée à x: 0, y: 0 afin qu'elles ne semblent pas sauter pour changer de personnage.
Créez maintenant une nouvelle image clé sur chaque image de votre Étiquettes couche. Un moyen rapide de le faire est de sélectionner toutes les images et d'appuyer sur F6..
Sélectionnez chaque image clé d'étiquette une par une et ajoutez une étiquette d'image qui correspond au nom du caractère qui apparaît dans cette image. Si vous ajoutez quelques images vides (F5) entre vos images clés, cela facilitera la lecture des étiquettes, assurez-vous que votre Étiquettes les images clés restent alignées avec votre des icônes images clés.
Assurez-vous que chacune de vos étiquettes a un nom unique. Si vous avez deux caractères portant le même nom, vous devrez les différencier ("John_L" et "John_K" par exemple)..
Retourner à la RPGText MovieClip et créez un nouveau calque appelé "textBackground".
Dessine une bulle. J'ai dessiné une simple bulle avec des coins carrés, mais vous pouvez donner à la vôtre ce que vous voulez. Faites-le assez grand pour qu'il remplisse la majeure partie du rectangle d'arrière-plan et se place bien à côté des icônes de votre personnage..
Sélectionnez votre bulle et convertissez-la en MovieClip (Modifier> Convertir en symbole). Maintenant que c'est un MovieClip, nous pouvons ajouter un filtre d'ombre portée. Je règle le mien en noir, 50% de force, 5 pixels de flou et 1 pixel de distance.
Créer un nouveau calque dans le RPGText MovieClip appelé "texte". Utilisez l'outil de texte pour dessiner une zone de texte. Adaptez-le juste à l'intérieur des bords du graphique de la bulle de dialogue.
Faites-en un champ de texte dynamique multiligne portant le nom d'occurrence "txt". N'oubliez pas d'intégrer la police si vous n'utilisez pas de texte système. J'utilise Courrier 13pt.
Nous avons besoin d'un moyen pour que le joueur passe au bloc de texte suivant lorsqu'il a fini de lire. Ajoutons un petit bouton "suivant" dans le coin.
Créer un nouveau calque dans le RPGText MovieClip a appelé "bouton". Ajoutez un nouveau symbole de bouton appelé "b_next". Concevez les quatre états de votre bouton comme bon vous semble. J'ai utilisé une petite flèche vers le bas comme symbole du bouton parce que je le vois dans beaucoup de jeux et je suppose que les joueurs le connaissent bien..
Placez votre bouton dans le coin inférieur droit au-dessus de votre bulle de dialogue. Ne vous inquiétez pas pour lui donner un nom d'instance. Je vais expliquer pourquoi plus tard.
Créez un nouveau fichier Actionscript appelé "Main.as" et ajoutez ce code pour créer le shell vide pour la classe:
package import flash.display.MovieClip; classe publique Main étend MovieClip // CONSTRUCTOR fonction publique Main ()
Définissez Main en tant que classe de document dans votre fichier Flash. Si vous souhaitez un rappel rapide sur l'utilisation d'une classe Document, ce conseil rapide de Michael Williams est l'une des meilleures explications que j'ai vues..
Si vous utilisez ceci dans un jeu, vous choisirez probablement de le mettre ailleurs, mais pour le moment nous l'ajouterons à la classe de document. Ajoutez ce code à la fonction constructeur dans le Principale classe:
var textBlocks: Array = new Array (["Kid", "Regardez, un robot!"], ["Abe", "BLEEP-BLOOP. Je suis un ingénieur en botanique autonome. Vous pouvez m'appeler ABE."], [" Kid "," Bonjour Abe. Rencontrez Frosty le bonhomme de neige. "], [" Frosty "," Joyeux anniversaire! "], [" Abe "," BEEP-BIP. Bonjour, Frosty. "], [" Abe "," Cette grenouille vous appartient-elle? "], [" Grenouille "," Ribbit ... "], [" Enfant "," Non, je ne l'ai jamais vu auparavant. N'êtes-vous pas une grenouille froide? "], [" Grenouille " , "Ribbit…"]); rpgText.textBlocks = textBlocks;
Ici, nous créons un tableau à deux dimensions (un tableau qui contient d'autres tableaux) pour contenir le script de notre scène. Avant de changer quoi que ce soit, regardez comment il est structuré. Chaque tableau est un bloc de texte séparé contenant deux éléments. Le premier est le nom du personnage et le second est le texte qu'il va parler. Les blocs de texte sont répertoriés dans l'ordre dans lequel ils apparaîtront dans la scène..
La dernière ligne envoie simplement le textBlocks tableau à la rpgText MovieClip (rappelez-vous que "rpgText" est le nom de l'instance du RPGText MovieClip sur la scène). Plus sur cela plus tard.
Allez-y et modifiez cette section pour l'adapter à votre scène. Faites très attention à ce que les noms de caractères correspondent exactement aux noms que vous avez utilisés pour les étiquettes d'image dans characterIcon MovieClip.
Nous sommes enfin prêts à écrire le code de la classe RPGText.
Créez un nouveau fichier Actionscript nommé "RPGText.as" et ajoutez ce code:
package import flash.events.Event; import flash.events.MouseEvent; import flash.display.MovieClip; import flash.media.Sound; Classe publique RPGText étend MovieClip private const SPEAKER: int = 0; const privé TEXT: int = 1; private var _currentTextBlockIndex: int = 0; private var _currentTextBlock: String; private var _textBlocks: Array; // fonction publique CONSTRUCTOR RPGText ()
Ceci est juste un shell de base pour la classe. Il ne fait rien encore, mais regardons ce qu'il y a là:
(Remarque: j'utilise le trait de soulignement dans mes noms de variables pour indiquer les variables privées.)
Depuis notre _textBlocks la variable est privée, nous aurons besoin d'un moyen d'accéder à cette variable à partir de la Principale classe où nous mettons en place les blocs de texte. Nous ferons cela en créant une fonction "setter". Ajoutez ceci à la classe RPGText juste en dessous de la fonction constructeur:
ensemble de fonctions public textBlocks (txt: Array): void _textBlocks = txt;
La chose intéressante à propos des setters dans Flash est que nous pouvons accéder à cette fonction comme s’il s’agissait d’une propriété publique de la classe RPGText. C’est exactement ce que nous avons fait à la ligne 21 de la classe principale à l’étape 11:
rpgText.textBlocks = textBlocks;
Ajoutez cette fonction à la classe RPGText:
fonction privée updateText (e: Event): void if (txt.text.length < _currentTextBlock.length) txt.text = _currentTextBlock.substr(0, txt.text.length+1); else removeEventListener(Event.ENTER_FRAME, updateText); fillText();
C’est la fonctionnalité principale de la classe, où se déroule la saisie lettre par lettre. Regardons de plus près ce qui se passe ici:
Ajoutez cette fonction à la classe RPGText:
fonction privée fillText (e: MouseEvent = null): void txt.text = _currentTextBlock; si (_currentTextBlockIndex < _textBlocks.length-1) addEventListener(MouseEvent.CLICK, nextTextBlock);
Le but principal de cette fonction est de remplir le SMS champ de texte avec le texte de la _currentTextBlock (ligne 37). Si nous laissons l'animation jouer, le updateText la fonction devrait s’occuper de cela, mais il est bon de s’assurer que tout se passe bien. Nous pouvons également relier cette fonction à notre bouton "Suivant" pour permettre aux joueurs de sauter l'animation du texte et de remplir immédiatement le champ de texte avec le bloc de texte entier..
Notez que cette fonction accepte un MouseEvent en tant qu'argument, mais nous définissons sa valeur par défaut sur null. Cela nous permet d'utiliser cette fonction avec un écouteur MouseEvent, car il acceptera l'événement. Puisque nous donnons à l'événement une valeur par défaut, nous pouvons également appeler la fonction sans envoyer d'événement comme nous le faisons à la fin de la procédure. updateText une fonction.
Après avoir rempli le champ de texte, nous vérifions s’il s’agit du dernier bloc de texte du tableau (si le _currentBlockIndex est inférieur au nombre d'éléments dans le _textBlock tableau). Sinon, nous ajoutons un écouteur CLICK pour déclencher une fonction appelée nextTextBlock que nous écrirons ensuite.
Rappelez-vous quand nous avons créé le bouton "Suivant" et que j'ai dit de ne pas m'inquiéter de lui donner un nom d'instance? Avez-vous remarqué dans la dernière étape comment nous avons attaché l'auditeur CLICK à l'intégralité de RPGText MovieClip au lieu du bouton? Cela permet au joueur de cliquer n'importe où sur le MovieClip pour faire avancer le texte. Nous n'avons même pas vraiment besoin du bouton, mais j'aime bien en insérer un, de sorte qu'il y a une indication que vous cliquez pour faire avancer le texte..
Bien sûr, ceci est juste une de mes préférences personnelles. Si vous le souhaitez, vous pouvez attribuer un nom d'occurrence au bouton et associer le programme d'écoute CLICK au bouton. Je trouve que la plus grande zone touchée est plus facile à utiliser.
De retour aux affaires. Ajoutez cette fonction à la classe RPGText:
fonction privée nextTextBlock (e: MouseEvent): void removeEventListener (MouseEvent.CLICK, nextTextBlock); txt.text = ""; // efface le texte _currentTextBlockIndex ++; _currentTextBlock = _textBlocks [_currentTextBlockIndex] [TEXT]; // définir le texte characterIcon.gotoAndStop (_textBlocks [_currentTextBlockIndex] [SPEAKER]); // définit l'icône du caractère addEventListener (Event.ENTER_FRAME, updateText); // commence à mettre à jour le texte addEventListener (MouseEvent.CLICK, fillText);
Les trois premières lignes sont assez simples. Supprimez l'écouteur MouseEvent, effacez le champ de texte et incrémentez le _currentTextBlockIndex var pour pointer vers le prochain bloc de texte.
La ligne 47 utilise le TEXTE constante pour obtenir la chaîne de texte en cours de la _textBlocks tableau et l'assigner à _currentTextBlock.
Ensuite, nous utilisons le ORATEUR constante pour obtenir le nom du personnage. Puisque les noms des personnages correspondent aux étiquettes des images de notre characterIcon MovieClip nous pouvons utiliser gotoAndStop envoyer le characterIcon MovieClip à l'image qui affiche cette icône de personnage.
Enfin, nous ajoutons un écouteur d’événement pour commencer à taper sur la nouvelle chaîne de texte, puis ajoutons un écouteur CLICK à exécuter. fillText quand on clique sur le MovieClip.
Nous avons presque terminé, nous avons juste besoin d'ajouter une fonction qui va tout commencer. Nous ferons cela avec une fonction publique appelée "startText". Comme il s’agit d’une fonction publique, plaçons-la près du sommet de la classe RPGText, juste en dessous de la textBlocks setter:
fonction publique startText (): void _currentTextBlock = _textBlocks [_currentTextBlockIndex] [TEXT]; characterIcon.gotoAndStop (_textBlocks [_currentTextBlockIndex] [SPEAKER]); addEventListener (Event.ENTER_FRAME, updateText); addEventListener (MouseEvent.CLICK, fillText);
Semble familier? Ce code fait presque exactement la même chose que le nextTextBlock une fonction. Il définit le texte actuel et l'icône de caractère, et ajoute les écouteurs d'événement pour updateText et fillText. Étant donné que cette fonction n’exécute que lorsque le texte commence pour la première fois, nous n’avons pas à nous soucier de vider le champ de texte ou d’incrémenter le texte. _currentTextBlockIndex comme nous l'avons fait dans nextTextBlock.
Nous avons maintenant un moyen accessible au public pour commencer le texte. Mettons-le à utiliser.
Ajoutez cette ligne au bas de la fonction constructeur de la classe Main:
rpgText.startText ();
Ceci appelle simplement la fonction startText à l'intérieur de la classe RPGText. Cela devrait tout faire.
Vous devriez pouvoir tester votre film maintenant et tout voir fonctionner. Il ne manque cependant qu'une chose: le son.
Recherchez (ou créez) un son à jouer pendant la frappe du texte. Lorsque vous choisissez un son, maintenez-le très court, car ce son sera répété à mesure que le texte est saisi. Un petit "boop" ou un clic de bouton donne les meilleurs résultats pour cet effet..
Importez le son dans la bibliothèque de votre fichier Flash, cochez la case "Exporter pour Actionscript" et donnez-lui le nom de classe "TypingSound".
Pour que ce son soit joué, il suffit d'ajouter deux lignes à la classe RPGText. Nous devons d’abord instancier le son. Ajoutez cette ligne en haut de la classe sous les trois autres variables privées:
private var _typingSound: Sound = new TypingSound ();
Passez maintenant à la fonction updateText et ajoutez une ligne qui jouera le son chaque fois que le texte sera mis à jour (la ligne 38 est nouvelle):
fonction privée updateText (e: Event): void if (txt.text.length < _currentTextBlock.length) txt.text = _currentTextBlock.substr(0, txt.text.length+1); _typingSound.play(); else removeEventListener(Event.ENTER_FRAME, updateText); fillText();
Voilà pour la démo. Tout devrait fonctionner à ce stade, mais si vous souhaitez l'intégrer dans un jeu, vous avez encore du travail devant vous..
Premièrement, selon la configuration de votre jeu, vous souhaiterez probablement extraire les blocs de texte de la classe de document. Vous pouvez utiliser une classe Scene pour configurer les conversations individuelles de votre jeu ou une classe Strings contenant tout le texte de chaque conversation..
Deuxièmement, vous voudrez penser à quand et comment le module de texte apparaîtra dans votre jeu. Vous voudrez peut-être ajouter une animation d'interpolation qui la fera glisser vers le bas lorsque la conversation commencera et se terminera. Vous voudrez également être à l'écoute une fois la conversation terminée, pour masquer le module de texte ou pour lancer la conversation suivante..
Comme nous vérifions déjà si le dernier bloc de texte a été atteint dans la liste fillText fonction, vous pouvez facilement ajouter quelque chose qui gère la fin de la conversation.
Je n'inclus pas ces sujets dans le didacticiel, car la façon dont vous allez procéder va être très spécifique à votre jeu. Cela devrait être suffisant pour bien commencer.
J'espère que tu l'a aimé! Postez un commentaire et laissez-moi savoir ce que vous pensez.
Accentsconagua