Erstellen eines physischen Gamecontrollers - Gunook

2024 Autor: John Day | [email protected]. Zuletzt bearbeitet: 2024-01-30 07:18

Als die Nintendo Wii auf den Markt kam, wurden die Spieler ermutigt, ja sogar verpflichtet, das Sofa zu verlassen und zu springen, zu tanzen und zu wackeln, um im Spiel ihrer Wahl Punkte zu sammeln. Während es beim Bauen für die Wii eine steile Lernkurve gibt, ist es einfach, ein benutzerdefiniertes Gerät zu bauen, mit dem Sie ein Spiel steuern können, indem Sie zum richtigen Zeitpunkt physisch auf Druckpads springen.

Dieses anweisbare zeigt, wie ich das Spiel 'Space Bounce' (live spielbar unter https://marquisdegeek.com/spacebounce/ mit der Quelle unter https://github.com/MarquisdeGeek/SpaceBounce) angepasst habe, um einen physischen Controller zu verwenden.

Lieferungen

• Arduino
• Zwei Druckmatten (meine waren von Maplin
• Zwei Widerstände, für die Druckmatte (100 K, aber die meisten sind in Ordnung)
• Zwei LEDs (optional)
• Zwei Widerstände, für die LEDs (100 K, aber die meisten sind in Ordnung. Auch optional)
• Laptop

Schritt 1: Springen Sie herum

Ich begann mit dem Entwerfen des Jumping-Interface und stellte bei der Überprüfung des Spiels fest, dass zwei Matten die Kernidee am besten ausdrücken würden. Das heißt, Sie stehen auf der linken Matte, um das Gefühl zu simulieren, sich an der linken Wand festzuhalten, und springen im richtigen Moment auf die rechte Matte, und Ihre Bildschirmfigur würde dasselbe tun.

Schritt 2: Anschließen der Pads

Also kaufte ich zwei Matten und machte mich an die Arbeit. Die hier gezeigten Druckmatten sind die einfachsten (und billigsten!), die ich gefunden habe, für jeweils 10 £. Sie haben vier Drähte, von denen zwei wie ein einfacher Schalter wirken: Beim Stehen auf der Matte wird eine Verbindung hergestellt, beim Aufspringen wird sie unterbrochen. Ich habe dies mit dieser Grundschaltung in einen Arduino eingespeist.

Schritt 3: Auslösen des Lichts Fantastic

Es hat funktioniert, war aber nicht sehr inspirierend. Also habe ich einige LEDs hinzugefügt, um den Zustand jeder Druckmatte anzuzeigen.

Die LEDs sind nicht erforderlich, um das Spiel zu spielen, aber indem ich sie der Schaltung hinzufüge, konnte ich leicht sehen, was die Schaltung für den aktuellen Zustand hielt. Wenn das Spiel nicht richtig reagierte, konnte ich daher herausfinden, ob das Problem an der Schaltung, der Arduino-Software oder der Spiellogik lag.

Schritt 4: Beginnen mit dem Coden

Da das ursprüngliche Spiel in JavaScript war, entschied ich mich, ein NodeJS-Programm zu schreiben, das auf Änderungen im Zustand der Druckmatte lauscht und die Daten über Websockets an den Spielclient sendet.

Installieren Sie zuerst die Standardfirmata auf Ihrem Arduino, damit wir einen Node-Server auf dem PC ausführen und die Johnny-Five-Bibliothek verwenden können, um auf die Zustandsänderungen des Arduino zu hören. Fügen Sie dann Express hinzu, um den Spielinhalt bereitzustellen.

Der gesamte Servercode sieht so aus:

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('Express server listen…'); }); app.use('/', express.static('app')); const five = 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('Wir sind verbunden!'); 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: 'richtig', Zustand: val ? });

Und wird betrieben mit:

Knotenserver.js

Schritt 5: Anpassen des Spiels

Das erste Problem war die Schnittstelle; Wie „klickt“man auf den Play-Button, wenn man nur springen kann? Ich habe dies gelöst, indem ich alle anderen Tasten entfernt habe! Ich kann dann die verbleibende Taste immer dann auslösen, wenn der Spieler springt, indem ich auf eines der 'Up'-Ereignisse höre.

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

Von hier aus konnte ich in das Spiel einsteigen und die Pads für etwas mehr Spaß verwenden - das Spiel selbst.

Schritt 6: Ändern des Player-Sprungcodes

Dieses Mal müsste ich jedes Pad einzeln behandeln und den Charakter dazu bringen, zu springen, wenn der Fuß des Spielers das Pad verlässt. Die Zeit, die der Bildschirmcharakter benötigt, um den Minenschacht zu durchqueren, ist länger als die Zeit, die der Spieler benötigt, um von einer Seite zur anderen zu springen. Dies ist eine gute Sache, da es dem Spieler die Möglichkeit gibt, sein Gleichgewicht wiederzuerlangen, seinen Stand zu überprüfen und dem Spieler zuzusehen, wie er den Sprung auf dem Bildschirm vollzieht. Wäre dies nicht der Fall gewesen, hätte ich den Player verlangsamt.

Steckdose = io();

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

let data = JSON.parse(msg); if (data.side === 'left' && data.state === 'up') { // wir springen von links nach oben} });

Schritt 7: Ändern der Ausgabe

Da der Eingabemechanismus funktionierte, musste ich an der Ausgabe arbeiten. Das Spiel spielt sich gut auf einem Tablet oder Telefon, da es den Bildschirm ausfüllt. Wenn Sie jedoch herumspringen, ist es zu klein, um es zu sehen, daher muss der Spielbereich auf dem Bildschirm vergrößert werden. Viel!

Leider ist das Vergrößern aller grafischen Assets eine sehr zeitaufwändige Aufgabe. Also, ich habe betrogen! Da das Spiel die X-, Y-Position eines Mausklicks oder Berührungsereignisses nicht verstehen muss, kann ich die gesamte Leinwand einfach neu skalieren!

Dabei wurden sowohl CSS als auch JavaScript gehackt, sodass das vorhandene HTML5-Canvas-Objekt im Vollbildmodus ausgeführt wird.

Darüber hinaus wird das Spiel im Hochformat gespielt, was bedeutet, dass die Bildschirmfläche, die wir zum Drehen der Leinwand um 90 Grad benötigen, maximal genutzt wird.

#SGXCanvas {

Position: absolut; z-Index: 0; transformieren: drehen (-90deg); Transformations-Ursprung: oben rechts; Breite: automatisch; }

Schritt 8: Es funktioniert

Für mein erstes Spiel habe ich meinen Laptop auf die Seite gelegt und so gespielt.

Schritt 9: Vorbereiten des Raums

Der Bau eines physischen Controllers ist nur der Anfang der Reise, nicht das Ende. Der Rest des physischen Raums muss berücksichtigt werden.

Erstens bewegten sich die Druckmatten auf dem Boden herum, wenn Sie darauf landeten. Dies ließ sich leicht mit einigen doppelseitigen Klebepads beheben. Sie funktionieren gut, würden aber wahrscheinlich nicht viel Verschleiß halten.

Als nächstes sieht der Laptop etwas albern aus, was einen vom Spiel selbst ablenkt. Also wurde der Fernseher aus der Lounge „ausgeliehen“und in den lokalen MakerSpace gebracht, dort an die Wand gestellt und angeschlossen.

In Zukunft wäre es schön, Fußabdrücke auf die Druckmatten (vielleicht von Neil Armstrongs erstem Mondabdruck!) Auch ein besseres Gehäuse und Surround für den Fernseher würden das Gefühl erhöhen. Vielleicht könnten diejenigen von Ihnen, die viel Zeit und Platz haben, eine Pappmaché-Felswand bauen, die auf beiden Seiten der Matten platziert wird, um das klaustrophobische Gefühl nachzuahmen, wenn man in einen Minenschacht fällt!

Schritt 10: Es ist vollständig

Und da hast du es. Ein einfaches Tagesprojekt, das das Originalspiel verbessert und Sie beim Spielen fit hält!

Sie können auch ein Makey Makey verwenden, das die Tastendrücke des Originalspiels direkt simuliert, um einen Teil dieser Arbeit zu minimieren. Aber das bleibt dem Leser als Übungsaufgabe:)

Der gesamte Code befindet sich in einem speziellen Zweig im Space Bounce-Repo: