Creació d'un controlador de joc físic: 10 passos (amb imatges)

2024 Autora: John Day | [email protected]. Última modificació: 2024-01-30 08:13

Quan es va llançar la Nintendo Wii, els jugadors es van encoratjar, necessàriament, a deixar el sofà i saltar, ballar i trencar-se per aconseguir punts en el seu joc escollit. Tot i que hi ha una forta corba d’aprenentatge en la construcció de la Wii, és fàcil crear un dispositiu personalitzat que us permetrà controlar un joc saltant físicament sobre les pastilles de pressió en el moment adequat.

Aquest instructiu mostra com he adaptat el joc "Space Bounce" (que es pot reproduir en directe a https://marquisdegeek.com/spacebounce/ amb la font a https://github.com/MarquisdeGeek/SpaceBounce) per utilitzar un controlador físic.

Subministraments

• Arduino
• Dues estores de pressió (les meves eren de Maplin
• Dues resistències, per al tapet de pressió (100 K, però la majoria estan bé)
• Dos LEDs (opcional)
• Dues resistències, per als LEDs (100 K, però la majoria estan bé. També opcional)
• Portàtil

Pas 1: saltar

Vaig començar dissenyant la interfície de salt i, en revisar el joc, em vaig adonar que tenir dues estores expressaria millor la seva idea principal. És a dir, us col·loqueu a la catifa esquerra per simular la sensació d’agafar-vos a la paret esquerra i, en el moment adequat, saltareu cap a la catifa dreta i el vostre personatge en pantalla faria el mateix.

Pas 2: connectar els coixinets

Així que vaig comprar dues estores i vaig començar a treballar. Les estores de pressió que es mostren aquí són les més senzilles (i les més econòmiques!) Que he trobat, a 10 lliures cadascuna. Tenen quatre cables, dos dels quals actuen com un simple interruptor: quan es posa sobre la catifa, es fa una connexió i quan es salta es trenca. Vaig alimentar-ho en un Arduino amb aquest circuit bàsic.

Pas 3: Trencar la llum fantàstic

Va funcionar, però no va ser molt inspirador. Per tant, he afegit alguns LEDs per indicar l’estat de cada estora de pressió.

No es requereixen els LED per jugar el joc, però afegint-los al circuit podia veure fàcilment quin era el circuit que pensava que era l’estat actual. Per tant, si el joc no reaccionés correctament, podria saber si el problema era amb el circuit, el programari Arduino o la lògica del joc.

Pas 4: Començar a codificar

Atès que el joc original estava en JavaScript, vaig decidir escriure un programa NodeJS que escolta els canvis en l'estat de la matriu de pressió i envia les dades a través de websockets al client del joc.

En primer lloc, instal·leu la firma estàndard al vostre Arduino perquè puguem executar un servidor Node al PC i utilitzar la biblioteca Johnny Five per escoltar els canvis d'estat des del Arduino. A continuació, afegiu Express per publicar el contingut del joc.

Tot el codi del servidor té aquest aspecte:

const express = require ('express');

const app = express (); const http = require ('http'); const server = http.createServer (app); const io = require ('socket.io'). escoltar (servidor); const arduino = require ('arduino-controller'); server.listen (3000, function () {console.log ('Servidor Express escoltant …');}); app.use ('/', express.static ('app')); const five = require ("johnny-five"); const board = new five. Board ({repl: false}); board.on ("llest", funció () {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 (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'});}})}); });

I s'executa amb:

node server.js

Pas 5: adaptació del joc

El primer problema va ser la interfície; Com es fa "clic" al botó de reproducció quan tot el que pot fer és saltar? Ho he resolt eliminant tots els altres botons. A continuació, puc activar el botó restant cada vegada que el jugador salta, escoltant qualsevol dels dos esdeveniments "amunt".

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

A partir d’aquí vaig poder entrar al joc i fer servir els coixinets per fer alguna cosa més divertida: el joc en si.

Pas 6: Canviar el codi de salt del jugador

Aquesta vegada hauria de tractar cada bloc individualment i fer que el personatge comencés a saltar sempre que el peu del jugador surti del bloc. El temps perquè el personatge en pantalla travessi l’eix de la mina és més llarg que el temps per al jugador de saltar d’un costat a un altre. Això és bo, ja que dóna al jugador l'oportunitat de recuperar l'equilibri, comprovar el seu peu i veure com el jugador completa el salt a la pantalla. Si no hagués estat així, hauria frenat el jugador.

socket = io ();

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

let data = JSON.parse (msg); if (data.side === 'left' && data.state === 'up') {// saltem del costat esquerre}});

Pas 7: Canviar la sortida

Amb el mecanisme d’entrada en funcionament, necessitava treballar en la sortida. El joc es juga bé en una tauleta o telèfon, ja que omple la pantalla. Però, quan esteu saltant, és massa petit per veure-ho, de manera que cal ampliar l'àrea de joc de la pantalla. Molt!

Malauradament, ampliar tots els recursos gràfics és una tasca que requereix molt de temps. Per tant, he enganyat! Com que el joc no necessita entendre la posició X, Y d’un clic del ratolí o l’esdeveniment tàctil, puc canviar de escala tot el llenç.

Això implicava un pirateig tant a CSS com a JavaScript, de manera que l'objecte de llenç HTML5 existent s'executés a pantalla completa.

A més, el joc es juga en mode vertical que significava aprofitar al màxim els béns immobles de la pantalla que necessitàvem per girar el llenç 90 graus.

#SGXCanvas {

posició: absoluta; índex z: 0; transformar: girar (-90 graus); transformar-origen: dalt a la dreta; ample: automàtic; }

Pas 8: funciona

Durant el meu primer joc, vaig inclinar el portàtil de costat i vaig jugar així.

Pas 9: Preparació de l'habitació

Construir un controlador físic només és l’inici del viatge, no el final. Cal tenir en compte la resta de l’espai físic.

En primer lloc, les estores de pressió es movien al terra quan aterrava sobre elles. Això es va solucionar fàcilment amb uns coixinets adhesius de doble cara. Funcionen bé, però probablement no aguantarien molt el desgast.

A continuació, el portàtil sembla una mica ximple, cosa que us distreu del joc en si. Per tant, el televisor del saló va ser "prestat" i portat al MakerSpace local, on es va col·locar contra la paret i es va connectar.

En el futur, seria bo afegir petjades a les estores de pressió (potser la primera lluna de Neil Armstrong!) Per guiar el jugador. També una millor carcassa i envoltura per al televisor afegiria més sensació. Potser aquells de vosaltres que teniu molt de temps i espai podríeu fer una cara de roca de paper maché, col·locada a banda i banda de les catifes, per imitar la sensació claustrofòbica de caure per un pou de mina.

Pas 10: està complet

I aquí ho teniu. Un projecte de dia fàcil que millora el joc original i us manté en forma mentre el jugueu.

També podeu utilitzar un Makey Makey que simuli directament les pulsacions de tecles utilitzades al joc original per minimitzar part d’aquest treball. Però això es deixa com un exercici per al lector:)

Tot el codi es troba en una branca especial a la reposició de Space Bounce: