Oprettelse af en fysisk spilcontroller: 10 trin (med billeder)

2024 Forfatter: John Day | [email protected]. Sidst ændret: 2024-01-30 08:27

Da Nintendo Wii blev lanceret, blev spillerne opfordret til at forlade sofaen og hoppe, danse og jiggle for at score point i deres valg af spil. Selvom der er en stejl indlæringskurve til at bygge til Wii, er det let at bygge en brugerdefineret enhed, der lader dig styre et spil ved fysisk at hoppe på trykpuder på det relevante tidspunkt.

Denne instruktør viser, hvordan jeg tilpassede spillet 'Space Bounce' (kan afspilles live på https://marquisdegeek.com/spacebounce/ med kilden på https://github.com/MarquisdeGeek/SpaceBounce) til at bruge en fysisk controller.

Forbrugsvarer

• Arduino
• To trykmåtter (mine var fra Maplin
• To modstande, til trykmåtten (100 K, men de fleste er fine)
• To lysdioder (valgfrit)
• To modstande til lysdioderne (100 K, men de fleste er fine. Også valgfri)
• Bærbar

Trin 1: Spring rundt

Jeg begyndte med at designe springgrænsefladen og ved gennemgang af spillet indså jeg, at det at have to måtter bedst ville udtrykke sin kerneidé. Det vil sige, at du står på den venstre måtte for at simulere følelsen af at holde fast i venstre væg og på det passende tidspunkt hoppe over til den rigtige måtte, og din karakter på skærmen ville gøre det samme.

Trin 2: Tilslutning af elektroderne

Så jeg købte to måtter og gik på arbejde. Trykmåtterne vist her er de enkleste (og billigste!) Jeg fandt, til £ 10 hver. De har fire ledninger, hvoraf to fungerer som en simpel kontakt: Når du står på måtten, oprettes en forbindelse, og når du hopper op, brydes den. Jeg fodrede dette ind i en Arduino med dette grundlæggende kredsløb.

Trin 3: Tripping the Light Fantastic

Det virkede, men var ikke særlig inspirerende. Så jeg tilføjede nogle lysdioder for at angive tilstanden for hver trykmåtte.

Lysdioderne er ikke nødvendige for at spille spillet, men ved at tilføje dem til kredsløbet kunne jeg let se, hvad kredsløbet troede var den aktuelle tilstand. Derfor, hvis spillet ikke reagerede korrekt, kunne jeg finde ud af, om problemet var med kredsløbet, Arduino -softwaren eller spillogikken.

Trin 4: Start med at kode

I betragtning af at det originale spil var i JavaScript, besluttede jeg at skrive et NodeJS -program, der lytter efter ændringer i trykmåttens tilstand og sender dataene via websockets til spilklienten.

Installer først standard firmata på din Arduino, så vi kan køre en Node -server på pc'en og bruge Johnny Five -biblioteket til at lytte efter tilstandsændringerne fra Arduino. Tilføj derefter Express for at vise spilindholdet.

Hele serverkoden ser sådan ud:

const express = require ('express');

const app = express (); const http = require ('http'); const server = http.createServer (app); const io = require ('socket.io'). lyt (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 = ny fem. Board ({repl: false}); board.on ("klar", funktion () {lad grøn = ny fem. Led (5); lad rød = ny fem. Led (6); lad venstre = ny fem. Pin (2); lad højre = ny fem. Pin (3); io.on ('connect', function (socket) {console.log ('We are connected!'); Lad lastLeft = false; lad lastRight = false; five. Pin.read (venstre, (fejl, val) => {hvis (val) {green.on ();} ellers {green.off ();} if (val! == lastLeft) {lastLeft = val; lad tilstand = {side: 'venstre', state: val? 'down': 'up'} socket.emit ('arduino:: state', JSON.stringify (state), {for: 'alle'});}}) five. Pin.read (højre, (err, val) => {if (val) {red.on ();} else {red.off ();} // if (val! == lastRight) {lastRight = val; lad tilstand = {side: 'right', state: val? 'down': 'up'} socket.emit ('arduino:: state', JSON.stringify (state), {for: 'alle'});}})}); });

Og køres med:

node server.js

Trin 5: Tilpasning af spillet

Det første problem var grænsefladen; hvordan 'klikker' du på afspilningsknappen, når alt du kan gøre er at hoppe? Jeg løste dette ved at fjerne alle de andre knapper! Jeg kan derefter udløse den resterende knap, når spilleren hopper, ved at lytte til enten 'op' begivenhed.

sokkel = io (); socket.on ('arduino:: state', funktion (msg) {lad data = JSON.parse (msg); hvis (data.state === 'op') {// vi hopper!}});

Herfra kunne jeg komme ind i spillet og bruge puderne til noget sjovere - selve spillet.

Trin 6: Ændring af spillerens springkode

Denne gang skulle jeg håndtere hver pad individuelt og få karakteren til at begynde at hoppe, når spillerens fod forlader pad’en. Tiden for karakteren på skærmen til at krydse mineakslen er længere end tiden for spilleren til at hoppe fra den ene side til siden. Dette er en god ting, da det giver spilleren en chance for at genvinde deres balance, kontrollere deres fodfæste og se spilleren gennemføre springet på skærmen. Havde dette ikke været tilfældet, ville jeg have bremset afspilleren.

sokkel = io ();

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

lad data = JSON.parse (msg); hvis (data.side === 'venstre' && data.state === 'op') {// vi hopper op fra venstre side}});

Trin 7: Ændring af output

Da inputmekanismen fungerede, var jeg nødt til at arbejde på output. Spillet spiller godt på en tablet eller telefon, fordi det fylder skærmen. Men når du hopper rundt, er det for lille til at se, så afspilningsområdet på skærmen skal forstørres. En masse!

Desværre er udvidelse af alle de grafiske aktiver en meget tidskrævende opgave. Så jeg snød! Da spillet ikke behøver at forstå X-, Y-positionen med et museklik eller en berøringshændelse, kan jeg simpelt omskalere hele lærredet!

Dette indebar et hack på både CSS og JavaScript, så det eksisterende HTML5-lærredobjekt kører i fuld skærm.

Desuden spilles spillet i portrætfunktion, hvilket skulle maksimere udnyttelsen af skærmsejendomme, vi havde brug for for at rotere lærredet med 90 grader.

#SGXCanvas {

position: absolut; z-indeks: 0; transformer: roter (-90deg); transform-origin: øverst til højre; bredde: auto; }

Trin 8: Det virker

I mit første spil vippede jeg min bærbare på siden og spillede sådan.

Trin 9: Forberedelse af rummet

At bygge en fysisk controller er kun starten på rejsen, ikke slutningen. Resten af det fysiske rum skal overvejes.

For det første flyttede trykmåtterne rundt på gulvet, da du landede på dem. Dette blev let løst med nogle dobbeltsidede klæbrige puder. De fungerer godt, men holder nok ikke meget slid.

Dernæst ser den bærbare computer lidt fjollet ud, hvilket distraherer dig fra selve spillet. Så fjernsynet fra loungen blev "lånt" og taget til den lokale MakerSpace, hvor det var placeret mod væggen og forbundet.

I fremtiden ville det være rart at tilføje fodspor på trykmåtterne (måske Neil Armstrongs første månemønster!) For at guide spilleren. Også et bedre kabinet og surround til fjernsynet ville føje til følelsen. Måske kunne de af jer med meget tid og plads lave en papirmache -klippeflade, placeret på hver side af måtterne, for at efterligne den klaustrofobiske følelse af at falde ned af en mineaksel!

Trin 10: Det er fuldført

Og der har du det. Et let dagsprojekt, der forbedrer det originale spil og holder dig i form, mens du spiller det!

Du kan også bruge en Makey Makey, der direkte simulerer tastetrykkene, der blev brugt i det originale spil, for at minimere noget af dette arbejde. Men det er tilbage som en øvelse for læseren:)

Al koden er i en særlig gren i Space Bounce -repoen: