Opprette en fysisk spillkontroller: 10 trinn (med bilder)

2024 Forfatter: John Day | [email protected]. Sist endret: 2024-01-30 11:23

Da Nintendo Wii ble lansert, ble spillerne oppfordret til å forlate sofaen og hoppe, danse og jiggle for å få poeng i sitt valg. Selv om det er en bratt læringskurve for å bygge for Wii, er det enkelt å bygge en tilpasset enhet som lar deg kontrollere et spill ved å hoppe fysisk på trykkputer til riktig tid.

Denne instruksen viser hvordan jeg tilpasset spillet 'Space Bounce' (spillbar live på https://marquisdegeek.com/spacebounce/ med kilden på https://github.com/MarquisdeGeek/SpaceBounce) for å bruke en fysisk kontroller.

Rekvisita

• Arduino
• To trykkmatter (mine var fra Maplin
• To motstander, for trykkmatten (100 K, men de fleste er fine)
• To lysdioder (valgfritt)
• To motstander, for lysdiodene (100 K, men de fleste er fine. Også valgfritt)
• Laptop

Trinn 1: Hopp rundt

Jeg begynte med å designe hoppe -grensesnittet, og ved gjennomgang av spillet innså jeg at det å ha to matter best ville uttrykke kjernetanken. Det vil si at du står på venstre matte for å simulere følelsen av å holde på venstre vegg og hoppe over til riktig matte i riktig øyeblikk, og karakteren din på skjermen ville gjøre det samme.

Trinn 2: Koble til putene

Så jeg kjøpte to matter og gikk på jobb. Trykkmattene som er vist her er de enkleste (og billigste!) Jeg fant, for 10 pund hver. De har fire ledninger, hvorav to fungerer som en enkel bryter: Når du står på matten, opprettes en forbindelse, og når du hopper opp, blir den brutt. Jeg matet dette inn i en Arduino med denne grunnleggende kretsen.

Trinn 3: Tripping the Light Fantastic

Det fungerte, men var ikke veldig inspirerende. Så jeg la til noen lysdioder for å indikere tilstanden til hver trykkmatte.

Lysdiodene er ikke påkrevde for å spille spillet, men ved å legge dem til kretsen kunne jeg lett se hva kretsen trodde var den nåværende tilstanden. Derfor, hvis spillet ikke reagerte riktig, kunne jeg finne ut om problemet var med kretsen, Arduino -programvaren eller spilllogikken.

Trinn 4: Begynner å kode

Gitt det opprinnelige spillet var i JavaScript, bestemte jeg meg for å skrive et NodeJS -program som lytter etter endringer i trykkmattestatusen, og sender dataene via websockets til spillklienten.

Først må du installere standard firmata på Arduino slik at vi kan kjøre en Node -server på PCen og bruke Johnny Five -biblioteket til å lytte etter endringer i staten fra Arduino. Legg deretter til Express for å vise innholdet i spillet.

Hele serverkoden ser slik ut:

const express = require ('express');

const app = express (); const http = krever ('http'); const server = http.createServer (app); const io = require ('socket.io'). lytte (server); const arduino = require ('arduino-controller'); server.listen (3000, function () {console.log ('Express server lytter …');}); app.use ('/', express.static ('app')); const five = require ("johnny-five"); const board = new five. Board ({repl: false}); board.on ("ready", function () {let green = new five. Led (5); la rød = ny fem. Led (6); la venstre = ny fem. Pin (2); la høyre = 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; la tilstand = {side: 'venstre', state: val? 'down': 'up'} socket.emit ('arduino:: state', JSON.stringify (state), {for: 'alle'});}}) five. Pin.read (høyre, (err, val) => {if (val) {red.on ();} else {red.off ();} // if (val! == lastRight) {lastRight = val; la tilstand = {side: 'right', state: val? 'down': 'up'} socket.emit ('arduino:: state', JSON.stringify (state), {for: 'everyone'});}})}); });

Og kjøres med:

node server.js

Trinn 5: Tilpasning av spillet

Det første problemet var grensesnittet; hvordan klikker du på spillknappen når alt du kan gjøre er å hoppe? Jeg løste dette ved å fjerne alle de andre knappene! Jeg kan deretter utløse den gjenværende knappen hver gang spilleren hopper, ved å lytte etter enten opp -hendelsen.

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

Herfra klarte jeg å komme inn i spillet og bruke putene til noe morsommere - selve spillet.

Trinn 6: Endre spillerens hoppekode

Denne gangen må jeg håndtere hver pad individuelt, og få karakteren til å begynne å hoppe når spillerens fot forlater puten. Tiden for karakteren på skjermen å krysse gruveskaftet er lengre enn tiden for spilleren å hoppe fra den ene siden til siden. Dette er bra, siden det gir spilleren en sjanse til å gjenvinne balansen, kontrollere fotfoten og se spilleren fullføre hoppet på skjermen. Hadde dette ikke vært tilfelle, hadde jeg bremset spilleren.

socket = io ();

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

la data = JSON.parse (msg); if (data.side === 'venstre' && data.state === 'opp') {// vi hopper opp fra venstre side}});

Trinn 7: Endre utdata

Da inngangsmekanismen fungerte, måtte jeg jobbe med utgangen. Spillet spiller bra på en nettbrett eller telefon, fordi det fyller skjermen. Men når du hopper rundt, er det for lite til å se, så lekeområdet på skjermen må forstørres. Mye!

Dessverre er forstørrelse av alle de grafiske eiendelene en svært tidkrevende oppgave. Så jeg jukset! Siden spillet ikke trenger å forstå X, Y-posisjonen med et museklikk eller berøringshendelse, kan jeg enkelt re-skalere hele lerretet!

Dette innebar en hack på både CSS og JavaScript, slik at det eksisterende HTML5-lerretobjektet kjører fullskjerm.

Videre spilles spillet i portrettmodus, noe som var ment å gjøre maksimal bruk av skjermfast eiendom vi trengte for å rotere lerretet med 90 grader.

#SGXCanvas {

posisjon: absolutt; z-indeks: 0; transform: roter (-90deg); transform-origin: øverst til høyre; bredde: auto; }

Trinn 8: Det fungerer

I mitt første spill vippet jeg den bærbare datamaskinen på siden, og spilte slik.

Trinn 9: Klargjøring av rommet

Å bygge en fysisk kontroller er bare starten på reisen, ikke slutten. Resten av det fysiske rommet må vurderes.

For det første beveget trykkmattene seg rundt på gulvet når du landet på dem. Dette ble lett fikset med noen dobbeltsidige klebrig pads. De fungerer bra, men vil sannsynligvis ikke tåle mye slitasje.

Deretter ser den bærbare datamaskinen litt dum ut, noe som distraherer deg fra selve spillet. Så ble TV -en fra salongen "lånt" og ført til den lokale MakerSpace, hvor den ble plassert mot veggen og koblet til.

I fremtiden ville det være fint å legge til fotavtrykk på trykkmattene (kanskje Neil Armstrongs første månetrykk!) For å veilede spilleren. Også et bedre hylster og surround for TV -en vil øke følelsen. Kanskje de av dere som har mye tid og plass kan lage et steinmateriale av papirmaskin, plassert på hver side av mattene, for å etterligne den klaustrofobiske følelsen av å falle ned i en gruveskaft!

Trinn 10: Den er fullført

Og der har du det. Et enkelt dagsprosjekt som forbedrer det originale spillet, og holder deg i form mens du spiller det!

Du kan også bruke en Makey Makey som direkte simulerer tastetrykkene som ble brukt i det originale spillet, for å minimere noe av dette arbeidet. Men det er igjen som en øvelse for leseren:)

All koden er i en spesiell gren i Space Bounce -repoen: