Skep 'n fisiese spelbeheerder: 10 stappe (met foto's)
Skep 'n fisiese spelbeheerder: 10 stappe (met foto's)

INHOUDSOPGAWE:

Anonim
Skep 'n fisiese spelbeheerder
Skep 'n fisiese spelbeheerder
Skep 'n fisiese spelbeheerder
Skep 'n fisiese spelbeheerder

By die bekendstelling van die Nintendo Wii is spelers aangemoedig om die bank te verlaat en te spring, te dans en te jiggle om punte in hul keuse te behaal. Alhoewel daar 'n skerp leerkurwe vir die Wii is, is dit maklik om 'n pasgemaakte toestel te bou waarmee u 'n spel kan beheer deur op die regte tyd op drukblokkies te spring.

Hierdie instruksies wys hoe ek die spel 'Space Bounce' (speelbaar live op https://marquisdegeek.com/spacebounce/ met die bron op https://github.com/MarquisdeGeek/SpaceBounce) aangepas het om 'n fisiese kontroleerder te gebruik.

Voorrade

  • Arduino
  • Twee drukmatte (myne was van Maplin
  • Twee weerstande, vir die drukmat (100 K, maar die meeste is goed)
  • Twee LED's (opsioneel)
  • Twee weerstande, vir die LED's (100 K, maar die meeste is goed. Ook opsioneel)
  • Skootrekenaar

Stap 1: Spring rond

Spring rond!
Spring rond!

Ek het begin met die ontwerp van die spring -koppelvlak en na die hersiening van die spel het ek besef dat twee matte die kerngedagte die beste sou uitdruk. Dit wil sê, u staan op die linker mat om die gevoel van die vasthou van die linker muur na te boots en op die regte oomblik na die regte mat te spring, en u karakter op die skerm sou dieselfde doen.

Stap 2: Koppel die pads

Koppel die pads
Koppel die pads
Koppel die pads
Koppel die pads

Dus het ek twee matte gekoop en aan die werk gespring. Die drukmatjies wat hier getoon word, is die eenvoudigste (en goedkoopste!) Wat ek gevind het, teen £ 10 elk. Hulle het vier drade, waarvan twee soos 'n eenvoudige skakelaar werk: as u op die mat staan, word 'n verbinding gemaak, en as u opspring, word dit verbreek. Ek het dit in 'n Arduino gevoer met hierdie basiese stroombaan.

Stap 3: Tripping the Light Fantasties

Tripping the Light Fantasties
Tripping the Light Fantasties

Dit het gewerk, maar was nie baie inspirerend nie. Ek het dus 'n paar LED's bygevoeg om die toestand van elke drukmat aan te dui.

Die LED's is nie nodig om die speletjie te speel nie, maar deur dit by die kring te voeg, kon ek maklik sien wat die kring gedink het die huidige toestand was. As die spel dus nie reg reageer nie, kan ek uitvind of die probleem met die kring, Arduino -sagteware of die spellogika was.

Stap 4: Begin met kode

Aangesien die oorspronklike spel in JavaScript was, het ek besluit om 'n NodeJS -program te skryf wat luister na veranderinge in die drukmatstoestand en die data via websockets na die spelkliënt stuur.

Installeer eers die standaard firmata op u Arduino, sodat ons 'n Node -bediener op die rekenaar kan gebruik en die Johnny Five -biblioteek kan gebruik om te luister na die staatsveranderinge van die Arduino. Voeg dan Express by om die spelinhoud te bedien.

Die hele bedienerkode lyk so:

const express = vereis ('express');

const app = express (); const http = vereis ('http'); const bediener = http.createServer (app); const io = vereis ('socket.io'). luister (bediener); const arduino = require ('arduino-controller'); server.listen (3000, function () {console.log ('Express server luister …');}); app.use ('/', express.static ('app')); const vyf = vereis ("johnny-five"); const board = new five. Board ({repl: false}); board.on ("gereed", funksie () {laat groen = nuwe vyf. Led (5); laat rooi = nuwe vyf. Led (6); laat links = nuwe vyf. Pin (2); laat regs = nuwe vyf. 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 (regs, (err, val) => {if (val) {red.on ();} anders {red.off ();} // if (val! == lastRight) {lastRight = val; laat staat = {kant: 'reg', staat: val? 'af': 'op'} socket.emit ('arduino:: staat', JSON.stringify (staat), {vir: 'almal'});}})}); });

En word uitgevoer met:

node server.js

Stap 5: Pas die spel aan

Die eerste probleem was die koppelvlak; hoe 'klik' u op die speelknoppie as u net kan spring? Ek het dit opgelos deur al die ander knoppies uit te skakel! Ek kan dan die oorblywende knoppie aktiveer wanneer die speler spring, deur na 'n 'op' gebeurtenis te luister.

socket = io (); socket.on ('arduino:: state', funksie (msg) {let data = JSON.parse (msg); as (data.state === 'up') {// ons spring!}});

Van hier af kon ek in die spel kom en die pads gebruik vir iets lekkerder - die spel self.

Stap 6: Die verandering van die speler se springkode

Hierdie keer moet ek elke pad afsonderlik hanteer en die karakter laat spring wanneer die voet van die speler die pad verlaat. Die tyd vir die karakter op die skerm om die mynskag te deurkruis, is langer as die tyd dat die speler van die een kant na die kant spring. Dit is 'n goeie ding, aangesien dit die speler die kans gee om sy balans te herwin, sy voet te kontroleer en te sien hoe die speler die sprong op die skerm voltooi. As dit nie die geval was nie, sou ek die speler vertraag het.

socket = io ();

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

laat data = JSON.parse (msg); as (data.side === 'links' && data.state === 'op') {// ons spring van links af}});

Stap 7: Verandering van die uitset

Terwyl die insetmeganisme werk, moes ek aan die uitset werk. Die spel speel goed op 'n tablet of telefoon, want dit vul die skerm. Maar as u rondspring, is dit te klein om te sien, dus die speelarea op die skerm moet vergroot word. Baie!

Ongelukkig is die uitbreiding van al die grafiese bates 'n baie tydrowende taak. So, ek het bedrieg! Aangesien die spel nie die X-, Y-posisie van 'n muisklik of 'n raakgeleentheid hoef te verstaan nie, kan ek die hele doek eenvoudig herskaal!

Dit behels 'n inbraak op beide die CSS en JavaScript, sodat die bestaande HTML5-doekvoorwerp op volle skerm werk.

Verder word die spel in portretmodus gespeel, wat die maksimum gebruik van die skerm wat ons nodig gehad het om die doek met 90 grade te draai, maksimaal gebruik.

#SGXCanvas {

posisie: absoluut; z-indeks: 0; transformeer: draai (-90deg); transform-origin: regs bo; breedte: outomaties; }

Stap 8: Dit werk

Dit werk!
Dit werk!

Vir my eerste wedstryd het ek my skootrekenaar op sy kant gekantel en so gespeel.

Stap 9: Die kamer voorberei

Voorbereiding van die kamer
Voorbereiding van die kamer

Die bou van 'n fisiese kontroleerder is slegs die begin van die reis, nie die einde nie. Die res van die fisiese ruimte moet in ag geneem word.

Eerstens het die drukmatte op die vloer rondbeweeg toe u daarop beland het. Dit is maklik reggemaak met 'n paar dubbelzijdige kleefblokkies. Hulle werk goed, maar sal waarskynlik nie baie slytasie weerstaan nie.

Vervolgens lyk die skootrekenaar 'n bietjie dom, wat u aandag aftrek van die spel self. Die TV uit die sitkamer is dus 'geleen' en na die plaaslike MakerSpace gebring, waar dit teen die muur geplaas is en verbind is.

In die toekoms sal dit lekker wees om voetspore op die drukmatte te voeg (miskien van Neil Armstrong se eerste maanafdruk!) Om die speler te lei. 'N Beter omhulsel en omhulsel vir die TV dra by tot die gevoel. Miskien kan julle met baie tyd en ruimte 'n rotswand van papier maak, weerskante van die matte, om die klaustrofobiese gevoel van 'n mynskag af te boots!

Stap 10: Dit is voltooi

En daar het jy dit. 'N Maklike dagprojek wat die oorspronklike spel verbeter en u fiks hou terwyl u dit speel!

U kan ook 'n Makey Makey gebruik wat die sleutelpers wat in die oorspronklike spel gebruik is, direk simuleer, om sommige van hierdie werk tot 'n minimum te beperk. Maar dit bly 'n oefening vir die leser:)

Al die kode is in 'n spesiale tak in die Space Bounce -repo: