Creazione di un controller di gioco fisico: 10 passaggi (con immagini)

2024 Autore: John Day | [email protected]. Ultima modifica: 2024-01-30 10:02

Quando è stata lanciata la Nintendo Wii, i giocatori sono stati incoraggiati, anzi obbligati, a lasciare il divano e saltare, ballare e dondolarsi per ottenere punti nel gioco preferito. Mentre c'è una ripida curva di apprendimento nella costruzione per Wii, è facile costruire un dispositivo personalizzato che ti permetta di controllare un gioco saltando fisicamente sui pad a pressione al momento appropriato.

Questa istruzione mostra come ho adattato il gioco "Space Bounce" (giocabile dal vivo su https://marquisdegeek.com/spacebounce/ con la fonte su https://github.com/MarquisdeGeek/SpaceBounce) per utilizzare un controller fisico.

Forniture

• Arduino
• Due tappetini a pressione (i miei erano di Maplin
• Due resistori, per il tappetino di pressione (100 K, ma la maggior parte va bene)
• Due LED (opzionali)
• Due resistenze, per i LED (100 K, ma la maggior parte va bene. Anche optional)
• Il computer portatile

Passaggio 1: salta in giro

Ho iniziato progettando l'interfaccia di salto e, durante la revisione del gioco, ho capito che avere due tappetini avrebbe espresso al meglio la sua idea centrale. Cioè, stai in piedi sul tappetino sinistro per simulare la sensazione di aggrapparti al muro sinistro e, al momento opportuno, salta sul tappetino destro, e il tuo personaggio sullo schermo farebbe lo stesso.

Passaggio 2: collegamento dei pad

Così ho comprato due tappetini e mi sono messo al lavoro. I tappetini a pressione mostrati qui sono i più semplici (ed economici!) Che ho trovato, a £ 10 ciascuno. Hanno quattro fili, due dei quali fungono da semplice interruttore: quando si sta in piedi sul tappetino, viene stabilita una connessione e quando si salta su si interrompe. L'ho inserito in un Arduino con questo circuito di base.

Passaggio 3: far scattare la luce in modo fantastico

Ha funzionato, ma non è stato molto stimolante. Quindi, ho aggiunto alcuni LED per indicare lo stato di ciascun tappetino a pressione.

I LED non sono necessari per giocare, ma aggiungendoli al circuito ho potuto facilmente vedere quale fosse lo stato attuale del circuito. Pertanto, se il gioco non reagiva correttamente, potevo capire se il problema riguardava il circuito, il software Arduino o la logica del gioco.

Passaggio 4: iniziare a programmare

Dato che il gioco originale era in JavaScript, ho deciso di scrivere un programma NodeJS che ascolta i cambiamenti nello stato del tappetino di pressione e invia i dati tramite websocket al client di gioco.

Innanzitutto, installa il firmware standard sul tuo Arduino in modo che possiamo eseguire un server Node sul PC e utilizzare la libreria Johnny Five per ascoltare i cambiamenti di stato da Arduino. Quindi aggiungi Express per offrire il contenuto del gioco.

L'intero codice del server ha questo aspetto:

const express = require('express');

const app = express(); const http = require('http'); const server = http.createServer(app); const io = require('socket.io').listen(server); const arduino = require('arduino-controller'); server.listen(3000, function() { console.log('Server espresso in ascolto…'); }); app.use('/', express.static('app')); const cinque = require("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('Siamo connessi!'); 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(right, (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' }); } }) }); });

Ed è gestito con:

nodo server.js

Passaggio 5: adattare il gioco

Il primo problema era l'interfaccia; come fai a "cliccare" sul pulsante di riproduzione quando tutto ciò che puoi fare è saltare? Ho risolto eliminando tutti gli altri pulsanti! Posso quindi attivare il pulsante rimanente ogni volta che il giocatore salta, ascoltando entrambi gli eventi "su".

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

Da qui sono stato in grado di entrare nel gioco e utilizzare i pad per qualcosa di più divertente: il gioco stesso.

Passaggio 6: modifica del codice di salto del giocatore

Questa volta avrei dovuto occuparmi di ogni pad individualmente e far sì che il personaggio iniziasse a saltare ogni volta che il piede del giocatore lascia il pad. Il tempo per il personaggio sullo schermo per attraversare il pozzo della miniera è più lungo del tempo per il giocatore per saltare da un lato all'altro. Questa è una buona cosa, poiché dà al giocatore la possibilità di ritrovare l'equilibrio, controllare la propria posizione e guardare il giocatore completare il salto sullo schermo. Se non fosse stato così, avrei rallentato il giocatore.

presa = io();

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

let data = JSON.parse(msg); if (data.side === 'left' && data.state === 'up') { // stiamo saltando in alto da sinistra } });

Passaggio 7: modifica dell'output

Con il meccanismo di input funzionante, avevo bisogno di lavorare sull'output. Il gioco funziona bene su tablet o telefono, perché riempie lo schermo. Ma, quando salti, è troppo piccolo per essere visto, quindi l'area di gioco sullo schermo deve essere ingrandita. Molto!

Sfortunatamente, l'ingrandimento di tutte le risorse grafiche è un'attività che richiede molto tempo. Allora, ho tradito! Poiché il gioco non ha bisogno di comprendere la posizione X, Y di un clic del mouse o di un evento di tocco, posso semplicemente ridimensionare l'intera tela!

Ciò ha comportato un hack sia sul CSS che su JavaScript in modo che l'oggetto canvas HTML5 esistente venga eseguito a schermo intero.

Inoltre, il gioco si gioca in modalità verticale, il che significava sfruttare al massimo lo spazio sullo schermo di cui avevamo bisogno per ruotare la tela di 90 gradi.

#SGXCanvas {

posizione: assoluta; indice z: 0; trasformare: ruotare (-90deg); trasformazione-origine: in alto a destra; larghezza: automatico; }

Passaggio 8: funziona

Per il mio primo gioco ho inclinato il mio laptop su un lato e ho giocato in questo modo.

Passaggio 9: preparare la stanza

Costruire un controller fisico è solo l'inizio del viaggio, non la fine. Il resto dello spazio fisico deve essere considerato.

In primo luogo, i tappetini a pressione si sono spostati sul pavimento quando sei atterrato su di essi. Questo è stato facilmente risolto con alcuni cuscinetti adesivi a doppia faccia. Funzionano bene, ma probabilmente non reggerebbero a molta usura.

Successivamente, il laptop sembra un po' sciocco, il che ti distrae dal gioco stesso. Quindi, la TV del salotto è stata "presa in prestito" e portata al MakerSpace locale, dove è stata posizionata contro il muro e collegata.

In futuro sarebbe bello aggiungere impronte sui tappetini a pressione (forse l'impronta della prima luna di Neil Armstrong!) per guidare il giocatore. Anche un involucro e un surround migliori per la TV aggiungerebbero alla sensazione. Forse quelli di voi con molto tempo e spazio potrebbero creare una parete rocciosa di cartapesta, posizionata su entrambi i lati dei tappetini, per imitare la sensazione claustrofobica di cadere nel pozzo di una miniera!

Passaggio 10: è completo

E il gioco è fatto. Un progetto di facile giornata che migliora il gioco originale e ti tiene in forma mentre lo giochi!

Potresti anche usare un Makey Makey che simula direttamente la pressione dei tasti utilizzata nel gioco originale, per ridurre al minimo parte di questo lavoro. Ma questo è lasciato come esercizio per il lettore:)

Tutto il codice si trova in un ramo speciale nel repository Space Bounce: