Füüsilise mängukontrolleri loomine: 10 sammu (piltidega)

2024 Autor: John Day | [email protected]. Viimati modifitseeritud: 2024-01-30 08:48

Kui Nintendo Wii turule toodi, julgustati mängijaid diivanilt lahkuma ja hüppama, tantsima ja virisema, et oma valitud mängus punkte koguda. Kuigi Wii ehitamisel on järsk õppimiskõver, on lihtne luua kohandatud seade, mis võimaldab teil mängu juhtida, sobival ajal füüsiliselt survetükkidele hüpates.

See juhend näitab, kuidas kohandasin mängu 'Space Bounce' (mängitav otsepildis aadressil https://marquisdegeek.com/spacebounce/ koos allikaga aadressil https://github.com/MarquisdeGeek/SpaceBounce), et kasutada füüsilist kontrollerit.

Tarvikud

• Arduino
• Kaks survematti (minu oma oli Maplinist)
• Kaks takistit rõhumati jaoks (100 K, kuid enamik on korras)
• Kaks LED -i (valikuline)
• Kaks takisti, LED -ide jaoks (100 K, kuid enamik on korras. Samuti valikuline)
• Sülearvuti

Samm: hüppa ringi

Alustasin hüppeliidese kujundamisega ja mõistsin mängu üle vaadates, et kahe mati olemasolu väljendab kõige paremini selle põhiideed. See tähendab, et te seisate vasakul matil, et simuleerida vasakust seinast kinni hoidmise tunnet ja hüpata sobival hetkel paremale matile ning teie ekraanil kuvatav tegelane teeks sama.

2. samm: Padjade ühendamine

Nii et ostsin kaks matti ja asusin tööle. Siin näidatud rõhumatt on kõige lihtsam (ja odavaim!), Mille leidsin, igaüks 10 naela. Neil on neli juhtmest, millest kaks toimivad nagu lihtne lüliti: kui seisate matil, tekib ühendus ja üles hüpates on see katki. Ma andsin selle selle põhiahelaga Arduinosse.

3. samm: Fantastiline valgus

See töötas, kuid ei olnud väga inspireeriv. Niisiis, lisasin mõned LED -id, et näidata iga rõhumati olekut.

Mängu mängimiseks ei ole LED -id nõutavad, kuid neid vooluringile lisades nägin hõlpsalt, milline oli vooluringi arvates praegune olek. Seega, kui mäng ei reageerinud õigesti, sain aru, kas probleem oli vooluringis, Arduino tarkvaras või mänguloogikas.

Samm: koodiga alustamine

Kuna algne mäng oli JavaScriptis, otsustasin kirjutada programmi NodeJS, mis kuulab rõhumattide oleku muutusi ja saadab andmed veebipistikute kaudu mängukliendile.

Esmalt installige oma Arduinole tavaline firmata, et saaksime arvutis Node -serveri käitada ja kasutada Johnny Five raamatukogu, et kuulata Arduino oleku muutusi. Seejärel lisage mängu sisu esitamiseks Express.

Kogu serveri kood näeb välja selline:

const express = nõuda ('ekspress');

const app = ekspress (); const http = nõuda ('http'); const server = http.createServer (rakendus); const io = nõuda ('socket.io'). kuulama (server); const arduino = nõuda ('arduino-kontroller'); server.listen (3000, function () {console.log ('Express serveri kuulamine …');}); app.use ('/', express.static ('rakendus')); const viis = nõuda ("johnny-viis"); const board = uus viis. Board ({repl: false}); board.on ("valmis", funktsioon () {lase roheline = uus viis. Led (5); las punane = uus viis. Led (6); lase vasakule = uus viis. Pin (2); lase paremale = uus viis). 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: 'kõigile'});}}) five. Pin.read (paremal, (err, val) => {if (val) {red.on ();} else {red.off ();} // if (val! == lastRight) {lastRight = val; let state = {side: 'õige', olek: val? 'alla': 'üles'} socket.emit ('arduino:: state', JSON.stringify (state), {for: 'kõigile'});}})}); });

Ja jookseb koos:

sõlm server.js

Samm: mängu kohandamine

Esimene probleem oli liides; kuidas te klõpsate esitusnupul, kui saate ainult hüpata? Ma lahendasin selle, kõrvaldades kõik muud nupud! Seejärel saan käivitada allesjäänud nupu, kui mängija hüppab, kuulates kumbki „üles” sündmus.

pesa = io (); socket.on ('arduino:: olek', funktsioon (msg) {let data = JSON.parse (msg); if (data.state === 'up') {// me hüppame!}});

Siit sain mängu siseneda ja kasutada patju millegi lõbusama jaoks - mäng ise.

6. toiming: mängija hüppekoodi muutmine

Seekord oleks mul vaja tegeleda iga padjaga eraldi ja panna tegelane hüppama, kui mängija jalg padjalt lahkub. Ekraanil oleva tegelase aeg miinivõlli läbimiseks on pikem kui mängijal ühelt küljelt teisele hüppamine. See on hea, sest see annab mängijale võimaluse taastada tasakaal, kontrollida oma jalgu ja vaadata, kuidas mängija ekraanil hüppe lõpetab. Kui see poleks nii olnud, oleksin mängija pidurdanud.

pesa = io ();

socket.on ('arduino:: olek', funktsioon (msg) {

lase andmed = JSON.parse (msg); if (data.side === 'left' && data.state === 'up') {// hüppame vasakult küljelt üles}});

7. samm: väljundi muutmine

Kui sisendmehhanism töötas, pidin ma väljundiga töötama. Mäng mängib hästi tahvelarvutis või telefonis, sest see täidab ekraani. Kui aga ringi hüppate, on see nägemiseks liiga väike, nii et ekraanil olevat mänguväljakut tuleb suurendada. Palju!

Kahjuks on kõigi graafiliste varade suurendamine väga aeganõudev ülesanne. Niisiis, ma pettusin! Kuna mäng ei pea mõistma hiireklõpsu X, Y asendit ega puudutussündmust, saan ma lihtsalt kogu lõuendi ümber skaleerida!

See hõlmas häkkimist nii CSS-i kui ka JavaScripti, nii et olemasolev HTML5 lõuendi objekt töötab täisekraanil.

Lisaks mängitakse mängu portreerežiimis, mis tähendas ekraani kinnisvara maksimaalset ärakasutamist, mida oli vaja lõuendi 90 kraadi pööramiseks.

#SGXCanvas {

positsioon: absoluutne; z-indeks: 0; teisendada: pöörata (-90º); teisendada päritolu: üleval paremal; laius: auto; }

8. samm: see töötab

Esimese mängu jaoks kallutasin sülearvuti külili ja mängisin nii.

Samm: ruumi ettevalmistamine

Füüsilise kontrolleri ehitamine on alles teekonna algus, mitte lõpp. Ülejäänud füüsilist ruumi tuleb arvestada.

Esiteks liikusid surumattid põrandal ringi, kui neile maandusite. Seda oli kerge parandada mõne kahepoolse kleepuva padjaga. Need töötavad hästi, kuid tõenäoliselt ei taluks nad palju kulumist.

Järgmisena tundub sülearvuti natuke tobe, mis häirib teid mängust endast. Niisiis, televiisor salongist "laenati" ja viidi kohalikku MakerSpace'i, kus see seina vastu asetati ja ühendati.

Tulevikus oleks tore mängijale juhendamiseks rõhumattidele jalajäljed lisada (võib -olla Neil Armstrongi esimesele kuutrükile!). Ka teleri parem korpus ja ümbrus muudaksid tunde paremaks. Võib -olla võiksid need, kellel on palju aega ja ruumi, teha pabermatše kalju, mis asetatakse mõlemale poole matte, et jäljendada miinivõllilt kukkumise klaustrofoobset tunnet!

Samm: see on valmis

Ja seal on see olemas. Lihtne päevaprojekt, mis täiustab algupärast mängu ja hoiab seda mängides vormis!

Selle töö minimeerimiseks võite kasutada ka Makey Makey'i, mis simuleerib otseselt algses mängus kasutatud klahvivajutusi. Aga see jääb lugejale harjutuseks:)

Kogu kood on Space Bounce'i repos spetsiaalses filiaalis: