การสร้างตัวควบคุมเกมทางกายภาพ: 10 ขั้นตอน (พร้อมรูปภาพ)

2024 ผู้เขียน: John Day | [email protected]. แก้ไขล่าสุด: 2024-01-30 13:04

เมื่อเปิดตัว Nintendo Wii ผู้เล่นได้รับการสนับสนุนโดยไม่จำเป็น ให้ออกจากโซฟาแล้วกระโดด เต้น และกระตุกเพื่อทำคะแนนในเกมที่พวกเขาเลือก ในขณะที่มีช่วงการเรียนรู้ที่สูงชันในการสร้างสำหรับ Wii มันง่ายที่จะสร้างอุปกรณ์แบบกำหนดเองที่ให้คุณควบคุมเกมได้โดยการกระโดดบนแผ่นกดตามเวลาที่เหมาะสม

คำแนะนำนี้แสดงให้เห็นว่าฉันปรับเกม 'Space Bounce' อย่างไร (เล่นสดได้ที่ https://marquisdegeek.com/spacebounce/ พร้อมแหล่งที่มาที่ https://github.com/MarquisdeGeek/SpaceBounce) เพื่อใช้ตัวควบคุมทางกายภาพ

เสบียง

• Arduino
• เสื่อกดสองอัน (ของฉันมาจาก Maplin
• ตัวต้านทานสองตัวสำหรับแผ่นแรงดัน (100 K แต่ส่วนใหญ่ใช้ได้)
• ไฟ LED สองดวง (อุปกรณ์เสริม)
• ตัวต้านทานสองตัวสำหรับ LED (100 K แต่ส่วนใหญ่ใช้ได้ นอกจากนี้ยังเป็นทางเลือก)
• แล็ปท็อป

ขั้นตอนที่ 1: กระโดดไปรอบ ๆ

ฉันเริ่มต้นด้วยการออกแบบส่วนต่อประสานการกระโดด และเมื่อทบทวนเกมแล้ว ฉันพบว่าการมีแผ่นรองสองผืนนั้นน่าจะแสดงแนวคิดหลักได้ดีที่สุด นั่นคือคุณยืนบนเสื่อด้านซ้ายเพื่อจำลองความรู้สึกของการยึดผนังด้านซ้าย และเมื่อถึงเวลาที่เหมาะสม ให้กระโดดข้ามไปยังเสื่อด้านขวา และตัวละครบนหน้าจอของคุณก็จะทำเช่นเดียวกัน

ขั้นตอนที่ 2: เชื่อมต่อแผ่นอิเล็กโทรด

ดังนั้นฉันจึงซื้อเสื่อสองผืนและไปทำงาน แผ่นกันแรงดันที่แสดงที่นี่เป็นแบบที่ง่ายที่สุด (และถูกที่สุด!) ที่ฉันพบที่ราคา 10 ปอนด์ พวกเขามีสายไฟสี่เส้น ซึ่งสองเส้นทำหน้าที่เหมือนสวิตช์ธรรมดา: เมื่อคุณยืนบนเสื่อ จะมีการเชื่อมต่อ และเมื่อคุณกระโดดขึ้น มันจะขาด ฉันป้อนสิ่งนี้ลงใน Arduino ด้วยวงจรพื้นฐานนี้

ขั้นตอนที่ 3: สะดุดแสงที่ยอดเยี่ยม

มันได้ผล แต่ก็ไม่ได้สร้างแรงบันดาลใจมากนัก ดังนั้นฉันจึงเพิ่ม LED บางดวงเพื่อระบุสถานะของแผ่นรับแรงกดแต่ละแผ่น

ไม่จำเป็นต้องมีไฟ LED ในการเล่นเกม แต่โดยการเพิ่มลงในวงจร ฉันสามารถเห็นได้อย่างง่ายดายว่าวงจรคิดว่าเป็นสถานะปัจจุบันอย่างไร ดังนั้น หากเกมไม่ตอบสนองอย่างถูกต้อง ผมสามารถหาคำตอบได้ว่าปัญหาอยู่ที่วงจร ซอฟต์แวร์ Arduino หรือตรรกะของเกม

ขั้นตอนที่ 4: การเริ่มต้นเขียนโค้ด

เนื่องจากเกมดั้งเดิมนั้นใช้จาวาสคริปต์ ฉันจึงตัดสินใจเขียนโปรแกรม NodeJS ซึ่งรับฟังการเปลี่ยนแปลงในสถานะของแผ่นดัน และส่งข้อมูลผ่านเว็บซ็อคเก็ตไปยังไคลเอนต์เกม

ขั้นแรก ติดตั้ง Firmata มาตรฐานบน Arduino ของคุณ เพื่อให้เราสามารถเรียกใช้เซิร์ฟเวอร์ Node บนพีซี และใช้ไลบรารี Johnny Five เพื่อฟังการเปลี่ยนแปลงสถานะจาก Arduino จากนั้นเพิ่ม Express เพื่อให้บริการเนื้อหาเกม

รหัสเซิร์ฟเวอร์ทั้งหมดมีลักษณะดังนี้:

const express = ต้องการ ('ด่วน');

แอป const = ด่วน (); const http = ต้องการ ('http'); เซิร์ฟเวอร์ const = http.createServer (แอพ); const io = ต้องการ ('socket.io').listen (เซิร์ฟเวอร์); const arduino = ต้องการ ('arduino-controller'); server.listen (3000, ฟังก์ชั่น () { console.log ('เซิร์ฟเวอร์การฟังด่วน…'); }); app.use('/', express.static('app')); const ห้า = ต้องการ ("johnny-five"); บอร์ด const = ใหม่ five. Board ({ repl: false }); board.on ("พร้อม", ฟังก์ชั่น () { ให้สีเขียว = ใหม่ five. Led (5) ให้สีแดง = ใหม่ five. Led (6) ให้ซ้าย = ห้าใหม่ (2) ให้ขวา = ห้าใหม่. Pin(3); io.on('connect', function(socket) { console.log('We are connected!'); ให้ lastLeft = false; ให้ lastRight = false; five. Pin.read (ซ้าย, (err, val) => { if (val) { green.on (); } else { green.off (); } if (val !== lastLeft) { lastLeft = val; ให้ state = { ข้าง: '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; ให้ state = { side: 'right', state: val ? 'down': 'up' } socket.emit('arduino::state', JSON.stringify(state), { for: 'everyone' }); } }) }); });

และดำเนินการด้วย:

โหนดเซิร์ฟเวอร์ js

ขั้นตอนที่ 5: ปรับเกม

ปัญหาแรกคืออินเทอร์เฟซ คุณจะ 'คลิก' ที่ปุ่มเล่นได้อย่างไรในเมื่อสิ่งที่คุณทำได้คือกระโดด ฉันแก้ไขปัญหานี้โดยกำจัดปุ่มอื่นๆ ทั้งหมด! จากนั้นฉันสามารถเปิดปุ่มที่เหลือทุกครั้งที่ผู้เล่นกระโดด โดยฟังเหตุการณ์ "ขึ้น"

ซ็อกเก็ต = io(); socket.on('arduino::state', function(msg){ let data = JSON.parse(msg); if (data.state === 'up') { // เรากำลังกระโดด! } });

จากที่นี่ ฉันสามารถเข้าสู่เกม และใช้แผ่นรองเพื่อความสนุกมากขึ้น - ตัวเกมเอง

ขั้นตอนที่ 6: การเปลี่ยนรหัสกระโดดของผู้เล่น

ครั้งนี้ฉันจะต้องจัดการกับแต่ละแผ่นแยกกัน และทำให้ตัวละครเริ่มกระโดดเมื่อใดก็ตามที่เท้าของผู้เล่นออกจากแผ่น เวลาที่ตัวละครบนหน้าจอจะสำรวจปล่องเหมืองนานกว่าเวลาที่ผู้เล่นกระโดดจากด้านหนึ่งไปด้านข้าง นี่เป็นสิ่งที่ดี เนื่องจากทำให้ผู้เล่นมีโอกาสฟื้นสมดุล ตรวจสอบฐานราก และดูผู้เล่นกระโดดบนหน้าจอจนจบ หากไม่มีกรณีนี้ ฉันจะทำให้เครื่องเล่นช้าลง

ซ็อกเก็ต = io();

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

ให้ data = JSON.parse(msg); if (data.side === 'left' && data.state === 'up') { // เรากำลังกระโดดขึ้นจากด้านซ้าย } });

ขั้นตอนที่ 7: การเปลี่ยนผลลัพธ์

เมื่อกลไกอินพุตทำงาน ฉันต้องทำงานกับเอาต์พุต เกมนี้เล่นได้ดีบนแท็บเล็ตหรือโทรศัพท์เพราะมันเต็มหน้าจอ แต่เมื่อคุณกระโดดไปมา มันเล็กเกินกว่าจะมองเห็นได้ ดังนั้นพื้นที่เล่นบนหน้าจอจึงต้องขยายใหญ่ขึ้น มาก!

น่าเสียดายที่การขยายเนื้อหากราฟิกทั้งหมดเป็นงานที่ต้องใช้เวลามาก ฉันก็เลยโกง! เนื่องจากเกมไม่จำเป็นต้องเข้าใจตำแหน่ง X, Y ของการคลิกเมาส์หรือเหตุการณ์การแตะ ฉันสามารถปรับขนาดผ้าใบใหม่ทั้งหมดได้อย่างง่ายดาย!

สิ่งนี้เกี่ยวข้องกับการแฮ็กทั้ง CSS และ JavaScript เพื่อให้ออบเจ็กต์ผ้าใบ HTML5 ที่มีอยู่ทำงานเต็มหน้าจอ

นอกจากนี้ เกมยังเล่นในโหมดแนวตั้งซึ่งหมายถึงการใช้ประโยชน์สูงสุดจากพื้นที่หน้าจอที่เราจำเป็นต้องหมุนผ้าใบ 90 องศา

#SGXCanvas {

ตำแหน่ง: สัมบูรณ์; ดัชนี z: 0; แปลง: หมุน (-90deg); กำเนิดการแปลง: บนขวา; ความกว้าง: อัตโนมัติ; }

ขั้นตอนที่ 8: ใช้งานได้

สำหรับเกมแรกของฉัน ฉันเอียงแล็ปท็อปไปด้านข้าง แล้วเล่นแบบนี้

ขั้นตอนที่ 9: เตรียมห้อง

การสร้างตัวควบคุมทางกายภาพเป็นเพียงจุดเริ่มต้นของการเดินทาง ไม่ใช่จุดสิ้นสุด ส่วนที่เหลือของพื้นที่ทางกายภาพต้องได้รับการพิจารณา

ประการแรก เสื่อกดทับจะเคลื่อนไปมาบนพื้นเมื่อคุณตกลงบนพื้น สามารถแก้ไขได้ง่ายด้วยแผ่นกาวสองหน้า พวกเขาทำงานได้ดี แต่อาจจะไม่ทนต่อการสึกหรอมากนัก

ถัดไป แล็ปท็อปดูงี่เง่าเล็กน้อย ซึ่งจะทำให้คุณเสียสมาธิจากตัวเกม ดังนั้นทีวีจากห้องรับรองจึงถูก "ยืม" และนำไปที่ MakerSpace ในพื้นที่ ซึ่งติดตั้งไว้กับผนังและเชื่อมต่อกัน

ในอนาคต จะเป็นการดีที่จะเพิ่มรอยเท้าลงบนเสื่อกด (อาจเป็นภาพพระจันทร์เต็มดวงของนีล อาร์มสตรอง!) เพื่อนำทางผู้เล่น ปลอกหุ้มและเซอร์ราวด์ที่ดีกว่าสำหรับทีวียังช่วยเพิ่มความรู้สึกอีกด้วย บางทีพวกคุณที่มีเวลาและพื้นที่มากอาจจะทำหน้าหินมาเช่ วางด้านใดด้านหนึ่งของเสื่อ เพื่อเลียนแบบความรู้สึกอึดอัดเมื่อตกลงไปจากปล่องเหมือง!

ขั้นตอนที่ 10: เสร็จสมบูรณ์

และที่นั่นคุณมีมัน โครงการวันง่าย ๆ ที่ปรับปรุงเกมดั้งเดิมและช่วยให้คุณฟิตในขณะที่เล่น!

คุณยังสามารถใช้ Makey Makey ซึ่งจำลองการกดปุ่มที่ใช้ในเกมดั้งเดิมโดยตรง เพื่อลดการทำงานบางส่วน แต่นั่นเป็นแบบฝึกหัดสำหรับผู้อ่าน:)

รหัสทั้งหมดอยู่ในสาขาพิเศษใน Space Bounce repo: