Arduino-Controller - Gunook

2024 Autor: John Day | [email protected]. Zuletzt bearbeitet: 2024-01-30 07:21

Ein Arduino-Gamecontroller-System, das Arduino und die p5.js-Bibliothek verwendet. Die Idee dahinter ist, ein Arduino-Projekt zu erstellen, das leicht repliziert und erweiterbar ist. Die Controller-Anschlüsse sind so konzipiert, dass sie eine Reihe verschiedener Sensoren und Eingänge verwenden, die je nach Controller ausgetauscht werden können.

Dieses Projekt wurde auch entwickelt, um die JavaScript-Bibliothek p5.js zusammen mit der für p5.js entwickelten p5.play-Bibliothek zu verwenden. Diese Bibliotheken ermöglichen es uns, unsere Spiele mit Leichtigkeit zu programmieren. Die p5.play-Website bietet eine Reihe von Tutorials und Beispielen für Benutzer, um Spiele dafür zu erstellen. Dieses Projekt ermöglicht es Benutzern, ihre Fähigkeiten in der Hardware- und Softwareentwicklung zu üben.

Schritt 1: Was Sie brauchen

Werkzeuge:

• Lötkolben
• Lot
• Abisolierzangen
• Seitenschneider
• Zange

Hardware:

• Arduino-kompatibles Board (ich habe ein Sparkfun Redboard sowie ein Arduino Uno und Leonardo verwendet)

• Perf-Board:

  • 8cm x 6cm grüne Perfboards
  • Aduino Uno Shield Perfboard

• Verschiedene Sensoren

  • Joysticks
  • Tasten (mit Widerständen, 10k Ohm, passend dazu)
  • Potentiometer
  • Flex-Sensoren
  • Drucksensor
  • Etc…

• Kabel:

  • Einzeldraht (ich habe 26 AWG Solid verwendet)
  • Flachdraht und Crimps
• Break-away-Header (mindestens 20 davon)

• Optionale Hardware (Sie können stattdessen Karton und Heißkleber/Reißverschluss verwenden):

  • Steckbrett- und Überbrückungskabel für das Prototyping
  • 3D gedruckte Gehäuse
  • Hardware-Befestigungselemente (ich habe M2,5-Schrauben verwendet)

Software:

• Arduino-IDE

• p5.js-Bibliothek

  P5.play-Bibliothek auch

• p5.serielle Steuerung
• Node.js

Schritt 2: Aufbau: Konsolen-Hub, Einrichten des Schilds

Löten Sie die Header an das Arduino Uno Shield Perf Board.

• Ich begann mit den Shield-Headern (Strom, analoger Eingang und digital)
• Als nächstes sind die 2x5 Header-Pins. Sie können 2x5 Header oder nur 2 Reihen mit 5 Breakaway-Headern verwenden. Ich habe diese mit A3 und A4 vertikal ausgerichtet und 2 Leerzeichen dazwischen gelassen.

Schritt 3: Aufbau: Konsolen-Hub, Abschirmung verdrahten

Als nächstes wollen wir unsere Drähte auf dem Schild verlegen. Es ist einfacher, die Drähte oben zu verlegen, aber wenn Sie ein saubereres Aussehen wünschen, können Sie sie unten verlegen.

Achten Sie beim Verlegen dieser Drähte auf den Schaltplan (der Eagle-Schaltplan steht zum Download zur Verfügung). Sie können sich auch die Farbanleitung ansehen, um Ihnen dabei zu helfen.

Die Idee dieses Schirmdesigns besteht darin, 3 analoge Eingänge und 5 digitale Eingänge von jedem Controller zu ermöglichen. Dies nutzt alle analogen Eingänge eines Arduino Uno sowie die verbleibenden Drähte unseres Flachbandkabels vollständig aus.

Schritt 4: Bauen: die Controller, Einrichten Ihrer Teile

Der erste Schritt zum Aufbau Ihres Controllers besteht darin, die zu verwendenden Sensoren zu planen. In meinen Beispielen habe ich einen ziemlich normalen Controller mit einem Joystick und ein paar Tasten. Ich habe auch einen Controller mit zwei Schiebepotentiometern.

Wenn Sie dies replizieren möchten, können Sie meine Bilder zur Platzierung anzeigen.

Der nächste Schritt besteht darin, Ihr Flachbandkabel an das Perfboard zu löten.

1. Flachbandkabel abisolieren und verzinnen
2. Löten Sie das Flachbandkabel oben in der Mitte Ihres Perfboards.

Der nächste Schritt besteht darin, Ihre Drähte zu verlegen. Ich begann damit, zuerst die Stromversorgung (5V / rotes Kabel) und die Masse (braunes Kabel) an die Sensoren zu verdrahten. Ich habe dann die analogen Eingänge verdrahtet. Ich fand es einfach, das orangefarbene Kabel (Analog A0 oder A3) für die horizontale Bewegung und das gelbe Kabel (Analog A1 oder A4) für die vertikale Bewegung zu verwenden.

Um die Dinge konsistent zu halten, habe ich an allen meinen Controllern auch einen kleinen Druckknopf auf Lila verdrahtet. Dies ist nützlich für Dinge wie das Schließen der seriellen Schnittstelle (ich werde später darauf eingehen) sowie für Menüs oder Optionen.

Ich habe einen schnellen Schaltplan meines Joystick-Controllers hochgeladen, wenn Sie sich das ansehen möchten. Aus unserem Pin-Out-Diagramm sehen Sie die Möglichkeit jedes Controller-Anschlusses (3 analoge Eingänge und 5 digitale).

Schritt 5: Optional: Gehäuse

Dieser Schritt ist optional, aber wenn Sie Zugang zu einem 3D-Drucker haben, sieht das Ergebnis Ihres Projekts etwas raffinierter und fertiger aus. Wie Sie in meinen Prototypen sehen können, habe ich ein einfaches Stück Pappe verwendet, um zu verhindern, dass die Lötstellen an der Unterseite der Perfboards mit den Fingern stoßen.

Sie finden meine 3D-Modelle diesem Schritt beigefügt. Ich habe Gehäuse für den Hub sowohl für das Arduino Uno/Leonardo als auch für das Sparkfun RedBoard erstellt (dieses Board ist etwas breiter und verwendet Mini-USB).

Bei den Controllern können Sie diese mit M2,5 Schrauben befestigen. Ich hielt die Mutter an der Seite der Platine und verwendet eine Unterlegscheibe und die Schraube an der Unterseite.

Ich habe auch das 3D-Modell für die Drehregler für die von mir verwendeten Potentiometer enthalten.

Sie finden alle 3D-Dateien auf GitHub.

Schritt 6: Programmierung: Arduino

Beginnen wir mit der Einrichtung einer einfachen Skizze zum Testen. Ich schlage vor, das von ITP an der NYU erstellte Tutorial zu verwenden, das Sie hier finden. Für dieses Tutorial müssen p5.serialcontroll und node.js installiert sein. In diesem Tutorial werden Sie in die Einrichtung eines Arduino eingeführt, um serielle Daten zu senden, die von unserer Javascript-Bibliothek p5.js verwendet werden können. Sie können dazu den Hub und den Controller verwenden, die wir in den vorherigen Schritten erstellt haben, oder Sie können die im Tutorial gezeigten Schaltungen replizieren. Dieses Tutorial verwendet den analogen A0-Eingangspin des Arduino Uno, der dem orangefarbenen Kabel Ihres ersten Controllers zugeordnet ist.

Das nächste Tutorial, dem Sie folgen möchten, finden Sie hier. Dieses Tutorial führt Sie durch das Einrichten mehrerer Eingaben und deren Verwendung in p5.js. Im Tutorial werden die analogen Eingänge A0 und A1 verwendet. Diese entsprechen den orangefarbenen und gelben Drähten an Controller 1 unseres Systems.

Nachdem Sie die obigen Tutorials durchgegangen sind, können wir den Arduino programmieren. Der Code, den wir verwenden möchten, ist unten:

// Controller 1const int dig2 = 2; // blau const int dig3 = 3; // lila const int dig4 = 4; // grau const int dig5 = 5; // weiße const int dig6 = 6; // schwarz // Controller 2 const int dig7 = 7; // blau const int dig8 = 8; // lila const int dig9 = 9; // grau const int dig10 = 10; // weiße const int dig11 = 11; //Schwarz

Leere Einrichtung () {

Serial.begin (9600); Während (Serial.available () <= 0) {Serial.println ("Hallo"); // Sende eine Startnachricht delay(300); // 1/3 Sekunde warten} PinMode (dig2, INPUT); pinMode (dig3, EINGANG); pinMode (dig4, EINGANG); pinMode (dig5, EINGANG); pinMode (dig6, EINGANG); pinMode (dig7, EINGANG); pinMode (dig8, EINGANG); pinMode (dig9, EINGANG); pinMode (dig10, EINGANG); pinMode (dig11, EINGANG); }

Leere Schleife () {

if (Serial.available () > 0) { // das eingehende Byte lesen: int inByte = Serial.read (); // Sensor auslesen:

//ANALOG-Controller 1

int analog0 = analogRead(A0); int analog1 = analogRead(A1); int analog2 = analogRead(A2); // ANALOG Controller 2 int analog3 = analogRead (A3); int analog4 = analogRead(A4); int analog5 = analogRead(A5); // DIGITAL Controller 1 int digital2 = digitalRead (dig2); int digital3 = digitalRead (dig3); int digital4 = digitalRead (dig4);

int digital5 = digitalRead (dig5);

int digital6 = digitalRead (dig6); // DIGITAL Controller 2 int digital7 = digitalRead (dig7); int digital8 = digitalRead (dig8); int digital9 = digitalRead (dig9); int digital10 = digitalRead (dig10); int digital11 = digitalRead (dig11); // die Ergebnisse ausgeben: Serial.print (analog0); // [0] Serial.print (", "); Serial.print (analog1); //[1] Serial.print (", "); Serial.print (analog2); // [2] Serial.print (", "); // Controller 2 Daten starten 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 (", "); // Controller 2 Daten starten 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); //[fünfzehn] } }

Dieser Code sendet die seriellen Daten von unseren beiden Controllern als Array von 16 Zahlen. Die ersten 6 dieser Zahlen sind unsere analogen Eingänge (im Bereich von 0-1023) und die restlichen 10 Werte sind unsere digitalen Werte (0 oder 1).

Sobald unser Code hochgeladen ist, können wir dies testen, indem wir den seriellen Monitor öffnen und einen Wert in unseren seriellen Monitor eingeben, wie wir es im zweiten Tutorial von ITP getan haben. Wir sollten eine durch Kommas getrennte Zeichenfolge unserer Werte erhalten.

Schritt 7: Programmierung: HTML

Sobald wir unser Arduino eingerichtet und funktioniert haben, können wir mit der Programmierung unseres Web-Zeugs beginnen. Der HTML-Code ist sehr einfach.

Körper {Auffüllung: 0; Rand: 0;}

Der HTML-Code verknüpft einfach unsere Javascript-Dateien miteinander. Der größte Teil unseres Codes wird tatsächlich in unserer Sketch-.js-Datei gespeichert.

Schritt 8: Programmierung: P5.js und Javascript

Sobald wir unser HTML eingerichtet haben, können wir an unserem JavaScript arbeiten. Wenn Sie es noch nicht getan haben, sollten Sie jetzt p5.js sowie p5.play herunterladen und diese zu Ihrem Bibliotheksordner im Verzeichnis für Ihre Website hinzufügen.

• p5.js
• p5.play

In unserem vorherigen Schritt haben wir unsere HTML-Datei so eingerichtet, dass sie unsere p5.js- und p5.play-Bibliotheken aufruft. Wir haben es auch so eingerichtet, dass es unsere Datei sketch.js verwendet, in der wir den größten Teil unserer Programmierung durchführen werden. Unten ist der Code für unser Skelett. Sie finden es auch hier.

//Serielle Variablenvar serial; // Variable für eine Instanz der Serialport-Bibliothek var portName = 'COM4'; // Tragen Sie hier Ihren seriellen Portnamen ein //Globale Spielvariablen --------------

//Setup-Funktion ----------------------

Funktion setup () { createCanvas (640, 480); seriell = neu p5. SerialPort(); // eine neue Instanz der Serialport-Bibliothek erstellen serial.on('list', printList); // setze eine Callback-Funktion für das Serialport-Listenereignis serial.on('connected', serverConnected); // Rückruf für die Verbindung zum Server serial.on('open', portOpen); // Rückruf für den Port, der serial.on ('data', serialEvent) öffnet; // Rückruf wenn neue Daten eintreffen serial.on('error', serialError); // Rückruf bei Fehlern serial.on('close', portClose); // Rückruf für den Port, der serial.list () schließt; // die seriellen Ports auflisten serial.open (portName); // einen seriellen Port öffnen} // Funktion zeichnen ----------------------- Funktion draw () { background (0); // schwarzer Hintergrund} //Hier die seriellen Daten interpretieren ---------- function serialEvent() { // einen String vom seriellen Port lesen // bis Sie Wagenrücklauf und Zeilenumbruch erhalten: var inString = serial. readStringUntil('\r\n'); //überprüfe, ob dort tatsächlich ein ssetring vorhanden ist: if (inString.length > 0) { if (inString !== 'hello') { // Wenn du hallo bekommst, ignoriere es var sensor = split(inString, ', '); // den String auf die Kommas aufteilen if (sensors.length > 16) {// wenn es sechzehn Elemente gibt (6 analog, 10 digital) // Sensordaten hier verwenden:

}

} serial.write('x'); // ein Byte senden, das weitere serielle Daten anfordert } } // Liste der Ports abrufen: function printList(portList) { // portList ist ein Array von seriellen Portnamen für (var i = 0; i < portList.length; i++) { // Zeigt die Liste in der Konsole an: print(i + " " + portList); } } function serverConnected() { print('mit dem Server verbunden.'); } function portOpen() { print('der serielle Port wurde geöffnet.') } function serialError(err) { print('Etwas ist mit dem seriellen Port schief gelaufen. ' + err); } function portClose() { print('Der serielle Port wurde geschlossen.'); } Funktion ClosingCode () { serial.close (portName); Null zurückgeben; } window.onbeforeunload = ClosingCode;

Sobald Sie das Skelett gespeichert haben. Sie können diese Werte ähnlich wie im ITP-Lernprogramm verwenden. Die Wertefolge, die wir in Schritt 6 von unserem Arduino gesendet haben, wird als Array von 16 Zahlen gesendet. Unten analysieren wir dieses Array.

// Hier serielle Daten interpretieren ----------

function serialEvent() { // einen String von der seriellen Schnittstelle lesen // bis Sie Wagenrücklauf und Zeilenumbruch erhalten: var inString = serial.readStringUntil('\r\n'); //überprüfe, ob dort tatsächlich ein ssetring vorhanden ist: if (inString.length > 0) { if (inString !== 'hello') { // Wenn du hallo bekommst, ignoriere es var sensor = split(inString, ', '); // die Zeichenfolge auf die Kommas aufteilen if (sensors.length > 16) {// wenn es sechzehn Elemente gibt (6 analog, 10 digital) // Sensordaten hier verwenden: } } serial.write ('x'); // ein Byte senden, das mehr serielle Daten anfordert } }

Wir können jetzt unser Programm ausführen, um zu sehen, ob es funktioniert!

Schritt 9: Ausführen Ihres Programms

Wir können jetzt unser Programm ausführen, um zu sehen, ob es funktioniert. Sie können entweder Ihr eigenes Spiel mit der Datei skeleton.js in unserer vorherigen Datei erstellen oder das einfache Pipe-Spiel verwenden, das Sie hier finden.

Ähnlich wie beim ITP Lab werden wir zum Ausführen unseres Programms die folgenden Schritte ausführen.

• Schließen Sie den Arduino mit den Controllern an, die Sie verwenden möchten.
• Öffnen Sie p5.serialcontrol
• Ändern Sie den Port Ihrer p5-Skizze in den von Ihnen verwendeten (wenn Sie das Skelett verwenden, ist dies in Zeile 3)
• Öffnen Sie die HTML-Datei, die auf Ihre p5-Skizze verweist

Wenn Sie externe Medien wie Bilder oder heruntergeladene Schriftarten haben, sollten Sie diese auf einem Server ausführen. Sie können einen einfachen lokalen Python-Server ausführen, wenn Sie möchten.

Schritt 10: Weiter gehen

Um weiter zu gehen und weitere Spiele dafür zu entwickeln, können Sie verschiedenen Beispielen von p5.play folgen, die Sie hier finden. Unten ist ein Beispiel für ein komplizierteres Spiel, das ich erstellt habe. Es ist ein 1-gegen-1-Panzer-Shooter-Spiel. Alle Ressourcen dafür finden Sie auf GitHub.