おきまりの

CYBIRDエンジニア Advent Calendar 2015 22日目担当のホームページビルダー @cy-yuto-kurosawa です。
かっこいいアカウント名つけとけばよかった。
週末に書くつもりが月曜日まで寝込んでて当日朝に書いてます

昨日はかつて共に不良(ゲームの開発)をしていた @segasho 君の量産型ゲームのサーバー運用をMSPに委託する話だったよです。
まだよんでないけどもじつにきょうみぶかいですね

この話の対象

ライトよりビームな人
セーバーよりサーベルな人
落書きを読むのが好きな人
--
革新的なことはしてません

何の話？

先週いろいろなところで話題になっていたLightsaber Escape が面白かったので、
とりあえずケータイ振り回すとPC上の何か棒状のものが連動して動くところまでやってみようと

思っただけで前日まで経過しちゃってました。

道具立て

Phoenix Framework v1.1.0
three.js r73

Phoenix

デフォルトのビルドシステムの Brunch に馴染みがなかったのでGulpを使いました。
こっちもあんま知らないけれど、日本語の情報が探しやすかったので。
寝こむ前に mix phoenix.new した時点の最新版はv1.0.4だったのですが、WebSocketを受け持ってくれるphoenix.js をバベる際にエラーが出たため、このファイルだけGithub上の開発ブランチから最新のものを落として使用しました。
その翌日くらいに1.1.0がリリースされ、babelのエラーも解消されていたので意味の薄い検証でしたが・・

ケータイから受け取ったdeviceorientation, devicemotionをPCに渡すだけなので、
公式ドキュメントの channel の内容ほぼそのままです。

mix phoenix.server 後はケータイ用にQRを出すため、localhostではなくプライベートIPで開きます。
多分設定ファイルでどうにかできるんだろうけど大した手間じゃないので調べてません。

three.js (とJavascript)

ジャイロセンサに合わせて動かすのはまぁなんとかそれらしくできましたが、
加速度センサの値を移動にどう当てはめればいいのやら・・ぜんぜんわかりません。

requestAnimationFrame で「ケータイから送信」を行っているので、ものすごい頻度で通信してます。
どうにかしようとセンサのデータを間引いてから投げつけてみたりもしたのですが、これだとビームサーベルが瞬間移動してしまったため断念しました。
間引いた部分を描画時に何となく埋めるか、投げるのを配列にしてなんとかすればいいんですかね・・

もの

.

まとめ

られるほどできてませんごめんなさい

最後に

そで余ってる系では忍野扇ちゃんがいいです。愚か者呼ばわりされたい

さて、明日は @cy-mitsuki さんの「DevToolsのTimelineパネルを見ながら、レンダリングの仕組みを理解する」です。
DevToolsいいですね。僕は右出し派です