Contrôleurs Arduino : 10 étapes (avec photos)

2024 Auteur: John Day | [email protected]. Dernière modifié: 2024-01-30 09:09

Un système de contrôleur de jeu Arduino utilisant Arduino et la bibliothèque p5.js. L'idée est de créer un projet Arduino facilement réplicable et extensible. Les connexions du contrôleur sont conçues pour utiliser un ensemble de capteurs et d'entrées différents qui peuvent être interchangés en fonction de chaque contrôleur.

Ce projet est également conçu pour utiliser la bibliothèque JavaScript p5.js ainsi que la bibliothèque p5.play conçue pour p5.js. Ces bibliothèques nous permettent de programmer nos jeux en toute simplicité. Le site Web p5.play propose de nombreux didacticiels et exemples permettant aux utilisateurs de créer des jeux. Ce projet permet aux utilisateurs de mettre en pratique leurs compétences en développement matériel et logiciel.

Étape 1: ce dont vous aurez besoin

Outils:

• Fer à souder
• Souder
• Pince à dénuder
• Pince coupante latérale
• Pinces

Matériel:

• Carte compatible Arduino (j'ai utilisé un Sparkfun Redboard ainsi qu'un Arduino Uno et Leonardo)

• Tableau de performances:

  • Planches perforées vertes 8cm x 6cm
  • Aduino Uno shield perf board

• Divers capteurs

  • Joysticks
  • Boutons (avec résistances, 10k ohms, pour aller avec)
  • Potentiomètres
  • Capteurs Flex
  • Capteurs de pression
  • Etc…

• Câble:

  • Fil unique (j'ai utilisé 26 AWG solide)
  • Fil ruban et sertissages
• En-têtes séparés (au moins 20 d'entre eux)

• Matériel en option (vous pouvez utiliser du carton et des attaches thermocollantes/zip à la place):

  • Breadboard et câbles de démarrage pour le prototypage
  • Boîtiers imprimés en 3D
  • Fixations matérielles (j'ai utilisé des vis M2.5)

Logiciel:

• IDE Arduino

• bibliothèque p5.js

  Bibliothèque P5.play aussi

• p5.serialcontrol
• Node.js

Étape 2: Création: le hub de la console, configuration du bouclier

Soudez les en-têtes à la carte de perforation Arduino Uno.

• J'ai commencé avec les en-têtes de blindage (alimentation, entrée analogique et numérique)
• Viennent ensuite les broches d'en-tête 2x5. Vous pouvez utiliser des en-têtes 2x5 ou seulement 2 rangées de 5 en-têtes séparés. Je les ai alignés avec A3 et A4 verticalement et j'ai laissé 2 espaces entre eux.

Étape 3: Création: le hub de la console, câblage du bouclier

Ensuite, nous voulons acheminer nos fils sur le blindage. Il est plus facile de faire passer les fils en haut, mais si vous voulez un look plus net, vous pouvez les faire passer en bas.

Vous devez faire attention au schéma (le schéma Eagle est disponible en téléchargement) lors du routage de ces fils. Vous pouvez également consulter le guide des couleurs pour vous aider.

L'idée de cette conception de blindage est de permettre 3 entrées analogiques et 5 entrées numériques de chaque contrôleur. Cela tire pleinement parti de toutes les entrées analogiques sur un Arduino Uno ainsi que des fils restants sur notre câble plat.

Étape 4: Construction: les contrôleurs, configuration de vos pièces

La première étape de la construction de votre contrôleur consiste à planifier les capteurs à utiliser. Dans mes exemples, j'ai un contrôleur assez standard avec un joystick et quelques boutons. J'ai aussi un contrôleur avec deux potentiomètres à curseur.

Si vous souhaitez reproduire cela, vous pouvez voir mes images pour le placement.

L'étape suivante consiste à souder votre câble plat à la carte de perforation.

1. Dénudez et étamez le câble plat
2. Soudez le câble plat en haut au centre de votre carte de perforation.

L'étape suivante consiste à acheminer vos fils. J'ai commencé par câbler d'abord l'alimentation (5V/fil rouge) et la masse (fil marron) aux capteurs. J'ai ensuite câblé les entrées analogiques. J'ai trouvé facile d'utiliser le câble orange (Analogique A0 ou A3) pour le mouvement horizontal et le câble jaune (Analogique A1 ou A4) pour le mouvement vertical.

Pour garder les choses cohérentes, j'ai également câblé un petit bouton poussoir au violet sur tous mes contrôleurs. Ceci est utile pour des choses telles que la fermeture du port série (j'y reviendrai plus tard) ainsi que pour les menus ou les options.

J'ai téléchargé un schéma rapide de mon contrôleur de joystick si vous souhaitez jeter un œil à cela. À partir de notre schéma de brochage, vous pouvez voir la possibilité de connexion de chaque contrôleur (3 entrées analogiques et 5 numériques).

Étape 5: Facultatif: Boîtiers

Cette étape est facultative, mais si vous avez accès à une imprimante 3D, le résultat de votre projet semblera un peu plus raffiné et fini. Comme vous pouvez le voir dans mes prototypes, j'ai utilisé un simple morceau de carton pour éviter que les joints de soudure au bas des planches de perforation ne piquent vos doigts.

Vous pouvez trouver mes modèles 3D attachés à cette étape. J'ai créé des boîtiers pour le hub pour l'Arduino Uno/Leonardo et le Sparkfun RedBoard (cette carte est un peu plus large et utilise un mini USB).

Pour les contrôleurs, vous pouvez les fixer avec des vis M2.5. J'ai gardé l'écrou sur le côté du PCB et utilise une rondelle et la vis en bas.

J'ai également inclus le modèle 3D pour les curseurs de bouton pour les potentiomètres que j'ai utilisés.

Vous pouvez trouver tous les fichiers 3D sur GitHub.

Étape 6: Programmation: Arduino

Commençons par mettre en place un croquis simple à tester. Je suggère d'utiliser le tutoriel créé par ITP à NYU trouvé ici. Pour faire ce tutoriel, vous aurez besoin d'avoir installé p5.serialcontroll et node.js. Dans ce tutoriel, vous serez initié à la configuration d'un Arduino pour envoyer des données série utilisables par notre bibliothèque javascript, p5.js. Vous pouvez utiliser le concentrateur et le contrôleur que nous avons créés dans les étapes précédentes pour ce faire, ou vous pouvez reproduire les circuits illustrés dans le didacticiel. Ce tutoriel utilise la broche d'entrée analogique A0 sur l'Arduino Uno qui est mappée sur le fil orange de votre premier contrôleur.

Le prochain tutoriel que vous voudrez suivre se trouve ici. Ce didacticiel vous guidera dans la configuration de plusieurs entrées et leur utilisation dans p5.js. Dans le tutoriel, les entrées analogiques A0 et A1 sont utilisées. Ceux-ci correspondront aux fils orange et jaune sur le contrôleur 1 de notre système.

Une fois que vous avez parcouru les tutoriels ci-dessus, nous pouvons programmer l'Arduino. Le code que nous voulons utiliser est ci-dessous:

//contrôleur 1const int dig2 = 2; //bleu const int dig3 = 3; //violet const int dig4 = 4; //grey const int dig5 = 5; //blanc const int dig6 = 6; //noir //contrôleur 2 const int dig7 = 7; //bleu const int dig8 = 8; //violet const int dig9 = 9; //grey const int dig10 = 10; //blanc const int dig11 = 11; //le noir

void setup() {

Serial.begin(9600); while (Serial.available() <= 0) { Serial.println("bonjour"); // envoie un message de démarrage delay(300); // attend 1/3 seconde } pinMode(dig2, INPUT); pinMode(dig3, INPUT); pinMode(dig4, INPUT); pinMode(dig5, INPUT); pinMode(dig6, INPUT); pinMode(dig7, INPUT); pinMode(dig8, INPUT); pinMode(dig9, INPUT); pinMode(dig10, INPUT); pinMode(dig11, INPUT); }

boucle vide() {

if (Serial.available() > 0) { // lit l'octet entrant: int inByte = Serial.read(); // lecture du capteur:

//Contrôleur ANALOGIQUE 1

int analog0 = analogRead(A0); int analog1 = analogRead(A1); int analog2 = analogRead(A2); //Contrôleur ANALOGIQUE 2 int analog3 = analogRead(A3); int analog4 = analogRead(A4); int analog5 = analogRead(A5); //Contrôleur NUMÉRIQUE 1 int digital2 = digitalRead(dig2); int digital3 = digitalRead(dig3); int digital4 = digitalRead(dig4);

int digital5 = digitalRead(dig5);

int digital6 = digitalRead(dig6); //Contrôleur NUMÉRIQUE 2 int digital7 = digitalRead(dig7); int digital8 = digitalRead(dig8); int digital9 = digitalRead(dig9); int digital10 = digitalRead(dig10); int digital11 = digitalRead(dig11); // affiche les résultats: Serial.print(analog0); //[0] Serial.print(", "); Serial.print(analogique1); //[1] Serial.print(", "); Serial.print(analog2); //[2] Serial.print(", "); //Démarrer les données du contrôleur 2 Serial.print(analog3); //[3] Serial.print(", "); Serial.print(analog4); //[4] Serial.print(", "); Serial.print(analog5); //[5] Serial.print(", "); Serial.print(digital2); //[6] Serial.print(", "); Serial.print(digital3); //[7] Serial.print(", "); Serial.print(digital4); //[8] Serial.print(", "); Serial.print(digital5); //[9] Serial.print(", "); Serial.print(digital6); //[10] Serial.print(", "); //Démarrer les données du contrôleur 2 Serial.print(digital7); //[11] Serial.print(", "); Serial.print(digital8); //[12] Serial.print(", "); Serial.print(digital9); //[13] Serial.print(", "); Serial.println(digital10); //[14] Serial.print(", "); Serial.println(digital11); //[15] } }

Ce code envoie les données série de nos deux contrôleurs sous la forme d'un tableau de 16 chiffres. Les 6 premiers de ces nombres sont nos entrées analogiques (allant de 0 à 1023) et les 10 valeurs restantes sont nos valeurs numériques (0 ou 1).

Une fois notre code téléchargé, nous pouvons le tester en ouvrant le moniteur série et en tapant une valeur dans notre moniteur série comme nous l'avons fait dans le 2ème tutoriel d'ITP. Nous devrions obtenir une chaîne de nos valeurs séparées par des virgules.

Étape 7: Programmation: HTML

Une fois notre Arduino configuré et fonctionnel, nous pouvons commencer à programmer nos contenus Web. Le code HTML est très simple.

corps {remplissage: 0; marge: 0;}

Le code html relie simplement nos fichiers javascript entre eux. La plupart de notre code se produira en fait dans notre fichier sketch.js.

Étape 8: Programmation: P5.js et Javascript

Une fois notre HTML configuré, nous pouvons travailler sur notre JavaScript. Si vous ne l'avez pas déjà fait, vous devez maintenant télécharger p5.js ainsi que p5.play et les ajouter à votre dossier de bibliothèques dans le répertoire de votre site Web.

• p5.js
• p5.play

Dans notre étape précédente, nous avons configuré notre fichier HTML pour appeler nos bibliothèques p5.js et p5.play. Nous l'avons également configuré pour utiliser notre fichier sketch.js qui est l'endroit où nous ferons la plupart de notre programmation. Vous trouverez ci-dessous le code de notre squelette. Vous pouvez également le trouver ici.

//Série Variablesvar serial; // variable pour contenir une instance de la bibliothèque de port série var portName = 'COM4'; // remplissez votre nom de port série ici // Variables de jeu globales ---------------

//Fonction de configuration ----------------------

fonction setup() { createCanvas(640, 480); série = nouveau p5. SerialPort(); // crée une nouvelle instance de la bibliothèque de port série serial.on('list', printList); // définit une fonction de rappel pour l'événement de liste de ports série serial.on('connected', serverConnected); // rappel pour se connecter au serveur serial.on('open', portOpen); // rappel pour l'ouverture du port serial.on('data', serialEvent); // rappel lorsque de nouvelles données arrivent serial.on('error', serialError); // rappel pour les erreurs serial.on('close', portClose); // rappel pour le port fermant serial.list(); // liste les ports série serial.open(portName); // ouvre un port série } // Fonction Draw ----------------------- function draw() { background(0); // fond noir } // Interpréter les données série ici ---------- function serialEvent() { // lire une chaîne à partir du port série // jusqu'à ce que vous obteniez un retour chariot et une nouvelle ligne: var inString = serial. readStringUntil('\r\n'); // vérifiez qu'il y a bien un ssetring: if (inString.length > 0) { if (inString !== 'hello') { // si vous obtenez hello, ignorez-le var capteurs = split(inString, ', '); // divise la chaîne entre les virgules if (sensors.length > 16) { // s'il y a seize éléments (6 analogiques, 10 numériques) // Utilisez les données du capteur ici:

}

} serial.write('x'); // envoie un octet demandant plus de données série } } // obtient la liste des ports: function printList(portList) { // portList est un tableau de noms de port série pour (var i = 0; i < portList.length; i++) { // Affiche la liste de la console: print(i + " " + portList); } } function serverConnected() { print('connected to server.'); } function portOpen() { print('le port série ouvert.') } function serialError(err) { print('Quelque chose s'est mal passé avec le port série. ' + err); } function portClose() { print('Le port série fermé.'); } function ClodingCode(){ serial.close(portName); renvoie null; } window.onbeforeunload = fermetureCode;

Une fois que vous avez enregistré le squelette. Vous pouvez utiliser ces valeurs de la même manière que dans le didacticiel ITP. La chaîne de valeurs que nous avons envoyée depuis notre Arduino à l'étape 6 est envoyée sous la forme d'un tableau de 16 nombres. Ci-dessous, nous analysons ce tableau.

//Interpréter les données série ici ----------

function serialEvent() { // lit une chaîne depuis le port série // jusqu'à ce que vous obteniez un retour chariot et une nouvelle ligne: var inString = serial.readStringUntil('\r\n'); // vérifiez qu'il y a bien un ssetring ici: if (inString.length > 0) { if (inString !== 'hello') { // si vous obtenez hello, ignorez-le var capteurs = split(inString, ', '); // divise la chaîne entre les virgules if (sensors.length > 16) { // s'il y a seize éléments (6 analogiques, 10 numériques) // Utilisez les données du capteur ici: } } serial.write('x'); // envoie un octet demandant plus de données série } }

Nous pouvons maintenant exécuter notre programme pour voir si cela fonctionne !

Étape 9: Exécuter votre programme

Nous pouvons maintenant exécuter notre programme pour voir si cela fonctionne. Vous pouvez soit créer votre propre jeu en utilisant le fichier skeleton.js dans notre fichier précédent, soit utiliser le simple jeu Pipe trouvé ici.

Semblable au laboratoire ITP, pour exécuter notre programme, nous suivrons les étapes ci-dessous.

• Branchez l'Arduino avec le ou les contrôleurs que vous prévoyez d'utiliser.
• Ouvrez p5.serialcontrol
• Remplacez le port de votre sketch p5 par celui que vous utilisez (si vous utilisez le squelette, c'est à la ligne 3)
• Ouvrez le fichier HTML qui renvoie à votre croquis p5

Si vous avez des médias externes tels que des images ou des polices téléchargées, vous souhaiterez l'exécuter sur un serveur. Vous pouvez exécuter un simple serveur python local si vous le souhaitez.

Étape 10: Aller plus loin

Pour aller plus loin et développer plus de jeux pour cela, vous pouvez suivre divers exemples du formulaire p5.play trouvé ici. Vous trouverez ci-dessous un exemple de jeu plus compliqué que j'ai créé. C'est un jeu de tir de chars 1 contre 1. Vous pouvez trouver toutes les ressources pour cela sur GitHub.