Les text-sprites : le texte ne sert pas qu'à écrire...

Introduction du cours

Il est préférable d'avoir lu le tuto sur l'écran graphique de myst6re avant de suivre ce tutoriel.

Aujourd'hui, on va apprendre un aspect du dessin en Ti-basic assez difficile à comprendre au premier abord, mais qui se révèle d'une simplicité et d'une utilité non négligeables : les text-sprites.

Mais c'est quoi, un text-sprite ? Une boisson gazeuse sous forme de texte ?

Ben euh... Pas tout à fait. En fait, le mot sprite est utilisé pour désigner une image qui peut être déplacée par rapport au fond de l'écran (source wikipédia).

On va prendre un exemple pratique : vous voulez dessiner un petit personnage à déplacer dans un jeu. Mais comment allez-vous faire ? Utiliser une image ? Non, on ne peut pas la déplacer (et puis une image pour 5*5 pixels... :-° 757o de gâchés). Utiliser des pt-on ? 25 lignes de code pour un petit truc de 5*5 pixels, ça fait encore plein d'octets gâchés (et je parle pas de la lenteur...).
Eh bien oui, comment allez-vous faire ? Vous vous en doutiez, on va utiliser les text-sprites.

On peut faire ça en Ti-basic ? Bien entendu, et en utilisant du texte...

o_O ...

Cela semble assez bizarre en effet, mais on est là pour apprendre, non ? Alors amis zéros, à vos caltos !

Les text-sprites horizontaux

Bon, maintenant que vous savez ce qu'est un text-sprite, vous allez apprendre qu'il en existe de deux types : horizontaux et verticaux. Mais pour l'instant, on va seulement s'intéresser au text-sprites horizontaux. Ils ne sont pas plus faciles, mais il faut bien commencer quelque part ;) .

Tout d'abord, il va vous falloir une calculatrice... Mais ça, vous le saviez déjà.

Ensuite, créez un programme appelé "SPRITE".
Vous y placerez ce code :

:"     "→Str1 :ClrDraw :For(I,1,length(Str1)-1    :        Text(0,I,sub(Str1,I,1 :End

Pour les versions françaises :
Str1 → Chaîne1
ClrDraw → EffDessin
length → longueur
sub → sous-chaîne

Si vous vous y connaissez déjà un peu en Ti-basic, vous savez que length( renvoie la longueur de la chaîne Str1 et que sub( crée une sous-chaîne à partir du caractère I de la chaîne Str1, et dont la taille est de un caractère.

On pourrait utiliser n'importe quelle chaîne, mais j'utiliserai Str1 dans ce cours.

Bon, alors, que fait ce programme ? Il place une suite de 5 espaces dans la chaîne Str1, puis efface le dessin. Ensuite il affiche les caractères de la chaîne les uns après les autres, à un pixel d'écart.

J'ai testé, mais il fait rien, ton programme !

C'est normal : il affiche des espaces sur un fond blanc. Remplacez les espaces par d'autres caractères, par exemple des [ . Vous verrez 4 rangées de 5 pixels noirs, et un de ces crochets, le tout accolé. Rajoutez un espace à la fin de Str1 dans le programme: vous verrez un carré de 5*5 pixels noirs en haut à gauche de l'écran.

Comme vous avez pu le deviner, chaque caractère fait 5 pixels de haut.
En fait, ce qui nous intéresse est la rangée de pixels la plus à gauche du caractère: pour le crochet de tout à l'heure, ces 5 pixels sont noirs, mais pour une parenthèse ( par exemple, ce seront les 3 pixels du milieu qui seront noirs. Vous trouverez un tableau de correspondance en annexe. On peut donc afficher quasiment ce que l'on veut qui fasse 5 pixels de haut par X pixels de large.

Je sais pas si je suis très clair, prenons exemple sur A :

On voit bien que les 4 pixels les plus en bas sont noirs, et que le plus haut est blanc.

Bon, on va faire un exemple : vous voulez dessiner un... donut. Rentrez donc "([X[(aa" dans la chaîne Str1. Lancez le programme et oh! un donut apparaît en haut à gauche de l'écran ! Comment est-ce possible ? Mettez un Pause dans votre programme, juste avant le End. Vous verrez les caractères s'afficher les uns après les autres.

Vous pouvez donc vous amuser à composer toutes sortes de petits sprites. Pensez à mettre à la fin de chaque chaîne un nombre suffisant d'espaces pour effacer les pixels en trop.

Vous voulez un Pacman? "([[X] "
Après pour d'éventuels jeux, il ne vous reste plus qu'à faire déplacer vos sprites...

Dans la deuxième partie de ce tuto, nous allons voir comment faire des text-sprites verticaux.

Les text-sprites verticaux

Dans la précédente partie, vous avez vu les text-sprites horizontaux... Attaquons nous aux verticaux !

Mais à quoi ça sert, si on a déjà les horizontaux ?

Comme je vous l'ai dit, les text-sprites horizontaux ne peuvent faire des dessins que de X*5 pixels. Et si on veut en faire des plus hauts ? Et bien les text-sprites verticaux sont là pour ça !

Tout d'abord, il faut que vous sachiez que les text-sprites verticaux se font de bas en haut. Pourquoi ? C'est bien plus pratique, comme vous pourrez le voir.

Mais puisque vous connaissez déjà le principe, let's go! On va faire un petit Pacman de 9*10 pixels...

De plus près :

Comment va-t-on faire ? Regardez la dernière ligne : 2 blancs, 6 noirs, 1 blanc.
Vous avez déjà deviné que les blancs seront chacun des espaces. Mais les autres ?

1 blanc → espace
1 noir et un blanc → .
2 noirs et un blanc → [
3 noirs → le petit L de liste (trouvable dans le menu liste)

Ce sont les seuls nécessaires, un tableau plus complet sera disponible dans l'annexe.

Les L que j'utilise sont en fait le L des listes.

Donc, pour faire la dernière ligne, on écrira : " LL ".

Mais comment va-t-on l'écrire ? Un For( comme tout à l'heure ?
Malheureusement non. On devra tout écrire à la suite... Mais c'est toujours moins lourd qu'une image.

Faites donc un autre programme, appelez-le comme vous voulez, et placez-y le code suivant...

Mais attendez, vous croyez que je vais vous donner le code, comme ça ? o_O Essayez de trouver tous seuls. Ce que je peux vous dire :

• Il faut mettre ClrDraw au début (EffDessin)

• C'est sous la forme :
  :Text(10,1," LL "
  :Text(9,1,...

Voilà...

:ClrDraw :Text(10,1,"  LL " :Text(9,1," LL[ " :Text(8,1,"LL[ " :Text(7,1,"LL.  " :Text(6,1,"LL    " :Text(5,1,"LL    " :Text(4,1,"L  [  " :Text(3,1,"L  L  " :Text(2,1," LL[" :Text(1,1,"  LL " :Text(0,1,"         "

Vous n'êtes pas obligés de mettre les espaces à la fin des chaînes, si vous êtes sûrs que l'écran est vide à cet endroit. Seuls les espaces de la dernière ligne sont nécessaires pour effacer ce qu'il reste du sprite.

Vous pouvez encore améliorer ce code avec les autres caractères, on verra ça dans l'annexe.

Mini TP: déplacement d'un "Space Invader"Le sujet

Bon, alors,maintenant que nous avons appris comment faire des text-sprites, vous allez les déplacer ! Bon, on va faire un text-sprite horizontal, parce que les text-sprites verticaux sont trop longs à afficher.

Je dois avouer que même les text-sprites horizontaux sont assez longs à afficher s'ils sont nombreux. Après c'est à vous de choisir si vous souhaitez en mettre ou pas. Mais pour un jeu genre dames, échecs, bataille navale... C'est le top.

Bon, voilà ce à quoi votre Space Invader va ressembler :

A vous de trouver comment l'afficher, le déplacer... il faut juste que vous sachiez deux-trois trucs avant de commencer :

• Vous mettrez les coordonnées du sprite dans une variable ;

• L’abscisse sera augmentée de 5 à chaque fois ;

• L’ordonnée augmentera de 5 à chaque fin de ligne et l’abscisse sera remise à 0 ;

• Vous utiliserez une boucle pour assurer le mouvement.

Voilà, c'est tout ce dont vous avez besoin pour commencer !

La correction:"(!²!(  "→Str1 :DelVar A :DelVar B :ClrDraw :While 1 :For(I,1,length(Str1)-1 :sub(Str1,I,1 :Text(B,I+A,Ans :End :For(I,0,75 :End :Text(B,A,"     " :A+5→A :If A=85 :Then :DelVar A :B+5→B :End :End

Quelques explications :

• Le While 1 sert à créer une boucle infinie, comme ça notre vaisseau se déplace bien ;

• Les DelVar se trouvent dans le menu prgm et s'appellent en français EffVar ;

• Le For(I,0,75 sert à ralentir un peu le déplacement, histoire que ça ne soit pas trop rapide.

Bon, voilà, maintenant vous pouvez déplacer vos sprites !

Pour les text-sprites verticaux, c'est sensiblement la même chose.

Annexe : les tableaux

Vous aimeriez bien avoir les tableaux des différents caractères et leur portion de text-sprite correspondant ? Les voici...

Text-sprites horizontaux

Tout d'abord, sachez qu'il y a 32 possibilités pour les text-sprites horizontaux.

Caractère

Pixels

Caractère

Pixels

Caractère

Pixels

Caractère

Pixels

Caractère

Pixels

Caractère

Pixels

Caractère

Pixels

espace

.

Pt-On 3

J

+

e

Pt-On 2

^

1

:

°

s

(

A

?

]

²

2

i

Y

!

Q

[

'

X

x

û

Î

í

Comme vous pouvez le voir, il manque une possibilité : il n'y a tout simplement pas de caractère correspondant.
Les caractères avec accent se trouvent dans le menu Caractères du catalogue, en appuyant sur la touche correspondant à l'accent (de F1 à F4) puis en écrivant la lettre. Appuyez deux fois sur Alpha pour des caractères en minuscules. Malheureusement, ils ne sont pas disponibles pour les Ti-82. Toutefois, on peut les avoir en plaçant des fonctions dans la chaîne (qui commencent par la lettre correspondante). Le caractère x ne s'obtient qu'avec la fonction x √ .
Les caractères Pt-On sont ceux que vous pouvez obtenir avec cette fonction : vous les trouverez dans le catalogue. Le caractère

et le caractère

...