Me contacter
Composant Text
Sommaire
Utilisation
Rappel : vous trouverez la liste complète des fonctions du composant dans la documentation du composant Text.
En tout premier lieu, il faut, bien entendu, créer le composant de la façon suivante :
local myText = Dina("Text")
La ligne de code ci-dessus permet de créer le composant sans lui affecter de texte.
Il est toutefois possible de créer le composant et de lui affecter, lors de sa création, un texte comme suit :
local myText = Dina("Text", "Hello World !")
Maintenant que le composant a été créé, nous allons changer le texte à afficher :
myText:setContent("Hello by Dina !")
Regardez bien cette ligne. Ne voyez-vous pas quelque chose qui est différent de d'habitude ?
Vous avez remarqué ? Non ? Ne vous en faites pas, je vais vous l'indiquer.
Cette ligne comporte un ":". Je ne vais pas rentrer dans les détails techniques mais cela évite simplement de transmettre l'élément (certains, moi y compris, diront "l'objet" mais cela risquerait de nous faire rentrer dans un long débat sans fin) en tant que paramètre de la fonction.
Avec un petit exemple, vous comprendrez mieux.
-- Reprenons la ligne précédente
myText:setContent("Hello by Dina !")
-- en Lua, la ligne suivante est identique à celle ci-dessus :
myText.setContent(myText, "Hello by Dina !")
Vous pouvez utiliser l'un ou l'autre des styles d'écritures, cela n'affectera pas le comportement du moteur Dina.
Voici le résultat que vous devriez avoir :
Le bas de l'image a été volontairement coupé pour afficher uniquement l'essentiel sur ce tutoriel.
Passons maintenant à la suite : mettre en forme notre texte.
Mise en forme du texte
La police de caractères (que je nommerais "font" à partir d'ici) définie par défaut sous Löve2D est un peu trop "banale" à mon goût. Voyons comment nous pourrions en changer.
J'ai utilisé une font disponible sur le site https://fonts.google.com. Vous pouvez utiliser n'importe quelle font tant qu'elle est de type TrueType. Löve2D accepte également les fonts BMFont; cependant, le moteur Dina ne les gère pas.
Dans les exemples ci-dessous, la font est présente dans le même répertoire que le fichier main.lua.
IMPORTANT : L'extension du fichier doit toujours être indiquée sinon une erreur est générée et le jeu s'arrête.
Pour changer de font, il vous suffit simplement de faire comme ceci :
myText:setFont("TurretRoad.ttf")
Cette ligne de code permet de définir la font à utiliser (TurretRoad.ttf) pour afficher le texte en utilisant la taille par défaut de Löve2D, à savoir 12pt.
On peut également, en plus du nom de la font, indiquer la taille à utiliser :
myText:setFont("TurretRoad.ttf", 20)
Si vous aviez défini votre font mais que vous vouliez uniquement changer la taille, cela est également possible :
myText:setFontSize(50)
Voici le résultat obtenu pour la font TurretRoad.ttf avec une taille de 50 :
Le bas de l'image a été volontairement coupé pour afficher uniquement l'essentiel sur ce tutoriel.
Après avoir défini une font et sa taille, on peut retrouver la hauteur et la largeur du texte (en pixels) à l'aide des fonctions suivantes :
-- Hauteur du texte
local hauteur = myText:getTextHeight()
-- Largeur du texte
local largeur = myText:getTextWidth()
La hauteur et la largeur sont déterminées en fonction de la font utilisée.
ATTENTION !
Il ne faut pas confondre les 2 fonctions ci-dessus avec les fonctions getWidth() et getHeight() qui donnent respectivement la hauteur et la largeur de la zone de texte.
Vous pouvez également récupérer la font d'un composant Text en appellant :
local myTextFont = myText:getFont()
Positionnement du texte
Par défaut, le texte est affiché aux coordonnées (0,0).
Rappel : la coordonnée (0,0) correspond au coin supérieur gauche de la fenêtre du jeu.
Avant de rentrer dans le code, je souhaiterais préciser un point qui n'est pas souvent abordé : le point d'origine pour afficher le texte.
Le point d'origine d'un texte est identique à celui d'une image, à la différence près qu'on ne peut pas le changer sous Löve2D : il se situe en haut et à gauche d'un rectangle englobant le texte en entier.
C'est la position de ce point qu'on doit changer pour aligner un texte au centre, à droite ou encore à gauche.
Maintenant que vous avez bien compris cela... Vous avez bien compris, n'est-ce pas ?
Bon, avec un petit dessin, ça devrait aller beaucoup mieux. 
Dans l'image ci-dessus, le rectangle gris correspond à l'espace occupé par le texte dans son ensemble.
Le point rouge correspond au point d'origine du texte : celui qui sert de référence pour dessiner le texte.
La ligne violette représente l'espace en pixels entre le point d'origine du texte et le haut de l'écran.
La ligne orange représente l'espace en pixels entre le point d'origine du texte et la gauche de l'écran.
Voici le code qui a permis de faire ce déplacement :
myText:setPosition(100, 50)
Simple, non ?
A l'aide de cette simple fonction et quelques calculs, vous pourriez être capable de réaliser ceci :
Effets sur le texte
Afficher du texte et le déplacer est réalisable à l'aide de Löve2D. Cependant, le moteur Dina apporte quelques nouvelles fonctionnalités :
- la possibilité de faire apparaître le texte au bout d'un certain temps.
- la possibilité d'afficher le texte durant un certain laps de temps.
- la possibilité de recommencer ce processus un certain nombre de fois.
Ces 3 éléments sont interreliés entre eux. Toutefois, selon les valeurs attribuées à chacun d'eux, vous pouvez les utiliser de manière autonome.
Théorie
Avant de complètement rentrer dans un cas concret, il y a encore une petite chose à vous préciser.
Il y a 3 états pour chacun de ces éléments :
- valeur < 0
- valeur = 0
- valeur > 0
Valeur < 0
Si la valeur d'un élément est inférieure à zéro, cela signifie que l'élément ne doit pas être pris en compte dans le traitement.
Si tous les éléments ont une valeur inférieure à zéro, alors le texte ne sera pas affiché.
Valeur = 0
Si le nombre de boucle (NbLoop) ou le délai d'affichage (DisplayTime) est à 0, le texte ne sera pas affiché.
Si le temps d'attente avant affichage (WaitingTime) vaut 0, le texte est immédiatement affiché.
Valeur > 0
Si le temps d'attente avant affichage (WaitingTime) est supérieur à 0, le texte sera affiché au bout de X secondes.
Si le délai d'affichage (DisplayTime) est supérieur à 0, le texte restera affiché pendant X secondes.
Si le nombre de boucle (NbLoop) est supérieur à 0, le temps d'attente et le délai d'affichage seront reproduit X fois.
Maintenant que nous en avons fini avec la théorie, passons à la pratique !
Pratique
Rajoutons cette ligne de code à la suite des autres dans la fonction love.load
myText:SetTimers(0.5, 2, -1)
Cette ligne indique que nous allons attendre 0.5 secondes avant d'afficher le texte pendant une durée de 2 secondes et que ce processus sera répété indéfiniment (-1).
Avant de pouvoir voir le résultat, il faut rajouter la ligne suivante dans la fonction love.update :
Dina:Update(dt)
Cette ligne permet de lancer les mises à jour de tous les composants, dont les différents timers de notre composant Text.
Voici le résultat :
Vous pouvez télécharger le code du tutoriel dans la partie Exemples