Kontrolery Arduino: 10 kroków (ze zdjęciami)

2024 Autor: John Day | [email protected]. Ostatnio zmodyfikowany: 2024-01-30 11:32

System kontrolera gier Arduino wykorzystujący Arduino i bibliotekę p5.js. Ideą tego jest stworzenie projektu Arduino, który można łatwo replikować i rozszerzać. Połączenia kontrolera są zaprojektowane tak, aby wykorzystywać kilka różnych czujników i wejść, które można wymieniać w zależności od każdego kontrolera.

Ten projekt ma również na celu wykorzystanie biblioteki JavaScript p5.js wraz z biblioteką p5.play zaprojektowaną dla p5.js. Te biblioteki pozwalają nam z łatwością programować nasze gry. Witryna p5.play zawiera wiele samouczków i przykładów, dzięki którym użytkownicy mogą tworzyć dla niej gry. Projekt ten pozwala użytkownikom ćwiczyć umiejętności tworzenia sprzętu i oprogramowania.

Krok 1: Czego będziesz potrzebować

Narzędzia:

• Lutownica
• Lutować
• Narzędzia do ściągania izolacji
• Nożyce boczne
• Szczypce

Sprzęt komputerowy:

• Płytka kompatybilna z Arduino (użyłem Sparkfun Redboard oraz Arduino Uno i Leonardo)

• Płyta perforowana:

  • 8cm x 6cm zielone płyty perforowane
  • Płyta perforowana tarczy Aduino Uno

• Różne czujniki

  • Joysticki
  • Przyciski (z rezystorami, 10k omów, pasują do nich)
  • Potencjometry
  • Czujniki Flex
  • Czujniki ciśnienia
  • Itp…

• Drut:

  • Single Wire (użyłem 26 AWG Solid)
  • Drut taśmowy i zaciski
• Oderwij nagłówki (co najmniej 20 z nich)

• Opcjonalny sprzęt (zamiast tego można użyć kartonu i kleju/opaski zaciskowej):

  • Kable do płytek prototypowych i zworki do prototypowania
  • Obudowy drukowane 3D
  • Łączniki sprzętowe (użyłem śrub M2,5)

Oprogramowanie:

• IDE Arduino

• biblioteka p5.js

  Biblioteka P5.play również

• p5.sterowanie seryjne
• Node.js

Krok 2: Budowanie: koncentrator konsoli, konfiguracja tarczy

Przylutuj nagłówki do płytki perf shield Arduino Uno.

• Zacząłem od nagłówków ekranowych (zasilanie, wejście analogowe i cyfrowe)
• Dalej są piny 2x5 nagłówka. Możesz użyć nagłówków 2x5 lub tylko 2 rzędów po 5 nagłówków odrywających. Ustawiłem je pionowo z A3 i A4 i zostawiłem 2 odstępy między nimi.

Krok 3: Budowanie: koncentrator konsoli, okablowanie osłony

Następnie chcemy poprowadzić nasze przewody na ekranie. Łatwiej jest poprowadzić przewody na górze, ale jeśli chcesz uzyskać czystszy wygląd, możesz poprowadzić je na dole.

Chcesz zwrócić uwagę na schemat (schemat Eagle jest dostępny do pobrania) podczas prowadzenia tych przewodów. Możesz również zajrzeć do przewodnika po kolorach, aby ci w tym pomóc.

Ideą tej konstrukcji ekranu jest umożliwienie 3 wejść analogowych i 5 wejść cyfrowych z każdego sterownika. To w pełni wykorzystuje wszystkie wejścia analogowe Arduino Uno, a także pozostałe przewody naszego kabla taśmowego.

Krok 4: Budowanie: kontrolery, konfigurowanie części

Pierwszym krokiem do zbudowania kontrolera jest zaplanowanie, których czujników użyć. W moich przykładach mam całkiem standardowy kontroler z joystickiem i kilkoma przyciskami. Posiadam również sterownik z dwoma potencjometrami suwakowymi.

Jeśli chcesz to powtórzyć, możesz wyświetlić moje obrazy do umieszczenia.

Następnym krokiem jest przylutowanie kabla taśmowego do płytki perforowanej.

1. Zdejmij i ocynuj kabel taśmowy
2. Przylutuj kabel taśmowy do górnej środkowej części płyty perforowanej.

Następnym krokiem jest poprowadzenie przewodów. Zacząłem od podłączenia zasilania (5V/czerwony przewód) i masy (brązowy przewód) do czujników. Następnie podłączyłem wejścia analogowe. Uznałem, że łatwo jest użyć pomarańczowego kabla (analog A0 lub A3) do ruchu poziomego i żółtego kabla (analog A1 lub A4) do ruchu pionowego.

Aby zachować spójność, podłączyłem również mały przycisk do fioletu na wszystkich moich kontrolerach. Jest to przydatne do takich rzeczy, jak zamykanie portu szeregowego (omówię to później), a także menu lub opcji.

Przesłałem szybki schemat mojego kontrolera joysticka, jeśli chcesz się temu przyjrzeć. Na naszym schemacie wyprowadzeń widać możliwość podłączenia każdego sterownika (3 wejścia analogowe i 5 cyfrowych).

Krok 5: Opcjonalnie: Obudowy

Ten krok jest opcjonalny, ale jeśli masz dostęp do drukarki 3D, wynik Twojego projektu będzie nieco bardziej dopracowany i wykończony. Jak widać na moich prototypach, użyłem prostego kawałka tektury, aby zapobiec wbijaniu palców w połączenia lutowane na spodzie płyt perforowanych.

W tym kroku znajdziesz moje modele 3D. Stworzyłem obudowy do koncentratora zarówno dla Arduino Uno/Leonardo, jak i Sparkfun RedBoard (ta płytka jest nieco szersza i wykorzystuje mini USB).

W przypadku kontrolerów można je przymocować za pomocą śrub M2,5. Trzymałem nakrętkę z boku PCB i używam podkładki i śruby na dole.

Dołączyłem również model 3D suwaków potencjometrów, których używałem.

Wszystkie pliki 3D można znaleźć na GitHub.

Krok 6: Programowanie: Arduino

Zacznijmy od przygotowania prostego szkicu do przetestowania. Proponuję skorzystać z samouczka stworzonego przez ITP na NYU, który można znaleźć tutaj. Aby wykonać ten samouczek, musisz mieć zainstalowane p5.serialcontroll i node.js. W tym samouczku zostaniesz wprowadzony do konfigurowania Arduino do wysyłania danych szeregowych, które są używane przez naszą bibliotekę javascript, p5.js. W tym celu możesz użyć koncentratora i kontrolera, które utworzyliśmy w poprzednich krokach, lub możesz zreplikować obwody przedstawione w samouczku. Ten samouczek wykorzystuje analogowy pin wejściowy A0 na Arduino Uno, który jest mapowany na pomarańczowy przewód pierwszego kontrolera.

Następny samouczek, który będziesz chciał śledzić, znajdziesz tutaj. Ten samouczek poprowadzi Cię przez konfigurację wielu danych wejściowych i wykorzystanie ich w p5.js. W samouczku używane są wejścia analogowe A0 i A1. Odpowiadają one pomarańczowym i żółtym przewodom na kontrolerze 1 naszego systemu.

Po przejściu powyższych samouczków możemy zaprogramować Arduino. Kod, którego chcemy użyć, znajduje się poniżej:

//kontroler 1const int dig2 = 2; //niebieski const int dig3 = 3; //fioletowy const int dig4 = 4; //szary const int dig5 = 5; //biały const int dig6 = 6; //czarny //kontroler 2 const int dig7 = 7; //niebieski const int dig8 = 8; //fioletowy const int dig9 = 9; //szary const int dig10 = 10; //biały const int dig11 = 11; //czarny

pusta konfiguracja () {

Serial.początek(9600); while (Serial.available() <= 0) { Serial.println("cześć"); // wyślij wiadomość startową delay(300); // czekaj 1/3 sekundy } 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); }

pusta pętla () {

if (Serial.available() > 0) { // odczytaj przychodzący bajt: int inByte = Serial.read(); // odczytaj czujnik:

//Kontroler ANALOGOWY 1

int analog0 = analogRead(A0); int analog1 = analogRead(A1); int analog2 = analogRead(A2); //ANALOG Kontroler 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); // wydrukuj wyniki: Serial.print(analog0); //[0] Serial.print(", "); Serial.print(analog1); //[1] Serial.print(", "); Serial.print(analog2); //[2] Serial.print(", "); //Uruchom dane kontrolera 2 Serial.print(analog3); //[3] Serial.print(", "); Serial.print(analog4); //[4] Serial.print(", "); Serial.print(analog5); //[5] Serial.print(", "); Serial.print(cyfrowy2); //[6] Serial.print(", "); Serial.print(cyfrowy3); //[7] Serial.print(", "); Serial.print(cyfrowy4); //[8] Serial.print(", "); Serial.print(cyfrowy5); //[9] Serial.print(", "); Serial.print(cyfrowy6); //[10] Serial.print(", "); //Uruchom kontroler 2 dane Serial.print(digital7); //[11] Serial.print(", "); Serial.print(cyfrowy8); //[12] Serial.print(", "); Serial.print(cyfrowy9); //[13] Serial.print(", "); Serial.println(cyfrowy10); //[14] Serial.print(", "); Serial.println(cyfrowy11); //[15] } }

Ten kod wysyła dane szeregowe z obu naszych kontrolerów jako tablicę 16 liczb. Pierwsze 6 z tych liczb to nasze wejścia analogowe (w zakresie od 0-1023), a pozostałe 10 wartości to nasze wartości cyfrowe (0 lub 1).

Po przesłaniu naszego kodu możemy to przetestować, otwierając monitor szeregowy i wpisując wartość do naszego monitora szeregowego, tak jak to zrobiliśmy w drugim samouczku od ITP. Powinniśmy otrzymać ciąg naszych wartości oddzielony przecinkami.

Krok 7: Programowanie: HTML

Po skonfigurowaniu i uruchomieniu naszego Arduino możemy zacząć programować nasze rzeczy internetowe. Kod HTML jest bardzo prosty.

ciało {wypełnienie: 0; margines: 0;}

Kod HTML po prostu łączy ze sobą nasze pliki javascript. Większość naszego kodu pojawi się w pliku szkicu.js.

Krok 8: Programowanie: P5.js i Javascript

Po skonfigurowaniu kodu HTML możemy pracować nad naszym JavaScriptem. Jeśli jeszcze tego nie zrobiłeś, powinieneś teraz pobrać p5.js oraz p5.play i dodać je do folderu bibliotek w katalogu swojej witryny.

• p5.js
• p5.graj

W poprzednim kroku ustawiliśmy plik HTML, aby wywoływał biblioteki p5.js i p5.play. Skonfigurowaliśmy go również do korzystania z naszego pliku sketch.js, w którym będziemy wykonywać większość naszego programowania. Poniżej znajduje się kod naszego szkieletu. Możesz go również znaleźć tutaj.

//Zmienne szeregowevar serial; // zmienna przechowująca instancję biblioteki portu szeregowego var portName = 'COM4'; // wpisz tutaj nazwę portu szeregowego //Globalne zmienne gry ---------------

//Funkcja konfiguracji ----------------------

funkcja setup() { createCanvas(640, 480); serial = nowy p5. SerialPort(); // utwórz nową instancję biblioteki serial.on('list', printList); // ustaw funkcję zwrotną dla zdarzenia listy portów szeregowych serial.on('connected', serverConnected); // wywołanie zwrotne do połączenia z serwerem serial.on('open', portOpen); // wywołanie zwrotne dla portu otwierającego serial.on('data', serialEvent); // wywołanie zwrotne, gdy nadejdą nowe dane serial.on('error', serialError); // wywołanie zwrotne dla błędów serial.on('close', portClose); // wywołanie zwrotne zamknięcia portu serial.list(); // lista portów szeregowych serial.open(nazwa_portu); // otwórz port szeregowy } //Draw Function ----------------------- function draw() { background(0); // czarne tło } //interpretuj dane szeregowe tutaj ---------- function serialEvent() { // odczytaj ciąg z portu szeregowego // do momentu uzyskania powrotu karetki i nowej linii: var inString = serial. readStringUntil('\r\n'); //sprawdź, czy rzeczywiście jest tam ustawiony zestaw: if (inString.length > 0) { if (inString !== 'hello') { // jeśli otrzymasz cześć, zignoruj to var sensors = split(inString, ', '); // rozdziel ciąg na przecinki if (sensors.length > 16) { // jeśli jest szesnaście elementów (6 analogowych, 10 cyfrowych) //Użyj danych czujnika tutaj:

}

} serial.write('x'); // wyślij bajt żądający większej ilości danych szeregowych } } // pobierz listę portów: function printList(portList) { // portList to tablica nazw portów szeregowych dla (var i = 0; i < portList.length; i++) { // Wyświetl listę konsoli: print(i + " " + portList); } } function serverConnected() { print('podłączony do serwera.'); } function portOpen() { print('port szeregowy otwarty.') } function serialError(err) { print('Coś poszło nie tak z portem szeregowym.' + err); } function portClose() { print('Port szeregowy zamknięty.'); } function closedCode(){ serial.close(portName); zwróć null; } window.onbeforeunload = kod zamykający;

Po uratowaniu szkieletu. Możesz użyć tych wartości w podobny sposób, jak to zrobiono w samouczku ITP. Ciąg wartości, które wysłaliśmy z naszego Arduino w kroku 6, jest wysyłany jako tablica 16 liczb. Poniżej znajduje się miejsce, w którym analizujemy tę tablicę.

//Zinterpretuj dane szeregowe tutaj ----------

function serialEvent() { // odczytaj ciąg z portu szeregowego // do momentu uzyskania powrotu karetki i nowej linii: var inString = serial.readStringUntil('\r\n'); //sprawdź, czy rzeczywiście jest tam ustawiony zestaw: if (inString.length > 0) { if (inString !== 'hello') { // jeśli otrzymasz cześć, zignoruj to var sensors = split(inString, ', '); // rozdziel ciąg na przecinki if (sensors.length > 16) { // jeśli jest szesnaście elementów (6 analogowych, 10 cyfrowych) //Użyj tutaj danych czujnika: } } serial.write('x'); // wyślij bajt z żądaniem większej ilości danych szeregowych } }

Możemy teraz uruchomić nasz program, aby sprawdzić, czy działa!

Krok 9: Uruchamianie programu

Możemy teraz uruchomić nasz program, aby sprawdzić, czy działa. Możesz stworzyć własną grę, korzystając z pliku szkielet.js z naszego poprzedniego pliku lub użyć prostej gry Pipe, którą znajdziesz tutaj.

Podobnie jak w laboratorium ITP, aby uruchomić nasz program, będziemy postępować zgodnie z poniższymi krokami.

• Podłącz Arduino do kontrolerów, których zamierzasz używać.
• Otwórz p5.serialcontrol
• Zmień port swojego szkicu p5 na ten, którego używasz (jeśli używasz szkieletu, jest to linia 3)
• Otwórz plik HTML, który zawiera linki do twojego szkicu p5

Jeśli masz zewnętrzne media, takie jak obrazy lub pobrane czcionki, będziesz chciał uruchomić to na serwerze. Jeśli chcesz, możesz uruchomić prosty lokalny serwer Pythona.

Krok 10: Idź dalej

Aby pójść dalej i stworzyć więcej gier w tym celu, możesz skorzystać z różnych przykładów z p5.play, które można znaleźć tutaj. Poniżej przykład bardziej skomplikowanej gry, którą stworzyłem. Jest to strzelanka czołgowa 1 na 1. Wszystkie zasoby do tego można znaleźć na GitHub.