Ustvarjanje fizičnega krmilnika iger: 10 korakov (s slikami)

2024 Avtor: John Day | [email protected]. Nazadnje spremenjeno: 2024-01-30 12:04

Ko je bil predstavljen Nintendo Wii, so igralce spodbudili, ne le, da zapustijo kavč in skočijo, plešejo in se premikajo, da bi v svoji igri izbrali točke. Medtem ko za Wii obstaja strma krivulja učenja, je enostavno sestaviti napravo po meri, ki vam omogoča nadzor igre, tako da ob ustreznem času fizično skočite na pritisne blazinice.

To navodilo prikazuje, kako sem igro Space Space Bounce (ki jo je mogoče predvajati v živo na https://marquisdegeek.com/spacebounce/ z virom na https://github.com/MarquisdeGeek/SpaceBounce) prilagodil uporabi fizičnega krmilnika.

Zaloge

• Arduino
• Dve tlačni podlogi (moja sta bili iz Maplina
• Dva upora za tlačno podlogo (100 K, vendar je večina v redu)
• Dve LED (neobvezno)
• Dva upora za LED (100 K, vendar je večina v redu. Tudi neobvezno)
• Prenosni računalnik

1. korak: Skočite

Začel sem z oblikovanjem skakalnega vmesnika in po pregledu igre spoznal, da bi dve preprogi najbolje izrazili njeno osnovno idejo. To pomeni, da stojite na levi preprogi, da simulirate občutek držanja leve stene in v primernem trenutku skočite čez desno preprogo, vaš lik na zaslonu pa bi naredil enako.

2. korak: Priključitev blazinic

Tako sem kupil dve preprogi in se lotil dela. Tu prikazane tlačne preproge so najpreprostejše (in najcenejše!), Ki sem jih našel, in sicer po 10 funtov. Imajo štiri žice, od katerih dve delujeta kot preprosto stikalo: ko stojiš na preprogi, se vzpostavi povezava, in ko skočiš, se prekine. To sem napajal v Arduino s tem osnovnim vezjem.

3. korak: fantastično sprožite svetlobo

Uspelo je, vendar ni bilo zelo navdihujoče. Zato sem dodal nekaj LED, ki označujejo stanje vsake tlačne preproge.

LED diode za igro niso potrebne, vendar sem z dodajanjem v vezje zlahka videl, kakšno je trenutno stanje vezja. Če se torej igra ne bi pravilno odzvala, bi lahko ugotovil, ali je težava v vezju, programski opremi Arduino ali logiki igre.

4. korak: Začnite s kodiranjem

Glede na to, da je bila prvotna igra v JavaScriptu, sem se odločil, da napišem program NodeJS, ki posluša spremembe stanja pritisne preproge in podatke pošlje odjemalcu igre prek spletnih vtičnic.

Najprej namestite standardno firmo na svoj Arduino, da bomo lahko v računalniku zagnali strežnik Node in s knjižnico Johnny Five poslušali spremembe stanja iz Arduina. Nato dodajte Express, da prikažete vsebino igre.

Celotna koda strežnika izgleda tako:

const express = zahteva ('ekspresno');

const app = express (); const http = require ('http'); strežnik const = http.createServer (aplikacija); const io = require ('socket.io'). listen (strežnik); const arduino = require ('arduino-controller'); server.listen (3000, function () {console.log ('Ekspresno poslušanje strežnika …');}); app.use ('/', express.static ('app')); const five = require ("johnny-five"); const board = novih pet. Board ({repl: false}); board.on ("ready", function () {pusti zeleno = novih pet. Led (5); naj rdeče = novih pet. Led (6); levo = novih pet. Pin (2); naj bo desno = novih pet. Pin (3); io.on ('connect', function (socket) {console.log ('We are connected!'); Naj lastLeft = false; naj lastRight = false; pet. Pin.read (levo, (err, val) => {if (val) {green.on ();} else {green.off ();} if (val! == lastLeft) {lastLeft = val; let state = {side: 'left', stanje: val? 'dol': 'gor'} socket.emit ('arduino:: stanje', JSON.stringify (stanje), {za: 'vsi'});}}) pet. Pin.read (desno, (err, val) => {if (val) {red.on ();} else {red.off ();} // if (val! == lastRight) {lastRight = val; let state = {side: 'desno', stanje: val? 'dol': 'gor'} socket.emit ('arduino:: stanje', JSON.stringify (stanje), {za: 'vsi'});}})}); });

In teče z:

vozlišče server.js

5. korak: Prilagajanje igre

Prva težava je bil vmesnik; kako "klikneš" na gumb za predvajanje, ko lahko le skočiš? To sem rešil z odstranitvijo vseh drugih gumbov! Preostali gumb lahko nato sprožim, ko igralec skoči, tako da prisluhnem dogodku "navzgor".

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

Od tu sem lahko vstopil v igro in uporabil blazinice za nekaj bolj zabavnega - samo igro.

6. korak: Sprememba kode za skok igralca

Tokrat bi se moral ukvarjati z vsako blazinico posebej in narediti, da lik začne skakati vsakič, ko igralčeva noga zapusti ploščico. Čas, ko lik na zaslonu prečka rudniški jašek, je daljši od časa, ko igralec skoči z ene strani na stran. To je dobro, saj igralcu daje možnost, da si povrne ravnotežje, preveri svojo podlago in opazuje, kako igralec konča skok na zaslonu. Če ne bi bilo tako, bi igralca upočasnil.

vtičnica = io ();

socket.on ('arduino:: stanje', funkcija (sporočilo) {

naj bodo podatki = JSON.parse (msg); if (data.side === 'left' && data.state === 'up') {// skočimo z leve strani}});

7. korak: Spreminjanje izhoda

Ko je vhodni mehanizem deloval, sem moral delati na izhodu. Igra se dobro igra na tabličnem računalniku ali telefonu, ker zapolni zaslon. Ko pa skačete naokoli, je premajhen, da bi ga videli, zato je treba območje za igranje na zaslonu povečati. Veliko!

Na žalost je povečanje vseh grafičnih sredstev zelo dolgotrajno opravilo. Torej, prevaral sem! Ker igri ni treba razumeti položaja X, Y klika miške ali dogodka na dotik, lahko preprosto znova prilagodim celotno platno!

To je vključevalo vdor v CSS in JavaScript, tako da se obstoječi objekt platna HTML5 izvaja na celozaslonskem načinu.

Poleg tega se igra v pokončnem načinu, kar pomeni, da kar najbolje izkoristimo nepremičnine na zaslonu, ki smo jih potrebovali za zasuk platna za 90 stopinj.

#SGXCanvas {

položaj: absolutno; z-indeks: 0; pretvori: vrti (-90 stopinj); transform-origin: zgoraj desno; širina: avto; }

8. korak: Deluje

Za prvo igro sem nagnil prenosnik na bok in se igral tako.

9. korak: Priprava sobe

Izdelava fizičnega krmilnika je le začetek potovanja, ne konec. Upoštevati je treba preostali fizični prostor.

Najprej so se tlačne preproge premikale po tleh, ko ste pristali nanje. To je bilo enostavno popraviti z nekaj dvostranskimi lepljivimi blazinicami. Delujejo dobro, vendar verjetno ne bi zdržali veliko obrabe.

Nato je prenosnik videti nekoliko neumno, kar vas odvrne od same igre. Tako so si televizijo iz salona "sposodili" in jo odnesli v lokalni MakerSpace, kjer so jo postavili ob steno in jo povezali.

V prihodnosti bi bilo lepo dodati odtise na tlačne preproge (morda prvi odtis lune Neila Armstronga!) Za vodenje igralca. Tudi boljše ohišje in ohišje za televizor bi dodalo občutek. Morda bi lahko tisti, ki imate veliko časa in prostora, naredili steno iz papirja, postavljeno na obeh straneh preprog, da bi posnemali klaustrofobični občutek padca po rudniškem jašku!

10. korak: Dokončano je

In tukaj imate. Enostaven dnevni projekt, ki izboljša prvotno igro in vas ohranja v formi med igranjem!

Uporabite lahko tudi Makey Makey, ki neposredno simulira pritiske na tipke, uporabljene v prvotni igri, da zmanjšate del tega dela. A to bralcu ostane kot vaja:)

Vsa koda je v posebni veji repo Space Bounce: