Tạo bộ điều khiển trò chơi vật lý: 10 bước (có hình ảnh)

2024 Tác giả: John Day | [email protected]. Sửa đổi lần cuối: 2024-01-30 13:33

Khi Nintendo Wii được ra mắt, người chơi được khuyến khích, không cần thiết, rời khỏi ghế sofa và nhảy, nhảy và lắc lư để ghi điểm trong trò chơi mà họ lựa chọn. Mặc dù có một đường cong học tập dốc trong việc xây dựng cho Wii, nhưng rất dễ dàng để xây dựng một thiết bị tùy chỉnh cho phép bạn điều khiển trò chơi bằng cách nhảy vật lý trên các miếng đệm áp lực vào thời điểm thích hợp.

Tài liệu hướng dẫn này cho thấy cách tôi điều chỉnh trò chơi 'Space Bounce' (có thể phát trực tiếp tại https://marquisdegeek.com/spacebounce/ với nguồn tại https://github.com/MarquisdeGeek/SpaceBounce) để sử dụng bộ điều khiển vật lý.

Quân nhu

• Arduino
• Hai thảm áp lực (của tôi là của Maplin
• Hai điện trở, cho tấm áp suất (100 K, nhưng hầu hết đều tốt)
• Hai đèn LED (tùy chọn)
• Hai điện trở, cho đèn LED (100 K, nhưng hầu hết đều ổn. Cũng tùy chọn)
• Máy tính xách tay

Bước 1: Nhảy xung quanh

Tôi bắt đầu bằng việc thiết kế giao diện nhảy và khi xem lại trò chơi, tôi nhận ra rằng có hai tấm thảm sẽ thể hiện tốt nhất ý tưởng cốt lõi của nó. Tức là, bạn đứng trên tấm thảm bên trái để mô phỏng cảm giác giữ chặt vào bức tường bên trái và vào thời điểm thích hợp, nhảy qua tấm thảm bên phải, và nhân vật trên màn hình của bạn cũng sẽ làm như vậy.

Bước 2: Kết nối các miếng đệm

Vì vậy, tôi đã mua hai cái chiếu, và đi làm. Những tấm thảm áp lực được trình bày ở đây là loại đơn giản nhất (và rẻ nhất!) Mà tôi tìm thấy, với giá £ 10 mỗi chiếc. Chúng có bốn dây, hai trong số đó hoạt động giống như một công tắc đơn giản: khi bạn đứng trên thảm, một kết nối sẽ được tạo ra và khi bạn nhảy lên, nó sẽ bị đứt. Tôi đã đưa nó vào Arduino với mạch cơ bản này.

Bước 3: Tripping the Light Fantastic

Nó hoạt động, nhưng không có nhiều cảm hứng. Vì vậy, tôi đã thêm một số đèn LED để chỉ báo trạng thái của mỗi tấm áp suất.

Các đèn LED không cần thiết để chơi trò chơi, nhưng bằng cách thêm chúng vào mạch, tôi có thể dễ dàng thấy mạch nghĩ là trạng thái hiện tại. Do đó, nếu trò chơi không phản ứng chính xác, tôi có thể xác định xem vấn đề là với mạch, phần mềm Arduino hoặc logic trò chơi.

Bước 4: Bắt đầu viết mã

Do trò chơi ban đầu là bằng JavaScript, tôi quyết định viết một chương trình NodeJS để lắng nghe những thay đổi trong trạng thái thảm áp lực và gửi dữ liệu qua websockets đến ứng dụng khách trò chơi.

Trước tiên, hãy cài đặt Firmata chuẩn vào Arduino của bạn để chúng tôi có thể chạy máy chủ Node trên PC và sử dụng thư viện Johnny Five để lắng nghe các thay đổi trạng thái từ Arduino. Sau đó thêm Express để phục vụ nội dung trò chơi.

Toàn bộ mã máy chủ trông như thế này:

const express = demand ('express');

const app = express (); const http = request ('http'); const server = http.createServer (ứng dụng); const io = Required ('socket.io'). nghe (máy chủ); const arduino = request ('arduino-controller'); server.listen (3000, function () {console.log ('Express server đang nghe …');}); app.use ('/', express.static ('app')); const five = Required ("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 ('Chúng ta đã kết nối!'); 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', state: val? 'down': 'up'} socket.emit ('arduino:: state', JSON.stringify (state), {for: 'mọi người'});}}) 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: 'mọi người'});}})}); });

Và được chạy với:

node server.js

Bước 5: Điều chỉnh trò chơi

Vấn đề đầu tiên là giao diện; làm thế nào để bạn 'nhấp' vào nút phát khi tất cả những gì bạn có thể làm là nhảy? Tôi đã giải quyết điều này bằng cách loại bỏ tất cả các nút khác! Sau đó, tôi có thể kích hoạt nút còn lại bất cứ khi nào người chơi nhảy, bằng cách lắng nghe sự kiện 'lên'.

socket = io (); socket.on ('arduino:: state', function (msg) {let data = JSON.parse (msg); if (data.state === 'up') {// chúng ta đang nhảy!}});

Từ đây, tôi đã có thể tham gia vào trò chơi và sử dụng các miếng đệm cho một thứ gì đó thú vị hơn - chính trò chơi.

Bước 6: Thay đổi mã nhảy của người chơi

Lần này, tôi sẽ cần xử lý từng miếng đệm riêng lẻ và làm cho nhân vật bắt đầu nhảy bất cứ khi nào chân của người chơi rời khỏi miếng đệm. Thời gian để nhân vật trên màn hình đi ngang qua trục mỏ lâu hơn thời gian để người chơi nhảy từ bên này sang bên kia. Đây là một điều tốt, vì nó cho người chơi cơ hội lấy lại thăng bằng, kiểm tra bước chân và xem người chơi hoàn thành cú nhảy trên màn hình. Nếu không xảy ra trường hợp này, tôi đã làm chậm người chơi.

socket = io ();

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

let data = JSON.parse (msg); if (data.side === 'left' && data.state === 'up') {// chúng ta đang nhảy lên từ phía bên trái}});

Bước 7: Thay đổi đầu ra

Với cơ chế đầu vào đang hoạt động, tôi cần phải làm việc trên đầu ra. Trò chơi chơi tốt trên máy tính bảng hoặc điện thoại, vì nó lấp đầy màn hình. Tuy nhiên, khi bạn đang nhảy xung quanh, nó quá nhỏ để nhìn thấy, vì vậy khu vực chơi trên màn hình cần được mở rộng. Rất nhiều!

Thật không may, việc phóng to tất cả các nội dung đồ họa là một công việc rất tốn thời gian. Vì vậy, tôi đã lừa dối! Vì trò chơi không cần hiểu vị trí X, Y của một lần nhấp chuột hoặc sự kiện chạm, nên tôi có thể chia tỷ lệ lại toàn bộ khung vẽ một cách đơn giản!

Điều này liên quan đến một cuộc tấn công trên cả CSS và JavaScript để đối tượng canvas HTML5 hiện có chạy toàn màn hình.

Hơn nữa, trò chơi được chơi ở chế độ dọc có nghĩa là sử dụng tối đa diện tích màn hình mà chúng tôi cần để xoay canvas 90 độ.

#SGXCanvas {

vị trí: tuyệt đối; z-index: 0; biến đổi: xoay (-90deg); biến đổi-origin: trên cùng bên phải; chiều rộng: tự động; }

Bước 8: Nó hoạt động

Trong trò chơi đầu tiên, tôi đã nghiêng máy tính xách tay của mình sang một bên và chơi như thế này.

Bước 9: Chuẩn bị phòng

Xây dựng một bộ điều khiển vật lý chỉ là khởi đầu của cuộc hành trình, không phải là kết thúc. Phần còn lại của không gian vật lý cần được xem xét.

Thứ nhất, thảm áp suất di chuyển xung quanh sàn khi bạn tiếp đất. Điều này đã được cố định dễ dàng với một số miếng dán hai mặt. Chúng hoạt động tốt, nhưng có lẽ sẽ không bị hao mòn nhiều.

Tiếp theo, máy tính xách tay trông hơi ngớ ngẩn, khiến bạn mất tập trung vào trò chơi. Vì vậy, chiếc TV từ phòng chờ đã được "mượn" và đưa đến MakerSpace cục bộ, nơi nó được đặt dựa vào tường và được kết nối.

Trong tương lai, sẽ rất tuyệt nếu bạn thêm dấu chân lên thảm áp lực (có lẽ là hình in mặt trăng đầu tiên của Neil Armstrong!) Để hướng dẫn người chơi. Ngoài ra, một vỏ bọc tốt hơn và khung bao quanh cho TV sẽ làm tăng thêm cảm giác. Có lẽ những người trong số các bạn có nhiều thời gian và không gian có thể làm một mặt đá bằng giấy, đặt ở hai bên thảm, để bắt chước cảm giác ngột ngạt khi rơi xuống hầm mỏ!

Bước 10: Hoàn tất

Và bạn có nó rồi đấy! Một dự án dễ dàng trong ngày giúp nâng cao trò chơi gốc và giữ cho bạn khỏe mạnh khi chơi nó!

Bạn cũng có thể sử dụng Makey Makey mô phỏng trực tiếp các phím bấm được sử dụng trong trò chơi gốc, để giảm thiểu một số công việc này. Nhưng đó chỉ là một bài tập cho người đọc:)

Tất cả mã nằm trong một nhánh đặc biệt trong đại diện Space Bounce: