Fizinio žaidimo valdiklio sukūrimas: 10 žingsnių (su paveikslėliais)

2024 Autorius: John Day | [email protected]. Paskutinį kartą keistas: 2024-01-30 10:46

Kai buvo paleistas „Nintendo Wii“, žaidėjai buvo raginami palikti sofą ir šokinėti, šokti ir linksmintis, kad rinktų taškus pasirinktame žaidime. Nors kuriant „Wii“yra stati mokymosi kreivė, nesunku sukurti pasirinktinį įrenginį, kuris leistų jums valdyti žaidimą fiziškai šokinėjant ant slėgio pagalvėlių tinkamu laiku.

Ši pamoka parodo, kaip pritaikiau žaidimą „Space Bounce“(galima žaisti tiesiogiai adresu https://marquisdegeek.com/spacebounce/ su šaltiniu https://github.com/MarquisdeGeek/SpaceBounce), kad galėčiau naudoti fizinį valdiklį.

Prekės

• Arduino
• Du slėgio kilimėliai (mano buvo iš Maplino
• Du slėgio kilimėlio rezistoriai (100 K, bet dauguma yra tinkami)
• Du šviesos diodai (neprivaloma)
• Du rezistoriai, skirti šviesos diodams (100 K, bet dauguma yra gerai. Taip pat neprivaloma)
• Nešiojamas kompiuteris

1 žingsnis: šokinėkite aplink

Pradėjau kurti šokinėjimo sąsają ir, peržiūrėjęs žaidimą, supratau, kad turint du kilimėlius geriausiai būtų išreikšta jo pagrindinė idėja. Tai reiškia, kad jūs stovite ant kairiojo kilimėlio, kad imituotumėte jausmą, kai laikotės už kairės sienos, ir tinkamu momentu peršoksite prie dešinio kilimėlio, o jūsų ekrano personažas padarys tą patį.

2 žingsnis: trinkelių prijungimas

Taigi nusipirkau du kilimėlius ir pradėjau dirbti. Čia parodyti slėgio kilimėliai yra paprasčiausi (ir pigiausi!), Kuriuos radau, kiekvienas kainuoja 10 svarų. Juose yra keturi laidai, du iš jų veikia kaip paprastas jungiklis: kai atsistoji ant kilimėlio, užmezgamas ryšys, o šokinėjant jis nutrūksta. Aš padaviau tai į „Arduino“su šia pagrindine grandine.

3 žingsnis: užfiksuokite šviesą fantastiškai

Tai pavyko, bet nebuvo labai įkvepianti. Taigi, pridėjau keletą šviesos diodų, nurodančių kiekvieno slėgio kilimėlio būklę.

Šviesos diodai nėra būtini norint žaisti žaidimą, tačiau pridėję juos prie grandinės galėčiau lengvai pamatyti, kokia grandinės manymu yra dabartinė būsena. Todėl, jei žaidimas nereagavo teisingai, galėčiau išsiaiškinti, ar problema susijusi su grandine, „Arduino“programine įranga ar žaidimo logika.

4 žingsnis: Pradėkite koduoti

Kadangi pradinis žaidimas buvo „JavaScript“, nusprendžiau parašyti „NodeJS“programą, kuri klauso slėgio kilimėlio būsenos pokyčių ir siunčia duomenis per žiniatinklio lizdus žaidimo klientui.

Pirmiausia įdiekite standartinę firmatą į savo „Arduino“, kad galėtume kompiuteryje paleisti „Node“serverį ir naudoti „Johnny Five“biblioteką, kad galėtume klausytis būsenos pokyčių iš „Arduino“. Tada pridėkite „Express“, kad pateiktumėte žaidimo turinį.

Visas serverio kodas atrodo taip:

const express = reikalauti ('express');

const programa = express (); const http = reikalauti ('http'); const serveris = http.createServer (programa); const io = reikalauti ('socket.io'). klausytis (serveris); const arduino = reikalauti ('arduino-controller'); server.listen (3000, function () {console.log ('Express server klausosi …');}); app.use ('/', express.static ('programa')); const five = reikalauti ("johnny-five"); const lenta = naujas penki. Board ({repl: false}); board.on ("ready", function () {let green = new five. Led (5); tegul raudona = new five. Led (6); let left = new five. Pin (2); let right = new five). Pin (3); io.on ('connect', function (socket) {console.log ('We are connected!'); Tegul lastLeft = false; tegul lastRight = false; five. Pin.read (kairėje, (klaida, 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), {for: 'everyone'});}}) five. Pin.read (dešinėje, (err, val) => {if (val) {red.on ();} else {red.off ();} // if (val! == lastRight) {lastRight = val; let state = {side: 'teisingai', būsena: val? 'žemyn': 'aukštyn'} socket.emit ('arduino:: state', JSON.stringify (state), {for: 'visiems'});}})}); });

Ir veikia su:

mazgas serveris.js

5 žingsnis: pritaikykite žaidimą

Pirmoji problema buvo sąsaja; kaip „spustelėti“paleidimo mygtuką, kai viskas, ką galite padaryti, yra šokinėti? Aš tai išsprendžiau pašalindamas visus kitus mygtukus! Tada galiu suaktyvinti likusį mygtuką, kai žaidėjas šokinėja, klausydamasis bet kurio „aukštyn“įvykio.

lizdas = io (); socket.on ('arduino:: state', function (msg) {let data = JSON.parse (msg); if (data.state === 'up') {// mes šokinėjame!}});

Iš čia galėjau įsitraukti į žaidimą ir panaudoti trinkeles kažkam smagesniam - pačiam žaidimui.

6 veiksmas: pakeiskite žaidėjo šuolio kodą

Šį kartą turėčiau susidoroti su kiekvienu kilimėliu atskirai ir priversti personažą šokinėti, kai žaidėjo pėda palieka trinkelę. Laikas, per kurį ekrane rodomas personažas gali pereiti minos veleną, yra ilgesnis nei laikas, per kurį žaidėjas gali peršokti iš vienos pusės į kitą. Tai geras dalykas, nes tai suteikia žaidėjui galimybę atgauti pusiausvyrą, patikrinti savo kojas ir stebėti, kaip žaidėjas ekrane atlieka šuolį. Jei to nebūtų buvę, būčiau pristabdęs žaidėją.

lizdas = io ();

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

tegul duomenys = JSON.parse (msg); if (data.side === 'left' && data.state === 'up') {// šokinėjame aukštyn iš kairės pusės}});

7 veiksmas: išvesties keitimas

Kai įvesties mechanizmas veikia, man reikėjo dirbti su išvestimi. Žaidimas gerai žaidžiamas planšetiniame kompiuteryje ar telefone, nes jis užpildo ekraną. Tačiau kai šokinėjate, jis yra per mažas, kad pamatytumėte, todėl ekrano plotą reikia padidinti. Daug!

Deja, visų grafinių išteklių padidinimas yra labai daug laiko reikalaujanti užduotis. Taigi, aš apgavau! Kadangi žaidimui nereikia suprasti pelės paspaudimo X, Y padėties ar prisilietimo įvykio, aš galiu paprasčiausiai pakeisti visos drobės mastelį!

Tai buvo įsilaužimas tiek į CSS, tiek į „JavaScript“, kad esamas HTML5 drobės objektas veiktų viso ekrano režimu.

Be to, žaidimas žaidžiamas portreto režimu, kuris turėjo maksimaliai išnaudoti ekrano nekilnojamąjį turtą, kurio mums reikėjo, kad drobė pasuktų 90 laipsnių kampu.

#SGXCanvas {

pozicija: absoliuti; z-indeksas: 0; transformuoti: pasukti (-90deg); transformuoti-kilmė: viršuje dešinėje; plotis: automatinis; }

8 žingsnis: tai veikia

Pirmajame žaidime pakreipiau nešiojamąjį kompiuterį ant šono ir žaidžiau taip.

9 žingsnis: kambario paruošimas

Fizinio valdiklio sukūrimas yra tik kelionės pradžia, o ne pabaiga. Reikia atsižvelgti į likusią fizinę erdvę.

Pirma, slėgio kilimėliai judėjo ant grindų, kai ant jų nusileidote. Tai buvo lengvai ištaisyta su dvipusiomis lipniomis trinkelėmis. Jie veikia gerai, tačiau greičiausiai neatlaikys daug nusidėvėjimo.

Be to, nešiojamasis kompiuteris atrodo šiek tiek kvailas, o tai atitraukia jus nuo paties žaidimo. Taigi, televizorius iš poilsio kambario buvo „pasiskolintas“ir nuneštas į vietinę „MakerSpace“, kur buvo pastatytas prie sienos ir prijungtas.

Ateityje būtų malonu pridėti pėdsakus ant slėgio kilimėlių (galbūt pirmojo Neilo Armstrongo mėnulio atspaudo!), Kad padėtų žaidėjui. Taip pat geresnis televizoriaus korpusas ir erdvė padidintų jausmą. Galbūt tie, kurie turi daug laiko ir erdvės, gali padaryti popieriaus mache uolą, padėtą abiejose kilimėlių pusėse, kad imituotų klaustrofobinį jausmą, kai nukrito minos šachta!

10 žingsnis: viskas baigta

Ir štai tu jį turi. Lengvas dienos projektas, pagerinantis originalų žaidimą ir išlaikantis jūsų formą žaidžiant!

Taip pat galite naudoti „Makey Makey“, kuris tiesiogiai imituoja pradiniame žaidime naudojamus klavišų paspaudimus, kad sumažintumėte dalį šio darbo. Bet tai liko kaip pratimas skaitytojui:)

Visas kodas yra specialiame „Space Bounce“atpirkimo filiale: