Fyysisen peliohjaimen luominen: 10 vaihetta (kuvilla)

2024 Kirjoittaja: John Day | [email protected]. Viimeksi muokattu: 2024-01-30 09:01

Kun Nintendo Wii lanseerattiin, pelaajia kannustettiin poistumaan sohvalta ja hyppäämään, tanssimaan ja heilumaan saadakseen pisteitä valitsemastaan pelistä. Vaikka Wiin rakentamisessa on jyrkkä oppimiskäyrä, on helppo rakentaa mukautettu laite, jonka avulla voit hallita peliä hyppäämällä fyysisesti painetyynyille oikeaan aikaan.

Tämä opas osoittaa, miten olen mukauttanut pelin 'Space Bounce' (pelattavissa livenä osoitteessa https://marquisdegeek.com/spacebounce/ ja lähde osoitteessa https://github.com/MarquisdeGeek/SpaceBounce) käyttämään fyysistä ohjainta.

Tarvikkeet

• Arduino
• Kaksi painemattoa (omani olivat Maplinista
• Kaksi vastusta painematolle (100 K, mutta useimmat ovat kunnossa)
• Kaksi LEDiä (valinnainen)
• Kaksi vastusta, LEDeille (100 K, mutta useimmat ovat kunnossa. Myös valinnainen)
• Kannettava tietokone

Vaihe 1: Hyppää ympäri

Aloitin suunnittelemalla hyppyrajapintaa ja pelin tarkastelun jälkeen tajusin, että kahden maton käyttäminen ilmentäisi parhaiten sen ydinideaa. Toisin sanoen, seisot vasemman maton päällä simuloidaksesi vasemman seinän pitämisen tunnetta ja hyppäät sopivalla hetkellä oikean maton yli, ja kuvaruutuhahmosi tekisi samoin.

Vaihe 2: Liitä tyynyt

Joten ostin kaksi mattoa ja ryhdyin töihin. Tässä näkyvät painematot ovat yksinkertaisimpia (ja halvimpia!) Löysin, 10 puntaa. Niissä on neljä johtoa, joista kaksi toimii kuin yksinkertainen kytkin: kun seisot matolla, yhteys muodostetaan ja hyppääessäsi se katkeaa. Syötin tämän Arduinolle tällä peruspiirillä.

Vaihe 3: Valon laukaiseminen Fantastic

Se toimi, mutta ei ollut kovin innostava. Joten lisäsin joitain LED -valoja ilmaisemaan kunkin painematon tilan.

LED -valoja ei tarvita pelin pelaamiseen, mutta lisäämällä ne piiriin näen helposti, mikä piirin mielestä oli nykyinen tila. Siksi, jos peli ei reagoinut oikein, voisin selvittää, johtuiko ongelma piiristä, Arduino -ohjelmistosta tai pelin logiikasta.

Vaihe 4: Koodauksen aloittaminen

Koska alkuperäinen peli oli JavaScriptiä, päätin kirjoittaa NodeJS -ohjelman, joka kuuntelee painematon tilan muutoksia ja lähettää tiedot verkkopistorasioiden kautta peliasiakkaalle.

Asenna ensin tavallinen firmata Arduinollesi, jotta voimme ajaa Node -palvelinta tietokoneella ja käyttää Johnny Five -kirjastoa kuunnellaksesi Arduinon tilan muutoksia. Lisää sitten Express pelin sisällön näyttämiseen.

Koko palvelimen koodi näyttää tältä:

const express = vaatia ('express');

const -sovellus = express (); const http = vaatia ('http'); const -palvelin = http.createServer (sovellus); const io = vaatia ('socket.io'). kuuntele (palvelin); const arduino = vaatia ('arduino-ohjain'); server.listen (3000, function () {console.log ('Express -palvelimen kuuntelu …');}); app.use ('/', express.static ('sovellus')); const viisi = vaatia ("johnny-five"); const board = new five. Board ({repl: false}); board.on ("valmis", toiminto () {anna vihreän = uusi viisi. LED (5); anna punaisen = uusi viisi. LED (6); anna vasen = uusi viisi. Pin (2); anna oikean = uusi viisi. 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; let state = {side: 'left', state: val? 'down': 'up'} socket.emit ('arduino:: state', JSON.stringify (state), {for: 'everyone'});}}) five. Pin.read (oikea, (err, val) => {if (val) {red.on ();} else {red.off ();} // if (val! == lastRight) {lastRight = val; let state = {side: 'oikea', tila: val? 'alas': 'ylös'} socket.emit ('arduino:: state', JSON.stringify (state), {for: 'kaikille'});}})}); });

Ja sitä ajetaan:

solmu palvelin.js

Vaihe 5: Pelin mukauttaminen

Ensimmäinen ongelma oli käyttöliittymä; kuinka napsautat toistopainiketta, kun kaikki mitä voit tehdä on hypätä? Ratkaisin tämän poistamalla kaikki muut painikkeet! Voin sitten käynnistää jäljellä olevan painikkeen aina, kun pelaaja hyppää, kuuntelemalla jompaakumpaa 'ylös' -tapahtumaa.

pistorasia = io (); socket.on ('arduino:: state', function (msg) {let data = JSON.parse (msg); if (data.state === 'ylös') {// hyppäämme!}});

Sieltä pystyin pääsemään peliin ja käyttämään tyynyjä johonkin hauskempaan - itse peliin.

Vaihe 6: Pelaajan hyppykoodin muuttaminen

Tällä kertaa minun pitäisi käsitellä jokaista padia erikseen ja saada hahmo hyppäämään aina, kun pelaajan jalka poistuu tyynystä. Aika, jonka kuvaruudun hahmo kulkee miinan akselin yli, on pidempi kuin aika, jonka pelaaja hyppää yhdeltä puolelta toiselle. Tämä on hyvä asia, koska se antaa pelaajalle mahdollisuuden palauttaa tasapainonsa, tarkistaa jalkansa ja katsella pelaajan suorittavan hyppyn näytöllä. Jos näin ei olisi, olisin hidastanut pelaajaa.

pistorasia = io ();

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

anna data = JSON.parse (msg); if (data.side === 'left' && data.state === 'up') {// hyppäämme ylös vasemmalta puolelta}});

Vaihe 7: Lähdön muuttaminen

Kun syöttömekanismi toimi, minun piti työskennellä lähdön parissa. Peli toimii hyvin tabletilla tai puhelimella, koska se täyttää näytön. Mutta kun hyppäät ympäri, se on liian pieni näkemään, joten näytön leikkialue on suurennettava. Paljon!

Valitettavasti kaikkien graafisten resurssien laajentaminen on erittäin aikaa vievä tehtävä. Eli petin! Koska pelin ei tarvitse ymmärtää hiiren napsautuksen X- tai Y-asemaa tai kosketustapahtumaa, voin yksinkertaisesti skaalata koko kankaan uudelleen!

Tämä sisälsi hakkeroinnin sekä CSS: ään että JavaScriptiin niin, että olemassa oleva HTML5-kangasobjekti toimii koko näytön tilassa.

Lisäksi peliä pelataan pystytilassa, jonka tarkoituksena oli hyödyntää mahdollisimman paljon näytön kiinteistöjä, joita tarvitsimme kääntämään kangasta 90 astetta.

#SGXCanvas {

sijainti: absoluuttinen; z-indeksi: 0; muuntaa: kiertää (-90 astetta); muunnos-alkuperä: ylhäällä oikealla; leveys: auto; }

Vaihe 8: Se toimii

Ensimmäisessä pelissäni kallistin kannettavan tietokoneen kyljelleen ja pelasin näin.

Vaihe 9: Huoneen valmistelu

Fyysisen ohjaimen rakentaminen on vain matkan alku, ei loppu. Muu fyysinen tila on otettava huomioon.

Ensinnäkin painematot liikkuivat lattialla, kun laskeuduit niiden päälle. Tämä oli helppo korjata joillakin kaksipuolisilla tahmeilla tyynyillä. Ne toimivat hyvin, mutta eivät todennäköisesti kestäisi paljon kulumista.

Seuraavaksi kannettava tietokone näyttää hieman typerältä, mikä häiritsee sinua pelistä. Joten televisio loungesta "lainattiin" ja vietiin paikalliseen MakerSpaceen, jossa se sijoitettiin seinää vasten ja yhdistettiin.

Tulevaisuudessa olisi mukavaa lisätä jalanjälkiä painemattoihin (ehkä Neil Armstrongin ensimmäiseen kuukuvioon!) Ohjaamaan pelaajaa. Myös parempi kotelo ja surround TV: lle lisäävät tunnelmaa. Ehkä ne teistä, joilla on paljon aikaa ja tilaa, voisivat tehdä paperimassan kalliopinnan, joka on sijoitettu mattojen kummallekin puolelle jäljittelemään klaustrofobista tunnetta, joka putoaa kaivoksen akselille!

Vaihe 10: Se on valmis

Ja siellä sinulla on se. Helppo päiväprojekti, joka parantaa alkuperäistä peliä ja pitää sinut kunnossa kun pelaat sitä!

Voit myös käyttää Makey Makey -ohjelmaa, joka simuloi suoraan alkuperäisessä pelissä käytettyjä näppäimen painalluksia. Mutta se jää lukijan harjoitukseksi:)

Kaikki koodi on Space Bounce repon erityisessä haarassa: