Création d'un contrôleur de jeu physique : 10 étapes (avec images)

2024 Auteur: John Day | [email protected]. Dernière modifié: 2024-01-30 09:07

Lorsque la Nintendo Wii a été lancée, les joueurs ont été encouragés, voire obligés, de quitter le canapé et de sauter, danser et se trémousser afin de marquer des points dans le jeu de leur choix. Bien qu'il y ait une courbe d'apprentissage abrupte dans la construction de la Wii, il est facile de créer un appareil personnalisé qui vous permet de contrôler un jeu en sautant physiquement sur des coussins de pression au moment approprié.

Cette instructable montre comment j'ai adapté le jeu « Space Bounce » (jouable en direct à https://marquisdegeek.com/spacebounce/ avec la source à https://github.com/MarquisdeGeek/SpaceBounce) pour utiliser un contrôleur physique.

Fournitures

• Arduino
• Deux tapis de pression (les miens étaient de Maplin
• Deux résistances, pour le tapis de pression (100 K, mais la plupart vont bien)
• Deux LED (en option)
• Deux résistances, pour les LED (100 K, mais la plupart vont bien. Aussi en option)
• Portable

Étape 1: Sautez partout

J'ai commencé par concevoir l'interface de saut et, après avoir examiné le jeu, j'ai réalisé qu'avoir deux tapis exprimerait le mieux son idée de base. C'est-à-dire que vous vous tenez sur le tapis de gauche pour simuler la sensation de vous tenir au mur de gauche et, au moment approprié, sautez sur le tapis de droite, et votre personnage à l'écran ferait de même.

Étape 2: connexion des électrodes

J'ai donc acheté deux tapis et je me suis mis au travail. Les tapis de pression présentés ici sont les plus simples (et les moins chers!) J'ai trouvé, à 10 £ chacun. Ils ont quatre fils, dont deux agissent comme un simple interrupteur: lorsque vous vous tenez sur le tapis, une connexion est établie et lorsque vous sautez, elle est rompue. J'ai introduit cela dans un Arduino avec ce circuit de base.

Étape 3: Déclencher la lumière fantastique

Cela a fonctionné, mais n'était pas très inspirant. J'ai donc ajouté des LED pour indiquer l'état de chaque tapis de pression.

Les LED ne sont pas nécessaires pour jouer au jeu, mais en les ajoutant au circuit, je pouvais facilement voir ce que le circuit pensait être l'état actuel. Par conséquent, si le jeu ne réagissait pas correctement, je pouvais déterminer si le problème venait du circuit, du logiciel Arduino ou de la logique du jeu.

Étape 4: Commencer à coder

Étant donné que le jeu original était en JavaScript, j'ai décidé d'écrire un programme NodeJS qui écoute les changements d'état du tapis de pression et envoie les données via des Websockets au client du jeu.

Tout d'abord, installez la firmata standard sur votre Arduino afin que nous puissions exécuter un serveur Node sur le PC et utiliser la bibliothèque Johnny Five pour écouter les changements d'état de l'Arduino. Ajoutez ensuite Express pour diffuser le contenu du jeu.

L'intégralité du code du serveur ressemble à ceci:

const express = require('express');

const app = express(); const http = require('http'); serveur const = http.createServer(app); const io = require('socket.io').listen(serveur); const arduino = require('arduino-contrôleur'); server.listen(3000, function() { console.log('Express server écoute…'); }); app.use('/', express.static('app')); const cinq = 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('Nous sommes connectés !'); 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', état: 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' }); } }) }); });

Et est exécuté avec:

serveur de nœud.js

Étape 5: Adapter le jeu

Le premier problème était l'interface; comment "cliquer" sur le bouton de lecture quand tout ce que vous pouvez faire est de sauter ? J'ai résolu ce problème en éliminant tous les autres boutons ! Je peux ensuite déclencher le bouton restant chaque fois que le joueur saute, en écoutant l'un ou l'autre des événements « up ».

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

À partir de là, j'ai pu entrer dans le jeu et utiliser les pads pour quelque chose de plus amusant - le jeu lui-même.

Étape 6: Modification du code de saut du joueur

Cette fois, je devrais traiter chaque pad individuellement et faire en sorte que le personnage commence à sauter chaque fois que le pied du joueur quitte le pad. Le temps nécessaire au personnage à l'écran pour traverser le puits de la mine est plus long que le temps nécessaire au joueur pour sauter d'un côté à l'autre. C'est une bonne chose, car cela donne au joueur une chance de retrouver son équilibre, de vérifier son équilibre et de regarder le joueur terminer le saut à l'écran. Si cela n'avait pas été le cas, j'aurais ralenti le joueur.

socket = io();

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

let data = JSON.parse(msg); if (data.side === 'left' && data.state === 'up') { // nous sautons du côté gauche } });

Étape 7: Modification de la sortie

Le mécanisme d'entrée fonctionnant, j'avais besoin de travailler sur la sortie. Le jeu se joue bien sur une tablette ou un téléphone, car il remplit l'écran. Mais, lorsque vous sautez, c'est trop petit pour voir, donc la zone de jeu sur l'écran doit être agrandie. Beaucoup!

Malheureusement, l'agrandissement de toutes les ressources graphiques est une tâche très chronophage. Alors, j'ai triché ! Étant donné que le jeu n'a pas besoin de comprendre la position X, Y d'un clic de souris ou d'un événement tactile, je peux simplement redimensionner l'ensemble du canevas !

Cela impliquait un piratage à la fois du CSS et du JavaScript afin que l'objet de canevas HTML5 existant s'exécute en plein écran.

De plus, le jeu se joue en mode portrait, ce qui signifie utiliser au maximum l'espace de l'écran dont nous avions besoin pour faire pivoter la toile de 90 degrés.

#SGXCanvas {

position: absolue; index z: 0; transformer: rotation (-90 degrés); origine de la transformation: en haut à droite; largeur: automatique; }

Étape 8: ça marche

Pour mon premier jeu, j'ai incliné mon ordinateur portable sur le côté et j'ai joué comme ça.

Étape 9: Préparation de la pièce

Construire un contrôleur physique n'est que le début du voyage, pas la fin. Le reste de l'espace physique doit être pris en compte.

Premièrement, les tapis de pression se sont déplacés sur le sol lorsque vous avez atterri dessus. Cela a été facilement corrigé avec des tampons adhésifs double face. Ils fonctionnent bien, mais ne résisteraient probablement pas à beaucoup d'usure.

Ensuite, l'ordinateur portable a l'air un peu idiot, ce qui vous distrait du jeu lui-même. Ainsi, la télévision du salon a été « empruntée » et emmenée dans le MakerSpace local, où elle a été positionnée contre le mur et connectée.

À l'avenir, ce serait bien d'ajouter des empreintes de pas sur les tapis de pression (peut-être la première impression de lune de Neil Armstrong !) pour guider le joueur. De plus, un meilleur boîtier et un meilleur cadre pour le téléviseur ajouteraient à la sensation. Peut-être que ceux d'entre vous qui ont beaucoup de temps et d'espace pourraient créer une paroi rocheuse en papier mâché, placée de chaque côté des tapis, pour imiter la sensation de claustrophobie de tomber dans un puits de mine !

Étape 10: C'est terminé

Et voila. Un projet de jour facile qui améliore le jeu original et vous maintient en forme tout en y jouant !

Vous pouvez également utiliser un Makey Makey qui simule directement les pressions de touches utilisées dans le jeu original, pour minimiser une partie de ce travail. Mais cela est laissé en exercice au lecteur:)

Tout le code se trouve dans une branche spéciale du référentiel Space Bounce: