• Facile
Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Introduction du cours

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

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

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 :

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

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 :

  • 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 !

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

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.

Et en bonus...

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.

Exemple de certificat de réussite
Exemple de certificat de réussite