Controlere Arduino: 10 pași (cu imagini)

2024 Autor: John Day | [email protected]. Modificat ultima dată: 2024-01-30 11:46

Un sistem de controler de joc Arduino care utilizează Arduino și biblioteca p5.js. Ideea acestui lucru este de a crea un proiect Arduino ușor de replicat și extins. Conexiunile controlerului sunt concepute pentru a utiliza o grămadă de senzori și intrări variate care pot fi schimbate în funcție de fiecare controler.

Acest proiect este, de asemenea, conceput pentru a utiliza biblioteca JavaScript p5.js împreună cu biblioteca p5.play concepută pentru p5.js. Aceste biblioteci ne permit să ne programăm jocurile cu ușurință. Site-ul web p5.play are o grămadă de tutoriale și exemple pentru ca utilizatorii să creeze jocuri pentru acesta. Acest proiect permite utilizatorilor să-și exerseze abilitățile de dezvoltare hardware și software.

Pasul 1: De ce veți avea nevoie

Instrumente:

• Ciocan de lipit
• Solder
• Dispozitive de decupare a firelor
• Freze laterale
• Cleşte

Hardware:

• Placă compatibilă Arduino (am folosit un Sparkfun Redboard, precum și un Arduino Uno și Leonardo)

• Perf Board:

  • 8cm x 6cm panouri de culoare verde
  • Placă de scut Aduino Uno

• Diversi senzori

  • Joystick-uri
  • Butoane (cu rezistențe, 10k ohmi, pentru a merge cu ele)
  • Potențiometre
  • Senzori flexibili
  • Senzori de presiune
  • Etc …

• Sârmă:

  • Single Wire (am folosit 26 AWG Solid)
  • Sârmă panglică și sertizare
• Anteturi Break Away (cel puțin 20 dintre acestea)

• Hardware opțional (puteți folosi în schimb carton și cârliguri fierbinți / fermoar):

  • Cabluri de panou și jumper pentru prototipare
  • Carcase imprimate 3D
  • Dispozitive de fixare hardware (am folosit șuruburi M2.5)

Software:

• IDE Arduino

• biblioteca p5.js

  Biblioteca P5.play, de asemenea

• p5.serialcontrol
• Node.js

Pasul 2: Construire: hub-ul consolei, Configurarea scutului

Lipiți anteturile pe placa de scut Arduino Uno.

• Am început cu anteturile scutului (alimentare, intrare analogică și digitală)
• Urmează pinii antetului 2x5. Puteți utiliza anteturi 2x5 sau doar 2 rânduri de 5 anteturi de separare. Le-am aliniat vertical cu A3 și A4 și am lăsat 2 spații între ele.

Pasul 3: Clădire: hub-ul consolei, cablarea scutului

Apoi, vrem să ne orientăm firele pe scut. Este mai ușor să rulați firele în partea de sus, dar dacă doriți un aspect mai curat, le puteți rula în partea de jos.

Doriți să acordați atenție schemei (schema Eagle este disponibilă pentru descărcare) atunci când direcționați aceste fire. De asemenea, puteți consulta ghidul de culori pentru a vă ajuta în acest sens.

Ideea acestui design de scut este de a permite 3 intrări analogice și 5 intrări digitale de la fiecare controler. Acest lucru profită din plin de toate intrările analogice de pe un Arduino Uno, precum și de firele rămase de pe cablul nostru cu bandă.

Pasul 4: Construire: controlere, configurarea pieselor

Primul pas pentru construirea controlerului dvs. este să planificați ce senzori să utilizați. În exemplele mele, am un controller destul de standard, cu un joystick și câteva butoane. Am și un controller cu două potențiometre glisante.

Dacă doriți să reproduceți acest lucru, puteți vizualiza imaginile mele pentru plasare.

Următorul pas este să lipiți cablul panglică pe placa de perf.

1. Îndepărtați și tăiați cablul cu bandă
2. Lipiți cablul panglică în centrul de sus al plăcii de perfecționare.

Următorul pas este să vă direcționați firele. Am început prin cablarea mai întâi a senzorilor de alimentare (5V / fir roșu) și masă (fir maro). Am conectat apoi intrările analogice. Mi s-a părut ușor să folosesc cablul portocaliu (analog A0 sau A3) pentru mișcare orizontală și cablul galben (analog A1 sau A4) pentru mișcare verticală.

Pentru a menține consecvența lucrurilor, am conectat și un mic buton la violet pe toate controlerele mele. Acest lucru este util pentru lucruri precum închiderea portului serial (voi revizui mai târziu), precum și pentru meniuri sau opțiuni.

Am încărcat o schemă rapidă a controlerului meu cu joystick, dacă doriți să aruncați o privire la asta. Din diagrama noastră pin-out, puteți vedea posibilitatea fiecărei conexiuni a controlerului (3 intrări analogice și 5 digitale).

Pasul 5: Opțional: Carcase

Acest pas este opțional, dar dacă aveți acces la o imprimantă 3D, rezultatul proiectului dvs. va părea puțin mai rafinat și mai finit. După cum puteți vedea în prototipurile mele, am folosit o bucată simplă de carton pentru a împiedica îmbinările de lipit de pe fundul panourilor de perf să vă bată degetele.

Puteți găsi modelele mele 3D atașate acestui pas. Am creat carcase pentru hub atât pentru Arduino Uno / Leonardo, cât și pentru Sparkfun RedBoard (această placă este puțin mai largă și folosește mini USB).

Pentru controlere, le puteți atașa cu șuruburi M2.5. Am păstrat piulița pe partea laterală a PCB-ului și folosesc o șaibă și șurubul de pe fund.

Am inclus și modelul 3D pentru glisierele butoanelor pentru potențiometrele pe care le-am folosit.

Puteți găsi toate fișierele 3D pe GitHub.

Pasul 6: Programare: Arduino

Să începem prin configurarea unei schițe simple pentru testare. Vă sugerez să folosiți tutorialul creat de ITP la NYU găsit aici. Pentru a face acest tutorial, va trebui să aveți p5.serialcontroll și node.js instalate. În acest tutorial, veți fi introdus la configurarea unui Arduino pentru a trimite date seriale care pot fi utilizate de biblioteca noastră javascript, p5.js. Puteți utiliza hub-ul și controlerul pe care le-am creat în pașii anteriori pentru a face acest lucru sau puteți replica circuitele prezentate în tutorial. Acest tutorial utilizează pinul de intrare analogică A0 de pe Arduino Uno, care este mapat la firul portocaliu al primului dvs. controler.

Următorul tutorial pe care veți dori să îl urmați poate fi găsit aici. Acest tutorial vă va ghida prin configurarea mai multor intrări și utilizarea acestora în p5.js. În tutorial, sunt utilizate intrările analogice A0 și A1. Acestea vor corespunde firelor portocalii și galbene de pe controlerul 1 al sistemului nostru.

După ce ați parcurs tutorialele de mai sus, putem programa Arduino. Codul pe care dorim să îl folosim este mai jos:

// controller 1const int dig2 = 2; // blue const int dig3 = 3; // violet int int dig4 = 4; // gri const int dig5 = 5; // const alb alb dig6 = 6; // negru // controler 2 const int dig7 = 7; // blue const int dig8 = 8; // violet int int dig9 = 9; // gri const int dig10 = 10; // const alb alb dig11 = 11; //negru

configurare nulă () {

Serial.begin (9600); while (Serial.available () <= 0) {Serial.println ("salut"); // trimite o întârziere a mesajului de pornire (300); // așteptați 1/3 secunde} 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); }

bucla nulă () {

if (Serial.available ()> 0) {// citiți octetul de intrare: int inByte = Serial.read (); // citiți senzorul:

// Controler ANALOG 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); // Controller DIGITAL 1 int digital2 = digitalRead (dig2); int digital3 = digitalRead (dig3); int digital4 = digitalRead (dig4);

int digital5 = digitalRead (dig5);

int digital6 = digitalRead (dig6); // Controller DIGITAL 2 int digital7 = digitalRead (dig7); int digital8 = digitalRead (dig8); int digital9 = digitalRead (dig9); int digital10 = digitalRead (dig10); int digital11 = digitalRead (dig11); // tipăriți rezultatele: Serial.print (analog0); // [0] Serial.print (","); Serial.print (analog1); // [1] Serial.print (","); Serial.print (analog2); // [2] Serial.print (","); // Porniți Controller 2 date 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 (","); // Porniți controlerul 2 date 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]}}

Acest cod trimite datele seriale de la ambele controlere noastre sub formă de matrice de 16 numere. Primele 6 dintre aceste numere sunt intrările noastre analogice (variind de la 0-1023), iar restul de 10 valori sunt valorile noastre digitale (0 sau 1).

Odată ce codul nostru este încărcat, putem testa acest lucru deschizând monitorul serial și tastând o valoare în monitorul nostru serial, așa cum am făcut în al doilea tutorial de la ITP. Ar trebui să obținem un șir de valori separate prin virgule.

Pasul 7: Programare: HTML

Odată ce Arduino a fost configurat și funcționat, putem începe să ne programăm lucrurile web. Codul HTML este foarte simplu.

corp {umplutură: 0; marjă: 0;}

Codul html leagă pur și simplu fișierele noastre javascript. Majoritatea codului nostru se va întâmpla de fapt în fișierul nostru.js schiță.

Pasul 8: Programare: P5.js și Javascript

Odată ce ne-am configurat codul HTML, putem lucra la JavaScript. Dacă nu ați făcut-o deja, ar trebui să descărcați p5.js, precum și p5.play și să le adăugați în folderul bibliotecilor din directorul site-ului dvs. web.

• p5.js
• p5.juca

În pasul anterior, ne-am configurat fișierul HTML pentru a apela bibliotecile noastre p5.js și p5.play. De asemenea, l-am configurat pentru a utiliza fișierul nostru sketch.js, unde vom face cea mai mare parte a programării noastre. Mai jos este codul pentru scheletul nostru. O puteți găsi și aici.

// Serial Variablesvar serial; // variabilă pentru a deține o instanță a bibliotecii serialport var portName = 'COM4'; // completați aici numele portului serial // Variabile globale de joc ---------------

// Funcția de configurare ----------------------

setup setup () {createCanvas (640, 480); serial = new p5. SerialPort (); // faceți o nouă instanță a bibliotecii serialport serial.on ('list', printList); // setați o funcție de apel invers pentru evenimentul serialport list serial.on („conectat”, serverConectat); // apel invers pentru conectarea la server serial.on ('deschis', portOpen); // callback pentru deschiderea portului serial.on ('date', serialEvent); // callback pentru când sosesc date noi serial.on („eroare”, serialError); // callback pentru erori serial.on („închidere”, portClose); // callback pentru închiderea portului serial.list (); // listează porturile seriale serial.open (portName); // deschideți un port serial} // Funcția Draw ----------------------- function draw () {background (0); // fundal negru} // Interpretează aici datele seriale ---------- funcția serialEvent () {// citește un șir din portul serial // până când obții returnarea carului și newline: var inString = serial. readStringUntil ('\ r / n'); // verificați dacă există de fapt un ssetring acolo: if (inString.length> 0) {if (inString! == 'hello') {// dacă primiți hello, ignorați-l var sensors = split (inString, ', '); // împarte șirul pe virgule dacă (senzori lungime> 16) {// dacă există șaisprezece elemente (6 analogice, 10 digitale) // Folosește datele senzorilor aici:

}

} serial.write ('x'); // trimiteți un octet solicitând mai multe date seriale}} // obțineți lista de porturi: funcția printList (portList) {// portList este o matrice de nume de port serial pentru (var i = 0; i <portList.length; i ++) {// Afișați lista consolă: print (i + "" + portList ); }} function serverConnected () {print ('conectat la server.'); } function portOpen () {print ('portul serial deschis.')} function serialError (err) {print ('Ceva nu a mers cu portul serial.' + err); } function portClose () {print ('Portul serial închis.'); } funcție închidereCod () {serial.close (portName); returnare nulă; } window.onbeforeunload = închidereCod;

Odată ce ai scheletul salvat. Puteți utiliza aceste valori în mod similar cu modul în care a fost realizat în tutorialul ITP. Șirul de valori pe care le-am trimis de la Arduino la pasul 6 sunt trimise ca o matrice de 16 numere. Mai jos este locul în care analizăm această matrice.

// Interpretează aici datele de serie ----------

funcție serialEvent () {// citiți un șir din portul serial // până când veți obține returnarea căruia și newline: var inString = serial.readStringUntil ('\ r / n'); // verificați dacă există de fapt un ssetring acolo: if (inString.length> 0) {if (inString! == 'hello') {// dacă primiți hello, ignorați-l var sensors = split (inString, ', '); // împarte șirul pe virgule dacă (senzori lungime> 16) {// dacă există șaisprezece elemente (6 analogice, 10 digitale) // Folosește aici datele senzorului:}} serial.write ('x'); // trimiteți un octet solicitând mai multe date seriale}}

Acum putem rula programul nostru pentru a vedea dacă funcționează!

Pasul 9: Rulați programul

Acum putem rula programul nostru pentru a vedea dacă funcționează. Puteți crea propriul joc folosind fișierul skeleton.js din fișierul nostru anterior sau puteți folosi jocul simplu Pipe găsit aici.

Similar cu laboratorul ITP, pentru a rula programul nostru, vom urma pașii de mai jos.

• Conectați Arduino la controlerele pe care intenționați să le utilizați.
• Deschideți p5.serialcontrol
• Schimbați portul schiței p5 cu cel pe care îl utilizați (dacă utilizați scheletul, acesta este pe linia 3)
• Deschideți fișierul HTML care leagă schița dvs. p5

Dacă aveți suporturi externe precum imagini sau fonturi descărcate, veți dori să rulați acest lucru pe un server. Puteți rula un server Python local simplu, dacă doriți.

Pasul 10: Mergeți mai departe

Pentru a merge mai departe și a dezvolta mai multe jocuri pentru aceasta, puteți urmări diverse exemple din p5.play găsite aici. Mai jos este un exemplu de joc mai complicat pe care l-am creat. Este un joc de tip shooter 1 vs 1. Puteți găsi toate resursele pentru aceasta pe GitHub.