Membuat Pengawal Permainan Fizikal: 10 Langkah (dengan Gambar)

2025 Pengarang: John Day | [email protected]. Diubah suai terakhir: 2025-01-23 15:01

Ketika Nintendo Wii dilancarkan, para pemain didorong, tidak perlu, meninggalkan sofa dan melompat, menari, dan bergoyang untuk memperoleh mata dalam permainan pilihan mereka. Walaupun terdapat kurva belajar yang curam dalam membangun Wii, mudah untuk membuat peranti khusus yang memungkinkan anda mengendalikan permainan dengan melompat secara fizikal pada bantalan tekanan pada waktu yang sesuai.

Petunjuk ini menunjukkan bagaimana saya menyesuaikan permainan 'Space Bounce' (boleh dimainkan secara langsung di https://marquisdegeek.com/spacebounce/ dengan sumber di https://github.com/MarquisdeGeek/SpaceBounce) untuk menggunakan pengawal fizikal.

Bekalan

• Arduino
• Dua tikar tekanan (tambang dari Maplin
• Dua perintang, untuk tikar tekanan (100 K, tetapi kebanyakannya baik)
• Dua LED (pilihan)
• Dua perintang, untuk LED (100 K, tetapi kebanyakannya baik. Juga pilihan)
• Komputer riba

Langkah 1: Lompat Sekitar

Saya mulakan dengan merancang antara muka melompat dan, ketika meninjau permainan, menyedari bahawa memiliki dua tikar akan mengungkapkan idea utamanya. Maksudnya, anda berdiri di atas tikar kiri untuk mensimulasikan perasaan memegang dinding kiri dan, pada saat yang sesuai, melompat ke tikar kanan, dan watak di layar anda akan melakukan perkara yang sama.

Langkah 2: Menghubungkan Pad

Oleh itu, saya membeli dua tikar, dan mula bekerja. Tikar tekanan yang ditunjukkan di sini adalah yang paling sederhana (dan paling murah!) Saya dapati, dengan harga £ 10 setiap satu. Mereka mempunyai empat wayar, dua di antaranya berfungsi seperti suis sederhana: semasa anda berdiri di atas tikar, sambungan dibuat, dan ketika anda melompat, ia rosak. Saya memasukkan ini ke Arduino dengan rangkaian asas ini.

Langkah 3: Melancarkan Fantastic Light

Ia berjaya, tetapi tidak begitu memberi inspirasi. Oleh itu, saya menambahkan beberapa LED untuk menunjukkan keadaan setiap tikar tekanan.

LED tidak diperlukan untuk bermain permainan, tetapi dengan menambahkannya ke litar, saya dapat dengan mudah melihat apa yang difikirkan litar adalah keadaan semasa. Oleh itu, jika permainan tidak bertindak balas dengan betul, saya dapat menyelesaikan masalahnya dengan masalah litar, perisian Arduino, atau logik permainan.

Langkah 4: Memulakan Kod

Memandangkan permainan aslinya ada dalam JavaScript, memutuskan untuk menulis program NodeJS yang mendengarkan perubahan dalam keadaan tekanan, dan mengirimkan data melalui soket web ke klien permainan.

Pertama, pasang firmata standard ke Arduino anda supaya kami dapat menjalankan pelayan Node pada PC dan menggunakan perpustakaan Johnny Five untuk mendengar perubahan keadaan dari Arduino. Kemudian tambahkan Express untuk menyediakan kandungan permainan.

Keseluruhan kod pelayan kelihatan seperti ini:

const express = memerlukan ('express');

const app = express (); const http = memerlukan ('http'); pelayan const = http.createServer (aplikasi); const io = memerlukan ('socket.io'). dengar (pelayan); const arduino = memerlukan ('arduino-controller'); server.listen (3000, function () {console.log ('Express server listen …');}); app.use ('/', express.static ('app')); const lima = memerlukan ("johnny-five"); const board = new five. Board ({repl: false}); board.on ("siap", fungsi () {let green = new lima. Led (5); let red = new lima. Led (6); let kiri = baru lima. Pin (2); let right = new lima. Pin (3); io.on ('connect', function (socket) {console.log ('Kami disambungkan!'); Let lastLeft = false; let lastRight = false; five. Pin.read (kiri, (err, val) => {if (val) {green.on ();} lain {green.off ();} if (val! == lastLeft) {lastLeft = val; let state = {side: 'left', state: val? 'down': 'up'} socket.emit ('arduino:: state', JSON.stringify (state), {untuk: 'Everyone'});}}) lima. Pin.read (kanan, (err, val) => {if (val) {red.on ();} other {red.off ();} // if (val! == lastRight) {lastRight = val; let state = {side: 'right', state: val? 'down': 'up'} socket.emit ('arduino:: state', JSON.stringify (state), {untuk: 'Everyone'});}})})); });

Dan dijalankan dengan:

pelayan nod.js

Langkah 5: Menyesuaikan Permainan

Masalah pertama ialah antara muka; bagaimana anda 'klik' pada butang main apabila semua yang anda boleh lakukan adalah melompat? Saya menyelesaikannya dengan menghilangkan semua butang lain! Saya kemudian boleh mencetuskan butang yang tersisa setiap kali pemain melompat, dengan mendengar acara 'naik'.

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

Dari sini saya dapat memasuki permainan, dan menggunakan pad untuk sesuatu yang lebih menyeronokkan - permainan itu sendiri.

Langkah 6: Menukar Kod Lompat Pemain

Kali ini saya perlu berurusan dengan setiap pad secara berasingan, dan membuat watak mula melompat setiap kali kaki pemain meninggalkan pad. Masa untuk watak di layar melintasi batang lombong lebih lama daripada masa pemain melompat dari satu sisi ke sisi. Ini adalah perkara yang baik, kerana memberi peluang kepada pemain untuk mendapatkan kembali keseimbangan mereka, periksa kedudukan mereka, dan perhatikan pemain menyelesaikan lompatan di layar. Sekiranya ini tidak berlaku, saya akan memperlahankan pemain.

soket = io ();

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

biarkan data = JSON.parse (msg); jika (data.side === 'kiri' && data.state === 'ke atas') {// kami melompat dari sebelah kiri}});

Langkah 7: Menukar Hasil

Dengan mekanisme input berfungsi, saya perlu mengusahakan output. Permainan dimainkan dengan baik di tablet atau telefon, kerana memenuhi layar. Tetapi, ketika anda melompat-lompat, terlalu kecil untuk dilihat, jadi kawasan permainan di skrin perlu diperbesar. Banyak!

Malangnya, memperbesar semua aset grafik adalah tugas yang sangat memakan masa. Jadi, saya menipu! Oleh kerana permainan tidak perlu memahami kedudukan X, Y pada klik tetikus, atau acara sentuhan, saya boleh skala semula keseluruhan kanvas dengan mudah!

Ini melibatkan peretasan pada CSS dan JavaScript sehingga objek kanvas HTML5 yang ada berjalan di skrin penuh.

Tambahan pula, permainan ini dimainkan dalam mod potret yang bermaksud untuk menggunakan maksimum harta tanah layar yang kita perlukan untuk memutar kanvas sebanyak 90 darjah.

#SGXCanvas {

kedudukan: mutlak; z-index: 0; ubah: putar (-90deg); transform-origin: kanan atas; lebar: automatik; }

Langkah 8: Ia Berfungsi

Untuk permainan pertama saya memiringkan komputer riba di sebelahnya, dan bermain seperti ini.

Langkah 9: Menyiapkan Bilik

Membangun pengawal fizikal hanyalah permulaan perjalanan, bukan akhir. Ruang fizikal selebihnya perlu dipertimbangkan.

Pertama, tikar tekanan bergerak di lantai ketika anda mendarat di atasnya. Ini mudah diperbaiki dengan beberapa pad melekit dua sisi. Mereka berfungsi dengan baik, tetapi mungkin tidak tahan banyak keausan.

Seterusnya, komputer riba kelihatan agak konyol, yang mengalihkan perhatian anda dari permainan itu sendiri. Oleh itu, TV dari ruang rehat "dipinjam" dan dibawa ke MakerSpace tempatan, di mana ia diposisikan di dinding dan dihubungkan.

Pada masa akan datang adalah baik untuk menambahkan jejak kaki ke tikar tekanan (mungkin cetakan bulan pertama Neil Armstrong!) Untuk membimbing pemain. Casing dan surround TV yang lebih baik akan menambahkan nuansa. Mungkin anda yang mempunyai banyak waktu dan ruang dapat membuat muka batu mache kertas, diletakkan di kedua-dua sisi tikar, untuk meniru rasa sesak yang jatuh dari batang ranjau!

Langkah 10: Selesai

Dan di sana anda memilikinya. Projek hari yang mudah yang meningkatkan permainan asli, dan membuat anda tetap cergas semasa memainkannya!

Anda juga boleh menggunakan Makey Makey yang secara langsung mensimulasikan penekanan tombol yang digunakan dalam permainan asal, untuk meminimumkan sebahagian daripada karya ini. Tetapi itu dibiarkan sebagai latihan untuk pembaca:)

Semua kod ada di cawangan khas di repo Space Bounce: