Le Tuto Du Mercredi [TDM] est une idée qui fut proposée par Ne0tux. Le principe est simple : nous écrivons et postons TOUS les Mercredis des tutoriels sur l'Utilisation de la calculatrice, le Transfert, les Graphismes, la Programmation, ou encore la Conception de jeu.

Aujourd'hui, nous attaquons sur l'espace graphique sur Calculatrice monochrome !

Niveau ★ ★ ☆ ☆ ☆
Tags : Basic Casio, Jeux, Graphique, Monochrome

L'utilisation graphique peut-être très utile pour diverses chose, et dans l'utilisation d'un programme, elle rajoute du charme ainsi que de la beauté !

Partie I : Les graphiques ?

Vous devez certainement connaitre le mode graphique de nos calculatrice. Celui qui permet de faire des belles courbes et ainsi vérifier divers calcul.
Ce même mode est parfois capricieux, et suite à l'utilisation de divers programmes, vous avez peut être déjà eu quelques problèmes.

Voila pourquoi il y a divers paramètres.
Pour y accéder, allez dans la calculatrice et recherchez le mode "GRAPH". Une fois dedans, vous pouvez voir les graphs que vous avez en mémoire.

Ici, nous avons une bête équation simple.

Cliquez sur cette équation, et vous devriez arriver sur le fameux écran graphique !
A partir de là, vous pouvez avoir différents souci :

1- Vous ne voyez pas la courbe.
Dans ce cas là, c'est un problème de "vue" (non non ce n'est pas un jeu de mot). Pour résoudre ce petit problème, appuyez sur +

Vous devez être dans un sous-menu qui ressemble à ceci :


Appuyez simplement sur pour remettre les paramètres par défaut !
Une fois réglé, validez simplement en appuyant sur EXE.

Vous pouvez aussi avoir un autre problème : Vous ne voyez plus les axes !
Ce problème arrive souvent lors de l'utilisation d'un programme qui utilise le mode graphique (je vous en parle plus tard). Votre courbe ressemble alors à quelque chose comme ça :

Rien de bien compliqué heureusement ! Pour régler ce petit problème, appuyez sur + puis descendez tout en bas vers :

et mettez le paramètre Axes à On () !

D'autres petit problèmes peuvent arriver, voilà donc pour vous une configuration basique sans problèmes !

Bon ! Assez parlé des paramètres ! Si vous voulez en savoir plus, rendez vous sûr ce magnifique tutoriel : Utilisation mode Graphique

Ici on est là pour parler des utilisations en programmation ! Voila donc notre partie 2 !

Partie II : Le mode graphique en programme

Dans un programme, la beauté et l'ergonomie sont des choses importantes pour l'utilisateur. Si vous ne répondez pas à ces critères, votre programme aura un peu de mal à sortir du lot, en utilisant le mode graphique, cela vous permet de vous démarquer tout en embellissant votre programme !

Après avoir vu les différents bugs possibles, maintenant parlons du pourquoi ils se sont produit !
Un peu d'explication : En programmation Casio, le mode graphique peut être utile pour diverses chose comme par exemple écrire plus de choses à l'écran ou bien faire des beaux dessins. Il peut être contrôlé par des instructions simples qui permettent d'allumer un/des pixel(s) sur l'écran grâce à ses coordonnées. Pour faciliter la chose, la fonction permet de placer le point en bas à droite au coordonnées (1;1). Permettant donc plus de facilitée au programmeur pour se repérer ! Voilà ce qui explique le premier "bug".
Pour le second, rien de plus simple : En laissant afficher les Axes, la barre X et Y occupe une petite place de l'écran, c'est donc plus moche et moins pratique !

Vous savez à présent les pourquoi du comment de ces micro-bugs ! Rentrons enfin dans le vif du sujet :
Comme expliqué plus tôt, le mode graphique permet de réaliser plein de chose !
Comme par exemple des interfaces riches et variées comme dans ce jeu tokitori

Bon le niveau est quand même très haut mais c'est un exemple !

Ou bien vous pouvez utiliser le mode graphique pour dessiner ! Vous pouvez donc réaliser des créations comme ceci :

Ou plein d'autre chose magnifique !

La minute question :
• À partir de quel moment est-ce vraiment rentable de passer au mode graphique ?
Et bien comme dit précédemment, vous pouvez dessiner sur le mode graphique ! Mais vous pouvez aussi afficher une plus grande quantité de texte ! Parfait pour tricher plus efficacement expliquer vos jeux plus rapidement ! Attention cependant ! Le mode graphique est lourd !

Vous voila gonflé à bloc pour réaliser vos plus beaux dessins ! Voyons donc à présent les bases pour réaliser votre projet !
Bon, comme vous avez normalement compris, j'utilise ici les paramètres :

Pour les exemples qui vont suivre.

Cls ? C'est quoi ça ?
Ce fameux Cls est très pratique ! Abréviation du "ClearScreen", il efface toute construction à l'écran !

L'instruction PlotOn ( + + + + ) Vous permet d'allumer un pixel sur l'écran avec cette syntaxe :


Suivant cette logique :




Comme vous l'avez peut-être remarqué, il existe d'autre fonction "Plot"
Plot X,Y Affiche aux coordonnées le curseur de la calculatrice
PlotOff X,Y éteint un pixel
PlotChg X,Y change l'état d'un pixel

Bon, c'est bien beau d'afficher des points, mais c'est vraiment lent si on veux afficher une image !
Voila pourquoi l'instruction "F-Line" ( + + + + ) est là ! Elle vous permet de... tracer une ligne entre deux points ! Avec cette syntaxe :



Cette instruction est très pratique, vous permettant d’alléger vos programmes, de plus elle est assez rapide !

Nous avons aussi l'instruction "Text" ( + + + + ) qui attention c'est très complexe affiche un texte !

Avec une syntaxe un peu spéciale :

Avec Y=1 et X=1, il vous place votre texte en haut à gauche de l'écran ! Faite donc bien attention à cette instruction !

Il y a bien d'autres instructions, je vous laisse les découvrir et apprendre à vous en servir !

Seul point négatif, ce mode est assez lent si vous décidez d'afficher plein de choses... Pour compenser cela, optez pour un maximum de F-Line ou bien essayer de faire du DrawStat ou même du Super DrawStat !
Il s'agit d'une notion un peu complexe vous permettant de dessiner à partir de listes vos graphique. Étant considérablement plus rapide, il s'agit d'un atout considérable pour vos jeux !
Pour ce point, je vous renvoi vers deux tutoriels géniaux expliquant parfaitement le fonctionnement de ce mode graphique !
Voila un petit exemple des capacités du DrawStat en une petite vidéo !


-Tutoriel DrawStat
-Tutoriel Super DrawStat

La minute question :
• Comment savoir si le mode graphique que je prévois est trop ambitieux ?

Pour savoir cela, rien de plus simple ! Prévoyez un plan dans votre tête ou sur papier des différentes images que vous voulez montrer. Si il y en à beaucoup et qu'elles sont complexes dans les formes, reconsidérez votre but ! N'oubliez pas que l’expérience du joueur ne doit pas être interrompue par des chargements incessants ! Faites preuves d’ingénieries en prenant le temps d'optimiser au maximum vos créations ! Comme le fabuleux jeu SwordBurstZero de Redeyes possédant de nombreuses optimisations !

Ou bien il existe une autre méthode, instantanée, pesant 1024 octets, vous permettant facilement de faire des dessins beaux... Je parle ici des Pictures !
Une picture c'est quoi ?
Et bien c'est simplement une image que votre calculatrice garde en mémoire, que vous pouvez à tout moment afficher en un clin d’œil !
Un point positif, vous pouvez dessiner entièrement vos pictures sur votre ordinateur grâce au logiciel BIDE qui intègre une conversion image.png en picture Casio !
Donc réalisez vos plus belles images avec Gimp/paint.net pour ensuite les convertir et les mettre dans la calculatrice avec FA-124 !

Pour afficher une picture, rien de plus simple !

Seulement... De base une picture pèse 2048 octets, mais vu que vous êtes des pros de l'optimisation, je vous conseille d'utiliser l'add-ins Picture 1024. Vous permettant facilement de réduire la taille des pictures !

Pour résumer :
Le mode graphique "normal" est vraiment lent mais suffisant pour faire des petites applications l'utilisant, en effet il est très complet et permet de réaliser un peu près tout. Seulement, si vous voulez faire un jeu fluide, contenant beaucoup d'images, optez vers du DrawStat/ Super DrawStat. Les pictures sont là pour être utile fréquemment, limitez au maximum leurs utilisation si vous n'en voyez pas trop l’intérêt !

Partie III : A vous de programmer !

Je vous propose ici un petit test pour voir si vous avez compris les bases !
Votre objectif est de réaliser... Un carré de coté X avec la lettre P au centre !

Indice 1

Cliquer pour enrouler

Choisissez bien votre ViewWindow !

Indice 2

Cliquer pour enrouler

Les F-Line et leur méthode d'affichage sont la clé de la réussite !

Indice 3

Cliquer pour enrouler

La fonction Text commence en 1;1 en haut à gauche ! Et la hauteur de l'écran est de 63 pixels !

Correction

Cliquer pour enrouler

ViewWindow 1,127,0,1,63,0
Cls
?→A
F-Line 1,1,A,1
F-Line A,1,A,A
F-Line A,A,1,A
F-Line 1,A,1,1
Text 63-A/2,A/2,"P"

Le code est simple mais vous permet bien d'assimiler les bases de la création en F-Line ainsi que développer vos aptitudes de visualisation dans l'espace !

Vous avez réussi j'espère ! Ce n'était pas bien compliqué, cela demande juste un peu de temps de réflexion ainsi qu'une certaine logique dans l'espace ! De toute manière, voilà sur quoi on fini ce tutoriel ! Vous avez à présent les bases pour rendre vos programmes beaucoup plus attractif et visuellement plus fini ! Essayez de programmer quelque chose d'utile que vous ne pouviez pas faire avant ! Comme par exemple : le cercle des couleurs ou encore un pendu plus réaliste ! Envoyez moi vos créations en MP !
On se revoit dans deux semaines pour un autre tutoriel ! N'hésitez pas à m'envoyer vos recommandations ! Portez vous bien !

Liens utiles
-BIDE
-Picture 1024
-Tutoriel DrawStat
-Tutoriel Super DrawStat
-Utilisation mode Graphique

Consulter le TDM précédent : TDM n°14 – Le python, base et utilisation (Partie 1)
Consulter l'ensemble des TDM