יצירת בקר משחק פיזי: 10 שלבים (עם תמונות)

2024 מְחַבֵּר: John Day | [email protected]. שונה לאחרונה: 2024-01-30 09:14

כאשר הושק נינטנדו Wii עודדו שחקנים, לא נדרשים, לעזוב את הספה ולקפוץ, לרקוד ולג'ינג כדי לצבור נקודות במשחק הבחירה שלהם. אמנם יש עקומת למידה תלולה בבניית ה- Wii, אך קל לבנות מכשיר מותאם אישית המאפשר לך לשלוט במשחק על ידי קפיצה פיזית על רפידות לחץ בזמן המתאים.

מדריך זה מראה כיצד התאמתי את המשחק 'Space Bounce' (ניתן לשחק בשידור חי ב https://marquisdegeek.com/spacebounce/ עם המקור בכתובת https://github.com/MarquisdeGeek/SpaceBounce) לשימוש בבקר פיזי.

אספקה

• ארדואינו
• שני מחצלות לחץ (שלי היו ממפלין
• שני נגדים, לשטיח הלחץ (100 K, אבל רובם בסדר)
• שני נוריות LED (אופציונלי)
• שני נגדים, ללדים (100 K, אבל רובם בסדר. גם אופציונלי)
• מחשב נייד

שלב 1: קפוץ

התחלתי בעיצוב ממשק הקפיצה, ובתום סקירת המשחק הבנתי שיש לו שני מחצלות בצורה הטובה ביותר לבטא את רעיון הליבה שלו. כלומר, אתה עומד על המחצלת השמאלית כדי לדמות את תחושת ההחזקה על הקיר השמאלי ובזמן המתאים, לקפוץ לרוחב השטיח הימני, והדמות שלך על המסך הייתה עושה את אותו הדבר.

שלב 2: חיבור הרפידות

אז קניתי שני מחצלות ויצאתי לעבודה. מחצלות הלחץ המוצגות כאן הן הפשוטות (והזולות ביותר!) שמצאתי, במחיר של 10 ליש ט כל אחת. יש להם ארבעה חוטים, שניים מהם פועלים כמו מתג פשוט: כאשר אתה עומד על המזרן, נוצר חיבור, וכאשר אתה קופץ הוא נשבר. הזנתי את זה לארדואינו עם המעגל הבסיסי הזה.

שלב 3: הכפלת האור פנטסטי

זה עבד, אבל לא היה מעורר השראה במיוחד. אז הוספתי כמה נוריות לציון המצב של כל מחצלת לחץ.

הנורות אינן נדרשות לשחק את המשחק, אך על ידי הוספתן למעגל יכולתי לראות בקלות מה המעגל חושב שהמצב הנוכחי. לכן, אם המשחק לא הגיב כראוי, אוכל להבין אם הבעיה היא במעגל, בתוכנת Arduino או בהיגיון המשחק.

שלב 4: התחלת קוד

בהתחשב בכך שהמשחק המקורי היה ב- JavaScript, החלטתי לכתוב תוכנית NodeJS אשר מקשיבה לשינויים במצב מחצלת הלחץ, ושולחת את הנתונים דרך שקעי הרשת ללקוח המשחק.

ראשית, התקן את הפירמטה הסטנדרטית על ה- Arduino שלך כך שנוכל להפעיל שרת Node במחשב האישי ולהשתמש בספריית Johnny Five כדי להאזין לשינויי המצב מהארדואינו. לאחר מכן הוסף את Express כדי להציג את תוכן המשחק.

קוד השרת כולו נראה כך:

const express = require ('express');

const app = express (); const http = require ('http'); שרת const = http.createServer (אפליקציה); const io = require ('socket.io'). האזינו (שרת); const arduino = require ('arduino-controller'); server.listen (3000, function () {console.log ('האזנה לשרת אקספרס …');}); app.use ('/', express.static ('app')); const five = require ("johnny-five"); לוח לוח const = new five. Board ({repl: false}); board.on ("מוכן", פונקציה () {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 ('We are connected!'); Let lastLeft = false; let lastRight = false; five. Pin.read (left, (טעות, 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 (מימין, (err, val) => {if (val) {red.on ();} else {red.off ();} // if (val! == lastRight) {lastRight = val; let state = {side: 'נכון', מצב: val? 'למטה': 'למעלה'} socket.emit ('arduino:: state', JSON.stringify (state), {for: 'כולם'});}})}); });

והוא מופעל עם:

צומת server.js

שלב 5: התאמת המשחק

הבעיה הראשונה הייתה הממשק; איך אתה 'לוחץ' על כפתור ההפעלה כשכל מה שאתה יכול לעשות זה לקפוץ? פתרתי את זה על ידי ביטול כל הכפתורים האחרים! לאחר מכן אוכל להפעיל את הכפתור הנותר בכל פעם שהנגן קופץ, על ידי האזנה לאירוע "למעלה".

socket = io (); socket.on ('arduino:: state', function (msg) {let data = JSON.parse (msg); if (data.state === 'up') {// אנחנו קופצים!}});

מכאן הצלחתי להיכנס למשחק, ולהשתמש ברפידות למשהו מהנה יותר - המשחק עצמו.

שלב 6: שינוי קוד הקפיצה של השחקן

הפעם אצטרך להתמודד עם כל כרית בנפרד, ולגרום לדמות להתחיל לקפוץ בכל פעם שכף רגלו של השחקן עוזבת את הרפידה. הזמן לדמות על המסך לחצות את פיר המוקשים ארוך מהזמן בו השחקן יקפוץ מצד אחד לצד. זה דבר טוב, מכיוון שהוא נותן לשחקן הזדמנות להחזיר לעצמו את שיווי המשקל, לבדוק את הרגל ולצפות בשחקן משלים את הקפיצה על המסך. אם זה לא היה המצב, הייתי מאט את השחקן.

socket = io ();

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

תן נתונים = JSON.parse (msg); if (data.side === 'שמאל' && data.state === 'למעלה') {// אנחנו קופצים למעלה מצד שמאל}});

שלב 7: שינוי הפלט

כשמנגנון הקלט עובד, הייתי צריך לעבוד על הפלט. המשחק משחק היטב בטאבלט או בטלפון מכיוון שהוא ממלא את המסך. אבל, כשאתה קופץ מסביב, הוא קטן מכדי לראות אותו, כך שצריך להגדיל את שטח המשחק על המסך. הרבה!

למרבה הצער, הגדלת כל הנכסים הגרפיים היא משימה גוזלת זמן רב. אז, בגדתי! מכיוון שהמשחק לא צריך להבין את המיקום X, Y של לחיצת עכבר או אירוע מגע, אני יכול פשוט לשנות את כל הקנבס מחדש!

זה כלל פריצה הן ל- CSS והן ל- JavaScript, כך שאובייקט הבד HTML5 הקיים פועל במסך מלא.

יתר על כן, המשחק מופעל במצב דיוקן מה שאמור לעשות את השימוש המקסימלי בנדל ן המסך שהיינו צריכים כדי לסובב את הבד ב 90 מעלות.

#SGXCanvas {

עמדה: מוחלטת; z-index: 0; להפוך: לסובב (-90 מעלות); transform-origin: למעלה מימין; רוחב: אוטומטי; }

שלב 8: זה עובד

למשחק הראשון שלי הטתי את המחשב הנייד שלי על הצד שלו, ושיחקתי כך.

שלב 9: הכנת החדר

בניית בקר פיזי היא רק תחילת הדרך, לא הסוף. יש לשקול את שאר המרחב הפיזי.

ראשית, שטיחי הלחץ הסתובבו על הרצפה כשנחת עליהם. זה תוקן בקלות עם כמה כריות דביקות דו צדדיות. הם עובדים טוב, אבל כנראה שלא יחזיקו מעמד הרבה בלאי.

לאחר מכן, המחשב הנייד נראה קצת מטופש, מה שמסיח את דעתך מהמשחק עצמו. אז הטלוויזיה מהטרקלין "הושאלה" והועברה ל- MakerSpace המקומית, שם היא מונחה על הקיר ומחוברת.

בעתיד יהיה נחמד להוסיף עקבות על מחצלות הלחץ (אולי של הדפס הירח הראשון של ניל ארמסטרונג!) כדי להדריך את השחקן. גם מעטפת ומעטפת טובים יותר לטלוויזיה יוסיפו לתחושה. אולי אלה מכם עם הרבה זמן ומקום יכולים ליצור פרצוף סלע מעיסת נייר, המוצב משני צדי המחצלות, כדי לחקות את התחושה הקלאסטרופובית של נפילה במורד מוקשים!

שלב 10: זה הושלם

והנה יש לך את זה. פרויקט יום קל המשפר את המשחק המקורי, ושומר אותך בכושר בזמן המשחק!

תוכל גם להשתמש ב- Makey Makey המדמה ישירות את לחיצות המקשים שהיו בשימוש במשחק המקורי, כדי למזער חלק מעבודה זו. אבל זה נשאר כתרגיל לקורא:)

כל הקוד נמצא בסניף מיוחד במאגר Space Bounce: