Conversion des tutoriels de Crait (Make your own game parties 1 à 3)

Introduction

Pour bien débuter avec votre Gamebuino META, vous pouvez vous référer à la page :

Pour résumer sur cette page, il y a plusieurs liens d’étapes à franchir avant d’exécuter ce tutoriel :

Déballage, contenu de la boite

Faites vos premiers pas en C/C++

Sur l’Académie, vous pouvez suivre les tutoriels pour apprendre à programmer au travers la création de différents jeux :

Le pong

Le Tap tap

Attrap’œuf

Un casse briques

Et vous pouvez compléter ces bases avec d’autres tutoriels de l’Académie ou des sites de passionnés comme celui de Steph : https://gamebuino.m1cr0lab.com/

Mais ce tutoriel tente une autre approche directement inspiré des tutoriels créés par les utilisateurs d’une autre console : l’Arduboy, une autre petite merveille de conception ancienne maintenant avec un écran monochrome d’une résolution limité mais que sa communauté a su parfaitement exploiter et que son créateur maintient et fait évoluer. Pour cela, nous allons nous baser sur les tutoriaux présents sur cette page : Lessons - Arduboy

Pour commencer, nous allons suivre le tutoriel : Make Your Own Arduboy Game, en passant le premier opus puisque nous avons déjà vu l’équivalent sur la META ici : Faites vos premiers pas en C/C++

Commençons donc par la seconde partie : Make Your Own Arduboy Game: Part 2 - Printing Text Make Your Own Arduboy Game: Part 2 - Printing Text - Lessons - Arduboy

Cette seconde partie de la série sur l’apprentissage de la programmation de votre propre jeu Arduboy a été écrit par Crait (Jonathan Holmes) mais ici nous ne verrons que la version adaptée à la Gamebuino META

Qu’est-ce que la programmation ?

En raison de la façon dont la programmation est décrite par exemple dans les films, beaucoup de gens n’ont aucune idée de comment fonctionne réellement la programmation. Fondamentalement, les programmes sont de longues listes d’instructions qu’un microprocesseur doit suivre pour effectuer des actions. Les microprocesseurs font exactement ce qu’on leur demande. Ils n’ont ni opinion ni intuition, et par conséquent, ils ne peuvent simplement ni décider ni deviner quoi faire ensuite. Vous devez donc être très précis dans la suite d’instructions que vous lui fournissez afin qu’il accomplisse ce que vous souhaitez qu’il fasse.

Différents langages de programmation ont différentes manières d’écrire et différents types d’instructions. Cette série de didacticiels passera en revue les bases du C++ afin d’utiliser ces instructions pour pouvoir créer un jeu.

Nous continuons la transposition du tutoriel de l’Arduboy. Son sujet est à peu près l’équivalent du tutoriel : Pong (C++ 2/5) : Hello, world - Gamebuino dans l’Académie alors n’hésitez pas à le consulter si besoin pour avoir une autre vision / approche des sujets abordés.

Création d’un nouveau programme (un code source)

À l’aide de l’IDE Arduino, accédez à Fichier > Nouveau . Cela créera une nouvelle fenêtre pour créer ce que l’IDE Arduino appelle un croquis. Ce croquis est un fichier ou un ensemble de fichiers contenant votre code. Il est aussi couramment appelé " code source ".

Revue de notre code

Dans cette nouvelle fenêtre, vous devriez voir le code suivant :

Image1

Note : Ce code est une image et c’est fait exprès : il est autogénéré, vous n’avez pas à le taper…

Les accolades

Chaque fois que vous écrivez du code, vous en mettrez beaucoup à l’intérieur d’accolades, qui ressemblent à { et } . Cela permet de séparer différents ensembles de lignes de code qui s’exécutent à des moments différents. Pour le moment, tout ce dont vous devez savoir, c’est que vous aurez du code placé dans la section setup () ainsi que dans la section loop ().

Ces sections de notre code sont appelées fonctions , mais nous n’avons pas besoin d’en savoir beaucoup à leur sujet pour le moment. Nous devons juste savoir que le code contenu dans la fonction setup () sera exécuté une seule fois dès que le programme est lancé alors que le code contenu dans la fonction loop () sera exécuté ultérieurement a une fréquence pouvant être définie

Les commentaires

La prochaine chose sur laquelle je veux attirer votre attention, ce sont les commentaires. Ce sont des lignes de code qui sont complètement ignorées par le processeur. Ils sont parfaits pour ajouter des notes et autres informations aidant à lire et à comprendre votre code plus facilement. Je vais beaucoup les utiliser, alors j’ai pensé que nous devrions commencer par eux.

Il est très courant d’utiliser des commentaires pour expliquer le but des fonctions, des variables et au début de votre code pour donner des informations sur la création du code et expliquer le but de votre programme/jeu.

Allons-y et ajoutons quelques commentaires en haut du programme !

En haut, ajoutez quelques nouvelles lignes de texte commençant par deux barres obliques, puis votre nom, la date et le titre de ce programme.

Votre code devrait maintenant ressembler à ceci :

Note : Ce code est une image est c’est fait exprès. Vous n’avez pas l’habitude de taper du code. Il est court, alors tapez le. C’est aussi une façon d’apprendre mais plus tard, quand les codes seront plus longs, ils seront au format texte pour que vous puissiez faire des copier / coller si vous le souhaitez

Ces lignes de texte que vous venez d’ajouter devraient devenir grises dans l’éditeur Arduino.

Obtenir des instructions spécifiques à la Gamebuino META

D’accord, c’était assez simple, mais nous devons commencer à ajouter nos instructions maintenant. Pour ajouter de nombreuses instructions spécifiques à la Gamebuino META, nous devons importer la bibliothèque Gamebuino-Meta dans notre code. Créez une nouvelle ligne de code après vos commentaires et ajoutez #include <Gamebuino-Meta.h> Cette ligne nous permet d’inclure la bibliothèque Gamebuino-Meta.h afin de gérer l’affichage, les boutons et gérer la console. Sans elle, le jeu ne pourra pas être exécuté sauf si vous recodez tout ce qui vous est utile ou que vous utilisiez d’autres librairies mais cela requiert un niveau de connaissance et une complexité élevés. Il n’y a rien

La fonction setup()

Super ! Je suis content que vous soyez déjà arrivé jusqu’ici. Ajoutez les lignes de code suivantes à l’intérieur des accolades de la fonction setup() :

gb.begin();
gb.display.clear();
gb.display.print("Hello");

Notez que chaque ligne de code se termine par un point-virgule « ; ». En effet, toutes les instructions en C++ doivent se terminer par une seule. Sinon, l’ordinateur pensera que c’est autre chose que j’expliquerai plus tard.

Ensuite, notez que toutes ces lignes de code incluent gb. au début. En effet, nos instructions sont stockées dans la bibliothèque gamebuino-META.

La dernière chose que je veux que vous regardiez est la parenthèse, ( et ) . Toutes les fonctions en ont. Certaines incluent des choses à l’intérieur d’eux (on les appelle alors des arguments) et d’autres non.

gb.begin(); La fonction indique à peu près à la gamebuino META de s’allumer correctement. Une fois cela fait, l’instruction suivante est suivie.

gb.display.clear (); dit à la console de tout effacer sur l’écran. Techniquement, ce n’est pas nécessaire ici car la fonction gb.begin() efface déjà l’écran.

gb.display.print(“Hello”); dit à la META d’écrire le texte « Hello » à l’écran. Notez que nous avons quelque chose à l’intérieur de « (« et « ) » cette fois. En effet, pour dire à la META ce que nous voulons imprimer, nous devons le mettre à l’intérieur de la parenthèse. De plus, à chaque fois que vous travaillez avec du texte, vous devez le mettre entre guillemets. Vous pouvez en fait mettre ce que vous voulez à l’intérieur de ces citations. Vous pouvez par exemple jouer avec ce texte et y mettre votre propre nom ou un autre message de votre choix.

Vous avez terminé ce tutoriel ! C’est ça! Vous avez programmé votre premier programme pour la META ! Voici à quoi devrait ressembler le code fini :

//Jonathan Holmes (crait)
//18 octobre 2016
//Impression de texte

#include < Gamebuino-Meta.h >

void setup() {

// placez votre code d'installation ici, à exécuter une fois :

gb.begin();
gb.display.clear();
gb.display.print("Hello");

}

Void loop() {

// placez votre code principal ici, pour qu'il s'exécute à plusieurs reprises :

}

Et si vous avez suivi le tuto : Hello, world (la partie 1 de l’atelier Pong)

Pong (C++ 2/5) : Hello, world - Gamebuino,

vous pouvez utiliser les astuces qui s’y trouvent :

Astuce #1 Vous pouvez utiliser \n pour insérer des retours à la ligne dans votre texte.

Astuce #2 Vous pouvez changer la couleur du texte avec gb.display.setColor . Allez voir Graphics::setColor dans la Référence pour connaître la bonne syntaxe !

Astuce #3 Pour changer l’échelle du texte, il y a la fonction Graphics::setFontSize. Essayez maintenant de créer votre propre programme en suivant les astuces.

Installation

Comme vous l’avez fait dans la partie 3 de l’Atelier « Premier pas » : Compiler et lancer votre jeu Premiers pas (C++ 1/5) : Compiler et lancer un jeu - Gamebuino, connectez votre META avec un câble de données USB au bon port USB, enregistrez votre code puis cliquez sur le bouton
Image1 pour téléverser votre code sur votre META !

Et après?

Ensuite, apprenons à stocker des données et à faire des boucles !

Crédits

Ce tutoriel est une adaptation / traduction faite par Jicehel du tutoriel de Crait : « Make Your Own Arduboy Game: Part 2 - Printing Text ». Si vous souhaitez suivre Crait sur Twitter, veuillez le faire à http://www.twitter.com/crait 20 qui apprécierais cela grandement. :blush:

Voilà, la programmation, c’est apprendre à coder. Le C++ est un formidable langage pour cela et une petite console comme la META, l’ESPboy ou l’Arduboy permet de vite voir vos progrès. Nous continuerons de convertir ces tutoriels. Celui-ci était le deuxième d’une série de 9 mais il y a plein d’autres choses que nous pouvons adapter.

1 Like

Bien, continuons de transposer les tutoriaux de Crait pour créer votre propre jeu. Au programme : Le stockage de données et les boucles : Make Your Own Arduboy Game: Part 3 - Storing Data & Loops disponible ici : Make Your Own Arduboy Game: Part 3 - Storing Data & Loops - Lessons - Arduboy

Les variables

Les ordinateurs travaillent beaucoup avec des données et font beaucoup de calculs. Pour pouvoir créer la plupart des jeux vidéo, vous devrez être en mesure de stocker des données, comme les meilleurs scores, la localisation des joueurs ou les vies restantes. Afin de se souvenir de la valeurs de ces données, un ordinateur doit réserver un espace de la mémoire pour les y stocker. Il peut ensuite les lire et les modifier.

Les boucles

Vous souvenez vous que j’ai dit que les ordinateurs devaient recevoir des instructions spécifiques ? Avez-vous déjà remarqué qu’au dos des bouteilles de shampoing il est indiqué : 1. Faire mousser, 2. Rincer, 3. Répéter ? Si un ordinateur recevait ces instructions, il serait coincé dans une boucle infinie de moussage, de rinçage et de répétition. En programmation, faire répéter des instructions en boucle peut être très utile et je vais ; dans un premier temps, vous montrer comment utiliser la fonction loop() pour ce faire.

Commencer

Nous allons créer un programme pour faire en sorte que notre console garde une trace d’un nombre et vous l’affiche au fur et à mesure qu’il augmente. Alors, Faisons le!

Commencez par récupérer le code du didacticiel précédent afin que nous puissions en tirer parti :

//Jonathan Holmes (crait)
//18 octobre 2016
// Impression de texte

#include <Gamebuino-Meta.h>

void setup() {

// placez votre code d’installation ici, à exécuter une fois:

gb.begin();
gb.display.clear();
gb.display.print(“Holmes est cool !”);

}

void loop() {

// placez votre code principal ici, pour qu’il s’exécute à plusieurs reprises:

}

Initialisation

Chaque fois que vous créez une variable, vous devez commencer par l’initialiser, ce qui consiste à réserver de la mémoire pour les données que vous voulez y stocker et à lui donner un nom. Vous l’avez déjà fait mais vous ne vous en êtes pas rendu compte. Il existe différents types de variables que vous pouvez initialiser tels que : entiers, booléens, caractères, objets, doubles et bien d’autres.

Nous allons initialiser notre nombre qui va augmenter comme un entier. Cela signifie essentiellement que c’est un nombre entier, sans fractions. Les entiers apparaîtront comme int dans le code C++.

Pour initialiser une variable, il faut renseigner 3 choses : Le type de la variable, son nom puis un point-virgule. Si nous voulons créer une variable de type entier que nous appellerons counter par exemple. Voici le code : int counter ; Mettez le sous la ligne qui permet d’inclure la librairie de la Gamebuino-META.

L’affectation

Une fois que vous avez créé une variable, vous pouvez lui donner une valeur. C’est ce qu’on appelle l’affectation. Pour le moment, nous ne savons pas encore quelle est la valeur du compteur car nous ne lui en avons jamais donné. Théoriquement, la variable pourrait donc avoir une valeur quelconque.

Nettoyons le code en supprimant la ligne gb.display.print(“Holmes est cool !”);

De la fonction setup() . Au lieu de cela, plaçons y la ligne d’affectation pour initialiser la variable entière counter à 0 :

counter = 0 ;

Cette ligne de code indique que la valeur du compteur est maintenant égale à 0. Au lieu de 0, vous pouvez mettre un autre nombre entier, une formule mathématique ou d’autres choses que j’expliquerai un peu plus tard dans ce tutoriel.

Voici à quoi votre code devrait ressembler :

//Jonathan Holmes (crait)
//18 octobre 2016
// Impression de texte

#include <Gamebuino-Meta.h>

void setup() {

// placez votre code d’installation ici, à exécuter une fois:

gb.begin();
gb.display.clear();
counter = 0;

}

void loop() {

// placez votre code principal ici, pour qu’il s’exécute à plusieurs reprises:

}

Incrémentation

Voilà ce que nous voulons faire : notre programme répétera encore et encore quelques instructions simples. Fondamentalement, nous allons changer la valeur de counter , puis afficher cette valeur, puis répéter ces opérations. Pour ce faire, nous devons ajouter du code dans la fonction loop().

counter = counter + 1 ;

Cette ligne de code signifie que vous attribuez à la variable counter sa propre valeur plus 1 ou, en d’autres termes, la valeur de la variable counter est maintenant égale à la valeur de counter + 1.

Affichage de la valeur de la variable

Maintenant que la variable augmente, affichons la ! Rappelez-vous comment nous avons utilisé gb.display.print pour imprimer du texte à l’écran ? Eh bien, nous pouvons également utiliser cette même fonction pour afficher des nombres à l’écran. Ajouter gb.display.print (compteur); .

Si vous deviez exécuter ce code tel quel, maintenant, l’écran de la META se remplirait de chiffres alors pour éviter cela, nous allons effacer ce qui était auparavant à l’écran. Nous allons donc déplacer gb.display.clear(); au début de la fonction loop().

Avez-vous déjà utilisé une machine à écrire ? Chaque fois que vous tapez des lettres, le curseur se déplace. La fonction gb.display.print() fonctionne de manière similaire. Chaque fois que vous utilisez cette fonction, elle déplace le curseur. Si nous utilisons encore la fonction dans la boucle, l’affichage se fera après ce qui a déjà été affiché. Pour notre programme, nous devons donc réinitialiser le curseur en haut de l’écran. Nous pourrions utiliser la commande : gb.display.setCursor(0, 0); mais dans notre cas, cela sera inutile car cette opération est déjà effectuée lors de l’appel de la fonction : gb.display.clear(); .
Nous allons également ajouter une ligne au tout début de la procédure loop. Cette ligne est propre à la META: while(!gb.update());

Cette instruction est nécessaire dans tout programme Gamebuino. Elle va s’occuper de tout ce qui se passe en arrière-plan comme mettre à jour l’écran, regarder si les boutons ont été appuyés, jouer les sons et maintenir une vitesse de jeu constante. Par défaut, les jeux tournent à 25 images par seconde, ce qui signifie que la fonction loop est exécutée toutes les 0,04 seconde. C’est rapide, et c’est un bon compromis pour avoir des animations fluides sans demander trop de puissance de calcul.

Pour l’instant, je ne vous demande pas de vous casser la tête avec chaque mot mais de pouvoir reconnaître cette instruction pour que vous sachiez ce qu’elle fait. Encore une fois, c’est une instruction nécessaire pour faire un jeu Gamebuino :slight_smile:

Le code terminé

J’ai ajouté quelques commentaires, mais votre code devrait ressembler à ceci :

//Jonathan Holmes (crait)
//18 octobre 2016
// Impression de texte

// Inclure la bibliothèque
#include <Gamebuino-Meta.h>

// Initialiser notre variable counter

int counter;

// La fonction setup() s'exécute une fois lorsque vous allumez votre console
void setup() {

    //Démarrer votre Gamebuino META proprement
    gb.begin();

    // Affecter 0 à la valeur de notre variable counter pour l’initialiser
    counter = 0;

}


// La fonction loop() se répète indéfiniment une fois que la fonction setup() est traitée.
void loop() {

    // Instruction de gestion et de régulation de la META 
    while(!gb.update());

    // Effacer tout ce qui est imprimé à l'écran
    gb.display.clear();

    // Augmente la valeur du compteur de 1
    counter = counter + 1;

    //Affiche à l’écran la valeur de counter ;
    gb.display.print(counter);

}

Exécuter le code

Connectez votre console à votre ordinateur et téléchargez y ce code. Votre Gamebuino META devrait commencer à compter !

Et après?

Dans le prochain didacticiel, nous apprendrons à tester les valeurs des variables, des booléens et à appuyer sur des boutons !

Crédits

J’ai écrit ce tutoriel en adaptant pour la META et en traduisant en français le tutoriel de Crait créé pour l’Arduboy : Make Your Own Arduboy Game: Part 3 - Storing Data & Loops - Lessons - Arduboy

Suivre Crait sur Twitter via l’URL : http://www.twitter.com/crait.