PlayCanvas でBT-200 のプロトタイピング
Jul.26.2014rerofumi (@rerofumi)
自己紹介
• rerofumi (@rerofumi)–メーカー系で働いている職業プログラマです
BT-200 の主な用途
• ビデオドラッグの注入
アプリも作って見たい
• ディスプレイに色々繋ぐのはあまり好きじゃ無い
• 本体のコンピュートでなんかしたい
なに作ろうか
• 画面に目盛りが表示されていて、首を何度傾けたか分かるというのはどうだろう
• 名付けて「あたま分度器」
←15 度
30 度のお辞儀も正確にできる
• 生活を数値化できる Thing!
←15 度
要素もシンプルでいけそう
1.姿勢センサー ( ジャイロ ) で回転角を取得して
2.その分だけ目盛りもしくは数字を表示する
姿勢センサー
OpenGLES 表示
開発環境そろえるのめんどくさい
• Android 開発環境なんて 1 年半くらい触っていないよー– OpenGLES のシェーダーとか頂点バッファ
とか用意すんのしんどい
最近は PlayCanvas がお気に入り
• WebGL + HTML5 なゲームフレームワーク–ブラウザ上でちゃんと動いて楽しい
BT-200 で PlayCanvas 動くの?
• 動きます ( 小さいサイズのなら–標準ブラウザは WebGL 非対応なので
Firefox とかインストールする必要があります
– .apk をなんとかしてホゲって入れろ
HTML5 で姿勢センサー取れる
• センサー値余裕で取れる• BT-200 の姿勢センサーを Firefox で読
めた
window.addEventListener('devicemotion', this.onEvent, false);
表示部分を PlayCanvas で作る
スクリプト部分でセンサーを読む
• エディタもブラウザ上にある、超クラウド
PC 上でクラウド開発できる
• PC で開発して、完成した URL を BT-200 でアクセスするだけ
完成品の URL
クラウド開発
完成したら PlayCanvas で公開
できた
• http://apps.playcanvas.com/rerofumi/HMD-protractor/BT200-Protractor
プロジェクトそのものもオープン
• https://playcanvas.com/rerofumi/HMD-protractor
• 無料コースは全て public 扱いという github 方式
• 適当に fork していじくりたおしてね
BT-200 らしいアプリが作れた
• 問題点–あまり速度には期待できないです–WebGL は電池ガンガン食います–ちょっと大きくなるとクラッシュして動きま
せん–ネットワーク環境が必要です
• それでも簡単なのは良いことです–プロトタイプには良いのではないでしょう
か?
時間切れ項目
• 視差立体対応–今のところ左右同じで視差が付いてないあた
り
おまけ情報
• PlayCanvas は Oculus Rif t にも対応しようと頑張っています–ゲームフレームワークとしてマイナーなので
アピールしようと必死です–よろしくね