Физикалық ойын контроллерін құру: 10 қадам (суреттермен)

2024 Автор: John Day | [email protected]. Соңғы өзгертілген: 2024-01-30 10:24

Nintendo Wii іске қосылғанда, ойыншыларға таңдаулы ойында ұпай жинау үшін диваннан кетуге, секіруге, билеуге және ермектеуге шақырылды. Wii -дің құрылуының қисық сызығы бар болса да, қажет уақытта қысымды жастықшаларға физикалық секіру арқылы ойынды басқаруға мүмкіндік беретін арнайы құрылғыны құру оңай.

Бұл нұсқаулық менің «Space Bounce» ойынын (https://marquisdegeek.com/spacebounce/ сайтында тікелей эфирде https://github.com/MarquisdeGeek/SpaceBounce) физикалық контроллерді пайдалану үшін қалай бейімделгенімді көрсетеді.

Жабдықтар

• Ардуино
• Екі қысымды кілемше (менікі Маплиндікі
• Қысымға арналған екі резистор (100 К, бірақ көпшілігі жақсы)
• Екі жарық диоды (міндетті емес)
• Светодиодтар үшін екі резистор (100 К, бірақ көпшілігі жақсы. Сонымен қатар қосымша)
• Ноутбук

1 -қадам: Айналаңызға секіріңіз

Мен секіру интерфейсін жобалаудан бастадым және ойынға шолу жасай отырып, екі кілемшенің болуы оның негізгі идеясын жақсы көрсететінін түсіндім. Яғни, сіз сол жақ қабырғаға ұстау сезімін модельдеу үшін сол жақ төсеніште тұрасыз және сәйкес сәтте оң жақ төсенішке секіресіз, ал сіздің экрандағы кейіпкеріңіз де солай етеді.

2 -қадам: жастықшаларды қосу

Сөйтіп, екі кілемше сатып алдым да, жұмысқа кірістім. Мұнда көрсетілген қысым төсеніштері - мен тапқан ең қарапайым (және ең арзан!), Әрқайсысы 10 фунт. Оларда төрт сым бар, олардың екеуі қарапайым қосқыш сияқты әрекет етеді: төсеніште тұрған кезде байланыс орнатылады, ал секіргенде ол үзіледі. Мен оны осы негізгі схемасы бар Arduino -ға бердім.

3 -қадам: Жарықты өшіру фантастикалық

Бұл жұмыс істеді, бірақ өте шабыттандырмады. Сонымен, мен әр қысым төсенішінің күйін көрсету үшін бірнеше жарық диодты қостым.

Жарық диодтары ойынды ойнау үшін қажет емес, бірақ оларды схемаға қосу арқылы мен тізбектің қазіргі күйі туралы ойды оңай көре алдым. Сондықтан, егер ойын дұрыс әрекет етпесе, мәселе схемада, Arduino бағдарламалық жасақтамасында немесе ойын логикасында болғанын анықтай аламын.

4 -қадам: кодты бастаңыз

Түпнұсқа ойын JavaScript -те болғанын ескере отырып, мен NodeJS бағдарламасын жазуды жөн көрдім, ол қысымның төсенішінің күйін тыңдайды және деректерді веб -ұяшықтар арқылы ойын клиентіне жібереді.

Алдымен, Arduino -ға стандартты фирманы орнатыңыз, сонда біз компьютерде түйін серверін іске қосамыз және Arduino -дан күйдің өзгеруін тыңдау үшін Johnny Five кітапханасын қолдана аламыз. Содан кейін ойын мазмұнына қызмет ету үшін Express қосыңыз.

Бүкіл сервер коды келесідей:

const express = талап ету ('экспресс');

const app = express (); const http = талап етіңіз ('http'); const сервері = http.createServer (қолданба); const io = қажет ('socket.io'). тыңдау (сервер); const arduino = қажет ('arduino-контроллер'); server.listen (3000, function () {console.log ('Серверді тыңдау…');}); app.use ('/', express.static ('қолданба')); const бес = талап ету («джонни-бес»); const board = new five. Board ({repl: false}); board.on («дайын», функция () {жасыл болсын = жаңа бес. Led (5); қызыл = жаңа бес болсын. Led (6); солға болсын = жаңа бес. түйреуіш (2); оңға = жаңа бес. Pin (3); io.on ('қосылу', функция (розетка) {console.log ('Біз қосылдық!'); LastLeft = false болсын; lastRight = false болсын; err, val) => {if (val) {green.on ();} else {green.off ();} if (val! == lastLeft) {lastLeft = val; let state = {side: 'left', күй: вал? 'төмен': 'жоғары'} socket.emit ('arduino:: күй', JSON.stringify (күй), {үшін: 'барлығы'});}}) бес. Pin.read (оң жақта), (err, val) => {if (val) {red.on ();} else {red.off ();} // if (val! == lastRight) {lastRight = val; let state = {side: 'оң', күй: val? 'төмен': 'жоғары'} socket.emit ('arduino:: күй', JSON.stringify (күй), {үшін: 'барлығы'});}})}); });

Және бірге іске қосылады:

түйін server.js

5 -қадам: Ойынды бейімдеу

Бірінші мәселе интерфейс болды; Сіз секіруді ғана жасай алатын болсаңыз, ойнату түймесін қалай басасыз? Мен мұны барлық басқа түймелерді жою арқылы шештім! Мен содан кейін ойыншы секірген кезде қалған оқиғаны «жоғары» оқиғаны тыңдау арқылы бастай аламын.

розетка = io (); socket.on ('arduino:: state', функция (msg) {let data = JSON.parse (msg); if (data.state === 'up') {// біз секіреміз!}});

Осы жерден мен ойынға кіре алдым, ал жастықшаларды қызықты нәрсеге - ойынның өзіне қолдана алдым.

6 -қадам: Ойыншыға өту кодын өзгерту

Бұл жолы мен әр төсеммен жеке айналысып, ойыншының аяғы жастықтан шыққан кезде кейіпкердің секіруін бастауым керек еді. Экрандағы кейіпкердің шахта шахтасынан өту уақыты ойыншының бір жақтан екінші жағына секіру уақытынан ұзағырақ. Бұл жақсы нәрсе, себебі бұл ойыншыға тепе-теңдікті қалпына келтіруге, аяқтарын тексеруге және ойыншының экранда секіруді аяқтауын көруге мүмкіндік береді. Егер бұлай болмағанда, мен ойыншыны бәсеңдетер едім.

розетка = io ();

socket.on ('arduino:: күй', функция (msg) {

деректер болсын = JSON.parse (msg); if (data.side === 'left' && data.state === 'up') {// біз сол жақтан секіреміз}});

7 -қадам: шығымды өзгерту

Кіріс механизмі жұмыс істеп тұрғанда, мен шығыспен жұмыс істеуім керек болды. Ойын планшетте немесе телефонда жақсы ойнайды, себебі ол экранды толтырады. Бірақ, сіз секіріп бара жатқанда, оны көру өте кішкентай, сондықтан экрандағы ойын алаңын үлкейту қажет. Көп!

Өкінішке орай, барлық графикалық активтерді ұлғайту-уақытты қажет ететін жұмыс. Сонымен, мен алдадым! Ойынға тінтуірдің X, Y позициясын немесе сенсорлық оқиғаны түсінудің қажеті жоқ болғандықтан, мен бүкіл кенепті қарапайым түрде қайта масштабтай аламын!

Бұл HTML5 кенеп объектісінің толық экранды жұмыс істеуі үшін CSS-те де, JavaScript-те де бұзуды қамтыды.

Сонымен қатар, ойын портреттік режимде ойналады, бұл бізге кенепті 90 градусқа бұру үшін қажет экранды жылжымайтын мүлікті барынша пайдалану үшін қажет.

#SGXCanvas {

лауазымы: абсолютті; z-индексі: 0; түрлендіру: айналдыру (-90 градус); трансформацияның шығу тегі: жоғарғы оң жақ; ені: автоматты; }

8 -қадам: ол жұмыс істейді

Бірінші ойында мен ноутбукты бүйірінен еңкейтіп, осылай ойнадым.

9 -қадам: бөлмені дайындау

Физикалық контроллерді құру - бұл сапардың басы ғана, соңы емес. Қалған физикалық кеңістікті қарастыру қажет.

Біріншіден, қысымды төсеніштер сіз жерге түскенде еденде қозғалды. Бұл екі жақты жабысқақ жастықшалармен оңай бекітілді. Олар жақсы жұмыс істейді, бірақ көп тозуға төтеп бермеуі мүмкін.

Әрі қарай, ноутбук біршама ақымақ болып көрінеді, бұл сізді ойыннан алшақтатады. Сонымен, демалыс бөлмесіндегі теледидар «қарызға алынды» және жергілікті MakerSpace -ке жеткізілді, оны қабырғаға қойып, жалғады.

Болашақта ойыншыға бағыттау үшін қысқыш төсеніштерге (мүмкін Нил Армстронгтың алғашқы айлық суреті!) Іздер қосу жақсы болар еді. Сонымен қатар, теледидар үшін жақсы корпус пен қоршау сезімді арттырады. Мүмкін, сіздердің көп уақытыңыз бен кеңістіктеріңіз, шахта шахтасынан құлаудың клострофобтық сезімін қайталау үшін, матаның екі жағына қойылатын қағаздан жасалған маска жасай алатын шығар!

10 -қадам: Бұл аяқталды

Ал сізде бар. Бастапқы ойынды жақсартатын және оны ойнау кезінде формаңызды сақтайтын қарапайым күндік жоба!

Бұл жұмыстың бір бөлігін азайту үшін сіз бастапқы ойында қолданылатын пернелерді тікелей имитациялайтын Makey Makey -ді пайдалана аласыз. Бірақ бұл оқырманға жаттығу ретінде қалады:)

Барлық код Space Bounce репо арнайы бөлімінде: