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 ｔ にも対応しようと頑張っています–ゲームフレームワークとしてマイナーなので

アピールしようと必死です–よろしくね