4
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

CYBIRDエンジニアAdvent Calendar 2015

Day 22

サーベルが振りたかった

Last updated at Posted at 2015-12-22

おきまりの

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

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

この話の対象

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

何の話?

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

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

道具立て

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いいですね。僕は右出し派です

4
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?