Controller Arduino: 10 passaggi (con immagini)

2024 Autore: John Day | [email protected]. Ultima modifica: 2024-01-30 10:04

Un sistema di controller di gioco Arduino che utilizza Arduino e la libreria p5.js. L'idea è quella di creare un progetto Arduino che sia facilmente replicabile ed espandibile. Le connessioni del controller sono progettate per utilizzare una serie di vari sensori e ingressi che possono essere scambiati a seconda di ciascun controller.

Questo progetto è progettato anche per utilizzare la libreria JavaScript p5.js insieme alla libreria p5.play progettata per p5.js. Queste librerie ci consentono di programmare i nostri giochi con facilità. Il sito web p5.play ha un sacco di tutorial ed esempi per consentire agli utenti di creare giochi. Questo progetto consente agli utenti di esercitare le proprie capacità di sviluppo hardware e software.

Passaggio 1: cosa ti servirà

Utensili:

• Saldatore
• Saldare
• Spelafili
• Tronchesi laterali
• Pinze

Hardware:

• Scheda compatibile con Arduino (ho usato una Redboard Sparkfun oltre ad Arduino Uno e Leonardo)

• Tavola delle prestazioni:

  • Tavole perforate verdi da 8 cm x 6 cm
  • Aduino Uno shield perf board

• Vari sensori

  • Joystick
  • Pulsanti (con resistori, 10k ohm, per abbinarli)
  • Potenziometri
  • Sensori flessibili
  • Sensori di pressione
  • Eccetera…

• Filo:

  • Filo singolo (ho usato 26 AWG solido)
  • Filo a nastro e crimpature
• Intestazioni staccate (almeno 20 di queste)

• Hardware opzionale (puoi invece utilizzare cartone e colla a caldo/fascette):

  • Breadboard e cavi jumper per prototipazione
  • Custodie stampate in 3D
  • Elementi di fissaggio hardware (ho usato viti M2.5)

Software:

• Arduino IDE

• libreria p5.js

  Anche la libreria P5.play

• p5.serialcontrol
• Nodo.js

Passaggio 2: costruzione: l'hub della console, configurazione dello scudo

Saldare le intestazioni alla scheda perf dello shield Arduino Uno.

• Ho iniziato con le intestazioni dello scudo (alimentazione, ingresso analogico e digitale)
• I prossimi sono i pin dell'intestazione 2x5. Puoi utilizzare intestazioni 2x5 o solo 2 righe di 5 intestazioni separate. Li ho allineati con A3 e A4 in verticale e ho lasciato 2 spazi tra di loro.

Passaggio 3: costruzione: l'hub della console, cablaggio dello schermo

Successivamente, vogliamo instradare i nostri fili sullo scudo. È più facile far passare i fili in alto, ma se vuoi un aspetto più pulito puoi farli passare in basso.

Si desidera prestare attenzione allo schema (lo schema Eagle è disponibile per il download) quando si instradano questi fili. Puoi anche guardare la guida ai colori per aiutarti in questo.

L'idea di questo design dello scudo è di consentire 3 ingressi analogici e 5 ingressi digitali da ciascun controller. Questo sfrutta appieno tutti gli ingressi analogici su un Arduino Uno così come i fili rimanenti sul nostro cavo a nastro.

Passaggio 4: costruzione: i controller, configurazione delle parti

Il primo passo per costruire il tuo controller è pianificare quali sensori usare. Nei miei esempi, ho un controller piuttosto standard con un joystick e alcuni pulsanti. Ho anche un controller con due potenziometri a cursore.

Se vuoi replicare questo, puoi visualizzare le mie immagini per il posizionamento.

Il prossimo passo è saldare il cavo a nastro alla scheda perf.

1. Spellare e stagnare il cavo a nastro
2. Saldare il cavo a nastro al centro in alto della scheda perf.

Il prossimo passo è instradare i fili. Ho iniziato collegando prima l'alimentazione (5V/cavo rosso) e la massa (cavo marrone) ai sensori. Ho quindi cablato gli ingressi analogici. Ho trovato facile utilizzare il cavo arancione (Analogico A0 o A3) per il movimento orizzontale e il cavo giallo (Analogico A1 o A4) per il movimento verticale.

Per mantenere le cose coerenti, ho anche collegato un piccolo pulsante al viola su tutti i miei controller. Questo è utile per cose come la chiusura della porta seriale (ne parlerò più avanti) così come per i menu o le opzioni.

Ho caricato uno schema veloce del mio controller joystick se vuoi dare un'occhiata a questo. Dal nostro diagramma di pin-out, puoi vedere la possibilità di ogni connessione del controller (3 ingressi analogici e 5 digitali).

Passaggio 5: facoltativo: allegati

Questo passaggio è facoltativo, ma se hai accesso a una stampante 3D il risultato del tuo progetto apparirà un po' più rifinito e rifinito. Come puoi vedere nei miei prototipi, ho usato un semplice pezzo di cartone per evitare che i giunti di saldatura sul fondo delle schede perforanti ti colpissero le dita.

Puoi trovare i miei modelli 3D allegati a questo passaggio. Ho creato alloggiamenti per l'hub sia per Arduino Uno/Leonardo che per Sparkfun RedBoard (questa scheda è un po' più ampia e utilizza mini USB).

Per i controller, è possibile fissarli con viti M2.5. Ho mantenuto il dado sul lato del PCB e utilizza una rondella e la vite sul fondo.

Ho incluso anche il modello 3D per i cursori delle manopole per i potenziometri che ho usato.

Puoi trovare tutti i file 3D su GitHub.

Passaggio 6: Programmazione: Arduino

Iniziamo impostando un semplice schizzo da testare. Suggerisco di utilizzare il tutorial creato da ITP alla NYU che trovi qui. Per fare questo tutorial, dovrai avere installato p5.serialcontroll e node.js. In questo tutorial, ti verrà presentato come configurare un Arduino per inviare dati seriali utilizzabili dalla nostra libreria javascript, p5.js. Puoi utilizzare l'hub e il controller che abbiamo creato nei passaggi precedenti per farlo, oppure puoi replicare i circuiti mostrati nel tutorial. Questo tutorial utilizza il pin di ingresso analogico A0 su Arduino Uno che è mappato sul filo arancione del tuo primo controller.

Il prossimo tutorial che vorrai seguire può essere trovato qui. Questo tutorial ti guiderà attraverso l'impostazione di più input e il loro utilizzo in p5.js. Nel tutorial vengono utilizzati gli ingressi analogici A0 e A1. Questi corrisponderanno ai fili arancione e giallo sul controller 1 del nostro sistema.

Dopo aver seguito i tutorial sopra, possiamo programmare Arduino. Il codice che vogliamo utilizzare è il seguente:

//controllore 1const int dig2 = 2; //blue const int dig3 = 3; //viola const int dig4 = 4; //grigio const int dig5 = 5; //bianco const int dig6 = 6; //nero //controllore 2 const int dig7 = 7; //blue const int dig8 = 8; //viola const int dig9 = 9; //grigio const int dig10 = 10; //bianco const int dig11 = 11; //Nero

void setup() {

Serial.begin(9600); while (Serial.available() <= 0) { Serial.println("ciao"); // invia un messaggio iniziale delay(300); // aspetta 1/3 di secondo } 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); }

ciclo vuoto() {

if (Serial.available() > 0) { // legge il byte in entrata: int inByte = Serial.read(); // legge il sensore:

//Controllore ANALOGICO 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); // stampa i risultati: Serial.print(analog0); //[0] Serial.print(", "); Serial.print(analogico1); //[1] Serial.print(", "); Serial.print(analogico2); //[2] Serial.print(", "); //Avvia dati Controller 2 Serial.print(analog3); //[3] Serial.print(", "); Serial.print(analogico4); //[4] Serial.print(", "); Serial.print(analogico5); //[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(", "); //Avvia i dati del controller 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] } }

Questo codice invia i dati seriali da entrambi i nostri controller come un array di 16 numeri. I primi 6 di questi numeri sono i nostri ingressi analogici (che vanno da 0-1023) ei restanti 10 valori sono i nostri valori digitali (0 o 1).

Una volta che il nostro codice è stato caricato, possiamo testarlo aprendo il monitor seriale e digitando un valore nel nostro monitor seriale come abbiamo fatto nel secondo tutorial di ITP. Dovremmo ottenere una stringa dei nostri valori separati da virgole.

Passaggio 7: Programmazione: HTML

Una volta che il nostro Arduino è configurato e funzionante, possiamo iniziare a programmare il nostro materiale web. Il codice HTML è molto semplice.

corpo {imbottitura: 0; margine: 0;}

Il codice html collega semplicemente insieme i nostri file javascript. La maggior parte del nostro codice si verificherà effettivamente nel nostro file sketch.js.

Passaggio 8: Programmazione: P5.js e Javascript

Una volta che abbiamo impostato il nostro HTML, possiamo lavorare sul nostro JavaScript. Se non l'hai già fatto, dovresti scaricare p5.js e p5.play e aggiungerli alla cartella delle librerie nella directory del tuo sito web.

• p5.js
• p5.play

Nel nostro passaggio precedente, impostiamo il nostro file HTML per chiamare le nostre librerie p5.js e p5.play. Lo abbiamo anche impostato per utilizzare il nostro file sketch.js che è dove faremo la maggior parte della nostra programmazione. Di seguito è riportato il codice per il nostro scheletro. Lo trovi anche qui.

//Serial Variablesvar serial; // variabile per contenere un'istanza della libreria serialport var portName = 'COM4'; // inserisci qui il nome della tua porta seriale // Variabili di gioco globali ---------------

//Funzione di configurazione ----------------------

funzione setup() { createCanvas(640, 480); serial = new p5. SerialPort(); // crea una nuova istanza della libreria serialport serial.on('list', printList); // imposta una funzione di callback per l'evento dell'elenco porta seriale serial.on('connected', serverConnected); // callback per la connessione al server serial.on('open', portOpen); // callback per l'apertura della porta serial.on('data', serialEvent); // callback per l'arrivo di nuovi dati serial.on('error', serialError); // callback per errori serial.on('close', portClose); // callback per la chiusura della porta serial.list(); // elenca le porte seriali serial.open(portName); // apre una porta seriale } //Draw Function ----------------------- function draw() { background(0); // sfondo nero } //Interpreta qui i dati seriali ---------- function serialEvent() { // legge una stringa dalla porta seriale // finché non si ottiene il ritorno a capo e la nuova riga: var inString = serial. readStringUntil('\r\n'); //verifica che ci sia effettivamente un setring lì: if (inString.length > 0) { if (inString !== 'ciao') { // se ricevi ciao, ignoralo var sensor = split(inString, ', '); // divide la stringa sulle virgole if (sensors.length > 16) { // se ci sono sedici elementi (6 analogici, 10 digitali) //Utilizza i dati del sensore qui:

}

} serial.write('x'); // invia un byte richiedendo più dati seriali } } // ottiene l'elenco delle porte: function printList(portList) { // portList è un array di nomi di porte seriali per (var i = 0; i < portList.length; i++) { // Visualizza l'elenco dalla console: print(i + " " + portList); } } function serverConnected() { print('connesso al server.'); } function portOpen() { print('la porta seriale è stata aperta.') } function serialError(err) { print('Qualcosa è andato storto con la porta seriale. ' + err); } function portClose() { print('La porta seriale è chiusa.'); } function closingCode(){ serial.close(portName); restituire nullo; } window.onbeforeunload = codice di chiusura;

Una volta salvato lo scheletro. Puoi usare questi valori in modo simile a come è stato fatto nel tutorial ITP. La stringa di valori che abbiamo inviato dal nostro Arduino nel passaggio 6 viene inviata come un array di 16 numeri. Di seguito è dove analizziamo questo array.

//Interpreta qui i dati seriali ----------

function serialEvent() { // legge una stringa dalla porta seriale // finché non si ottiene un ritorno a capo e una nuova riga: var inString = serial.readStringUntil('\r\n'); //verifica che ci sia effettivamente un setring lì: if (inString.length > 0) { if (inString !== 'ciao') { // se ricevi ciao, ignoralo var sensor = split(inString, ', '); // divide la stringa sulle virgole if (sensors.length > 16) { // se ci sono sedici elementi (6 analogici, 10 digitali) //Utilizza i dati del sensore qui: } } serial.write('x'); // invia un byte richiedendo più dati seriali } }

Ora possiamo eseguire il nostro programma per vedere se funziona!

Passaggio 9: esecuzione del programma

Ora possiamo eseguire il nostro programma per vedere se funziona. Puoi creare il tuo gioco usando il file skeleton.js nel nostro file precedente oppure puoi usare il semplice gioco Pipe che trovi qui.

Simile all'ITP Lab, per eseguire il nostro programma, seguiremo i passaggi seguenti.

• Collega Arduino con i controller che intendi utilizzare.
• Apri p5.serialcontrol
• Cambia la porta del tuo schizzo p5 con quella che stai usando (se stai usando lo scheletro, questo è sulla linea 3)
• Apri il file HTML che si collega al tuo sketch p5

Se hai contenuti multimediali esterni come immagini o font scaricati, vorrai eseguirli su un server. Se lo desideri, puoi eseguire un semplice server Python locale.

Passaggio 10: andare oltre

Per andare oltre e sviluppare più giochi per questo, puoi seguire vari esempi dal modulo p5.play che trovi qui. Di seguito è riportato un esempio di un gioco più complicato che ho creato. È un gioco sparatutto di carri armati 1 contro 1. Puoi trovare tutte le risorse su GitHub.