Arduino -beheerders: 10 stappe (met foto's)

2024 Outeur: John Day | [email protected]. Laas verander: 2024-01-30 07:27

'N Arduino -spelbeheerstelsel met behulp van Arduino en die p5.js -biblioteek. Die idee hiervan is om 'n Arduino -projek te skep wat maklik herhaal en uitgebrei kan word. Die kontroleerderverbindings is ontwerp om 'n klomp verskillende sensors en insette te gebruik wat na gelang van elke kontroleerder uitgeruil kan word.

Hierdie projek is ook ontwerp om die p5.js JavaScript -biblioteek te gebruik saam met die p5.play -biblioteek wat ontwerp is vir p5.js. Met hierdie biblioteke kan ons ons speletjies maklik programmeer. Die p5.play -webwerf bevat 'n klomp tutoriale en voorbeelde waarmee gebruikers speletjies daarvoor kan skep. Met hierdie projek kan gebruikers hul hardeware- en sagteware -ontwikkelingsvaardighede oefen.

Stap 1: wat u benodig

Gereedskap:

• Soldeerbout
• Soldeer
• Draadstroppers
• Kantsnyers
• Tang

Hardeware:

• Arduino -versoenbare bord (ek het 'n Sparkfun Redboard sowel as 'n Arduino Uno en Leonardo gebruik)

• Perf Board:

  • 8 cm x 6 cm groen perf planke
  • Aduino Uno shield perf board

• Verskeie sensors

  • Joysticks
  • Knoppies (met weerstande, 10k ohm)
  • Potensiometers
  • Flex -sensors
  • Druk sensors
  • Ens …

• Draad:

  • Enkeldraad (ek het 26 AWG Solid gebruik)
  • Lintdraad en krimpies
• Break Away Headers (minstens 20 hiervan)

• Opsionele hardeware (u kan eerder karton- en warmlijm-/ritsbande gebruik):

  • Broodbord- en springkabels vir prototipering
  • 3D -gedrukte omhulsels
  • Hardeware -bevestigingsmiddels (ek het M2.5 -skroewe gebruik)

Sagteware:

• Arduino IDE

• p5.js biblioteek

  P5.play biblioteek ook

• p5.reeksbeheer
• Node.js

Stap 2: Bou: die konsole -hub, die opstel van die skild

Soldeer die koppe aan die Arduino Uno shield perf board.

• Ek het begin met die skildkoppe (krag, analoog en digitaal)
• Die volgende is die 2x5 koppenne. U kan 2x5 opskrifte gebruik, of net 2 rye van 5 opskrifte. Ek het dit vertikaal met A3 en A4 uitgevoer en 2 spasies tussen hulle gelaat.

Stap 3: Bou: die konsole -hub, bedrading van die skild

Vervolgens wil ons ons drade op die skild rig. Dit is makliker om die drade aan die bokant te laat loop, maar as u 'n skoner voorkoms wil hê, kan u dit aan die onderkant plaas.

U wil aandag skenk aan die skematiese (die Eagle -skema kan afgelaai word) wanneer u hierdie drade lei. U kan ook na die kleurgids kyk om u hiermee te help.

Die idee van hierdie skildontwerp is om 3 analoog insette en 5 digitale insette van elke kontroleerder toe te laat. Dit trek ten volle voordeel uit al die analoog insette op 'n Arduino Uno sowel as die oorblywende drade op ons lintkabel.

Stap 4: Bou: die beheerders, die opstel van u onderdele

Die eerste stap om u beheerder te bou, is om te beplan watter sensors u moet gebruik. In my voorbeelde het ek 'n redelik standaard kontroleerder met 'n joystick en 'n paar knoppies. Ek het ook 'n kontroleerder met twee skuifpotensiometers.

As u dit wil herhaal, kan u my beelde sien vir plasing.

Die volgende stap is om u lintkabel aan die perf board te soldeer.

1. Strooi die lintkabel en maak dit vas
2. Soldeer die lintkabel aan die boonste middel van u perf board.

Die volgende stap is om u drade te lei. Ek het eers begin om die krag (5V/rooi draad) en die grond (bruin draad) eers aan die sensors te koppel. Ek het toe die analoog insette bedraad. Ek het dit maklik gevind om die oranje kabel (Analog A0 of A3) vir horisontale beweging te gebruik en die geel kabel (Analoog A1 of A4) vir vertikale beweging.

Om dinge konsekwent te hou, het ek ook 'n klein drukknoppie na pers op al my beheerders gestuur. Dit is handig vir dinge soos die sluiting van die seriële poort (ek gaan later hieroor) sowel as spyskaarte of opsies.

Ek het 'n vinnige skema van my joystick -beheerder opgelaai as u hierna wil kyk. Uit ons pin-out diagram kan u die moontlikheid van elke kontroleerderverbinding sien (3 analoog insette en 5 digitaal).

Stap 5: Opsioneel: Omhulsels

Hierdie stap is opsioneel, maar as u toegang tot 'n 3D -drukker het, sal die uitkoms van u projek 'n bietjie verfynder en afgerond lyk. Soos u in my prototipes kan sien, het ek 'n eenvoudige stuk karton gebruik om te voorkom dat die soldeerverbindings aan die onderkant van die perf planke u vingers steek.

U kan my 3D -modelle by hierdie stap vind. Ek het omhulsels vir die hub vir beide die Arduino Uno/Leonardo en die Sparkfun RedBoard geskep (hierdie bord is 'n bietjie wyer en gebruik mini -USB).

Vir die beheerders kan u dit met M2.5 -skroewe heg. Ek het die moer aan die kant van die PCB gehou en gebruik 'n wasser en die skroef aan die onderkant.

Ek het ook die 3D -model vir die knopknoppies ingesluit vir die potensiometers wat ek gebruik het.

U kan al die 3D -lêers op GitHub vind.

Stap 6: Programmering: Arduino

Kom ons begin met die opstel van 'n eenvoudige skets om te toets. Ek stel voor dat u die handleiding gebruik wat deur ITP by NYU geskep is. Om hierdie tutoriaal te kan doen, moet u p5.serialcontroll en node.js laat installeer. In hierdie tutoriaal word u bekendgestel aan die opstel van 'n Arduino om seriële data te stuur wat deur ons javascript -biblioteek, p5.js. U kan die hub en kontroleerder wat ons in die vorige stappe geskep het, gebruik om dit te doen, of u kan die kringe wat in die tutoriaal getoon is, herhaal. Hierdie handleiding gebruik die A0 analoog invoerpen op die Arduino Uno, wat aan die oranje draad van u eerste kontroleerder gekarteer word.

Die volgende tutoriaal wat u wil volg, kan u hier vind. Hierdie handleiding lei u by die opstel van verskeie insette en die gebruik daarvan in p5.js. In die tutoriaal word die analoog insette A0 en A1 gebruik. Dit stem ooreen met die oranje en geel drade op beheerder 1 van ons stelsel.

As u die tutoriale hierbo nagegaan het, kan ons die Arduino programmeer. Die kode wat ons wil gebruik, is hieronder:

// beheerder 1konst int dig2 = 2; // blou const int dig3 = 3; // pers const int dig4 = 4; // grys const int dig5 = 5; // wit const int dig6 = 6; // swart // kontroleerder 2 const int dig7 = 7; // blou const int dig8 = 8; // pers const int dig9 = 9; // grys const int dig10 = 10; // wit const int dig11 = 11; // swart

ongeldige opstelling () {

Serial.begin (9600); terwyl (Serial.available () <= 0) {Serial.println ("hallo"); // stuur 'n vertraging in die beginboodskap (300); // wag 1/3 sekonde} pinMode (dig2, INPUT); pinMode (dig3, INVOER); pinMode (dig4, INVOER); pinMode (dig5, INPUT); pinMode (dig6, INPUT); pinMode (dig7, INVOER); pinMode (dig8, INPUT); pinMode (dig9, INVOER); pinMode (dig10, INVOER); pinMode (dig11, INVOER); }

leemte -lus () {

as (Serial.available ()> 0) {// lees die inkomende byte: int inByte = Serial.read (); // lees die sensor:

// 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); // druk die resultate af: Serial.print (analoog0); // [0] Serial.print (","); Reeks.afdruk (analoog1); // [1] Serial.print (","); Reeks.afdruk (analoog2); // [2] Serial.print (","); // Begin Controller 2 data Serial.print (analog3); // [3] Serial.print (","); Reeks.afdruk (analoog4); // [4] Serial.print (","); Reeks.afdruk (analoog5); // [5] Serial.print (","); Serial.print (digitaal2); // [6] Serial.print (","); Serial.print (digitaal3); // [7] Serial.print (","); Serial.print (digitaal4); // [8] Serial.print (","); Serial.print (digitaal5); // [9] Serial.print (","); Serial.print (digitaal6); // [10] Serial.print (","); // Begin kontroleerder 2 -data Serial.print (digitaal7); // [11] Serial.print (","); Serial.print (digitaal8); // [12] Serial.print (","); Serial.print (digitaal9); // [13] Serial.print (","); Serial.println (digitaal10); // [14] Serial.print (","); Serial.println (digitaal11); // [15]}}

Hierdie kode stuur die reeksdata van beide ons beheerders as 'n skikking van 16 nommers. Die eerste 6 van hierdie getalle is ons analoog insette (wat wissel van 0-1023) en die oorblywende 10 waardes is ons digitale waardes (0 of 1).

Sodra ons kode opgelaai is, kan ons dit toets deur die seriële monitor oop te maak en 'n waarde in ons seriële monitor in te tik, soos in die 2de tutoriaal van ITP. Ons behoort 'n string van ons waardes geskei deur kommas te kry.

Stap 7: Programmering: HTML

Sodra ons ons Arduino op die been gebring het, kan ons begin met die programmering van ons webgoed. Die HTML -kode is baie eenvoudig.

liggaam {padding: 0; marge: 0;}

Die html -kode koppel eenvoudig ons javascript -lêers aan mekaar. Die meeste van ons kode vind eintlik plaas in ons skets.js -lêer.

Stap 8: Programmering: P5.js en Javascript

Sodra ons ons HTML opgestel het, kan ons aan ons JavaScript werk. As u dit nog nie gedoen het nie, moet u nou p5.js sowel as p5.play aflaai en dit by u biblioteekmap voeg in die gids vir u webwerf.

• p5.js
• p5. speel

In ons vorige stap het ons ons HTML -lêer opgestel om ons p5.js- en p5.play -biblioteke te noem. Ons het dit ook opgestel om ons sketch.js -lêer te gebruik, en dit is waar ons die meeste van ons programmering sal doen. Hieronder is die kode vir ons skelet. U kan dit ook hier vind.

// Serial Variablesvar serial; // veranderlike om 'n instansie van die serialport -biblioteek te hou var portName = 'COM4'; // vul u seriële poortnaam hier in // Global Game Variables ---------------

// Opstelfunksie ----------------------

funksie opstelling () {createCanvas (640, 480); reeks = nuwe p5. SerialPort (); // maak 'n nuwe voorbeeld van die serialport -biblioteek serial.on ('list', printList); // stel 'n terugbelfunksie in vir die seriële poortlys -gebeurtenis serial.on ('connected', serverConnected); // terugbel vir verbinding met die bediener serial.on ('oop', portOpen); // terugbel vir die opening van die poort serial.on ('data', serialEvent); // terugbel vir wanneer nuwe data serial.on aankom ('error', serialError); // terugbel vir foute serial.on ('close', portClose); // terugbel vir die poort wat serial.list () sluit; // lys die seriële poorte serial.open (poortnaam); // maak 'n reekspoort oop} // Tekenfunksie ----------------------- funksie teken () {agtergrond (0); // swart agtergrond} // Interpreteer seriële data hier ---------- funksie serialEvent () {// lees 'n string uit die seriële poort // totdat u koetsopgawe en newline kry: var inString = serial. readStringUntil ('\ r / n'); // kyk of daar eintlik 'n ssetring is: as (inString.length> 0) {if (inString! == 'hallo') {// as u hallo kry, ignoreer dit var sensors = split (inString, ', '); // verdeel die string op die kommas as (sensors.length> 16) {// as daar sestien elemente is (6 analoog, 10 digitaal) // Gebruik sensordata hier:

}

} serial.write ('x'); // stuur 'n greep om meer seriële data te vra}} // kry die lys van poorte: function printList (portList) {// portList is 'n verskeidenheid seriële poortname vir (var i = 0; i <portList.length; i ++) {// Wys die konsole: druk (i + "" + portList ); }} funksie serverConnected () {print ('gekoppel aan bediener.'); } function portOpen () {print ('die seriële poort oopgemaak.')} funksie serialError (err) {print ('Iets het skeefgeloop met die seriële poort.' + err); } function portClose () {print ('Die seriële poort gesluit.'); } funksie closedCode () {serial.close (portName); terugkeer nul; } venster.onbeforeunload = sluitkode;

Sodra u die skelet gered het. U kan hierdie waardes op dieselfde manier as in die ITP -tutoriaal gebruik. Die reeks waardes wat ons in stap 6 van ons Arduino gestuur het, word as 'n reeks van 16 getalle gestuur. Hieronder ontleed ons hierdie skikking.

// Interpreteer reeksdata hier ----------

funksie serialEvent () {// lees 'n string van die seriële poort // totdat u koetsopgawe en newline kry: var inString = serial.readStringUntil ('\ r / n'); // kyk of daar eintlik 'n ssetring is: as (inString.length> 0) {if (inString! == 'hallo') {// as u hallo kry, ignoreer dit var sensors = split (inString, ', '); // verdeel die string op die kommas as (sensors.length> 16) {// as daar sestien elemente is (6 analoog, 10 digitaal) // Gebruik sensor data hier:}} serial.write ('x'); // stuur 'n greep om meer reeksdata te vra}}

Ons kan ons program nou uitvoer om te sien of dit werk!

Stap 9: Die bestuur van u program

Ons kan ons program nou uitvoer om te sien of dit werk. U kan u eie spel skep met behulp van die skeleton.js -lêer in ons vorige lêer, of u kan die eenvoudige Pipe -speletjie gebruik wat u hier vind.

Net soos die ITP Lab, sal ons die onderstaande stappe volg om ons program uit te voer.

• Koppel die Arduino aan met die beheerder (s) wat u van plan is om te gebruik.
• Maak p5.serialcontrol oop
• Verander die poort van u p5 -skets na die een wat u gebruik (as u die skelet gebruik, is dit op reël 3)
• Maak die HTML -lêer oop wat na u p5 -skets skakel

As u eksterne media het, soos beelde of lettertipes wat afgelaai is, wil u dit op 'n bediener laat loop. U kan 'n eenvoudige plaaslike python -bediener gebruik as u wil.

Stap 10: Gaan verder

Om verder te gaan en meer speletjies hiervoor te ontwikkel, kan u verskillende voorbeelde van p5.play hier volg. Hieronder is 'n voorbeeld van 'n meer ingewikkelde spel wat ek geskep het. Dit is 'n 1 vs 1 tenkskieter spel. U kan al die hulpbronne daarvoor op GitHub vind.