> Le Site du Zéro - Informatique

> Cours

> Tutoriels

> Programmation

> Calculatrices

> Ti

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

> Lecture du tutoriel

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

Par

Yomansz

Mise à jour : 20/06/2010

Difficulté : Facile Facile

34 visites depuis 7 jours, classé 716/786

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

...

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

Retour en haut

Sommaire du tutoriel :

Les text-sprites horizontaux
Les text-sprites verticaux
Mini TP: déplacement d'un "Space Invader"
Annexe : les tableaux
Et en bonus...
Q.C.M.

Retour en haut

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 :

Code : Autre

:"     "→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.

Retour en haut

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 ?

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

Secret (cliquez pour afficher)

Code : Autre

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

Retour en haut

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

Secret (cliquez pour afficher)

Code : Autre

:"(!²!(  "→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.

Retour en haut

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	Caractère	Caractère	Caractère	Caractère	Caractère	Caractère
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 Image utilisateur

et le caractère Image utilisateur

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

Text-sprites verticaux

Pour les text-sprites verticaux, j'utiliserai des 0 et des 1 : 1 pixel noir, 0 pixel blanc.

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.

Retour en haut

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.

Secret (cliquez pour afficher)

Code : Autre

: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

Si vous essayez de dessiner votre text-sprite, le programme ne marchera pas. En effet, le text-sprite est dessiné avec un pixel de marge par rapport au haut de l'écran. Changez alors A en A+1 dans le pxl-Test(, et cela fonctionnera.

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.

Retour en haut

Q.C.M.

Qu'est-ce qu'un text-sprite ?

Un dessin qu'on fait avec du texte.
Une manière particulière d'afficher du texte.
Une limonade goût texte.

Que va dessiner ce texte :

Code : Autre

"[[-[[  "

Un bonhomme.
Un H.
Des crochets et un tiret.

Qu'est-ce-qui ne va pas dans cette chaîne :

Code : Autre

"[XX::("

Elle fait plus de 5 caractères.
Il manque un espace à la fin (c'est pas joli !).
Ben quoi, elle est très bien cette chaîne !

Statistiques de réponses au QCM

Retour en haut

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.

Retour en haut

Retour en haut

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

Note moyenne : 3.27 / 4 (15 votes)

Pseudo	Commentaire
noelthebest	# Posté le 06/03/2011 à 18:45:53
N.N. Prod. Ville : Chamalières Pays : France métropolitaine	すごい！ほんとうにすばらしい！ Traduction : Super ! C'est vraiment bien ! Le TI-Concours commence le 1er février 2012 !!! xHTML/CSS : 90% \| C : 95% \| PHP/MySQL : 85 % \| TI-Basic z80 : 99% \| Axe : 65% \| Asm z80 : 25% Liens utiles : TI-Planet, Espace-TI Forum. Tutoriel hors-ligne en cours de finition : Utiliser le port de sa TI.
Yomansz	# Posté le 06/03/2011 à 20:33:07
Errare Humanum Est Avis : Très bon Ville : Vallauris Pays : France métropolitaine	Bah Merci... Je suis pas pro du chinois (ou jap?) sinon je te l'aurais traduit... Marc S., concepteur PHP/MySQL, (x)HTML/CSS, Javascript et Flash Langage C: progression 50% Langage C++: progression 30% (et TI-Basic à l'occasion ) Tutoriel sur les text-sprites en Ti-Basic
Claros	# Posté le 05/04/2011 à 19:24:01
Combien ai-je d'avatar ?	C'est un excellent cours ! Sinon cela serait possible que quelqu'un upload le programme de mdr1 ? Parce que je n'arrive pas à le recopier entièrement, j'ai tout le temps une erreur. Merci The cake is a lie !
Yomansz	# Posté le 05/04/2011 à 19:59:15
Errare Humanum Est Avis : Très bon Ville : Vallauris Pays : France métropolitaine	Je vais le faire, merci de la remarque. Marc S., concepteur PHP/MySQL, (x)HTML/CSS, Javascript et Flash Langage C: progression 50% Langage C++: progression 30% (et TI-Basic à l'occasion ) Tutoriel sur les text-sprites en Ti-Basic
guillaumessss	# Posté le 04/05/2011 à 13:51:55
	ou faut til marquer les code dite car sa me bloque