Stvaranje fizičkog kontrolera igre: 10 koraka (sa slikama)

2024 Autor: John Day | [email protected]. Zadnja izmjena: 2024-01-30 08:06

Kada je Nintendo Wii lansiran, igrači su bili ohrabreni, nije bilo potrebno, da napuste sofu i skoče, plešu i trzaju kako bi osvojili bodove u svojoj igri po izboru. Iako u izgradnji za Wii postoji strma krivulja učenja, lako je izgraditi prilagođeni uređaj koji vam omogućuje kontrolu igre fizičkim skakanjem na jastučiće za pritisak u odgovarajuće vrijeme.

Ovo uputstvo pokazuje kako sam prilagodio igru 'Space Bounce' (koja se može igrati uživo na https://marquisdegeek.com/spacebounce/ sa izvorom na https://github.com/MarquisdeGeek/SpaceBounce) za upotrebu fizičkog kontrolera.

Supplies

• Arduino
• Dvije prostirke pod pritiskom (moje su iz Maplina
• Dva otpornika, za podmetač pritiska (100 K, ali većina je u redu)
• Dvije LED diode (opciono)
• Dva otpornika, za LED diode (100 K, ali većina je u redu. Također izborno)
• Laptop

Korak 1: Skočite

Počeo sam s dizajniranjem skakačkog sučelja i, nakon pregleda igre, shvatio sam da bi postojanje dvije prostirke najbolje izrazilo njenu osnovnu ideju. Odnosno, stojite na lijevoj prostirci da simulirate osjećaj držanja za lijevi zid i, u odgovarajućem trenutku, skočite preko desne prostirke, a vaš lik na ekranu bi učinio isto.

Korak 2: Povezivanje jastučića

Kupio sam dvije prostirke i krenuo na posao. Ovdje prikazane prostirke za pritisak su najjednostavnije (i najjeftinije!) Koje sam pronašao, svaka košta 10 funti. Imaju četiri žice, od kojih dvije djeluju poput jednostavnog prekidača: kada stanete na prostirku, uspostavlja se veza, a kada skočite ona se prekida. Ubacio sam ovo u Arduino sa ovim osnovnim krugom.

Korak 3: Fantastično okidanje svjetla

Uspjelo je, ali nije bilo inspirativno. Dodao sam neke LED diode koje pokazuju stanje svake podloge.

LED diode nisu potrebne za igru, ali dodavanjem u kolo lako sam mogao vidjeti šta kolo misli da je trenutno stanje. Stoga, ako igra ne bi pravilno reagirala, mogao bih otkriti je li problem u strujnom krugu, Arduino softveru ili logici igre.

Korak 4: Početak kodiranja

S obzirom na to da je originalna igra bila u JavaScriptu, odlučio sam napisati NodeJS program koji osluškuje promjene u stanju pritiska i šalje podatke putem web utičnica klijentu igre.

Prvo instalirajte standardne firme na vaš Arduino kako bismo mogli pokrenuti Node server na računaru i koristiti biblioteku Johnny Five za osluškivanje promjena stanja iz Arduina. Zatim dodajte Express za posluživanje sadržaja igre.

Cijeli kod servera izgleda ovako:

const express = require ('express');

const app = express (); const http = require ('http'); const server = http.createServer (aplikacija); const io = require ('socket.io'). listen (server); const arduino = require ('arduino-kontroler'); server.listen (3000, function () {console.log ('Express poslušanje servera …');}); app.use ('/', express.static ('app')); const five = require ("johnny-five"); const board = novih pet. Board ({repl: false}); board.on ("spreman", funkcija () {neka zeleno = novih pet. Led (5); neka crveno = novih pet. Led (6); neka lijevo = novih pet. Pin (2); neka desno = novih pet. Pin (3); io.on ('connect', function (socket) {console.log ('Povezani smo!'); Neka lastLeft = false; neka lastRight = false; pet. Pin.read (lijevo, (err, val) => {if (val) {green.on ();} else {green.off ();} if (val! == lastLeft) {lastLeft = val; neka stanje = {strana: 'lijevo', stanje: val? 'dolje': 'gore'} socket.emit ('arduino:: stanje', JSON.stringify (stanje), {za: 'svi'});}}) pet. Pin.read (desno, (err, val) => {if (val) {red.on ();} else {red.off ();} // if (val! == lastRight) {lastRight = val; neka stanje = {strana: 'desno', stanje: val? 'dolje': 'gore'} socket.emit ('arduino:: stanje', JSON.stringify (stanje), {za: 'svi'});}})}); });

I pokreće se sa:

čvor server.js

Korak 5: Prilagođavanje igre

Prvi problem je bio interfejs; kako "kliknuti" na dugme za reprodukciju kada sve što možete učiniti je skočiti? Ovo sam riješio uklanjanjem svih ostalih dugmadi! Zatim mogu aktivirati preostalo dugme kad god igrač skoči, osluškujući bilo koji događaj „gore“.

socket = io (); socket.on ('arduino:: stanje', funkcija (poruka) {let data = JSON.parse (msg); if (data.state === 'gore') {// skačemo!}});

Odavde sam mogao ući u igru i koristiti jastučiće za nešto zabavnije - samu igru.

Korak 6: Promjena koda za skok igrača

Ovaj put bih se trebao pozabaviti svakim padom pojedinačno i natjerati lik da počne skakati kad god igračeva noga napusti pad. Vrijeme dok lik na ekranu pređe rudarsko okno duže je od vremena da igrač skoči s jedne strane na drugu stranu. Ovo je dobra stvar, jer igraču daje priliku da povrati ravnotežu, provjeri uporište i gleda igrača kako završava skok na ekranu. Da nije tako, usporio bih igrača.

socket = io ();

socket.on ('arduino:: stanje', funkcija (poruka) {

neka podaci = JSON.parse (poruka); if (data.side === 'left' && data.state === 'up') {// skačemo s lijeve strane}});

Korak 7: Promjena izlaza

Dok je ulazni mehanizam radio, morao sam poraditi na izlazu. Igra se dobro igra na tabletu ili telefonu, jer ispunjava ekran. Ali, kada skačete unaokolo, premalo je za vidjeti, pa je potrebno povećati područje za igru na ekranu. Mnogo!

Nažalost, povećanje svih grafičkih materijala je dugotrajan zadatak. Pa, prevario sam se! Budući da igra ne mora razumjeti položaj X, Y klikom miša ili događajem dodira, mogu jednostavno ponovno promijeniti cijelo platno!

Ovo je uključivalo hakovanje i CSS-a i JavaScript-a, tako da postojeći HTML5 canvas objekt radi preko cijelog ekrana.

Nadalje, igra se igra u portretnom načinu rada što je značilo maksimalno korištenje nekretnina na ekranu koje su nam potrebne za rotiranje platna za 90 stupnjeva.

#SGXCanvas {

položaj: apsolutan; z-indeks: 0; transformirati: rotirati (-90 stepeni); transform-origin: gore desno; širina: auto; }

Korak 8: Radi

Za prvu igru nagnuo sam laptop na stranu i igrao ovako.

Korak 9: Priprema sobe

Izgradnja fizičkog kontrolera je samo početak putovanja, a ne kraj. Ostatak fizičkog prostora treba uzeti u obzir.

Prvo, prostirke za pritisak su se kretale po podu kada ste na njih sletjeli. To se lako popravilo nekim dvostranim ljepljivim jastučićima. Rade dobro, ali vjerovatno ne bi izdržali mnogo habanja.

Zatim, laptop izgleda pomalo blesavo, što vas odvlači od same igre. Tako je televizor iz salona "posuđen" i odnesen u lokalni MakerSpace, gdje je postavljen uza zid i povezan.

U budućnosti bi bilo lijepo dodati otiske stopala na prostirke za pritisak (možda prvi otisak Mjeseca Neila Armstronga!) Koji će voditi igrača. Bolje kućište i surround za televizor dodali bi osjećaj. Možda biste vi koji imate puno vremena i prostora mogli napraviti papirnatu mache stijenu, postavljenu s obje strane prostirki, da oponašaju klaustrofobični osjećaj pada niz rudarsko okno!

Korak 10: Potpuno je

I evo ga. Jednostavan dnevni projekt koji poboljšava originalnu igru i održava vas u formi dok je igrate!

Također možete upotrijebiti Makey Makey koji izravno simulira pritiskanje tipki korištenih u originalnoj igri, kako biste umanjili dio ovog rada. Ali to je čitatelju ostavljeno kao vježba:)

Sav kôd nalazi se u posebnoj grani u repoziciji Space Bounce: