Creación de un controlador de juego físico: 10 pasos (con imágenes)

2024 Autor: John Day | [email protected]. Última modificación: 2024-01-30 08:42

Cuando se lanzó la Nintendo Wii, se alentó a los jugadores, no se les pidió, a que se levantaran del sofá y saltaran, bailaran y se menearan para ganar puntos en el juego que eligieran. Si bien hay una curva de aprendizaje empinada en la construcción de la Wii, es fácil construir un dispositivo personalizado que te permita controlar un juego saltando físicamente sobre las almohadillas de presión en el momento adecuado.

Este instructivo muestra cómo adapté el juego 'Space Bounce' (jugable en vivo en https://marquisdegeek.com/spacebounce/ con la fuente en https://github.com/MarquisdeGeek/SpaceBounce) para usar un controlador físico.

Suministros

• Arduino
• Dos alfombrillas de presión (las mías eran de Maplin
• Dos resistencias, para la alfombrilla de presión (100 K, pero la mayoría están bien)
• Dos LED (opcional)
• Dos resistencias, para los LED (100 K, pero la mayoría están bien. También opcional)
• Ordenador portátil

Paso 1: ¡Salta

Comencé diseñando la interfaz de salto y, al revisar el juego, me di cuenta de que tener dos tapetes expresaría mejor su idea central. Es decir, te paras en el tapete izquierdo para simular la sensación de agarrarte a la pared izquierda y, en el momento apropiado, saltas al tapete derecho, y tu personaje en pantalla haría lo mismo.

Paso 2: Conexión de las almohadillas

Así que compré dos tapetes y me puse a trabajar. Las alfombrillas de presión que se muestran aquí son las más simples (¡y más baratas!) Que encontré, a £ 10 cada una. Tienen cuatro cables, dos de los cuales actúan como un simple interruptor: cuando te pones sobre el tapete, se establece una conexión y cuando saltas se rompe. Introduje esto en un Arduino con este circuito básico.

Paso 3: disparar la luz fantástica

Funcionó, pero no fue muy inspirador. Entonces, agregué algunos LED para indicar el estado de cada tapete de presión.

Los LED no son necesarios para jugar, pero al agregarlos al circuito, pude ver fácilmente lo que el circuito pensó que era el estado actual. Por lo tanto, si el juego no reaccionaba correctamente, podía averiguar si el problema estaba en el circuito, el software Arduino o la lógica del juego.

Paso 4: Comenzar a codificar

Dado que el juego original estaba en JavaScript, decidí escribir un programa NodeJS que escucha los cambios en el estado del tapete de presión y envía los datos a través de websockets al cliente del juego.

Primero, instale la firmata estándar en su Arduino para que podamos ejecutar un servidor Node en la PC y usar la biblioteca Johnny Five para escuchar los cambios de estado del Arduino. Luego agregue Express para servir el contenido del juego.

El código completo del servidor se ve así:

const express = require ('express');

aplicación constante = express (); const http = require ('http'); servidor constante = http.createServer (aplicación); const io = require ('socket.io'). listen (servidor); const arduino = require ('arduino-controller'); server.listen (3000, function () {console.log ('Servidor Express escuchando …');}); app.use ('/', express.static ('aplicación')); const cinco = require ("johnny-five"); tablero constante = nuevo tablero cinco ({respuesta: falso}); board.on ("ready", function () {let green = new five. Led (5); let rojo = new five. Led (6); let left = new five. Pin (2); let right = new five. Pin (3); io.on ('conectar', function (socket) {console.log ('¡Estamos conectados!'); 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', estado: val? 'abajo': 'arriba'} socket.emit ('arduino:: estado', JSON.stringify (estado), {para: 'todos'});}}) cinco. Pin.read (derecha, (err, val) => {if (val) {red.on ();} else {red.off ();} // if (val! == lastRight) {lastRight = val; let state = {side: 'derecho', estado: val? 'abajo': 'arriba'} socket.emit ('arduino:: estado', JSON.stringify (estado), {para: 'todos'});}})}); });

Y se ejecuta con:

node server.js

Paso 5: Adaptar el juego

El primer problema fue la interfaz; ¿Cómo 'haces clic' en el botón de reproducción cuando todo lo que puedes hacer es saltar? ¡Resolví esto eliminando todos los demás botones! Entonces puedo activar el botón restante cada vez que el jugador salta, escuchando cualquiera de los eventos "arriba".

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

Desde aquí pude entrar en el juego y usar los pads para algo más divertido: el juego en sí.

Paso 6: Cambiar el código de salto del jugador

Esta vez tendría que ocuparme de cada almohadilla individualmente y hacer que el personaje comience a saltar cada vez que el pie del jugador abandona la almohadilla. El tiempo que tarda el personaje en pantalla en atravesar el pozo de la mina es más largo que el tiempo que tarda el jugador en saltar de un lado a otro. Esto es algo bueno, ya que le da al jugador la oportunidad de recuperar el equilibrio, comprobar su equilibrio y ver al jugador completar el salto en la pantalla. Si este no hubiera sido el caso, habría ralentizado el reproductor.

socket = io ();

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

dejar datos = JSON.parse (msg); if (data.side === 'left' && data.state === 'up') {// estamos saltando desde el lado izquierdo}});

Paso 7: cambiar la salida

Con el mecanismo de entrada funcionando, necesitaba trabajar en la salida. El juego se juega bien en una tableta o teléfono, porque llena la pantalla. Pero, cuando estás saltando, es demasiado pequeño para verlo, por lo que es necesario ampliar el área de juego en la pantalla. ¡Mucho!

Desafortunadamente, ampliar todos los activos gráficos es una tarea que requiere mucho tiempo. ¡Así que hice trampa! Dado que el juego no necesita comprender la posición X, Y de un clic del mouse o un evento táctil, ¡puedo simplemente volver a escalar todo el lienzo!

Esto implicó un truco tanto en CSS como en JavaScript para que el objeto de lienzo HTML5 existente se ejecute en pantalla completa.

Además, el juego se juega en modo vertical, lo que significa aprovechar al máximo el espacio de la pantalla que necesitábamos para rotar el lienzo en 90 grados.

#SGXCanvas {

posición: absoluta; índice z: 0; transformar: rotar (-90 grados); transform-origin: arriba a la derecha; ancho: auto; }

Paso 8: ¡Funciona

Para mi primer juego, incliné mi computadora portátil hacia un lado y jugué así.

Paso 9: preparación de la habitación

La construcción de un controlador físico es solo el comienzo del viaje, no el final. Es necesario considerar el resto del espacio físico.

En primer lugar, las esteras de presión se movieron por el suelo cuando aterrizaste sobre ellas. Esto se solucionó fácilmente con algunas almohadillas adhesivas de doble cara. Funcionan bien, pero probablemente no resistirían mucho desgaste.

A continuación, la computadora portátil se ve un poco tonta, lo que te distrae del juego en sí. Por lo tanto, el televisor del salón se "tomó prestado" y se llevó al MakerSpace local, donde se colocó contra la pared y se conectó.

En el futuro, sería bueno agregar huellas en las alfombrillas de presión (¡quizás de la primera impresión lunar de Neil Armstrong!) Para guiar al jugador. También una mejor carcasa y envolvente para el televisor se sumarían a la sensación. ¡Quizás aquellos de ustedes con mucho tiempo y espacio podrían hacer una pared de piedra de papel maché, colocada a ambos lados de las esteras, para imitar la sensación claustrofóbica de caer por el pozo de una mina!

Paso 10: ¡Está completo

Y ahí lo tienes. ¡Un proyecto de un día fácil que mejora el juego original y te mantiene en forma mientras lo juegas!

También puedes usar un Makey Makey que simula directamente las pulsaciones de teclas utilizadas en el juego original, para minimizar parte de este trabajo. Pero eso se deja como ejercicio para el lector:)

Todo el código está en una rama especial en el repositorio de Space Bounce: