Crearea unui controler de joc fizic: 10 pași (cu imagini)

2024 Autor: John Day | [email protected]. Modificat ultima dată: 2024-01-30 11:43

Când a fost lansat Nintendo Wii, jucătorii au fost încurajați, chiar necesari, să părăsească canapeaua și să sară, să danseze și să jiggle pentru a obține puncte în jocul ales. Deși există o curbă de învățare abruptă în construcția pentru Wii, este ușor să construiți un dispozitiv personalizat care vă permite să controlați un joc sărind fizic pe tampoane de presiune la momentul potrivit.

Acest instructabil arată modul în care am adaptat jocul „Space Bounce” (redabil live la https://marquisdegeek.com/spacebounce/ cu sursa de la https://github.com/MarquisdeGeek/SpaceBounce) pentru a utiliza un controler fizic.

Provizii

• Arduino
• Două covoare sub presiune (ale mele erau de la Maplin
• Două rezistențe, pentru covorul de presiune (100 K, dar majoritatea sunt fine)
• Două LED-uri (opțional)
• Două rezistențe, pentru LED-uri (100 K, dar majoritatea sunt în regulă. De asemenea, opțional)
• Laptop

Pasul 1: Salt în jur

Am început prin proiectarea interfeței de sărituri și, la trecerea în revistă a jocului, mi-am dat seama că a avea două covoare își va exprima cel mai bine ideea de bază. Adică, stai pe covorașul din stânga pentru a simula senzația de a te ține de peretele din stânga și, în momentul potrivit, sări peste covorul din dreapta, iar personajul tău de pe ecran ar face același lucru.

Pasul 2: Conectarea tampoanelor

Așa că am cumpărat două covorase și m-am apucat de treabă. Covoarele de presiune prezentate aici sunt cele mai simple (și mai ieftine!) Pe care le-am găsit, la 10 GBP fiecare. Au patru fire, dintre care două acționează ca un simplu comutator: atunci când stai pe covor, se face o conexiune, iar când sări în sus, este rupt. Am introdus acest lucru într-un Arduino cu acest circuit de bază.

Pasul 3: Împiedicarea luminii Fantastic

A funcționat, dar nu a fost foarte inspirat. Așadar, am adăugat câteva LED-uri pentru a indica starea fiecărui covor de presiune.

LED-urile nu sunt necesare pentru a juca jocul, dar prin adăugarea lor la circuit am putut vedea cu ușurință ceea ce circuitul credea că este starea actuală. Prin urmare, dacă jocul nu a reacționat corect, aș putea rezolva dacă problema a fost cu circuitul, software-ul Arduino sau logica jocului.

Pasul 4: Începeți să codați

Având în vedere că jocul inițial era în JavaScript, am decis să scriu un program NodeJS care ascultă modificările stării matului de presiune și trimite datele prin websockets clientului jocului.

Mai întâi, instalați firmata standard pe Arduino, astfel încât să putem rula un server Node pe computer și să folosim biblioteca Johnny Five pentru a asculta schimbările de stare de la Arduino. Apoi adăugați Express pentru a difuza conținutul jocului.

Întregul cod server arată astfel:

const express = require ('express');

const app = express (); const http = require ('http'); const server = http.createServer (app); const io = require ('socket.io'). asculta (server); const arduino = require ('arduino-controller'); server.listen (3000, function () {console.log ('Ascultare server Express …');}); app.use ('/', express.static ('app')); const five = require ("johnny-five"); const board = new five. Board ({repl: false}); board.on ("gata", funcție () {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 (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), {pentru: 'toată lumea'});}}) five. Pin.read (dreapta, (err, val) => {if (val) {red.on ();} else {red.off ();} // if (val! == lastRight) {lastRight = val; let state = {side: 'right', state: val? 'down': 'up'} socket.emit ('arduino:: state', JSON.stringify (state), {pentru: 'toată lumea'});}})}); });

Și este rulat cu:

nod server.js

Pasul 5: Adaptarea jocului

Prima problemă a fost interfața; cum faci „clic” pe butonul de redare când tot ce poți face este să sari? Am rezolvat acest lucru eliminând toate celelalte butoane! Pot apoi să declanșez butonul rămas ori de câte ori jucătorul sare, ascultând fie evenimentul „sus”.

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

De aici am reușit să intru în joc și să folosesc tampoanele pentru ceva mai distractiv - jocul în sine.

Pasul 6: Schimbarea codului Player Jump

De data aceasta, ar trebui să mă ocup de fiecare pad individual și să fac personajul să înceapă să sară ori de câte ori piciorul jucătorului iese din pad. Timpul pentru ca personajul de pe ecran să traverseze arborele minei este mai lung decât timpul pentru ca jucătorul să sară dintr-o parte în alta. Acesta este un lucru bun, deoarece oferă jucătorului șansa de a-și recâștiga echilibrul, de a-și verifica picioarele și de a-l urmări pe jucător completând saltul pe ecran. Dacă nu ar fi fost cazul, aș fi încetinit jucătorul.

socket = io ();

socket.on ('arduino:: state', funcție (msg) {

let data = JSON.parse (msg); if (data.side === 'left' && data.state === 'up') {// sărim din partea stângă}});

Pasul 7: Schimbarea ieșirii

Cu mecanismul de intrare funcțional, trebuia să lucrez la ieșire. Jocul se joacă bine pe o tabletă sau telefon, deoarece umple ecranul. Dar, când săriți, este prea mic pentru a fi văzut, astfel încât zona de joc de pe ecran trebuie mărită. Mult!

Din păcate, mărirea tuturor activelor grafice este o sarcină care necesită mult timp. Deci, am înșelat! Deoarece jocul nu trebuie să înțeleagă poziția X, Y a unui clic de mouse sau evenimentul tactil, pot să redescalim întreaga pânză!

Aceasta a implicat un hack atât pe CSS, cât și pe JavaScript, astfel încât obiectul de pânză HTML5 existent să ruleze pe ecran complet.

În plus, jocul este jucat în modul portret, ceea ce a însemnat să utilizăm la maximum proprietățile imobiliare de pe ecran de care aveam nevoie pentru a roti pânza cu 90 de grade.

#SGXCanvas {

poziție: absolută; index z: 0; transformare: rotire (-90deg); transform-origine: sus dreapta; lățime: auto; }

Pasul 8: Funcționează

Pentru primul meu joc mi-am înclinat laptopul pe o parte și am jucat așa.

Pasul 9: Pregătirea camerei

Construirea unui controler fizic este doar începutul călătoriei, nu sfârșitul. Restul spațiului fizic trebuie luat în considerare.

În primul rând, covoarele de presiune s-au deplasat pe podea când ați aterizat pe ele. Acest lucru a fost ușor de remediat cu niște tampoane lipicioase pe două fețe. Funcționează bine, dar probabil nu ar rezista la o mulțime de uzură.

Apoi, laptopul arată un pic prostesc, ceea ce te distrage de la joc în sine. Deci, televizorul din salon a fost „împrumutat” și dus la MakerSpace local, unde a fost poziționat de perete și conectat.

În viitor, ar fi frumos să adăugați amprente pe covorașele de presiune (poate din prima imprimare lunară a lui Neil Armstrong!) Pentru a ghida jucătorul. De asemenea, o carcasă și un surround mai bune pentru televizor ar aduce un plus de senzație. Poate că cei dintre voi cu mult timp și spațiu ar putea face o față de piatră din hârtie macheată, așezată de fiecare parte a covorașelor, pentru a imita senzația claustrofobă a căderii pe un puț de mină!

Pasul 10: Este complet

Și iată-l. Un proiect ușor de zi care îmbunătățește jocul original și te menține în formă în timp ce îl joci!

De asemenea, puteți utiliza un Makey Makey care simulează direct apăsările tastelor folosite în jocul original, pentru a minimiza o parte din această lucrare. Dar asta este lăsat ca exercițiu pentru cititor:)

Tot codul se află într-o ramură specială din repo-ul Space Bounce: