Een fysieke gamecontroller maken: 10 stappen (met afbeeldingen)

2024 Auteur: John Day | [email protected]. Laatst gewijzigd: 2024-01-30 11:16

Toen de Nintendo Wii werd gelanceerd, werden spelers aangemoedigd, ja zelfs verplicht, om de bank te verlaten en te springen, te dansen en te wiebelen om punten te scoren in hun spel naar keuze. Hoewel er een steile leercurve is bij het bouwen voor de Wii, is het gemakkelijk om een aangepast apparaat te bouwen waarmee je een spel kunt besturen door op het juiste moment fysiek op drukkussens te springen.

Deze instructable laat zien hoe ik het spel 'Space Bounce' (live speelbaar op https://marquisdegeek.com/spacebounce/ met de bron op https://github.com/MarquisdeGeek/SpaceBounce) heb aangepast om een fysieke controller te gebruiken.

Benodigdheden

• Arduino
• Twee drukmatten (de mijne waren van Maplin
• Twee weerstanden, voor de drukmat (100 K, maar de meeste zijn prima)
• Twee LED's (optioneel)
• Twee weerstanden, voor de LED's (100 K, maar de meeste zijn prima. Ook optioneel)
• laptop

Stap 1: Spring rond

Ik begon met het ontwerpen van de springinterface en toen ik de game bekeek, realiseerde ik me dat het hebben van twee matten het beste uiting zou geven aan het kernidee. Dat wil zeggen, je staat op de linkermat om het gevoel te simuleren dat je de linkermuur vasthoudt en springt op het juiste moment naar de rechtermat, en je personage op het scherm zou hetzelfde doen.

Stap 2: De pads aansluiten

Dus kocht ik twee matten en ging aan de slag. De hier getoonde drukmatten zijn de eenvoudigste (en goedkoopste!) Die ik heb gevonden, voor £ 10 per stuk. Ze hebben vier draden, waarvan er twee fungeren als een simpele schakelaar: als je op de mat staat, wordt er een verbinding gemaakt en als je opspringt, wordt deze verbroken. Ik voerde dit in een Arduino met dit basiscircuit.

Stap 3: Het licht uitschakelen Fantastisch

Het werkte, maar was niet erg inspirerend. Dus heb ik wat LED's toegevoegd om de staat van elke drukmat aan te geven.

De LED's zijn niet vereist om het spel te spelen, maar door ze aan het circuit toe te voegen, kon ik gemakkelijk zien wat het circuit dacht dat de huidige staat was. Daarom, als het spel niet correct reageerde, kon ik uitzoeken of het probleem zat in het circuit, de Arduino-software of de spellogica.

Stap 4: Beginnen met coderen

Aangezien de originele game in JavaScript was, besloot ik een NodeJS-programma te schrijven dat luistert naar veranderingen in de drukmatstatus en de gegevens via websockets naar de gameclient verzendt.

Installeer eerst de standaard firmata op je Arduino zodat we een Node-server op de pc kunnen draaien en de Johnny Five-bibliotheek kunnen gebruiken om te luisteren naar de statusveranderingen van de Arduino. Voeg vervolgens Express toe om de game-inhoud te serveren.

De volledige servercode ziet er als volgt uit:

const express = vereisen('express');

const-app = express(); const http = vereisen('http'); const server = http.createServer(app); const io = vereisen('socket.io').listen(server); const arduino = vereisen('arduino-controller'); server.listen(3000, function() { console.log('Express server luisteren…'); }); app.use('/', express.static('app')); const vijf = vereisen ("johnny-vijf"); const board = nieuwe vijf. Board ({repl: false }); board.on("ready", function() { laat groen = nieuwe vijf. Led(5); laat rood = nieuwe vijf. Led(6); laat links = nieuwe vijf. Pin(2); laat rechts = nieuwe vijf. Pin(3); io.on('connect', function(socket) { console.log('We zijn verbonden!'); let lastLeft = false; let lastRight = false; five. Pin.read(left, (err, val) => { if (val) { green.on(); } else { green.off(); } if (val !== lastLeft) { lastLeft = val; let state = { side: 'left', staat: val ? 'down': 'up' } socket.emit('arduino::state', JSON.stringify(state), { for: 'iedereen' }); } }) five. Pin.read (rechts, (err, val) => {if (val) {red.on();} else {red.off();} // if (val!== lastRight) {lastRight = val; let state = { side: 'right', state: val 'down': 'up' } socket.emit('arduino::state', JSON.stringify(state), { for: 'iedereen' }); } }) }); });

En wordt uitgevoerd met:

node server.js

Stap 5: Het spel aanpassen

Het eerste probleem was de interface; hoe 'klik' je op de afspeelknop als je alleen maar kunt springen? Ik heb dit opgelost door alle andere knoppen te verwijderen! Ik kan dan de resterende knop activeren wanneer de speler springt, door te luisteren naar een van beide 'up'-gebeurtenissen.

stopcontact = io(); socket.on('arduino::state', function(msg){ let data = JSON.parse(msg); if (data.state === 'up') { // we springen! } });

Vanaf hier kon ik in het spel komen en de pads gebruiken voor iets leukers - het spel zelf.

Stap 6: De springcode van de speler wijzigen

Deze keer zou ik elke pad afzonderlijk moeten behandelen en het personage laten springen wanneer de voet van de speler de pad verlaat. De tijd voor het personage op het scherm om de mijnschacht te doorkruisen is langer dan de tijd voor de speler om van de ene naar de andere kant te springen. Dit is een goede zaak, omdat het de speler de kans geeft om zijn evenwicht te hervinden, zijn positie te controleren en te zien hoe de speler de sprong op het scherm voltooit. Als dit niet het geval was geweest, had ik de speler vertraagd.

stopcontact = io();

socket.on('arduino::state', function(msg){

laat data = JSON.parse(msg); if (data.side === 'links' && data.state === 'omhoog') { // we springen omhoog vanaf de linkerkant } });

Stap 7: De uitvoer wijzigen

Nu het invoermechanisme werkte, moest ik aan de uitvoer werken. Het spel speelt goed op een tablet of telefoon, omdat het het scherm vult. Maar als je in het rond springt, is het te klein om te zien, dus het speelgebied op het scherm moet worden vergroot. Heel veel!

Helaas is het vergroten van alle grafische middelen een zeer tijdrovende taak. Dus ik heb vals gespeeld! Omdat de game de X-, Y-positie van een muisklik of aanraakgebeurtenis niet hoeft te begrijpen, kan ik het hele canvas eenvoudig opnieuw schalen!

Dit betrof een hack op zowel de CSS als JavaScript, zodat het bestaande HTML5-canvasobject op volledig scherm wordt weergegeven.

Bovendien wordt de game in portretmodus gespeeld, wat betekende dat we maximaal gebruik wilden maken van de schermruimte die we nodig hadden om het canvas 90 graden te draaien.

#SGXCanvas {

positie: absoluut; z-index: 0; transformeren: roteren (-90deg); transform-oorsprong: rechtsboven; breedte: automatisch; }

Stap 8: Het werkt

Voor mijn eerste game heb ik mijn laptop op zijn kant gekanteld en zo gespeeld.

Stap 9: De kamer voorbereiden

Het bouwen van een fysieke controller is slechts het begin van de reis, niet het einde. Er moet rekening worden gehouden met de rest van de fysieke ruimte.

Ten eerste bewogen de drukmatten over de vloer toen je erop landde. Dit was eenvoudig op te lossen met enkele dubbelzijdige plakstrips. Ze werken goed, maar zouden waarschijnlijk niet veel slijtage aankunnen.

Vervolgens ziet de laptop er een beetje gek uit, wat je afleidt van het spel zelf. Dus de tv uit de lounge werd "geleend" en meegenomen naar de lokale MakerSpace, waar hij tegen de muur werd geplaatst en aangesloten.

In de toekomst zou het leuk zijn om voetafdrukken toe te voegen aan de drukmatten (misschien van Neil Armstrong's eerste maanafdruk!) om de speler te begeleiden. Ook een betere behuizing en surround voor de tv zou het gevoel versterken. Misschien kunnen degenen onder jullie met veel tijd en ruimte een rotswand van papier-maché maken, aan weerszijden van de matten, om het claustrofobische gevoel na te bootsen van een val in een mijnschacht!

Stap 10: Het is voltooid

En daar heb je het. Een eenvoudig dagproject dat het originele spel verbetert en je fit houdt tijdens het spelen!

Je zou ook een Makey Makey kunnen gebruiken die direct de toetsaanslagen simuleert die in het originele spel werden gebruikt, om een deel van dit werk te minimaliseren. Maar dat blijft een oefening voor de lezer:)

Alle code bevindt zich in een speciale tak in de Space Bounce-repo: