Δημιουργία φυσικού ελεγκτή παιχνιδιών: 10 βήματα (με εικόνες)

2024 Συγγραφέας: John Day | [email protected]. Τελευταία τροποποίηση: 2024-01-30 08:34

Όταν ξεκίνησε το Nintendo Wii, οι παίκτες ενθαρρύνθηκαν, δεν χρειάστηκε, να αφήσουν τον καναπέ και να πηδήξουν, να χορέψουν και να τσακωθούν για να κερδίσουν πόντους στο παιχνίδι της επιλογής τους. Ενώ υπάρχει μια απότομη καμπύλη εκμάθησης στο κτίριο για το Wii, είναι εύκολο να χτίσετε μια προσαρμοσμένη συσκευή που σας επιτρέπει να ελέγχετε ένα παιχνίδι πηδώντας φυσικά σε επιθέματα πίεσης την κατάλληλη στιγμή.

Αυτό το διδακτικό δείχνει πώς προσαρμόστηκα το παιχνίδι "Space Bounce" (μπορείτε να παίξετε ζωντανά στη διεύθυνση https://marquisdegeek.com/spacebounce/ με την πηγή στη διεύθυνση https://github.com/MarquisdeGeek/SpaceBounce) για να χρησιμοποιήσετε έναν φυσικό ελεγκτή.

Προμήθειες

• Arduino
• Δύο στρώματα πίεσης (τα δικά μου ήταν από το Maplin
• Δύο αντιστάσεις, για το χαλί πίεσης (100 K, αλλά οι περισσότερες είναι καλές)
• Δύο LED (προαιρετικά)
• Δύο αντιστάσεις, για τις λυχνίες LED (100 K, αλλά οι περισσότερες είναι εντάξει. Επίσης προαιρετικές)
• ΦΟΡΗΤΟΣ ΥΠΟΛΟΓΙΣΤΗΣ

Βήμα 1: Περάστε

Ξεκίνησα σχεδιάζοντας τη διεπαφή με άλματα και, μετά από ανασκόπηση του παιχνιδιού, συνειδητοποίησα ότι η ύπαρξη δύο στρώσεων θα εκφράζει καλύτερα την βασική ιδέα του. Δηλαδή, στέκεστε στο αριστερό χαλάκι για να προσομοιώσετε την αίσθηση ότι κρατάτε στον αριστερό τοίχο και, την κατάλληλη στιγμή, πηδάτε προς τα δεξιά, και ο χαρακτήρας σας στην οθόνη θα κάνει το ίδιο.

Βήμα 2: Σύνδεση των μαξιλαριών

Έτσι αγόρασα δύο χαλάκια και άρχισα να δουλεύω. Τα στρώματα πίεσης που φαίνονται εδώ είναι τα πιο απλά (και φθηνότερα!) Που βρήκα, στα 10 £ το καθένα. Έχουν τέσσερα καλώδια, δύο από τα οποία λειτουργούν σαν ένας απλός διακόπτης: όταν στέκεστε στο χαλί, γίνεται μια σύνδεση και όταν πηδάτε πάνω είναι σπασμένη. Το έδωσα σε ένα Arduino με αυτό το βασικό κύκλωμα.

Βήμα 3: Παραπατώντας το Φανταστικό Φως

Λειτούργησε, αλλά δεν ήταν πολύ εμπνευσμένο. Έτσι, πρόσθεσα μερικά LED για να υποδείξω την κατάσταση κάθε χαλιού πίεσης.

Τα LED δεν απαιτούνται για να παίξουν το παιχνίδι, αλλά με την προσθήκη τους στο κύκλωμα μπορούσα εύκολα να δω ποια ήταν η κατάσταση του κυκλώματος. Επομένως, εάν το παιχνίδι δεν αντιδρούσε σωστά, θα μπορούσα να καταλάβω εάν το πρόβλημα ήταν στο κύκλωμα, το λογισμικό Arduino ή τη λογική του παιχνιδιού.

Βήμα 4: Έναρξη κωδικοποίησης

Δεδομένου ότι το αρχικό παιχνίδι ήταν σε JavaScript, αποφάσισα να γράψω ένα πρόγραμμα NodeJS που ακούει τις αλλαγές στην κατάσταση πίεσης και στέλνει τα δεδομένα μέσω δικτυακών υποδοχών στον πελάτη παιχνιδιού.

Αρχικά, εγκαταστήστε την τυπική firmata στο Arduino σας, ώστε να μπορούμε να τρέξουμε έναν διακομιστή κόμβου στον υπολογιστή και να χρησιμοποιήσουμε τη βιβλιοθήκη Johnny Five για να ακούσουμε τις αλλαγές κατάστασης από το Arduino. Στη συνέχεια, προσθέστε το Express για την προβολή του περιεχομένου του παιχνιδιού.

Ολόκληρος ο κωδικός διακομιστή μοιάζει με αυτόν:

const express = απαιτώ («express») ·

const app = express (); const http = απαιτεί ('http'); const server = http.createServer (εφαρμογή); const io = απαιτούν ('socket.io'). ακρόαση (διακομιστής); const arduino = απαιτώ («arduino-controller»); server.listen (3000, λειτουργία () {console.log ('Express server listening…');}); app.use ('/', express.static ('app')); const πέντε = απαιτούν ("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 ("σύνδεση", λειτουργία (υποδοχή) {console.log ("Είμαστε συνδεδεμένοι!"); Ας lastLeft = false; ας lastRight = false; πέντε. Pin.read (αριστερά, (err, val) => {if (val) {green.on ();} else {green.off ();} if (val! == lastLeft) {lastLeft = val; let state = {side: 'left', κατάσταση: val? 'down': 'up'} socket.emit ('arduino:: state', JSON.stringify (state), {for: 'everyone'});}}) five. Pin.read (δεξιά, (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'});}})}); });

Και λειτουργεί με:

διακομιστής κόμβων.js

Βήμα 5: Προσαρμογή του παιχνιδιού

Το πρώτο πρόβλημα ήταν η διεπαφή. πώς κάνετε «κλικ» στο κουμπί αναπαραγωγής όταν το μόνο που μπορείτε να κάνετε είναι να πηδήξετε; Το έλυσα εξαλείφοντας όλα τα άλλα κουμπιά! Στη συνέχεια, μπορώ να ενεργοποιήσω το υπόλοιπο κουμπί κάθε φορά που η συσκευή αναπηδά, ακούγοντας για οποιοδήποτε συμβάν 'επάνω'.

υποδοχή = io (); socket.on ('arduino:: state', function (msg) {let data = JSON.parse (msg); if (data.state === 'up') {// πηδάμε!}});

Από εδώ μπόρεσα να μπω στο παιχνίδι και να χρησιμοποιήσω τα τακάκια για κάτι πιο διασκεδαστικό - το ίδιο το παιχνίδι.

Βήμα 6: Αλλαγή του κώδικα άλματος Player

Αυτή τη φορά θα χρειαστεί να ασχοληθώ με κάθε μπλοκ ξεχωριστά και να κάνω τον χαρακτήρα να αρχίσει να πηδά κάθε φορά που το πόδι του παίκτη φεύγει από το τακάκι. Ο χρόνος για να περάσει ο χαρακτήρας στην οθόνη από τον άξονα της νάρκης είναι μεγαλύτερος από τον χρόνο για να πηδήξει ο παίκτης από τη μία πλευρά στο πλάι. Αυτό είναι καλό, καθώς δίνει στον παίκτη την ευκαιρία να ανακτήσει την ισορροπία του, να ελέγξει τη βάση του και να παρακολουθήσει τον παίκτη να ολοκληρώνει το άλμα στην οθόνη. Αν αυτό δεν συνέβαινε, θα είχα επιβραδύνει τον παίκτη.

υποδοχή = io ();

socket.on ('arduino:: κατάσταση', λειτουργία (msg) {

let data = JSON.parse (msg); εάν (data.side === 'left' && data.state === 'up') {// πηδάμε από την αριστερή πλευρά}});

Βήμα 7: Αλλαγή της εξόδου

Με τον μηχανισμό εισόδου να λειτουργεί, έπρεπε να δουλέψω στην έξοδο. Το παιχνίδι παίζει καλά σε tablet ή τηλέφωνο, επειδή γεμίζει την οθόνη. Αλλά, όταν πηδάτε, είναι πολύ μικρό για να το δείτε, οπότε η περιοχή παιχνιδιού στην οθόνη πρέπει να διευρυνθεί. Πολύ!

Δυστυχώς, η διεύρυνση όλων των γραφικών στοιχείων είναι μια πολύ χρονοβόρα εργασία. Λοιπόν, εξαπάτησα! Δεδομένου ότι το παιχνίδι δεν χρειάζεται να κατανοήσει τη θέση Χ, Υ ενός κλικ ή ένα άγγιγμα του γεγονότος, μπορώ απλά να επαναπροσδιορίσω ολόκληρο τον καμβά!

Αυτό συνεπάγεται ένα hack τόσο στο CSS όσο και στο JavaScript, έτσι ώστε το υπάρχον αντικείμενο καμβά HTML5 να εκτελείται σε πλήρη οθόνη.

Επιπλέον, το παιχνίδι παίζεται σε κατακόρυφο τρόπο, πράγμα που σήμαινε τη μέγιστη χρήση των ακινήτων οθόνης που χρειαζόμασταν για να περιστρέψουμε τον καμβά κατά 90 μοίρες.

#SGXCanvas {

θέση: απόλυτη? z-index: 0; μετασχηματισμός: περιστροφή (-90deg); μετατροπή-προέλευση: επάνω δεξιά? πλάτος: auto? }

Βήμα 8: Λειτουργεί

Για το πρώτο μου παιχνίδι έγειρα το laptop μου στο πλάι και έπαιξα έτσι.

Βήμα 9: Προετοιμασία του δωματίου

Η κατασκευή ενός φυσικού ελεγκτή είναι μόνο η αρχή του ταξιδιού, όχι το τέλος. Ο υπόλοιπος φυσικός χώρος πρέπει να ληφθεί υπόψη.

Πρώτον, τα στρώματα πίεσης κινήθηκαν στο πάτωμα όταν προσγειωθήκατε πάνω τους. Αυτό διορθώθηκε εύκολα με μερικά κολλητικά μαξιλάρια διπλής όψης. Λειτουργούν καλά, αλλά πιθανότατα δεν θα αντέξουν πολύ τη φθορά.

Στη συνέχεια, ο φορητός υπολογιστής φαίνεται λίγο ανόητος, κάτι που σας αποσπά από το ίδιο το παιχνίδι. Έτσι, η τηλεόραση από το σαλόνι «δανείστηκε» και μεταφέρθηκε στο τοπικό MakerSpace, όπου τοποθετήθηκε στον τοίχο και συνδέθηκε.

Στο μέλλον θα ήταν ωραίο να προσθέσετε αποτυπώματα στα στρώματα πίεσης (ίσως από την πρώτη εκτύπωση φεγγαριού του Neil Armstrong!) Για να καθοδηγήσετε τη συσκευή αναπαραγωγής. Επίσης, ένα καλύτερο περίβλημα και περιβάλλον για την τηλεόραση θα προσθέσει στην αίσθηση. Perhapsσως όσοι από εσάς με πολύ χρόνο και χώρο θα μπορούσατε να φτιάξετε ένα ροκ χάρτινο χαλί, τοποθετημένο και στις δύο πλευρές των στρώσεων, για να μιμηθεί την κλειστοφοβική αίσθηση της πτώσης από τον άξονα ενός ορυχείου!

Βήμα 10: Ολοκληρώθηκε

Και εκεί το έχετε. Ένα εύκολο έργο ημέρας που βελτιώνει το αρχικό παιχνίδι και σας κρατά σε φόρμα ενώ παίζετε!

Θα μπορούσατε επίσης να χρησιμοποιήσετε ένα Makey Makey που προσομοιώνει άμεσα τα πατήματα πλήκτρων που χρησιμοποιήθηκαν στο αρχικό παιχνίδι, για να ελαχιστοποιήσετε ορισμένες από αυτές τις εργασίες. Αλλά αυτό έχει μείνει ως άσκηση για τον αναγνώστη:)

Όλος ο κώδικας βρίσκεται σε ειδικό υποκατάστημα στο repo του Space Bounce: