X - Les graphismes

Pour travailler l'ergonomie de nos programmes, nous avons exclusivement utilisé des caractères et la fonction Locate. Cependant, vous vous êtes certainement interrogés comment certains jeux avaient des graphismes très détaillés. En effet, il existe deux modes en Basic Casio : le mode texte et le mode graphique. Le mode graphique possède sa propre bibliothèque de fonctions que nous allons voir dans cette partie.

Les anciennes Graph 20/25 sont assez limitées pour les graphismes. Heureusement, la plupart des fonctions graphiques sont présentes dans la Graph 25+ PRO.

La fenêtre d'affichage

Comme pour les ordinateurs ou les téléphones portables, l'écran de la calculatrice possède une résolution. C'est aussi le cas pour les calculatrices graphiques Casio qui ont toutes la même résolution de 128*64 pixels, à l'exception des Fx-CG 10/20 avec leur 384*216 pixels.

En mode graphique, on peut définir la fenêtre d'affichage, alias ViewWindow ([SHIFT] + [F3] + [F1]), dont voici les paramètres usuels, le point origine [1;1] se situant en bas à gauche :

Effacer l'écran graphique

Ne dites rien, c'est ClrGraph !

C'est en partie vrai car ClrGraph efface bien l'écran graphique, mais réinitialise aussi la ViewWindow avec les paramètres d'origine. Ce n'est évidemment pas ce que l'on cherche.

On utilise de préfèrence Cls (« Clear Screen ») qui efface juste l'écran graphique. Je vous conseille ClrGraph avant d'arrêter le programme car l'utilisateur retrouve les paramètres par défaut et c'est beaucoup plus agréable pour lui.

Notez que ViewWindow efface lui aussi l'écran graphique.

Les principales fonctions graphiques

Afficher des points

Il y a deux familles de fonctions pour afficher des points. Elles se trouvent dans le menu « Sktch » ou « Sketch » [SHIFT] + [F4] (avec la Graph 100, faites [CTRL] + [F4]).

• Plot : dépend du ViewWindow, l'origine se trouve en bas à gauche. Les coordonnées sont : X,Y
• Pxl : ne dépend pas du ViewWindow. L'origine se trouve en haut à gauche. Les coordonnées sont inversées : Y,X (Casio qui complique inutilement la programmation <3).

Elles sont ensuite complétées par un suffixe :

• « On » : allume le pixel (PlotOn et PxlOn)
• « Off » : éteint le pixel (PlotOff et PxlOff)
• « Chg » : inverse l'état du pixel (PlotChg et PxlChg)

Afficher des lignes

Pour tracer des lignes, vous avez :

• F-Line X1,Y1,X2,Y2 : Trace une ligne entre les points (X1;Y1) et (X2;Y2)
• Horizontal Y : trace une ligne horizontale d'ordonnée Y
• Vertical X : trace une ligne verticale d'abscisse X

Modifier le style des traits

Certaines fonctions permettent de prédéfinir le style des traits :

• SketchNormal : continu (1 pixel)
• SketchThick : continu large (2 pixels)
• SketchBroken : pointillés lages (2 pixels)
• SketchDot : pointillés fins (1 pixel)
• SketchThin, Fx-CG 10/20 uniquement : continu fin, 1 pixel (ajoutez +1 pixel aux valeurs précédentes)

Elles se placent avec les fonctions graphiques.

Par défaut, la calculatrice affiche en « SketchNormal ».

Afficher du texte en mode graphique

Jusqu'à maintenant, nous avons vu comment afficher du texte avec des Locate. Toutefois, les caractères sont écrits en gros et on ne dispose pas d'un grande précision dans le positionnement du texte. En mode graphique, vous avez l'ensemble de l'écran grâce à la fonction Text. Text se comporte comme les fonctions Pxl (PxlOn...), elle ne dépend pas du ViewWindow et son origine est en haut à gauche.

Sur calculatrices monochromes, la plupart des caractères font 4 pixels de large et 6 pixels de haut, sauf K, M, N, Q et W dont la largeur est de 6 pixels. Text distingue à l'affichage les lettres majuscules des lettres minuscules. Cependant, certains caractères spéciaux ne sont gérés.

Sur les nouvelles calculatrices couleurs (Fx-CG 10 et 20), Les lettres majuscules font 12 pixels de large et 14 pixels de haut, et les lettres minuscules ne font que 11 pixels de large (mais font toujours 14 pixels de haut). De plus, grâce à une meilleure précision des caractères, davantage de caractères spéciaux sont gérés en mode graphique.

J'ai écris une longue phrase, mais elle dépasse l'écran et ne s'affiche donc pas entièrement. N'y a-t-il pas de retour automatique à la ligne avec Text ?

En effet, il faut expliciter le retour à la ligne, comme avec Locate. Vous remarquerez que dans l'exemple ci-dessus, c'est ce qu'on a du faire pour afficher les minuscules sous les majuscules.

Fonctions bonus

Stocker des images

Reconnaissons que la vitesse d'affichage des images n'est pas le point fort de nos chères calculatrices. Heureusement, on peut stocker les images pour s'en servir plus tard.

StoPict enregistre l'image actuellement affichée à l'écran. La fonction est suivie d'une nombre entre 1 et 20 (entre 1 et 6 pour les anciens modèles).

Pour afficher une image enregistrée, on utilise RclPict suivie du nombre correspondant. Ces deux fonctions se trouvent dans [OPTN] puis cherchez l'onglet (PICT).

J'ai codé une petite carte sur lequel un bonhomme se déplacent, mais le clignotement dû à Cls est assez désagréable. J'ai fait au plus simple, donc je ne gère pas encore les collisions avec mes obstacles sur la carte. Comment puis-je atténuer ce clignotement ?

Très bonne initiative ! J'y réponds tout de suite.

La fonction BG-Pict définit une image enregitrée (Picture) comme fond d'écran (« BG » = « background » = « fond d'écran »). BG-Pict remplace le combo Cls + RclPict, et s'exécute plus rapidement. BG-Pict se trouve dans le menu (SETUP) [SHIFT] + [MENU] puis cherchez l'onglet (BACK).

Pour ne plus définir une image comme fond d'écran, utilisez BG-None. N'oubliez pas de placer BG-None à la fin du programme. En effet, l'image continuera de s'afficher en fond, y compris dans le menu GRAPH quand le personne tracera les courbes de fonctions. Pas très agréable, non ?

Compresser les Pictures (Graph 35+ USB/75/85/95 SD uniquement)

Ceux qui ont déjà programmé avec des langages plus bas niveau, tels que le C, doivent se dire que 2048 octets pour une image monochrome de 8192 pixels sont trop élevés. L'utilitaire Picture 1024 réduit la taille utilisée par vos images stockées. Lisez attentivement la description du programme. Par exemple, Clonelab utilise cette technique pour créer un effet de défilement, visible dans cette vidéo.

Egayer vos dessins avec les couleurs (Fx-CG 10/20 uniquement)

Les Graph 65 et 80 affichent jusqu'à 3 couleurs : rouge, vert et bleu. Pour les anciennes Graph 35, grâce à Blues 35, elle affiche trois niveaux de bleus.

Cette partie est avant tout dédiée aux Fx-CG 10/20, qui peuvent afficher 7 couleurs en Basic Casio : noir, bleu, rouge, magenta, vert, cyan et jaune (8 en comptant le blanc).

Les fonctions de couleur sont à placer avec les fonctions graphiques. Elles se trouvent dans le menu (Format) : [SHIFT] + [5] + [1].

Le tracé statistique (DrawStat)

Le DrawStat, ou tracé statistique, consiste à stocker dans des listes les données des lignes et de points afin de tracer des images avec une vitesse d'exécution bien supérieure par rapport aux fonctions graphiques classiques. Je vous renvoie vers deux tutoriels, ils sont très bien écrits et expliquent les bases du DrawStat :

• Le DrawStat (version video)
• Le Super Drawstat, encore plus rapide, mais limité aux lignes seulement

Pour vous convaincre de la puissance du DrawStat et de sa version Super sur les F-Line, cette courte vidéo est sans concession sur les écarts de performance :

Ne sentez-vous pas monter en vous cette envie de créer de jeux dotés de merveilleux graphismes ?

Ce cours est mis à disposition selon les termes de la Licence Creative Commons Attribution - Pas d’Utilisation Commerciale - Partage dans les Mêmes Conditions 3.0 France.