本文參考自:http://blog.livedoor.jp/reona396/archives/55730062.html

前言


在網路上看到這篇文獻,提供了用p5js程式庫連結NS控制器的操作方法。
興沖沖的下載回來測試,卻發現無法在win10的環境下順利執行 ( 文章中是使用OSX系統,但我沒有OSX的系統可以測試,如果有使用OSX系統測試的朋友也歡迎留言交流 ) 。
因此我花了點時間研究如何可以在Win10環境底下,使用p5js讀取NS控制器輸入訊號的方法,分享給大家,希望能對p5js的使用者在應用介面開發上有些幫助。

相關技術


P5js

 

環境需求


系統:Win10
系統裝置:藍芽控制器
編輯器:sublime

操作步驟


1.    連結至這裡下載p5_gamepads_sw的範例文件下來,直接開啟index.html檔案,並開啟藍芽裝置連結NS控制器後,會發現無法如範例影片般讀取到控制器訊號。此時使用chrome瀏覽器的檢查功能,可以確認到問題出在範例文件gamepads.js中第54行的這段:

54    orderedGamepads.push(gamepadArray.find(g => g.id.indexOf('Joy-Con (R)') > -1));

此段的問題在於,win10的控制器連接埠gamepad裡面,可能有幾個值為null,當執行54行這一段

54    orderedGamepads.push(gamepadArray.find(g => g.id.indexOf('Joy-Con (R)') > -1));

想要取得gamepad.id來確認id名是否為NS控制器時會出現錯誤(因為null值底下並不會有id這個property)。

nscontroll00.png


2.    解決辦法很簡單,只要在確認gamepad.id前,先確認gamepad是否為null即可,因此在定義gamepad的值時,可以將範例的50到55行:

50    for(let i = 0; i < gamepads.length; i++) {
51    gamepadArray.push(gamepads[i]);
52    }
53    let orderedGamepads = [];
54    orderedGamepads.push(gamepadArray.find(g => g.id.indexOf('Joy-Con (R)') > -1));
55    orderedGamepads.push(gamepadArray.find(g => g.id.indexOf('Joy-Con (L)') > -1));

改寫為如下:

50    let joyconR,joyconL;//定義左搖桿或右搖桿的序號
50    for(let i = 0; i < gamepads.length; i++) {
51    gamepadArray.push(gamepads[i]);
52    if (gamepadArray[i] === null){//避免控制器list為null
53    }else{
54    if (gamepadArray[i].id === 'Wireless Gamepad (Vendor: 057e Product: 2007)'){ //在我win10右控制器的id名為  Wireless Gamepad (Vendor: 057e Product: 2007)
55    joyconR = i;
56    }else{
57    joyconL = i;
58    }
59    }
60    }
61    orderedGamepads.push(gamepadArray[joyconR]);
62    orderedGamepads.push(gamepadArray[joyconL]);

此時已除錯完成,歡迎到我們的github頁面,測試看看,以下是測試成功的影片,可以使用NS控制器,控制GitHub網頁上的點。

arrow
arrow
    文章標籤
    p5js 應用介面 程式編寫
    全站熱搜

    OT 發表在 痞客邦 留言(0) 人氣()