Criando um controlador de jogo físico: 10 etapas (com imagens)

2024 Autor: John Day | [email protected]. Última modificação: 2024-01-30 11:37

Quando o Nintendo Wii foi lançado, os jogadores foram incentivados, ou melhor, obrigados a deixar o sofá e pular, dançar e sacudir para marcar pontos no jogo de sua escolha. Embora exista uma curva de aprendizado acentuada na construção para o Wii, é fácil construir um dispositivo personalizado que permite controlar um jogo pulando fisicamente em almofadas de pressão no momento apropriado.

Este instrutível mostra como adaptei o jogo 'Space Bounce' (jogável ao vivo em https://marquisdegeek.com/spacebounce/ com a fonte em https://github.com/MarquisdeGeek/SpaceBounce) para usar um controlador físico.

Suprimentos

• Arduino
• Duas esteiras de pressão (as minhas eram de Maplin
• Dois resistores, para o tapete de pressão (100 K, mas a maioria está bem)
• Dois LEDs (opcional)
• Dois resistores, para os LEDs (100 K, mas a maioria está bem. Também opcional)
• Computador portátil

Etapa 1: pule

Comecei projetando a interface de salto e, ao revisar o jogo, percebi que ter duas esteiras expressaria melhor sua ideia central. Ou seja, você fica de pé no tapete esquerdo para simular a sensação de se agarrar à parede esquerda e, no momento apropriado, pula para o tapete direito, e seu personagem na tela faria o mesmo.

Etapa 2: conectando os eletrodos

Então comprei duas esteiras e comecei a trabalhar. As esteiras de pressão mostradas aqui são as mais simples (e mais baratas!) Que encontrei, custando £ 10 cada. Eles têm quatro fios, dois dos quais atuam como um interruptor simples: quando você está no tapete, uma conexão é feita e, quando você pula, ela é quebrada. Eu alimentei isso em um Arduino com este circuito básico.

Etapa 3: Tripando a Luz Fantástico

Funcionou, mas não foi muito inspirador. Então, adicionei alguns LEDs para indicar o estado de cada tapete de pressão.

Os LEDs não são necessários para jogar, mas, ao adicioná-los ao circuito, pude ver facilmente o que o circuito pensava ser o estado atual. Portanto, se o jogo não reagisse corretamente, eu poderia descobrir se o problema era com o circuito, o software Arduino ou a lógica do jogo.

Etapa 4: começando a codificar

Dado que o jogo original era em JavaScript, decidi escrever um programa NodeJS que escuta as mudanças no estado do tapete de pressão e envia os dados através de websockets para o cliente do jogo.

Primeiro, instale o firmata padrão em seu Arduino para que possamos executar um servidor Node no PC e usar a biblioteca Johnny Five para ouvir as mudanças de estado do Arduino. Em seguida, adicione Express para servir o conteúdo do jogo.

Todo o código do servidor tem a seguinte aparência:

const express = require ('express');

const app = express (); const http = requer ('http'); servidor const = http.createServer (app); const io = require ('socket.io'). listen (servidor); const arduino = require ('controlador-arduino'); server.listen (3000, function () {console.log ('Servidor expresso ouvindo…');}); app.use ('/', express.static ('app')); const five = require ("johnny-five"); const board = new five. Board ({repl: false}); board.on ("pronto", 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 ('conectar', função (soquete) {console.log ('Estamos conectados!'); Deixe lastLeft = false; deixe 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: 'certo', estado: val? 'baixo': 'para cima'} socket.emit ('arduino:: estado', JSON.stringify (estado), {para: 'todos'});}})}); });

E é executado com:

node server.js

Etapa 5: adaptando o jogo

O primeiro problema foi a interface; como você 'clica' no botão play quando tudo que você pode fazer é pular? Resolvi isso eliminando todos os outros botões! Posso então acionar o botão restante sempre que o jogador pular, ouvindo qualquer um dos eventos 'up'.

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

A partir daqui, consegui entrar no jogo e usar as almofadas para algo mais divertido - o jogo em si.

Etapa 6: Alterar o código de salto do jogador

Desta vez, eu precisaria lidar com cada bloco individualmente e fazer o personagem começar a pular sempre que o pé do jogador sair do bloco. O tempo para o personagem na tela atravessar o poço da mina é maior do que o tempo para o jogador pular de um lado para o outro. Isso é uma coisa boa, pois dá ao jogador a chance de recuperar o equilíbrio, verificar o equilíbrio e ver o jogador completar o salto na tela. Se não fosse esse o caso, eu teria atrasado o jogador.

socket = io ();

socket.on ('arduino:: estado', função (msg) {

deixe dados = JSON.parse (msg); if (data.side === 'left' && data.state === 'up') {// estamos pulando do lado esquerdo}});

Etapa 7: Mudando a saída

Com o mecanismo de entrada funcionando, eu precisava trabalhar na saída. O jogo funciona bem em um tablet ou telefone, pois preenche a tela. Mas, quando você está pulando, é muito pequeno para ver, então a área de jogo na tela precisa ser ampliada. Bastante!

Infelizmente, aumentar todos os recursos gráficos é uma tarefa que consome muito tempo. Então, eu trapaceei! Como o jogo não precisa entender a posição X, Y de um clique do mouse ou evento de toque, posso simplesmente redimensionar a tela inteira!

Isso envolveu um hack no CSS e no JavaScript para que o objeto canvas HTML5 existente fosse executado em tela inteira.

Além disso, o jogo é jogado no modo retrato, o que significa fazer o máximo uso do espaço da tela de que precisamos para girar a tela em 90 graus.

#SGXCanvas {

posição: absoluta; índice z: 0; transformar: girar (-90deg); origem da transformação: canto superior direito; largura: automático; }

Etapa 8: Funciona

No meu primeiro jogo, inclinei meu laptop de lado e joguei assim.

Etapa 9: preparando a sala

Construir um controlador físico é apenas o começo da jornada, não o fim. O resto do espaço físico precisa ser considerado.

Em primeiro lugar, as esteiras de pressão moveram-se no chão quando você pousou nelas. Isso foi facilmente corrigido com algumas almofadas adesivas de dupla face. Eles funcionam bem, mas provavelmente não resistiriam a muito desgaste.

Em seguida, o laptop parece um pouco bobo, o que o distrai do jogo em si. Assim, a TV da sala foi "emprestada" e levada para o MakerSpace local, onde foi posicionada contra a parede e conectada.

No futuro, seria bom adicionar pegadas nas esteiras de pressão (talvez da primeira impressão lunar de Neil Armstrong!) Para guiar o jogador. Além disso, um revestimento e surround melhores para a TV aumentariam a sensação. Talvez aqueles de vocês com muito tempo e espaço possam fazer uma rocha de papel machê, colocada de cada lado das esteiras, para imitar a sensação claustrofóbica de cair no poço de uma mina!

Etapa 10: está completo

E aí está. Um projeto fácil para o dia que aprimora o jogo original e mantém você em forma enquanto o joga!

Você também pode usar um Makey Makey que simula diretamente os pressionamentos de tecla usados no jogo original, para minimizar parte desse trabalho. Mas isso é deixado como um exercício para o leitor:)

Todo o código está em um branch especial no repositório Space Bounce: