トマシープが学ぶ

Unity/VR/AR/デザイン好きのミーハー 記事内容は自分用のメモです

VRのキーボードの位置と大きさを数値化したい

修論を一人孤独に書いてても、恐ろしいほどやる気が出ないし色々詰まってしまったのでブログに書いています。

私以外には通じない文章がいくつかありますがsorryです。

VRのいろんなアプリ内で表示されるキーボードの位置や大きさを数字化して、平均とかを取りたい。

そしてそれを参考に自分で作ったアプリでキーボードを配置したい!!!」

という目標があります。

SteamのVRゲームとかだったらワンチャン、位置を第3者ソフト?とかで取れるのかもしれないですが、OculusGoは流石に無理ですよね?

そこで考えたのが、OculusGoは3Dofで自分は移動できないからどこから見てもキーボードの大きさは一緒。

角度さえ合っていれば。

それなら、

「同じ条件で正面からのスクリーンショットを撮影して、イラレ等の画像ソフトでキーボード部分の大きさや位置を測ればいいのではないか」

と思いました。

スクショを撮る

ということでOculusGoを水平なところに置いて、できるだけ正面を向くように動かして、アプリのスクリーンショットを撮りました。

f:id:bibinbaleo:20181127221644p:plain

f:id:bibinbaleo:20181126215716p:plain

ただこれを撮るのがめっちゃ大変でした。

問題その1:キャスティング機能が使えない

OculusGoを被ったまま、水平なところに置くのは難しいので、キャスティング機能スマホでアプリ画面を見ながらGoを回転させて、スマホでその画面をスクリーンショットするという形式を撮りたかった。

f:id:bibinbaleo:20181126221531j:plain

(こういう感じで横長に撮影できる)

でも、キーボードの付いているアプリって動画検索系アプリが多くて、キャスティング制限がかかっているものが半分ぐらいなんですよ!!!!

そういう場合は仕方なくGo内の撮影機能を使うんだけど、それだと正面がどこかがアバウトにしか分からない。

f:id:bibinbaleo:20181126220504p:plain

こんな感じでちょっとずれちゃう、それじゃ同じ条件でキーボードの大きさを計測できない!

しかも正方形!!!キャスティング機能でスマホスクショするやつと大きさも形も違う!!

 

今回キーボードがあるアプリを14個見つけたけど、キャスティングができないのが6個、キャスティングもGo内撮影もできないのが1つでした(YouTubeアプリ)。

f:id:bibinbaleo:20181126220451p:plain

YouTubeアプリの直撮り)

なんならただのシューティングゲームなのにキャスティング制限かかっているやつもありました。

f:id:bibinbaleo:20181126221717p:plain

多分製作者がアプリの設定で、「外部への〜を許可しない」っていうのにチャックを入れてるからだと思います。

Go内の撮影機能でまっすぐに取れない問題の解決策としては、動画撮影モードにして、水平に置いて360度回して、あとでまっすぐなところのスクショを取ればいいということに気づきました。

めっちゃめんどくさいけど。

そんな方法で撮影しました。

f:id:bibinbaleo:20181126223639p:plain

f:id:bibinbaleo:20181126223641p:plain

そもそも水平に置いてもちょっとグラグラするんですよね。

鼻の部分の布が少し底面より飛び出しているから。

f:id:bibinbaleo:20181127221620p:plain

にゃあああああああんンンンンん

問題その2:水平にしたら見えない!

そもそもキーボードが下の方にありすぎて、水平にGoを置いたらキーボードが見えないものが2つありました。

まずFirefoxのアプリ。水平にして撮影したらこんな感じ

f:id:bibinbaleo:20181126221503j:plain

斜めにしないとキーボードが映りません。

f:id:bibinbaleo:20181126221508j:plain

名前が出てこないけど、このアプリもめっちゃキーボード小さいし下の方にあります。

f:id:bibinbaleo:20181126222541p:plain

こういうのどうするんだ!!!

イラレで大きさはかる

とりあえず諸々の問題を無視して、キーボードの大きさを図ります。

画像の中の一部のオブジェクトの大きさを測るのに最適なソフトがわからなかったので、イラレでやりました。XDとかの方がいいのかな?

とりあえず画像を全部読み込んで、キーボードの部分を長方形ツールで囲みます。

f:id:bibinbaleo:20181126215000p:plain

すると上に長方形の位置とWidth,Heightが表示されるのでそれをメモする。

f:id:bibinbaleo:20181126214808p:plain

X,Yは長方形の真ん中の値。左上が0

f:id:bibinbaleo:20181127103541p:plain

 

こんな感じです。

f:id:bibinbaleo:20181126214817p:plain

全部レイヤー分けてる。

f:id:bibinbaleo:20181126223251p:plain

正方形のものと、長方形のものは両方で撮影できるアプリで、同じキーボードを撮影して、キーボード部分を重ねたら正方形と長方形の比率がわかるんじゃないかと思ったけど、微妙にずれる。

f:id:bibinbaleo:20181126223602p:plain

f:id:bibinbaleo:20181126225158p:plain

まずぴったり重ねれないし、重ねてもアプリによって比率が違う。正方形の位置が微妙に違うでしょ。

f:id:bibinbaleo:20181126225157p:plain

これを元に他の、正方形だけでしか撮影できないやつの大きさを合わせてもダメなんですよ

そもそも正面を目視で決めてるからね。どっちも。

あああまじでやばいな。

表とかほぼほぼ作ったことないから無茶苦茶やで。

あと正方形と長方形は無理やり大きさ合わせてるから本当はごっちゃにしちゃダメ。

f:id:bibinbaleo:20181126225339p:plain

思ったけど、位置のXは基本的に気にしなくていいんだよね。これが正面だから。

本来全部511.5になってないとダメなのです。

10,11はこういう左側にキーボードがあるやつだから300付近になってても問題ないけど

f:id:bibinbaleo:20181126225644p:plain

一応平均をとるとyの値は501と真ん中より下。真ん中は379

f:id:bibinbaleo:20181127103331p:plain

f:id:bibinbaleo:20181127103541p:plain

自分のアプリに適用する

自分で最初に適当に配置して作ったアプリはこんな感じ

f:id:bibinbaleo:20181127102820j:plain

これの数値、yは381と平均の501よりだいぶ上。

f:id:bibinbaleo:20181127103043p:plain

もっと下の方に置かないといけない。

大きさも平均は576,238なのに769,230と幅がかなり大きすぎた。

 

さて、平均がわかったところで、どうやってUnityで適用するのか。

イラレで平均の大きさと位置のところに長方形を敷きます。

f:id:bibinbaleo:20181127113230p:plain

それを元に目算で同じ場所に置きました。

f:id:bibinbaleo:20181127105344p:plain

もう無理

最後に

ブログに書き出して本当に良かった。

誰も見てくれないGoogleドキュメントにちゃんとした文章を書くのが苦痛で仕方なかった。(めっちゃ書きにくいし)

でもアウトプットしないと自分が次に何したらいいか分からない。

ブログ最高。

 

ぐち

修論をちょぼちょぼと書いているのですが、形式がブログみたいになったしまう。

自分語り始めちゃうし。

多分必要のない図(スクリーンショット)をめっちゃ載せてしまう。

しかも文章の間に。

多分論文って図をある程度まとめて章の途中に挟んで、文章には(図8)とか書くものだと思うんですけど、一行ごとに図を挟んじゃう><

しかもGoogleDocumentで書いてるんですけど、図を挟むのめっちゃむずい。

レイアウトが死ぬ。よくわからんくなる。

もういっそブログに書いた方が綺麗に書けるんじゃないかと思ったので書きました。

なぜあなたは論文が書けないのか?

なんで?

卒業論文・修士論文作成の要点整理 実践マニュアル