Skapa en fysisk spelkontroller: 10 steg (med bilder)

2024 Författare: John Day | [email protected]. Senast ändrad: 2024-01-30 12:44

När Nintendo Wii lanserades uppmanades spelare, nej krävs, att lämna soffan och hoppa, dansa och jiggla för att få poäng i sitt val. Även om det finns en brant inlärningskurva för att bygga för Wii, är det enkelt att bygga en anpassad enhet som låter dig styra ett spel genom att fysiskt hoppa på tryckplattor vid lämplig tidpunkt.

Denna instruerbara visar hur jag anpassade spelet 'Space Bounce' (spelbart live på https://marquisdegeek.com/spacebounce/ med källan på https://github.com/MarquisdeGeek/SpaceBounce) för att använda en fysisk kontroller.

Tillbehör

• Arduino
• Två tryckmattor (mina var från Maplin
• Två motstånd, för tryckmattan (100 K, men de flesta är fina)
• Två lysdioder (tillval)
• Två motstånd, för lysdioderna (100 K, men de flesta är bra. Även tillval)
• Bärbar dator

Steg 1: Hoppa runt

Jag började med att designa hoppgränssnittet och efter granskning av spelet insåg jag att det att ha två mattor bäst skulle uttrycka sin kärnidé. Det vill säga att du står på den vänstra mattan för att simulera känslan av att hålla fast vid vänster vägg och i lämpligt ögonblick hoppa över till rätt matta, och din karaktär på skärmen skulle göra detsamma.

Steg 2: Anslutning av elektroderna

Så jag köpte två mattor och började jobba. Tryckmattorna som visas här är de enklaste (och billigaste!) Jag hittade, för £ 10 vardera. De har fyra ledningar, varav två fungerar som en enkel omkopplare: när du står på mattan upprättas en anslutning och när du hoppar upp bryts den. Jag matade in detta i en Arduino med denna grundläggande krets.

Steg 3: Tripping the Light Fantastic

Det fungerade, men var inte särskilt inspirerande. Så, jag lade till några lysdioder för att indikera tillståndet för varje tryckmatta.

Lysdioderna krävs inte för att spela spelet, men genom att lägga till dem i kretsen kunde jag enkelt se vad kretsen trodde var det aktuella tillståndet. Därför, om spelet inte reagerade korrekt, kunde jag räkna ut om problemet var med kretsen, Arduino -programvaran eller spellogiken.

Steg 4: Börjar koda

Med tanke på att det ursprungliga spelet var i JavaScript, bestämde jag mig för att skriva ett NodeJS -program som lyssnar efter förändringar i tryckmattans tillstånd och skickar data via webbuttag till spelklienten.

Installera först standard firmata på din Arduino så att vi kan köra en nodserver på datorn och använda Johnny Five -biblioteket för att lyssna på tillståndsändringar från Arduino. Lägg sedan till Express för att visa spelinnehållet.

Hela serverkoden ser ut så här:

const express = require ('express');

const app = express (); const http = require ('http'); const server = http.createServer (app); const io = require ('socket.io'). lyssna (server); const arduino = require ('arduino-controller'); server.listen (3000, function () {console.log ('Express -server lyssnar …');}); app.use ('/', express.static ('app')); const fem = kräver ("johnny-five"); const board = new five. Board ({repl: false}); board.on ("redo", funktion () {låt grön = ny fem. Led (5); låt röd = ny fem. Led (6); låt vänster = ny fem. Pin (2); låt höger = ny fem. Pin (3); io.on ('connect', function (socket) {console.log ('We are connected!'); 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', state: val? 'down': 'up'} socket.emit ('arduino:: state', JSON.stringify (state), {för: 'alla'});}}) five. Pin.read (höger, (err, val) => {if (val) {red.on ();} annars {red.off ();} // if (val! == lastRight) {lastRight = val; låt tillstånd = {sida: 'right', state: val? 'down': 'up'} socket.emit ('arduino:: state', JSON.stringify (state), {for: 'everyone'});}})}); });

Och körs med:

nod server.js

Steg 5: Anpassa spelet

Det första problemet var gränssnittet; hur 'klickar' du på play -knappen när allt du kan göra är att hoppa? Jag löste detta genom att ta bort alla andra knappar! Jag kan sedan aktivera den återstående knappen när spelaren hoppar, genom att lyssna på antingen "upp" -händelse.

uttag = io (); socket.on ('arduino:: state', function (msg) {låt data = JSON.parse (msg); if (data.state === 'upp') {// vi hoppar!}});

Härifrån kunde jag komma in i spelet och använda kuddarna för något roligare - själva spelet.

Steg 6: Ändra spelarens hoppkod

Den här gången skulle jag behöva hantera varje pad individuellt och få karaktären att börja hoppa när spelarens fot lämnar pad. Tiden för skärmkaraktären att korsa gruvaxeln är längre än tiden för spelaren att hoppa från ena sidan till sidan. Det här är bra, eftersom det ger spelaren en chans att återfå balansen, kontrollera fotfästet och se spelaren slutföra hoppet på skärmen. Hade detta inte varit fallet hade jag saktat ner spelaren.

uttag = io ();

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

låt data = JSON.parse (msg); if (data.side === 'vänster' && data.state === 'upp') {// vi hoppar upp från vänster}});

Steg 7: Ändra utdata

När ingångsmekanismen fungerade behövde jag arbeta med utgången. Spelet spelar bra på en surfplatta eller telefon, eftersom det fyller skärmen. Men när du hoppar runt är det för litet att se, så spelområdet på skärmen måste förstoras. Mycket!

Tyvärr är det mycket tidskrävande att förstora alla grafiska tillgångar. Så jag lurade! Eftersom spelet inte behöver förstå X, Y-positionen med ett musklick eller pekhändelse kan jag enkelt skala om hela duken!

Detta innebar ett hack på både CSS och JavaScript så att det befintliga HTML5-canvasobjektet körs i helskärm.

Dessutom spelas spelet i porträttläge vilket innebar att maximalt utnyttja skärmfastigheter vi behövde för att rotera duken med 90 grader.

#SGXCanvas {

position: absolut; z-index: 0; transform: rotera (-90deg); transform-origin: uppe till höger; bredd: auto; }

Steg 8: Det fungerar

För mitt första spel lutade jag min bärbara dator på sidan och spelade så här.

Steg 9: Förbereda rummet

Att bygga en fysisk controller är bara början på resan, inte slutet. Resten av det fysiska utrymmet måste övervägas.

För det första rörde sig tryckmattorna runt på golvet när du landade på dem. Detta fixades enkelt med några dubbelsidiga klibbiga kuddar. De fungerar bra, men skulle förmodligen inte tåla mycket slitage.

Därefter ser den bärbara datorn lite dum ut, vilket distraherar dig från själva spelet. Så TV: n från loungen "lånades" och fördes till den lokala MakerSpace, där den placerades mot väggen och var ansluten.

I framtiden skulle det vara trevligt att lägga till fotavtryck på tryckmattorna (kanske Neil Armstrongs första måntryck!) För att vägleda spelaren. Även ett bättre hölje och surround för TV: n skulle öka känslan. Kanske de av er med mycket tid och utrymme kan göra en pappersmaskinhäll, placerad på vardera sidan av mattorna, för att efterlikna den klaustrofobiska känslan av att falla ner i ett gruvaxel!

Steg 10: Det är klart

Och där har du det. Ett enkelt dagsprojekt som förbättrar det ursprungliga spelet och håller dig i form när du spelar det!

Du kan också använda en Makey Makey som direkt simulerar knapptryckningarna som används i det ursprungliga spelet, för att minimera en del av detta arbete. Men det är kvar som en övning för läsaren:)

All kod finns i en specialgren i Space Bounce -repon: