Version en ligne

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

Table des matières

Les text-sprites : le texte ne sert pas qu'à écrire...
Les text-sprites horizontaux
Les text-sprites verticaux
Mini TP: déplacement d'un "Space Invader"
Annexe : les tableaux
Et en bonus...

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

Les text-sprites horizontaux

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

Les text-sprites verticaux

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

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.

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 :

Image utilisateur

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.

Donut!

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

Les text-sprites verticaux

Les text-sprites horizontaux Mini TP: déplacement d'un "Space Invader"

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

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...

Image utilisateur

De plus près :

Image utilisateur

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 ?

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 :

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 pouvez encore améliorer ce code avec les autres caractères, on verra ça dans l'annexe.


Les text-sprites horizontaux Mini TP: déplacement d'un "Space Invader"

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

Les text-sprites verticaux Annexe : les tableaux

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.

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

Space Invader!

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

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 :

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


Les text-sprites verticaux Annexe : les tableaux

Annexe : les tableaux

Mini TP: déplacement d'un "Space Invader" Et en bonus...

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

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

Image utilisateurImage utilisateur

.

Image utilisateurImage utilisateur

Pt-On 3

Image utilisateurImage utilisateur

J

Image utilisateurImage utilisateur

+

Image utilisateurImage utilisateur

e

Image utilisateurImage utilisateur

Pt-On 2

Image utilisateurImage utilisateur

^

Image utilisateurImage utilisateur

1

Image utilisateurImage utilisateur

:

Image utilisateurImage utilisateur

°

Image utilisateurImage utilisateur

s

Image utilisateurImage utilisateur

(

Image utilisateurImage utilisateur

A

Image utilisateurImage utilisateur

?

Image utilisateurImage utilisateur

]

Image utilisateurImage utilisateur

²

Image utilisateurImage utilisateur

2

Image utilisateurImage utilisateur

i

Image utilisateurImage utilisateur

Y

Image utilisateurImage utilisateur

!

Image utilisateurImage utilisateur

Q

Image utilisateurImage utilisateur

[

Image utilisateurImage utilisateur

'

Image utilisateurImage utilisateur

X

Image utilisateurImage utilisateur

x

Image utilisateurImage utilisateur

û

Image utilisateurImage utilisateurImage utilisateurImage utilisateurImage utilisateurImage utilisateur

Î

Image utilisateurImage utilisateur

í

Image utilisateurImage utilisateurImage utilisateurImage utilisateurImage utilisateurImage utilisateur

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

Image utilisateur

et le caractère

Image utilisateur

sont disponible via le menu var: allez dans 5:Statistiques puis dans Test

Text-sprites verticaux

Caractère

Pixels

Caractère

Pixels

Caractère

Pixels

Caractère

Pixels

Caractère

Pixels

espace

0

:

00

.

10

'

000

(

010

)

100

N

101

[

110

L (listes)

111

-

0000

4

0010

0

0100

{

0110

F

1000

A

1010

}

1100

1

1110

°

00000

W

010100

*

001000

010000

Pour les text-sprites verticaux, c'est la même chose qu'avec les horizontaux : il manque des possibilités, mais c'est moins grave car on peut utiliser d'autres combinaisons.


Mini TP: déplacement d'un "Space Invader" Et en bonus...

Et en bonus...

Annexe : les tableaux

Vous ne voulez pas apprendre ces tableaux par cœur ? Eh bien mdr1 et moi vous avons concocté un programme qui retient le tableau des text-sprites horizontaux, et qui vous génère une chaîne de caractères correspondant à un dessin fait avec le Stylo !

Il faut juste que votre dessin soit créé tout en haut à gauche de l'écran.

:ClrHome
:" →Str1
:" .˖J+íe□^1: °s(A?]²2x√/x/û/i/YÎχ²X'!Q[→Str2
:Input "PIXELS: ",C
:For(Θ,0,C-1
:        DelVar B
:        For(A,0,4
:                B+2^(4-A)Pxl-Test(A,Θ→B
:        End
:        Str1+sub(Str2,B+1,1→Str1
:End
:sub(Str1,2,length(Str1)-1→Str1
:Disp Ans

Sachez aussi que le /i/ représente l'imaginaire (2nd + .) et le /x/ le caractère

Image utilisateur

.

Pour ceux qui ne veulent pas s'embêter à recopier le programme : Téléchargement du programme SPRITE.

Voila. Sur certaines calculatrices (ti-82,...) les I accentués ne fonctionneront peut-être pas. Il faudra alors les remplacer par des espaces, mais on perd des possibilités, ou les afficher dans la calculatrice grâce à la méthode de mdr1 donnée en commentaire.

Voilà, maintenant vous savez tout sur les text-sprites et leur utilité incontestable, dès lors que l'on souhaite faire des programmes utilisant l'écran graphique de manière un peu avancée, et que les objets et mouvements conviennent.


Annexe : les tableaux