Seuls les membres ayant 30 points peuvent parler sur le chat.

Forum Casio - Actualités


Index du Forum » Actualités » TDM 15- L'utilisation de l'espace graphique en programmation
TituyaHors ligneRédacteurPoints: 488 Défis: 11 Message

TDM 15- L'utilisation de l'espace graphique en programmation

Posté le 02/10/2019 18:05

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
ViewWindow 1,127,0,1,63,0
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 :
ViewWindow 1,127,0,1,63,0
AxesOff
Cls

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 :

PlotOn X,Y

Suivant cette logique :


PlotOn 10,6
//Affiche un point aux coordonnées x=10, y=6


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 :

F-Line X1,Y1,X2,Y2
//Trace une ligne entre le point 1 et le point 2


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 :
Text Y,X,"TEXTE"

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 !
RclPict 1
//Montre la picture stockée en 1

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


LephenixnoirEn ligneAdministrateurPoints: 15795 Défis: 136 Message

Citer : Posté le 05/10/2019 09:27 | #


Merci pour ce tutoriel ! C'est vraiment pas mal d'avoir expliqué la base, c'est-à-dire le fait que ce n'est pas un écran de dessin mais bel et bien le graphique, et donc les paramètres qui vont avec.

Je l'ai ajouté à la liste des tutoriels du Mercredi.
CritorEn ligneAdministrateurPoints: 1373 Défis: 0 Message

Citer : Posté le 06/10/2019 11:12 | #


Joliment illustré et méticuleusement expliqué, une fois de plus un tuto d'excellente facture !
Sa place est dans un musée.
TituyaHors ligneRédacteurPoints: 488 Défis: 11 Message

Citer : Posté le 06/10/2019 13:13 | #


Merci beaucoup ! C'est vraiment encourageant de voir des retours positifs comme ça ! Les TDMs ont reprit depuis déjà 5 semaines ! Le temps passe vite ! Ils n'ont pas le succès que j'attendais personnellement, mais j’espère qu'ils sont utiles pour les nouveaux membres !
Casio VS Nokia 3310 ? Qui gagne ?



Shadow15510Hors ligneAdministrateurPoints: 3829 Défis: 15 Message

Citer : Posté le 06/10/2019 15:45 | #


C'est du très bon travail n'en doute pas !

Les TDM s'adressent plutôt à des nouveaux, donc pas forcément des membres expérimentés du coup, peut-être que le lectorat est moins présent et moins actif… Essaye, si tu le sens, de passer à des tutos plus complexes, progressivement ?
"Ce n'est pas parce que les chose sont dures que nous ne les faisons pas, c'est parce que nous ne les faisons pas qu'elles sont dures." Sénèque

Moral
   95%
TituyaHors ligneRédacteurPoints: 488 Défis: 11 Message

Citer : Posté le 06/10/2019 16:26 | #


Le problème c'est que je me considère encore comme un débutant ! Donc faire des tutos plus complexes me semble assez peu approprié vu mon niveau actuel j'ai peur de ne pas être assez précis ...
Casio VS Nokia 3310 ? Qui gagne ?



LephenixnoirEn ligneAdministrateurPoints: 15795 Défis: 136 Message

Citer : Posté le 06/10/2019 16:31 | #


Tu es certainement expérimenté sur un sujet ! Les subtilités du Basic, les graphismes, l'animation, l'écriture/l'invention (eg. de scénario), le gameplay, les interfaces graphiques bien pensées, l'algorithmique, etc etc.
DisperseurHors ligneMembrePoints: 1501 Défis: 0 Message

Citer : Posté le 06/10/2019 17:36 | #


Lephenixnoir a écrit :
Les subtilités du Basic

J'adore
Planetarium

√(2+2-2+2-2+2+2-2-2-2) = 0
DrakHors ligneRédacteurPoints: 1925 Défis: 38 Message

Citer : Posté le 13/10/2019 12:16 | #


Disperseur a écrit :
Lephenixnoir a écrit :
Les subtilités du Basic

J'adore

Et oui, le Basic a des subtilités, ou plutôt des biais bizarres par lesquels un programmeurs doit passer pour rendre son jeu fluide.

Je tenais à te féliciter, @Tituya, pour ton accession au rôle de rédacteur⋅trice, et aussi pour la reprise de la rédaction des TDM qui est assez difficile à tenir et qui demande du travail. Je t'encourage à poursuivre ! Je suis très content de voir que vous poursuivez cette initiative ; ça fait déjà une belle liste de TDM !

Continuez comme ça, je continue de vous suivre de loin !
Eon the Dragon : version 1.2
Let's have a look!
Marre de ces RPGs qui t'imposent des classes, des compétences et des sorts ? Crée tes propres capacités sur Eon the Dragon ! Des monstres, des dragons et des combats aussi épiques que difficiles t'attendent !
Un RPG unique et immense t'attend ! Joue dès maintenant à Aventura, le Royaume Poudingue !
Vous aussi, soyez swag et rejoignez Planète Casio !
DisperseurHors ligneMembrePoints: 1501 Défis: 0 Message

Citer : Posté le 14/10/2019 07:17 | #


@Tituya: J'ai une idée pour un tdm prochain.. tu pourrais parler des commandes liées a l'utilisation des fonctions "fn" sur la calto en général puis dans le menu prgm. C'est un truc dont on n'as pas beaucoup parlé il me semble
Planetarium

√(2+2-2+2-2+2+2-2-2-2) = 0
LephenixnoirEn ligneAdministrateurPoints: 15795 Défis: 136 Message

Citer : Posté le 14/10/2019 09:20 | #


C'est une bonne idée oui ! Il y a un tutoriel à ce sujet si ma mémoire est bonne, mais pas forcément très détaillé.
DisperseurHors ligneMembrePoints: 1501 Défis: 0 Message

Citer : Posté le 14/10/2019 12:25 | #


Parce que c'est un truc pas evident pour un programmeur débutant en Basic
Planetarium

√(2+2-2+2-2+2+2-2-2-2) = 0

Planète Casio v42 © créé par Neuronix et Muelsaco 2004 - 2019 | Il y a 67 connectés | Nous contacter | Qui sommes-nous ? | Licences et remerciements

Planète Casio est un site communautaire non affilié à Casio. Toute reproduction de Planète Casio, même partielle, est interdite.
Les programmes et autres publications présentes sur Planète Casio restent la propriété de leurs auteurs et peuvent être soumis à des licences ou copyrights.
CASIO est une marque déposée par CASIO Computer Co., Ltd