Affichage de texte à l'écran

    Publicités

Users Who Are Viewing This Thread (Total: 0, Members: 0, Guests: 0)

Superman

V
Ancien staff
Dec 2, 2009
2,489
0
596
Affichage de texte à l'écran





Sujet du cours : Afficher du texte à l'écran

Auteur du cours : XtreamLua
Difficulté : Accessible aux débutants







Afficher du texte à l'écran


Dans ce cours, nous allons commencer à afficher du texte sur l'écran. La fonction qui permet d'afficher des données sur une texture est :


Ce lien n'est pas visible, veuillez vous connecter pour l'afficher. Je m'inscris!
texture:print( position en abscisses, position en ordonnées, données à écrire sur la texture, couleur à utiliser)



Nous introduisons ici pour la première fois une fonction, une méthode pour être plus précis. Une fonction en programmation est une sorte de petite usine, on lui donne des matières premières et elle nous renvoie un produit fini. La méthode s'applique ici sur la surface texture qui est la surface sur laquelle on va écrire. Les informations que l'on trouve entre parenthèses sont appelées des arguments, ce sont les matières premières - les directives - que l'on donne à la fonction pour qu'elle nous renvoie le résultat que l'on souhaite. Cette fonction prends 4 arguments.


La fonction texture:print() s'utilise généralement sur la surface 'screen', qui est une surface définie par le Lua Player et qui correspond à l'écran de la PSP, la surface sur laquelle nous écrivons généralement.


Nous allons maintenant détailler les arguments de cette fonction :

  • Les deux premiers arguments sont la position à laquelle nous souhaitons écrire, en x et en y (la valeur donnée doit être en pixels). Vous devez savoir que la PSP possède un écran de 480 pixels de longueur et 272 pixels de hauteur (480*272 pour être plus rapide
    smiley-cool.gif
    ). Regardez cette image si vous ne comprenez toujours pas :

  • 'position en abscisses' est donc la la position en x de départ de l'écriture, 'position en ordonnées' étant la position en y.
  • Le troisième argument est la donnée à écrire a l'écran ; cela peut être du texte (encadré par des guillemets " "), une valeur, ou une variable contenant des données : ce seront alors les données qui seront affichées.
  • Le quatrième argument est la couleur d'écriture. Pour définir une couleur, vous devez utiliser la fonction Color.new(R,G,B) ( attention à la majuscule de "Color"). Cette fonction renvoie un code couleur en fonction du code RGB donné en paramètres. Qu'est-ce que le code RGB ? C'est simple, ce sont les quantités de rouge, vert et bleu ( Red, Green et Blue en anglais) comprises entre 0 et 255 ; par exemple, (255,0,0) est la couleur pour du rouge pur, (255,0,50) sera du rouge avec un peu de bleu. Pour trouver les codes RGB de vos couleurs, c'est facile :

Ouvrez Paint puis cliquez sur "Couleurs", ensuite sur "Modifier les couleurs", vous obtiendrez une fenêtre comme celle-ci :

Cliquez sur "Définir les couleurs personnalisées" ; voici la fenêtre que vous obtiendrez :

Sur cette fenêtre, j'ai sélectionné la couleur rouge comme dans mon exemple et vous pouvez constater en bas à droite qu'apparaît le code de ma couleur rouge.



Voilà, maintenant que tout est clair, on va afficher un texte à l'écran.

Ce lien n'est pas visible, veuillez vous connecter pour l'afficher. Je m'inscris!
screen:print(150,100,"Mon premier programme en lua par benja32", Color.new (255,0,0))




On affiche donc à une position x de 150, une position y de 100, la phrase : Mon premier programme en lua par benja32 en rouge.


Maintenant, nous devons ajouter la fonction screen.flip(). Cette fonction permet d'intervertir l'état des deux tampons.
smiley-surprised.gif
C'est un peu compliqué alors je vais essayer d'expliquer simplement : toutes les opérations d'affichage se font sur un écran virtuel et cette fonction (je parle de la fonction screen.flip()) permet de remplacer l'écran qui est actuellement affiché par l'écran virtuel. Conséquence directe : si vous n'appelez pas cette fonction, vous ne verrez rien à l'ecran ! On parvient donc à faire apparaître le texte à l'écran mais cela ne dure qu'une fraction de secondes. Pour afficher le texte en continue, nous allons utiliser ce que vous avons appris précédemment : une boucle !


Dans ce cas précis, nous alons utiliser une boucle while et, comme nous voulons afficher notre texte en continu, nous allons mettre true en condition. Nous allons aussi ajouter la fonction screen.waitVblankStart() juste avant le screen.flip() : cette fonction permet de vérifier que l'écran est bien prêt a être affiché. Dans le cas contraire, le programme attendra que cela soit le cas. On évite ainsi les effets de clignotement de l'écran ; n'oubliez donc pas cette fonction ! Et n'oubliez pas non plus le end qui fermera la boucle.


Assez parlé, place au code !

Ce lien n'est pas visible, veuillez vous connecter pour l'afficher. Je m'inscris!
while true do
screen:print(150,100,"Mon premier programme en lua par benja32", Color.new (255,0,0))
screen.waitVblankStart()
screen.flip()
end

Voici une image de ce que vous obtenez :







Exemples d'application


Ce n'était pas dur, si ?
smiley-smile.gif
Maintenant, nous allons voir qu'en combinant ce que vous avez appris précédemment et ce que nous venons juste d'apprendre, on peut déjà faire beaucoup de choses !


Utilisation de la boucle for et affichage d'un texte en conséquence :


Pour le coup, je vous donne directement le code et je l'expliquerai après ; essayez de le comprendre par vous-même avant de lire les explications.
smiley-wink.gif




Ce lien n'est pas visible, veuillez vous connecter pour l'afficher. Je m'inscris!
y = 1
while true do
for y = 1, 272 do
screen:clear()
screen:print(230,y,y,Color.new(255,255,255))
screen.waitVblankStart()
screen.flip()
end
for y = 272, 1, -1 do
screen:clear()
screen:print(230,y,y,Color.new(255,255,255))
screen.waitVblankStart()
screen.flip()
end
end




Ce code va afficher un nombre contenu dans une variable y, à une position y, en faisant varier y entre 1 et 272 (la taille de l'écran en ordonnées) ; la boucle while permet de recommencer constamment le code. La première boucle for augmente progressivement y, le nombre augmente, donc le nombre affiché descend. Il correspond à sa position en ordonnées. La seconde boucle fait l'inverse : le nombre y part de 272 et diminue jusqu'à atteindre la valeur 1.



Il y a aussi une fonction dont je vous ne vous avais pas encore parlé : screen:clear() efface l'écran avec la couleur passée en paramètre. Si aucun paramètre n'est donné, elle efface en noir. Vous pourrez vous passer de cette fonction lorsque vous saurez afficher une image de fond (dans le prochain cours) mais, en attendant, essayez pour voir ce que ça donne sans
smiley-innocent.gif



On peut même pousser le vice un peu plus loin en utilisant y pour faire varier la couleur, mais dans ce cas-là on va limiter nos boucles for pour qu'elles ne fassent pas dépasser y de 255 (la quantité maximum d'un composant d'une couleur).


Voici ce que cela va donner:


exemple1.png



Ce lien n'est pas visible, veuillez vous connecter pour l'afficher. Je m'inscris!
y = 1
while true do
for y = 1, 255 do
screen:clear()
screen:print(230,y,y,Color.new(y,255,255))
screen.waitVblankStart()
screen.flip()
end
for y = 255, 1, -1 do
screen:clear()
screen:print(230,y,y,Color.new(255,y,255))
screen.waitVblankStart()
screen.flip()
end
end


Ici y sert aussi à faire varier la couleur du texte car on l'utilise comme paramètre pour le composant rouge dans la première boucle et dans le composant vert pour le second. Si vous ne comprenez pas tous ces exemples, relisez bien les cours précédents, et n'hésitez pas à aller demander des explications sur le forum, il est normal que vous soyez un peu perdu au début, mais vous avez tous les outils pour comprendre ce code.
Imaginons maintenant que nous voulons ajouter du texte devant la variable, on va utiliser l'opérateur de concaténation .. (deux points) qui sert à rassembler plusieurs données en une chaîne de caractères. Dans notre cas on va faire :

Ce lien n'est pas visible, veuillez vous connecter pour l'afficher. Je m'inscris!
screen:print(230,y,"La valeur de y est de : " .. y,Color.new(y,255,255))



On aurait aussi pu ajouter du texte après :


Ce lien n'est pas visible, veuillez vous connecter pour l'afficher. Je m'inscris!
screen:print(230,y,La position de y est de : " ..
y .. "
pixels",Color.new(y,255,255))

Voilà pour la concaténation.




Autres opérations sur l'écran



Vous en voulez encore ? D'accord, alors accrochez-vous bien !
smiley-tongue-out.gif



Tant qu'à faire, nous allons apprendre une nouvelle fonction : screen:drawLine( X de départ, Y de départ, X d'arrivée, Y d'arrivée, couleur). Cette fonction va tracer une ligne de la couleur choisie entre un point de départ et un point d'arrivée, tous deux définis par leurs coordonnées respectives.


On va faire un petit programme avec deux lignes qui parcourent l'écran, une de haut en bas et une seconde de gauche à droite :

Ce lien n'est pas visible, veuillez vous connecter pour l'afficher. Je m'inscris!
y = 1
for y = 1, 480 do
screen:clear(Color.new(91,42,109))
screen:drawLine(0, y, 480, y, Color.new(44,5,59))
screen:drawLine(y, 0, y, 272, Color.new(44,5,59))
screen.waitVblankStart()
screen.flip()
end


Rien de nouveau ici, on trace juste les lignes ; on a également choisi une couleur pour le fond grâce aux arguments de screen:clear(). Testez ce code sur votre PSP.


exemple2.png


L'écran de la PSP n'étant pas carré, la ligne horizontale sort de l'écran bien avant la ligne verticale.
smiley-undecided.gif


Nous allons resoudre ce problème en un instant grâce a un peu de mathématiques :

Ce lien n'est pas visible, veuillez vous connecter pour l'afficher. Je m'inscris!
y = 1
for y = 1, 480 do
screen:clear(Color.new(91,42,109))
screen:drawLine(0,y*(screen:height()/screen:width()),480,y*(screen:height()/screen:width()),Color.new(44,5,59))
screen:drawLine(y,0,y,272,Color.new(44,5,59))
screen.waitVblankStart()
screen.flip()
end




texture:height() et texture:width() permette de récupérer respectivement la longueur et la largeur d'une texture, ici screen (donc 480 et 272). On multiplie ainsi y par la fraction 272/480, puisque c'est le rapport entre la longueur et la largeur (règles de proportionnalité).
Bon, ça marche, mais si comme moi vous avez une dent contre les maths, et bien on va essayer de faire autrement ! Je disais tout a l'heure : l'écran de la PSP n'est pas carré.
Qu'à cela ne tienne ! On va créer un autre écran, carré celui-ci (on ne laisse pas les maths nous pourrir la vie !
smiley-tongue-out.gif
).
Allez, c'est parti pour une nouvelle fonction ! Je vous présente Image.createEmpty(largeur, hauteur) qui sert à créer une surface. Par défaut, celle-ci est transparente. Dans notre cas, nous allons créer une surface carrée de 272 pixels de côté que nous allons enregistrer dans une variable nommée NewScreen.



Ce lien n'est pas visible, veuillez vous connecter pour l'afficher. Je m'inscris!
y = 1
NewScreen = Image.createEmpty(272,272)
for y = 1, 272 do
NewScreen:clear(Color.new(91,42,109))
NewScreen:drawLine(0,y,480,y,Color.new(44,5,59))
NewScreen:drawLine(y,0,y,272,Color.new(44,5,59))
screen:blit(104, 0, NewScreen)
screen.waitVblankStart()
screen.flip()
end




Comme vous le voyez, on effectue les opérations d'affichage/nettoyage sur NewScreen et on l'affiche lui-même sur screen grâce a la fonction Texture1:blit(Position X, Position Y, Texture2), qui permet de coller Texture2 sur Texture1 (ici NewScreen sur screen) à la position voulue. L'important est que nous ayons réussi à créer un écran virtuel carré. Vous remarquerez les positions x et y des fonctions d'affichage (ici drawLine() mais ça vaut pour les autres) mesurent à partir du coin supérieur gauche de la structure sur laquelle ils sont appliqués, et non le coin de l'écran. Voici un aperçu du résultat :


exemple2-3.png


La technique fonctionne, néanmoins il vaut peut être mieux utiliser un peu de maths, vu la surface perdue
smiley-innocent.gif




Exercices



Ne croyez pas que je vais vous laissez partir comme ça ! Pas question ! Je vous propose deux exercices faciles qui vont vous permettre de vérifier que vous avez tout compris :


Premier exercice :



Ce lien n'est pas visible, veuillez vous connecter pour l'afficher. Je m'inscris!
nombreX = 30
compteur = 0

i = 1
while (i ~= 100) do
nombreX = nombreX + i
if (nombreX > 200 and compteur == 0) then
compteur = i
end
i = i+1
end



Ajoutez à la fin du code une boucle où vous afficherez : "La dernière valeur de nombreX était : " suivie de la valeur contenue dans nombreX, et "nombreX a dépassé 200 au " la valeur de compteur "ème tour".


Deuxième exercice :



Ce lien n'est pas visible, veuillez vous connecter pour l'afficher. Je m'inscris!
y = 1
for y = 1, 480 do
screen:clear(Color.new(91, 42, 109))
screen:drawLine(0, y*(screen:height()/screen:width()), 480, y*(screen:height()/screen:width()),Color.new(44, 5, 59))
screen:drawLine(y, 0, y, 272, Color.new(44, 5, 59))
screen.waitVblankStart()
screen.flip()
end




Vous devez modifier ce code pour y ajouter le retour des lignes dans l'autre sens, et un autre petit détail qui permettra au programme de tourner en boucle (alterner le déplacement dans un sens, puis dans l'autre, et ce sans arrêt). Au travail !
smiley-tongue-out.gif



C'est fini pour aujourd'hui ! Si vous avez des difficultés avec l'exercice ou que quelque chose vous paraît flou dans le cours, n'hésitez pas à venir nous en faire part sur le forum !




SOURCE : Ce lien n'est pas visible, veuillez vous connecter pour l'afficher. Je m'inscris!