Afficher un texte lettre par lettre et en image

Afficher un texte lettre par lettre et en image

Ajouté le dimanche 3 novembre 2013 par Miss Click
  • Auteur du tutorial: Monos

Afficher les dialogues lettre par lettre, et en image monsieur !


Télécharger l'archive avec un exe et un mfa (et non pas un mma xd, voir à la fin du tuto) 

Bonjour mes amis. Un joli programme. Afficher des dialogues dans votre jeu, avec affichage lettre par lettre et en image, tout ça sans extension externe du logiciel. La technique que je vais vous donner est compatible sur TGF2,MMF2, et ClickTeam Fusion 2,5.

Notons aussi que ceci est un exemple. Il se peut qu'il y ait des actions en plus que requise, nous pouvons encore optimiser le nombre de lignes, mais le but n'est pas là. Le but est de vous donner des idées pour procéder et arriver à votre but ! Vous aurez le loisirs bien plus tard de faire le reste par vous même et pourquoi pas de trouver de meilleur moyen pour arriver au résultat. 

C'est difficile d'afficher des dialogues dans MMF2 et encore plus difficile de le faire lettre par lettre, alors si en plus tu fais ça en image !
Meuh non mon petit clikeur, ce n'est pas difficile du tout. Tu vas même apprendre à jouer avec les chaines. 

Bon : clique sur l'exe présent dans la package. Tape un truc dans la boîte d'édition. (Tu as le droit d'utiliser des lettres et des espaces, pas de chiffre, ni des lettre accentué, ni de ponctuation, j'ai fais simple !) Clique sur OK et regarde ce qui se passe ! Magie Magie, vos idées ont du génie. Cool non ? Imagine un peu ce que tu peux faire avec ça ! Des belles introductions. Des dialogues de RPG, et j'en passe.

Un mot de vocabulaire. J'utilise le mot "caractère" pour désigner une lettre, un espace, un chiffre, une ponctuation. Il se peux aussi que j'utilise tout simplement le mot lettre !

Bon ouvre le MFA, et regarde ce qu'il y a dedans. La boîte d'édition. Un Active FontPicture, Deux boutons "OK et Reset", et un Active que j'ai nommé Variable.

Le Font Picture.

C'est un objet active qui permet de mémoriser nos lettres, chiffres, ponctuations... 
Dans cette exemples les images 1 à 26 sont nos lettre de l'alphabet en majuscule. (A=1, C=3,Z=26) Elles sont classées de 1 à 26 en image. (Mais notons que dans le langage MMF2 c'est de 0 à 25, oué MMF compte à partir de 0. C'est important ça pour plus tard)

Variable

Un objet active va servir de mémorisation de Variable. Vous pouvez utiliser un tableau, les variables globales, des compteurs... Peux importe, moi j'aime bien les actives pour ce rôle, voyons voir ce qu'il a dans le ventre au niveau des variables pré-mémorisées.

-pX = 30 et pY=200
Ce sont les coordonnées ou se vont s'afficher le premiers caractères X et Y. J'ai décidé de poser ça à X = 30 et Y =100 (en pixel bien sûr pour cette exemple.)

-Curseur
Ah Ah. Cette valeur représente le positionnement d'un curseur virtuel dans une phrase pour pointer un caractère.
Exemple dans la phrase : ''Je Suis Beau''
Si le curseur = 0 alors il cible le ''J''
Si le curseur = 4 il cible le le ''U''. Attention les espaces comptent.
-NB caractere
Cette valeur va mémoriser le nombre de caractères présent dans la phrase du dialogue à afficher. Il va être utile dans cette exemple pour savoir si l'affichage est terminé ou pas.

-Dialogue
Bon ben là, c'est le Dialogue que nous allons afficher. 

-CaractereAfficherDialogue
Je vous parlais du curseur tout à l'heure. Ici sera mémorisé le caractère du curseur. Et c'est ce caractère qui devra être affiché.

Nous avons fini la partie Variable.
Passons aux choses sérieuses.

Bon alors on mémorise le texte pour le travailler !

Oué, pour ce tuto c'est vous qui allez écrire le texte dans la boite d'édition.
Et un bouton ok. Que ce passe-t'il si nous utilisons le bouton ok ?
Deux choses importantes. 
1 : Nous allons envoyer le texte dans la variable dialogue (Dans cette exemple j'ai converti les minuscules en majuscule)
2 : Nous allons compter le nombre de caractères du texte 
Pour le 2, nous allons utiliser une fonction qui est utile.
''LEN'' Une fonction qui existe dans les langage de programmation et dans MMF2. Si si dans l’éditeur d’expression, objet spécial, Chaîne, longueur d'une chaîne.
Aller, on mémorise ça dans NB caractere et le tour est joué.

Qu'elle est le caractère à afficher?

Bon voyons voir. Si le NB caratere est >0 alors c'est qu'il y a un truc à afficher.
Le curseur est à 0. Donc il est au début. A bah c'est partie ! On va voir ce qu'il y a afficher.
Pour ça nous allons utiliser une fonction qui encore une fois existe en programmation. La fonction MID$, elle permet d'afficher un nombre de caractères à partir d'une chaîne et à partir d'une position.
Toujours là ou il y avait la fonction LEN, Extraire la sous-chaîne du milieu.
Vous avez ça :

Mid$(>Entrer une chaîne<, >Entrer le premier caractère<, >Entrer le nombre de caractères<)
Entrer une Chaîne : Nous allons chercher le contenu de la variable Dialogue. Là ou la phrase existe.

Entrez le premier caractère : C'est l'endroit ou le curseur va se positionner pour le top départ !
Donc la valeur du curseur tout simplement. Au début c'est 0. Et après ça va être 1, ensuite 2 et après... Bon vous avez compris.

Entrez le nombre de caractères : C'est tout simplement le nombre de caractères à mémoriser à partir du curseur. Là dans notre exemple c'est 1 seul. Car on va afficher une seule lettre à la fois.

Voilà, la variable contient la lettre à afficher du dialogue, nous n'avons plus qu'à incrémenter le compteur curseur pour le prochain passage pour la nouvelle lettre (ou autre) et on lance une boucle pour cette fois-ci, travailler sur son affichage.

Pourquoi le Tous les 00''10 ? 
C'est la fréquence d'affichage de la lettre. Tous les 10eme de secondes nous allons lancer le caractère à afficher. Vous pouvez varier bien entendu.

Bon, c'est quand que tu affiches ta lettre ?

Maintenant !

Une condition : si la boucle Lettre est active, on va tester si la variable caracterreafficherdialogue est différente d'un espace.
<>'' ''
Attention à bien mettre un espace entre les '' ''
Maintenant, on crée un nouveau objet FontPicture en dehors de la scène. Facile, c'est dans création de nouvel objet. La chose sérieuse se passe maintenant. Afficher la bonne lettre !

Chercher une chaîne dans une chaîne

Décidément vous êtes chanceux dans ce tuto, vous voyez des choses pour travailler avec les chaines. Encore une fonction propre à la programmation qui est présente dans MMF. La commande FIND. Elle va permettre de sortir une valeur qui correspond à la place d'une chaîne recherchée dans une autre. Ok du petit chinois.

Exemple concret, je recherche la lettre "a" dans le phrase "La chope". La valeur est 1. (2e lettre)
Et je veux un "p" ? (la valeur est 6 attention les espaces comptent tout comme les majuscules et minuscules).

Find(>Entrer la chaîne dans laquelle regarder<, >Entrer la chaîne à rechercher<, >Entrer le premier caractère<)

Voici ce que nous donnes l'éditeur d'expression.
Entrer la Chaîne dans laquelle regarder : Et dans notre exemple j'ai marqué :
ABCDEFGHIJKLMNOPQRSTUVWZYZ
Donc la recherche va se faire ici. Vous allez comprendre pourquoi tout se suite. 

Entrer la chaîne à regarder : On va choisir le contenu de la variable caractereafficherdialogue.

Entrer le premier caractère : 0, car on va chercher au début de la chaine.

Donc si je recherche la lettre ''G'' ? j'ai droit à la valeur 6.

Mais à quoi bon ça va me servir ? Nous allons nous servir de ce nombre pour afficher une image contenue dans l'active FontPicture ! et dans notre exemple le 6 c'est un "G"
Donc le ABCDEFGHIJKLMNOPQRSTUVWZYZ, il doit être exactement dans le même ordre que l'ordre des images dans l'objet active FontPicture.
Ceci nous évite de faire 26 conditions pour les lettres majuscules, 26 conditions pour les minuscules, 10 conditions pour les chiffres, et x conditions pour la ponctuation. Et les accents ? Et j'en passe. Là : En une condition.

Maintenant on fixe l'objet FontPicture en fonctions de la valeur pX et pY. Simple comme bonjour et on ajoute (dans mon exemple) 8 à pX pour savoir ou afficher le prochain caractère.

Et un espace, comment on fait ça ?

C'est simple, pendant une boucle, si la variable = '' ''. On affiche rien, on ajoute seulement 8px à pX.

Attention 8 c'est ce que j'ai choisis ! A vous de voir suivant ce que vous voulez bien entendu.

Et aller à la ligne?

On arrive pratiquement à la fin ! 
Alors là c'est très dur. (Je rigole !)

Toujours dans la fameuse boucle nous allons tester la valeur de pX. (Dans mon exemple 30+( 20*8 ) 30 valeur de départ, 20 le nombre de lettres, 8 la taille d'un espace de lettre. J'ai décomposé le calcul pour le tutos.)
Si ça arrive à une certaine valeur, on change le pX par ça valeur de départ et on ajoute une nouvelle valeur dans pY. (12 dans mon exemple)

Et le bouton reset ?

Voilà, là c'est la fin, c'est pour simuler un nouveau dialogue, on remet à 0 les variables, le pX etpY à sa valeur de départ, et on détruit les FontPicures.

Fin !

Voilà, c'est la fin du tuto. Vous avez la base de la base maintenant. A vous de travailler pour pouvoir mémoriser les dialogues, passer d'une phrase affichée à une autre, et tout le toin-toin ! 

Monos avec la correction de patrice que je remercie beaucoup !