Fiziskā spēļu kontroliera izveide: 10 soļi (ar attēliem)

2024 Autors: John Day | [email protected]. Pēdējoreiz modificēts: 2024-01-30 10:55

Kad Nintendo Wii tika palaists tirgū, spēlētāji tika mudināti atstāt dīvānu un lēkt, dejot un dungot, lai savā izvēlētajā spēlē iegūtu punktus. Lai gan Wii veidošanā ir strauja mācīšanās līkne, ir viegli izveidot pielāgotu ierīci, kas ļauj kontrolēt spēli, fiziski lecot uz spiediena spilventiņiem atbilstošā laikā.

Šī pamācība parāda, kā es pielāgoju spēli “Space Bounce” (spēlējama tiešraidē vietnē https://marquisdegeek.com/spacebounce/ ar avotu vietnē https://github.com/MarquisdeGeek/SpaceBounce), lai izmantotu fizisku kontrolieri.

Piegādes

• Arduino
• Divi spiediena paklāji (mani bija no Maplin
• Divi rezistori spiediena paklājiņam (100 K, bet lielākā daļa ir labi)
• Divas gaismas diodes (pēc izvēles)
• Divi rezistori gaismas diodēm (100 K, bet lielākā daļa ir labi. Arī pēc izvēles)
• Klēpjdators

1. solis: lēkt apkārt

Es sāku, izstrādājot lecošo saskarni, un, pārskatot spēli, sapratu, ka divu paklāju esamība vislabāk izpauž tās pamatideju. Tas ir, jūs stāvat uz kreisā paklāja, lai simulētu sajūtu, ka turaties pie kreisās sienas, un atbilstošā brīdī lecat pāri labajam paklājam, un jūsu ekrāna varonis rīkotos tāpat.

2. darbība: spilventiņu pievienošana

Tāpēc es nopirku divus paklājus un ķēros pie darba. Šeit redzamie spiediena paklājiņi ir visvienkāršākie (un lētākie!), Ko es atradu, katrs par 10 sterliņu mārciņām. Viņiem ir četri vadi, no kuriem divi darbojas kā vienkāršs slēdzis: stāvot uz paklāja, tiek izveidots savienojums, un, uzlecot augšup, tas ir salauzts. Es to ievadīju Arduino ar šo pamata shēmu.

3. darbība. Gaismas paklupšana fantastiski

Tas strādāja, bet nebija ļoti iedvesmojošs. Tātad, es pievienoju dažas gaismas diodes, lai norādītu katra spiediena paklāja stāvokli.

Gaismas diodes nav nepieciešamas, lai spēlētu spēli, bet, pievienojot tās ķēdei, es varētu viegli redzēt, kāds, pēc ķēdes domām, bija pašreizējais stāvoklis. Tāpēc, ja spēle nereaģēja pareizi, es varētu noskaidrot, vai problēma ir saistīta ar ķēdi, Arduino programmatūru vai spēles loģiku.

4. darbība. Sākt kodēšanu

Tā kā sākotnējā spēle bija JavaScript, nolēmu uzrakstīt NodeJS programmu, kas uzklausa spiediena paklāja stāvokļa izmaiņas un nosūta datus, izmantojot tīmekļa ligzdas, spēles klientam.

Vispirms instalējiet standarta firmatu savā Arduino, lai mēs varētu palaist Node serveri datorā un izmantot Johnny Five bibliotēku, lai klausītos Arduino stāvokļa izmaiņas. Pēc tam pievienojiet Express, lai pasniegtu spēles saturu.

Viss servera kods izskatās šādi:

const express = pieprasīt ('express');

const lietotne = express (); const http = prasīt ('http'); const serveris = http.createServer (lietotne); const io = pieprasīt ('socket.io'). klausīties (serveris); const arduino = prasīt ('arduino-controller'); server.listen (3000, function () {console.log ('Express servera klausīšanās …');}); app.use ('/', express.static ('lietotne')); const pieci = prasīt ("džonijs-pieci"); const dēlis = jauns pieci. Padome ({repl: false}); board.on ("gatavs", funkcija () {let green = new five. Led (5); let red = 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!'); Let lastLeft = false; let lastRight = false; five. Pin.read (pa kreisi, (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 (pa labi, (err, val) => {if (val) {red.on ();} else {red.off ();} // if (val! == lastRight) {lastRight = val; let state = {side: 'pareizi', štats: val? 'uz leju': 'uz augšu'} socket.emit ('arduino:: state', JSON.stringify (state), {for: 'visiem'});}})}); });

Un tiek palaists ar:

mezgls server.js

5. darbība: spēles pielāgošana

Pirmā problēma bija saskarne; kā jūs "noklikšķiniet" uz atskaņošanas pogas, kad viss, ko varat darīt, ir lēkt? Es to atrisināju, likvidējot visas pārējās pogas! Pēc tam es varu aktivizēt atlikušo pogu ikreiz, kad spēlētājs lec, klausoties vai nu “augšup” notikumu.

ligzda = io (); socket.on ('arduino:: state', function (msg) {let data = JSON.parse (msg); if (data.state === 'up') {// mēs lecam!}});

No šejienes es varēju iekļūt spēlē un izmantot spilventiņus kaut kam jautrākam - pašai spēlei.

6. darbība. Spēlētāja pārejas koda maiņa

Šoreiz man būtu jātiek galā ar katru spilventiņu individuāli un jāpanāk, lai varonis sāktu lēkāt ikreiz, kad spēlētāja pēda pamet paliktni. Laiks, kurā ekrāna varonis var šķērsot mīnu vārpstu, ir ilgāks nekā laiks, kad spēlētājs var pāriet no vienas puses uz otru. Tā ir laba lieta, jo tā dod spēlētājam iespēju atgūt līdzsvaru, pārbaudīt savu stāvokli un skatīties, kā spēlētājs ekrānā pabeidz lēcienu. Ja tas tā nebūtu, es būtu palēninājis spēlētāja ātrumu.

ligzda = io ();

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

ļaujiet datiem = JSON.parse (msg); if (data.side === 'pa kreisi' && data.state === 'uz augšu') {// mēs lecam augšup no kreisās puses}});

7. darbība: izvades maiņa

Kad ievades mehānisms darbojas, man bija jāstrādā pie izvades. Spēle labi darbojas planšetdatorā vai tālrunī, jo tā aizpilda ekrānu. Bet, lecot apkārt, tas ir pārāk mazs, lai to redzētu, tāpēc ekrāna spēļu laukums ir jāpalielina. Daudz!

Diemžēl visu grafisko līdzekļu palielināšana ir ļoti laikietilpīgs uzdevums. Tātad, es krāpu! Tā kā spēlei nav jāsaprot peles klikšķa X, Y pozīcija vai pieskāriena notikums, es varu vienkārši mainīt visu audekla mērogu!

Tas ietvēra uzlaušanu gan CSS, gan JavaScript, lai esošais HTML5 audekla objekts darbotos pilnekrāna režīmā.

Turklāt spēle tiek spēlēta portreta režīmā, kas nozīmēja maksimāli izmantot ekrāna nekustamo īpašumu, kas mums bija nepieciešams, lai pagrieztu audeklu par 90 grādiem.

#SGXCanvas {

pozīcija: absolūta; z-indekss: 0; pārveidot: pagriezt (-90deg); transformēt izcelsmi: augšējā labajā stūrī; platums: auto; }

8. solis: tas darbojas

Pirmajā spēlē es noliecu klēpjdatoru uz sāniem un spēlēju šādi.

9. solis: telpas sagatavošana

Fiziskā kontroliera izveide ir tikai ceļojuma sākums, nevis beigas. Jāņem vērā pārējā fiziskā telpa.

Pirmkārt, spiediena paklājiņi pārvietojās pa grīdu, kad nolaidāties uz tiem. To varēja viegli novērst ar dažiem divpusējiem lipīgiem spilventiņiem. Tie darbojas labi, taču, iespējams, neizturēs lielu nodilumu.

Tālāk klēpjdators izskatās mazliet dumjš, kas novērš uzmanību no pašas spēles. Tātad televizors no atpūtas telpas tika "aizgūts" un nogādāts vietējā MakerSpace, kur tas tika novietots pret sienu un savienots.

Nākotnē būtu patīkami pievienot pēdas uz spiediena paklājiņiem (iespējams, Nīla Ārmstronga pirmā mēness nospieduma!), Lai vadītu spēlētāju. Arī labāks televizora korpuss un apkārtne papildinātu sajūtu. Varbūt tie no jums, kuriem ir daudz laika un vietas, varētu izveidot papīra mačas klinšu seju, kas novietota abās paklāju pusēs, lai atdarinātu klaustrofobisko sajūtu, ka nokrīt mīnu šahtā!

10. solis: tas ir pabeigts

Un tur jums tas ir. Vienkāršs dienas projekts, kas uzlabo oriģinālo spēli un saglabā jūsu formu spēles laikā!

Varat arī izmantot Makey Makey, kas tieši simulē sākotnējā spēlē izmantoto taustiņu nospiešanu, lai samazinātu daļu no šī darba. Bet tas paliek kā vingrinājums lasītājam:)

Viss kods ir īpašā filiālē Space Bounce repo: