Arduino -kontroller: 10 steg (med bilder)

2024 Författare: John Day | [email protected]. Senast ändrad: 2024-01-30 12:46

Ett Arduino -spelkontrollsystem med Arduino och p5.js -biblioteket. Tanken med detta är att skapa ett Arduino -projekt som enkelt kan replikeras och expanderas. Kontrollanslutningarna är utformade för att använda en massa olika sensorer och ingångar som kan bytas ut beroende på varje styrenhet.

Detta projekt är också utformat för att använda JavaScript -biblioteket p5.js tillsammans med p5.play -biblioteket som är utformat för p5.js. Dessa bibliotek gör att vi enkelt kan programmera våra spel. Webbplatsen p5.play har ett gäng handledning och exempel för användare att skapa spel för det. Detta projekt låter användarna öva sina färdigheter inom hårdvara och mjukvara.

Steg 1: Vad du behöver

Verktyg:

• Lödkolv
• Löda
• Wire Strippers
• Sidoskär
• Tång

Hårdvara:

• Arduino -kompatibelt kort (jag använde en Sparkfun Redboard samt en Arduino Uno och Leonardo)

• Perf Board:

  • 8 cm x 6 cm gröna perf brädor
  • Aduino Uno shield perf board

• Olika sensorer

  • Joysticks
  • Knappar (med motstånd, 10k ohm, att gå med dem)
  • Potentiometrar
  • Flex -sensorer
  • Trycksensorer
  • Etc…

• Tråd:

  • Single Wire (jag använde 26 AWG Solid)
  • Bandtråd och crimps
• Break Away Headers (minst 20 av dessa)

• Valfri hårdvara (du kan använda kartong och limband/dragband i stället):

  • Brödbräda och bygelkablar för prototyper
  • 3D -tryckta höljen
  • Hårdvarufästen (jag använde M2.5 -skruvar)

Programvara:

• Arduino IDE

• p5.js bibliotek

  P5.play bibliotek också

• p5.seriekontroll
• Node.js

Steg 2: Bygga: konsolnavet, ställa in skölden

Löd huvudet till Arduino Uno shield perf board.

• Jag började med sköldhuvudena (ström, analog in och digital)
• Nästa är 2x5 header pins. Du kan använda 2x5 rubriker, eller bara 2 rader med 5 bryta bort rubriker. Jag ställde upp dessa med A3 och A4 vertikalt och lämnade 2 mellanslag mellan dem.

Steg 3: Bygga: konsolnavet, anslutning av skölden

Därefter vill vi dra våra ledningar på skölden. Det är lättare att köra trådarna ovanpå, men om du vill ha ett renare utseende kan du köra dem på undersidan.

Du vill uppmärksamma schemat (Eagle -schemat är tillgängligt för nedladdning) när du dirigerar dessa ledningar. Du kan också titta på färgguiden för att hjälpa dig med detta.

Tanken med denna skärmdesign är att tillåta 3 analoga ingångar och 5 digitala ingångar från varje styrenhet. Detta drar full nytta av alla analoga ingångar på en Arduino Uno samt de återstående ledningarna på vår bandkabel.

Steg 4: Bygga: kontrollerna, konfigurera dina delar

Det första steget för att bygga din controller är att planera vilka sensorer som ska användas. I mina exempel har jag en ganska standardkontroll med en joystick och några knappar. Jag har också en styrenhet med två reglage potentiometrar.

Om du vill replikera detta kan du se mina bilder för placering.

Nästa steg är att löda din bandkabel till perf -kortet.

1. Ta av och plåta bandkabeln
2. Löd bandkabeln till övre mitten av din perf kartong.

Nästa steg är att dra dina ledningar. Jag började med att koppla in strömmen (5V/röd tråd) och marken (brun ledning) till sensorerna först. Jag kopplade sedan de analoga ingångarna. Jag tyckte att det var lätt att använda den orange kabeln (Analog A0 eller A3) för horisontell rörelse och den gula kabeln (Analog A1 eller A4) för vertikal rörelse.

För att hålla saker och ting konsekvent kopplade jag också en liten tryckknapp till lila på alla mina kontroller. Detta är användbart för saker som att stänga den seriella porten (jag går igenom detta senare) samt menyer eller alternativ.

Jag har laddat upp en snabbschema över min joystick -kontroll om du vill titta på detta. Från vårt pin-out-diagram kan du se möjligheten för varje controlleranslutning (3 analoga ingångar och 5 digitala).

Steg 5: Valfritt: Kapslingar

Detta steg är valfritt, men om du har tillgång till en 3D -skrivare kommer resultatet av ditt projekt att se lite mer raffinerat och färdigt ut. Som du kan se i mina prototyper använde jag en enkel kartongbit för att förhindra att lödfogarna på botten av perfbrädorna sticker i fingrarna.

Du hittar mina 3D -modeller kopplade till detta steg. Jag har skapat kapslingar för navet för både Arduino Uno/Leonardo och Sparkfun RedBoard (detta kort är lite bredare och använder mini -USB).

För kontrollerna kan du fästa dessa med M2.5 -skruvar. Jag behöll muttern på sidan av kretskortet och använder en bricka och skruven på botten.

Jag har också inkluderat 3D -modellen för vredreglagen för potentiometrarna jag använde.

Du kan hitta alla 3D -filer på GitHub.

Steg 6: Programmering: Arduino

Låt oss börja med att sätta upp en enkel skiss att testa. Jag föreslår att du använder handledningen som skapats av ITP vid NYU som finns här. För att göra den här självstudien måste du ha p5.serialcontroll och node.js installerat. I den här självstudien kommer du att lära dig att konfigurera en Arduino för att skicka seriell data som kan användas av vårt javascript -bibliotek, p5.js. Du kan använda navet och styrenheten som vi skapade i de föregående stegen för att göra detta, eller så kan du replikera kretsarna som visas i handledningen. Denna handledning använder den analoga A0 -ingångsstiften på Arduino Uno som är mappad till den orangea ledningen på din första styrenhet.

Nästa handledning som du vill följa finns här. Denna handledning guidar dig genom att konfigurera flera ingångar och använda dem i p5.js. I självstudien används de analoga ingångarna A0 och A1. Dessa kommer att motsvara de orange och gula ledningarna på styrenhet 1 i vårt system.

När du har gått igenom självstudierna ovan kan vi programmera Arduino. Koden vi vill använda är nedan:

// controller 1const int dig2 = 2; // blå const int dig3 = 3; // lila const int dig4 = 4; // grå const int dig5 = 5; // vit const int dig6 = 6; // svart // styrenhet 2 const int dig7 = 7; // blå const int dig8 = 8; // lila const int dig9 = 9; // grå const int dig10 = 10; // vit const int dig11 = 11; //svart

void setup () {

Serial.begin (9600); medan (Serial.available () <= 0) {Serial.println ("hej"); // skicka en startmeddelandefördröjning (300); // vänta 1/3 sekund} 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); }

void loop () {

if (Serial.available ()> 0) {// läs inkommande byte: int inByte = Serial.read (); // läs sensorn:

// 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); // skriv ut resultaten: Serial.print (analog0); // [0] Serial.print (","); Serial.print (analog1); // [1] Serial.print (","); Serial.print (analog2); // [2] Serial.print (","); // Starta Controller 2 data 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 (","); // Starta controller 2 data 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]}}

Denna kod skickar seriell data från båda våra styrenheter som en uppsättning med 16 nummer. De första 6 av dessa nummer är våra analoga ingångar (från 0-1023) och de återstående 10 värdena är våra digitala värden (0 eller 1).

När vår kod har laddats upp kan vi testa detta genom att öppna den seriella bildskärmen och skriva in ett värde i vår seriella bildskärm som vi gjorde i den andra handledningen från ITP. Vi borde få en rad av våra värden åtskilda med kommatecken.

Steg 7: Programmering: HTML

När vi väl har satt igång vår Arduino kan vi börja programmera våra webbgrejer. HTML -koden är väldigt enkel.

kropp {vaddering: 0; marginal: 0;}

HTML -koden länkar helt enkelt samman våra javascript -filer. De flesta av våra koder kommer faktiskt att hända i vår skiss.js -fil.

Steg 8: Programmering: P5.js och Javascript

När vi har konfigurerat vår HTML kan vi arbeta med vårt JavaScript. Om du inte redan har gjort det bör du nu ladda ner p5.js samt p5.play och lägga till dessa i mappen bibliotek i katalogen för din webbplats.

• p5.js
• s5.spel

I vårt föregående steg konfigurerade vi vår HTML -fil för att anropa våra p5.js- och p5.play -bibliotek. Vi konfigurerade det också för att använda vår sketch.js -fil, där vi kommer att göra det mesta av vår programmering. Nedan är koden för vårt skelett. Du kan också hitta den här.

// Serial Variablesvar serial; // variabel för att hålla en instans av serieportbiblioteket var portName = 'COM4'; // fyll i ditt serieportnamn här // Globala spelvariabler ---------------

// Inställningsfunktion ----------------------

funktion setup () {createCanvas (640, 480); serial = new p5. SerialPort (); // skapa en ny instans av serialport -biblioteket serial.on ('list', printList); // ställ in en återuppringningsfunktion för serieportlistan händelse serial.on ('ansluten', serveransluten); // återuppringning för anslutning till servern serial.on ('open', portOpen); // återuppringning för portöppningen serial.on ('data', serialEvent); // återuppringning för när ny data kommer in seriell.on ('fel', seriefel); // återuppringning för fel serial.on ('close', portClose); // återuppringning för porten som stänger serial.list (); // lista de seriella portarna serial.open (portName); // öppna en seriell port} // Draw Function ----------------------- function draw () {background (0); // svart bakgrund} // Tolk seriell data här ---------- funktion serialEvent () {// läs en sträng från serieporten // tills du får vagnretur och newline: var inString = serial. readStringUntil ('\ r / n'); // kontrollera att det faktiskt finns en ssetring där: if (inString.length> 0) {if (inString! == 'hej') {// om du får hej, ignorera det var sensorer = split (inString, ', '); // dela strängen på kommatecken om (sensorer.längd> 16) {// om det finns sexton element (6 analoga, 10 digitala) // Använd sensordata här:

}

} serial.write ('x'); // skicka en byte som begär mer seriell data}} // få listan över portar: function printList (portList) {// portList är en rad seriella portnamn för (var i = 0; i <portList.length; i ++) {// Visa listan konsolen: print (i + "" + portList ); }} funktion serverConnected () {print ('ansluten till server.'); } function portOpen () {print ('seriell port öppnad.')} function serialError (err) {print ('Något gick fel med serieporten.' + err); } funktionsportClose () {print ('Seriell port stängd.'); } funktionen closedCode () {serial.close (portName); return null; } fönster.onbeforeunload = stängningskod;

När du har skelettet sparat. Du kan använda dessa värden på samma sätt som hur det gjordes i ITP -handledningen. Värdensträngen som vi skickade från vår Arduino i steg 6 skickas in som en rad med 16 nummer. Nedan är där vi analyserar denna array.

// Tolka seriell data här ----------

function serialEvent () {// läs en sträng från serieporten // tills du får vagnretur och newline: var inString = serial.readStringUntil ('\ r / n'); // kontrollera att det faktiskt finns en ssetring där: if (inString.length> 0) {if (inString! == 'hej') {// om du får hej, ignorera det var sensorer = split (inString, ', '); // dela strängen på kommatecken om (sensors.length> 16) {// om det finns sexton element (6 analoga, 10 digitala) // Använd sensordata här:}} serial.write ('x'); // skicka en byte som begär mer seriell data}}

Vi kan nu köra vårt program för att se om det fungerar!

Steg 9: Kör ditt program

Vi kan nu köra vårt program för att se om det fungerar. Du kan antingen skapa ditt eget spel med skeleton.js -filen i vår tidigare fil eller så kan du använda det enkla Pipe -spelet som finns här.

I likhet med ITP Lab kommer vi att följa stegen nedan för att köra vårt program.

• Anslut Arduino med den eller de kontroller du planerar att använda.
• Öppna p5.serialcontrol
• Ändra din p5 -skissport till den du använder (om du använder skelettet är detta på rad 3)
• Öppna HTML -filen som länkar till din p5 -skiss

Om du har externa medier, till exempel bilder eller nedladdade teckensnitt, vill du köra detta på en server. Du kan köra en enkel lokal pythonserver om du vill.

Steg 10: Gå vidare

För att gå vidare och utveckla fler spel för detta kan du följa olika exempel från p5.play som finns här. Nedan är ett exempel på ett mer komplicerat spel som jag skapade. Det är ett 1 mot 1 tankskyttspel. Du kan hitta alla resurser för det på GitHub.