Vytvoření fyzického ovladače hry: 10 kroků (s obrázky)

2024 Autor: John Day | [email protected]. Naposledy změněno: 2024-01-30 08:21

Když byla hra Nintendo Wii uvedena na trh, byli hráči vyzváni, aby ne, museli opustit pohovku a skákat, tančit a kličkovat, aby získali body ve své hře. I když je při budování Wii strmá křivka učení, je snadné postavit si vlastní zařízení, které vám umožní ovládat hru fyzickým skokem na tlakové podložky ve vhodnou dobu.

Tento instruktáž ukazuje, jak jsem přizpůsobil hru 'Space Bounce' (kterou lze hrát živě na https://marquisdegeek.com/spacebounce/ se zdrojem na https://github.com/MarquisdeGeek/SpaceBounce), abych používal fyzický ovladač.

Zásoby

• Arduino
• Dvě tlakové rohože (moje byly od Maplinu
• Dva odpory pro tlakovou podložku (100 K, ale většina je v pořádku)
• Dvě LED diody (volitelně)
• Dva odpory pro LED (100 K, ale většina je v pořádku. Také volitelně)
• Notebook

Krok 1: Skočte kolem

Začal jsem návrhem skákacího rozhraní a po přezkoumání hry jsem si uvědomil, že jeho hlavní myšlenku nejlépe vyjádří dvě podložky. To znamená, že stojíte na levé podložce, abyste simulovali pocit, že se držíte levé stěny, a ve vhodnou chvíli přeskočili na pravou podložku a vaše postava na obrazovce by udělala totéž.

Krok 2: Připojení padů

Koupil jsem tedy dvě podložky a dal se do práce. Zde zobrazené tlakové rohože jsou nejjednodušší (a nejlevnější!), Které jsem našel, každá za 10 liber. Mají čtyři dráty, z nichž dva fungují jako jednoduchý spínač: když se postavíte na podložku, vytvoří se spojení a když vyskočíte, přeruší se. Tímto základním obvodem jsem to přivedl do Arduina.

Krok 3: Vypnutí světla Fantastické

Fungovalo to, ale nebylo to příliš inspirativní. Přidal jsem tedy několik LED diod, které indikují stav každé tlakové podložky.

LED diody nejsou pro hraní hry nutné, ale jejich přidáním do obvodu jsem snadno viděl, co si okruh myslí, že je aktuální stav. Pokud tedy hra nereagovala správně, mohl bych zjistit, jestli je problém v obvodu, softwaru Arduino nebo logice hry.

Krok 4: Začněte kódovat

Vzhledem k tomu, že původní hra byla v JavaScriptu, rozhodl jsem se napsat program NodeJS, který poslouchá změny ve stavu tlakové podložky a odesílá data přes webové zásuvky hernímu klientovi.

Nejprve nainstalujte standardní firmware do vašeho Arduina, abychom mohli spustit server Node na PC a pomocí knihovny Johnny Five poslouchat změny stavu z Arduina. Poté přidejte Express a zobrazte obsah hry.

Celý kód serveru vypadá takto:

const express = require ('expres');

const aplikace = express (); const http = require ('http'); const server = http.createServer (aplikace); const io = require ('socket.io'). poslouchat (server); const arduino = require ('arduino-controller'); server.listen (3000, funkce () {console.log ('Express server listening …');}); app.use ('/', express.static ('app')); konst pět = vyžadovat ("johnny-five"); const board = new Five. Board ({repl: false}); board.on ("ready", function () {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), {for: 'everyone'});}})) Five. Pin.read (vpravo, (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), {for: 'everyone'});}})}); });

A běží s:

uzel server.js

Krok 5: Přizpůsobení hry

Prvním problémem bylo rozhraní; jak „kliknete“na tlačítko přehrávání, když jediné, co můžete udělat, je skočit? Vyřešil jsem to odstraněním všech ostatních tlačítek! Poté mohu spustit zbývající tlačítko, kdykoli hráč vyskočí, a to poslechem události „nahoru“.

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

Odtud jsem se mohl dostat do hry a používat podložky pro něco zábavnějšího - samotnou hru.

Krok 6: Změna kódu skoku hráče

Tentokrát bych se musel vypořádat s každou podložkou jednotlivě a přimět postavu, aby začala skákat, kdykoli hráčova noha opustí podložku. Doba, po kterou postava na obrazovce projde důlní šachtou, je delší než doba, po kterou hráč přeskočí z jedné strany na stranu. To je dobře, protože to dává hráči šanci získat zpět rovnováhu, zkontrolovat si postavení a sledovat, jak hráč dokončí skok na obrazovce. Kdyby tomu tak nebylo, zpomalil bych hráče.

socket = io ();

socket.on ('arduino:: state', funkce (zpráva) {

let data = JSON.parse (msg); if (data.side === 'left' && data.state === 'up') {// vyskočíme z levé strany}});

Krok 7: Změna výstupu

S fungujícím vstupním mechanismem jsem potřeboval zapracovat na výstupu. Hra se dobře hraje na tabletu nebo telefonu, protože vyplňuje obrazovku. Když ale skáčete kolem, je to příliš malé na to, abyste viděli, takže je třeba zvětšit hrací plochu na obrazovce. Mnoho!

Zvětšení všech grafických prostředků je bohužel velmi časově náročný úkol. Takže jsem podváděl! Protože hra nemusí rozumět pozici X, Y kliknutí myší nebo dotykové události, mohu jednoduše změnit měřítko celého plátna!

To zahrnovalo hackování v CSS i JavaScriptu, takže stávající objekt canvas HTML5 běží na celé obrazovce.

Kromě toho se hra hraje v režimu na výšku, což znamenalo maximální využití obrazovky, kterou jsme potřebovali k otočení plátna o 90 stupňů.

#SGXCanvas {

pozice: absolutní; z-index: 0; transform: rotate (-90deg); transform-origin: vpravo nahoře; šířka: auto; }

Krok 8: Funguje to

Při své první hře jsem naklonil notebook na bok a hrál jsem takto.

Krok 9: Příprava místnosti

Budování fyzického ovladače je jen začátek cesty, nikoli konec. Je třeba zvážit zbytek fyzického prostoru.

Za prvé, tlakové rohože se pohybovaly po podlaze, když jste na ně přistáli. To lze snadno opravit pomocí oboustranných lepivých podložek. Fungují dobře, ale pravděpodobně by nevydržely mnoho opotřebení.

Dále notebook vypadá trochu hloupě, což vás odvádí od samotné hry. Televizor z obývacího pokoje byl tedy „vypůjčen“a odvezen do místního MakerSpace, kde byl umístěn proti zdi a připojen.

V budoucnu by bylo hezké přidat stopy na tlakové podložky (možná z prvního měsíčního tisku Neila Armstronga!), Který by hráče vedl. K pocitu přispěje také lepší pouzdro a prostorový zvuk pro televizi. Možná by ti z vás, kteří mají spoustu času a prostoru, vytvořili skalní stěnu z papírové hmoty, umístěnou po obou stranách rohoží, aby napodobili klaustrofobický pocit pádu z důlní šachty!

Krok 10: Je hotovo

A tady to máte. Jednoduchý denní projekt, který vylepšuje původní hru a udrží vás fit při hraní!

Můžete také použít Makey Makey, který přímo simuluje stisknutí kláves použité v původní hře, abyste minimalizovali část této práce. Ale to je ponecháno jako cvičení pro čtenáře:)

Veškerý kód je ve speciální větvi v repo Space Bounce: