トマシープが学ぶ

Mac/Unity/AR好きのミーハー初心者 記事内容は自分用のメモ。何も求めないで

Unity公式VRサンプルをもとに雪だるまシューティングゲーム

これに応募する作品を作りました。

engineerplus.net

このコンテストは2018/2/18に東京で行われる「学生VR Meet up 2018」に参加できない可哀想な地方学生が、少しでも関われるようにと企画されたものらしいです。

vr.engineerplus.net

プログラミングコンテストについて
Unityを利用したVRコンテストと、プログラミング言語のコンテストを事前に実施し、イベントに来れない全国の学生にも機会を提供します。

 締め切りがあと二日ということに今気づいたので今日1日で作りたいです。

<完成動画>

www.youtube.com

VR Samples 

このアセットをいじれば良いそうです。

説明にはOculusとGearVR対応と書いてありますが、WinMRでも動きました。

4つのサンプルシーンがあります。

基本的に視線で操るので、コントローラーがなくてもキーボードやマウスで操れます。WinMRのコントローラーだと小さいメニューボタンが決定ボタン(クリック)でした。

SDKはOpenVRがよかったです。

f:id:bibinbaleo:20180212132310p:plain

Flyer

視線で飛行機を動かして輪っかをくぐっていくゲームです。

f:id:bibinbaleo:20180212131819p:plain

あんまりおもしろくありません。360度見渡せないし。

f:id:bibinbaleo:20180212131823p:plain

ただパーティクルで放射線を表現しているのがかっこよかったです。

f:id:bibinbaleo:20180212132345p:plain

 

Shooter180/360

的あてです。これもコントローラーで手を動かすのではなく、右に伸びている手が頭についている感じです。

f:id:bibinbaleo:20180212131830p:plain

f:id:bibinbaleo:20180212131833p:plain

Maze

上から見下ろして、人形を動かして迷路をゴールするゲーム。

操作方法がわかりにくかったけど、行きたい先を見つめてダブルタップしたらその場所に自動で進んでくれる。

f:id:bibinbaleo:20180212131836p:plain

線はLineRendereで引かれている

f:id:bibinbaleo:20180212133723p:plain

移動はNavMesh

f:id:bibinbaleo:20180212133720p:plain

f:id:bibinbaleo:20180212133734p:plain

UI

おしゃれ。視線を移動したらアンダーラインがスッて動く

f:id:bibinbaleo:20180212131842p:plain

説明画面はこっちだよって案内を出してくれる。

f:id:bibinbaleo:20180212133901p:plain

ゲーム中の残り時間は円型のバーで視覚的に出しているけど、正直一回目は気づかなかった。しかも円の真ん中にあるのは残り時間じゃなくて得点。

わかりにくいと思う。

f:id:bibinbaleo:20180212131830p:plain

ライティング

全部のシーンそうですが、白とグレーのグラデーションがかっこいいですね。

マテリアルのSpecularを黒にしたり、

f:id:bibinbaleo:20180212132621p:plain

環境光をこんな感じにしたりして作っているようです。

f:id:bibinbaleo:20180212132820p:plain

ハック

さて、どうしよう・・・

一番楽しかったのはやっぱりシューターかな・・・?

ということで的あてゲームを雪だるまを炎で燃やして、春が来るゲームに変えます。

時間は30秒にします。

Shooting Gallery ControllerでGameLengthを30にします

f:id:bibinbaleo:20180212141311p:plain

的を変えるのはよくわからなかったので、デフォルトのTargetの子オブジェクトに雪だるまを設置して、デフォルトのやつはマテリアルを透明にしました。

f:id:bibinbaleo:20180212150734p:plain

f:id:bibinbaleo:20180212150738p:plain

f:id:bibinbaleo:20180212150741p:plain

銃で撃たれたときに落ちてくるものはシルクハットにしました。

poly.google.com

これはShooting TargetについているDestroy Prefabにつけます。

f:id:bibinbaleo:20180212203005p:plain

銃と腕の色はPaintで簡単にかえれました。

f:id:bibinbaleo:20180212150438p:plain

f:id:bibinbaleo:20180212150445p:plain

また今回は雪だるまを燃やすので銃を撃ったら炎を出すようにしました。

Shooting Gallery GunのFlareParticleを変えます。

f:id:bibinbaleo:20180212170708p:plain

f:id:bibinbaleo:20180212170611p:plain

そのままだと使いにくかったので少し数値を変えました。とりあえずLoopをはずしたらいい

f:id:bibinbaleo:20180212170616p:plain

f:id:bibinbaleo:20180213152437p:plain

終わったら桜を咲かせる

ShootingGalleryController.csの中の private IEnumerator PlayPhase ()がゲーム終了時に呼び出されるので、その中にtree.SetActive(true); と書いておくと桜が咲く。

private IEnumerator EndPhase ()で再スタートなのでそこにfalseを書いておく。

これを探すのに1時間ぐらいかかった。つらい。

いい桜モデルがなかったので結局絵にしました。

f:id:bibinbaleo:20180213140807p:plain

あと空とかも入れました。

効果音・BGM

なぜか知りませんが、Outputに何か入ってたら音が鳴らなかったので外しました。

f:id:bibinbaleo:20180212170835p:plain

dova-s.jp

その他

UIとかは適宜変えました。

f:id:bibinbaleo:20180212231503p:plain

ちなみにUIの表示非表示はCanvas GroupのAlphaで制御していました。

f:id:bibinbaleo:20180213122124p:plain

照準も大きくしました。あとスコアではなく残り時間を表示しました。

f:id:bibinbaleo:20180212231555p:plain

途中でスコア表示の位置がおかしくなった・・・本当は銃近くなのに・・・

戻し方がわからない

Shooter WeaponについているUI Movementを外したら元に戻りました。

f:id:bibinbaleo:20180213121954p:plain

f:id:bibinbaleo:20180213122309p:plain

でも元のプロジェクトはチェック入っててもちゃんと動いているのに、なんでだろうな?

提出

ビルドはMock HMD -Viveでと書かれていました。実行してみたけど視線操作ができません。どうやって動作確認するんでしょうね・・・Viveだったら動くのか?

f:id:bibinbaleo:20180213135458p:plain

新しいフォルダを作ってビルドします。最初exeだけ出せばいいかと思ってた。危ない

f:id:bibinbaleo:20180213135456p:plain

docs.unity3d.com

最後に

応募している人いるのでしょうか?twitterで調べても誰もつぶやいていません。

あとニックネームで応募させてほしい・・・

でも楽しかったです。

www.youtube.com

親にプレイしてもらったら、罪悪感があるといわれました。

unity3d.com

 

勝手にお家でVtuberハッカソン参加した。

Vtuberハッカソン

2/24,25に東京で行われるVtuberハッカソンに参加できないので勝手にお家から参加します。

peatix.com

2月はすでに2回東京に行っているし、今後も就活で行くかもしれないのでそんなホイホイとはいけない。戒めないと。

一応本番に習い二日間で、1:30の動画を作り、youtubeにアップしました。

ちなみに当日はバイトなのでその前の週の今日にしています。

キャラはプロ生ちゃんを使いました。

pronama.azurewebsites.net

ただ規約に本人以外として使うのは禁止と書いていたので、一応本体は右上のビビンバということにしました。(裏設定)

f:id:bibinbaleo:20180217223034p:plain

これならプロ生ちゃんが口パクしてなくても、声が上坂すみれじゃなくても問題ないだろう。

完成したのがこちらです。

www.youtube.com

流れ

Evernoteにやりたいシーンとシナリオを書き出しました。

f:id:bibinbaleo:20180217215527p:plain

やりたいネタを全部詰め込みました。

・文字を掴む

・実写360度映像

・お家

・VRchat(カラオケ

・ゼンリンのやつ

これを元にボイスロイドとゆっくりムービーメーカ(YMM)であらかじめ1分30秒の台本(喋ること)を打ち込んで実際の流れを決めました。 

bibinbaleo.hatenablog.com

次にUnityでシーンを作って、撮影します。画面録画はOBSでやりました。これは以前の記事と同じです。

bibinbaleo.hatenablog.com

あとで自分の声に差し替えようかと思ったのですが、恥ずかしいのとめんどくさいので結局ずん子ちゃんのままにしました。Vtuber度が下がってしまう。

あと口パク(OVR)が動かなかった。

シーンの説明

冒頭(実写+文字)

f:id:bibinbaleo:20180217221452p:plain

全体的に文字ばかりでごちゃごちゃしてしまいました。

あとめっちゃ前のめり

 

仕組み的にはskyboxで360度映像を流して、

bibinbaleo.hatenablog.com

FlyingTextを置いただけです。

bibinbaleo.hatenablog.com

掴めるようにするのはVRTKを使っています。

コントローラーを出さずに掴むのに少し苦労しましたが、Example32のハンドモデルを持って来てmeshを非表示にして対応しました。

negilab-unity.com

takoyakiroom.hatenablog.com

あとはYMMでずん子ちゃんボイスを流しながら手振り身振りを合わせました

部屋

f:id:bibinbaleo:20180217221503p:plain

 部屋はいつものです。

bibinbaleo.hatenablog.com

twitterには書きましたがタッチでUIを表示できるようにしたのでそれの自慢がてら入れました。

f:id:bibinbaleo:20180217221457p:plain

この顔が可愛い。

VRchat

f:id:bibinbaleo:20180217221508p:plain

VRモードでやると視野が狭くなって部屋を紹介するのに向いていなかったのでデスクトップモードで撮りました。

自慢したいために入れたので脈略がなさすぎる。

最後の街

f:id:bibinbaleo:20180217221514p:plain

これもZENRINの福岡の街のアセットを使いたいためだけに入れました。

そのうち歩き回りたいです。

PostPeocessingをガンガンにかけたのでここだけ画面が綺麗。

ただマウスカーソルが映ったままっていうね。(バのとこ)

ちなみにここの動きは適当に色々な動きをしてあとでカット編集でセリフに合わせました。

編集

 

本当はYMMで完結させたかったのですが、動画を全然読み込んでくれないので字幕とボイスロイド音声だけ書き出して、aviutlで背景をブルーバックにしてiMovieに読み込みました。

support.apple.com

iMovie側でブルースクリーンは透過できます。

f:id:bibinbaleo:20180217214308p:plain

あとはBGMつけたりしました。こちらをお借りしました。

dova-s.jp

またDellHMDの画像を重ねようと思いましたが、恐ろしいことに画像は二つ以上重ねられないようです。(一つしか重ねられない)

f:id:bibinbaleo:20180217214315p:plain

すでにブルーバックを重ねているので、その間に入り込もうとしてくる。

結局画像を重ねるのは諦めました。めんどくさい。

qiita.com

サムネ

youtuberといったらカスタムサムネ!

正直これ以外(Vtuber、動画編集、youtube投稿)は全部やったことがあるのでサムネを作って初めてこのハッカソンに勝手に参加した意義があります。

そのくらい大事!だけど何も思いつかない。

そんな時は先人のサムネを見てみよう!

シロちゃん

f:id:bibinbaleo:20180217231329p:plainf:id:bibinbaleo:20180217231356p:plain

キズナアイ

f:id:bibinbaleo:20180217231341p:plain

ルナちゃん

f:id:bibinbaleo:20180217231349p:plain

ミライアカリ

水色の枠で囲ってあるの真似したい。

f:id:bibinbaleo:20180217231944p:plain

魔王の息子わんわん

私の好きなクソサムネ。

f:id:bibinbaleo:20180217231335p:plain

自分の動画の身の丈にあったサムネっていいと思う。サムネ詐欺は良くない。

分析

私なりの分析

共通点

・主人公キャラをバストアップサイズ以上で入れる

・背景はごちゃごちゃしていない2D画像

・文字は二重囲い

・文字は暖色が多い

・何か一つシンプルマークが入っている(星やハート、吹き出し、顔文字、その動画内容を象徴する何か)

特徴

・ミライアカリは文字数少なめ(4文字が多い?)

作る

大きさは1280*720

support.google.com

Unityでグリーンバックにして、動画を撮りました

f:id:bibinbaleo:20180218000455p:plain

それをPhotoshopで適当に切り抜いて

f:id:bibinbaleo:20180218000501p:plain

ドロップシャドーで縁取りをして

f:id:bibinbaleo:20180218000506p:plain

イラレでぽくしました。

f:id:bibinbaleo:20180218095527p:plain

背景は実写の福岡がいいかなと思って動画で使った360度写真をぼかしました。

f:id:bibinbaleo:20180218095529p:plain

背景に合わせて色を変えました。

f:id:bibinbaleo:20180218095534p:plain

ちなみに使いませんでしたが、このサイトに町並みイラストが無料でありました。

town-illust.com

文字に隠れてしまったので使いませんでしたが、すごいクオリティ。

f:id:bibinbaleo:20180218102931p:plain

Youtube編集

終了画面とアノテーション

ここでチャンネル登録ボタンや動画へのリンクが貼れます。

f:id:bibinbaleo:20180218103156p:plain

f:id:bibinbaleo:20180218103202p:plain

動画を選んで

f:id:bibinbaleo:20180218103204p:plain

こんな感じで表示されます。

f:id:bibinbaleo:20180218103212p:plain

カード

動画の途中で右側にオススメ動画やアンケートを表示できます。

f:id:bibinbaleo:20180218103533p:plain

なんとなくアンケートをつけてみました。

f:id:bibinbaleo:20180218103617p:plain

動画にはカスタムメッセージや紹介テキストがつけれます。

f:id:bibinbaleo:20180218103537p:plain

ティザーテキストはこんな感じで表示されて

f:id:bibinbaleo:20180218103538p:plain

カスタムメッセージ(にゃー)はこんな感じに動画の下に表示されます。

f:id:bibinbaleo:20180218103209p:plain

Vrchatの自作ワールドを紹介している時に、以前作った紹介動画を貼っておきました。

はい完成!

www.youtube.com

最後に

割と楽しかったです。ボイスロイドなのであまりVtuber感はありませんが、完成したので良いとしましょう。

あといつものことですが画質がすごい悪い。わからぬ。

ハッカソンしたかった・・・楽しそう。東京・・・

コントローラーでキャラの手の形を変える。【WinMR】

animation機能で手の形を変えた.animを使い、コントローラーのトリガーで遷移させる。

はしょってます。

Animation機能でポーズを作る

この動画の1:52あたりから指の設定をしています。詳しくはこちらから

www.youtube.com

キャラのAnimatorからLeft.Hand.Index.1.Stretchedなどを選んで数値を変えると

f:id:bibinbaleo:20180211185531p:plain

指を動かせます。

f:id:bibinbaleo:20180211185534p:plain

めっちゃ大変だったので、何かしらのアセットか、MayaなどのCGソフトで作ったほうがいいと思いました。

Animation機能が使い悪すぎる。

あと最初の謎のポーズから手をまっすぐした状態を作って、片手ずつグーのポーズを作ったけど、片手を動かしたらもう片方も反映されてしまうことに気づいた。

結局同時にグーにすることにした。

 

Animator設定

こちらが詳しいです。

matudozer.blog.fc2.com

あらかじめParametersでguなどの名前のtriggerを作り、

make transitionでanim間に線を引っ張って

Conditionsでさっきのパラメーターを選択

f:id:bibinbaleo:20180211185747p:plain

スクリプトでAnimatorを読み込んだうえで、

public Animator pro;

pro.SetTrigger("gu_L");

 のような感じでSetTriggerが呼ばれたら遷移先のアニメーションが始まる。

Unity標準のVR機能でトリガー取得

今日初めて知ったのですが、Unity標準のVR機能があるそうです。

framesynthesis.jp

SteamVR入れなくてもトリガーとかを取得できるそうです。

こちらを参考にやりました。

qiita.com

トリガーはこんな感じで取れました。

Input.GetAxisでコントローラーの押し込まれ具合が取れます。一番押し込まれると1

if (Input.GetAxis("Trigger R") == 1F)
{
pro.SetTrigger("gu_R");
}

trigger Rというのは自分でInput Managerで設定した名前です。Project SettingのInputから設定できます。

 

 

f:id:bibinbaleo:20180211190250p:plain

f:id:bibinbaleo:20180211190252p:plain

Axisでそれぞれのコントローラーの番号を決めれます。ここに書いています。

docs.unity3d.com

左手のtriggerが9で右が10thです。

 

steamVR Pluginでやる場合はこちらから

cycling.hateblo.jp

完成

そんなこんなで一応トリガー引いたらグーはできました。

f:id:bibinbaleo:20180211185540p:plain

f:id:bibinbaleo:20180211185545p:plain

あんまりうまくいかなかった。

どんどんプロジェクトファイルが壊れていく

VRのUI&UXの事例研究

既存のVRコンテンツのUIのスクショをとるだけ。

このサイトにもかなりまとまっています。

xR.design: AR & VR Interaction Examples

どうやって分類するのがいいのかいまいちわからないので手探りです。

選択・メニュー

WindowsMRのホーム

Hololensと同じUI

Windows8からのフラットデザインで統一している。

だがよくみるとUIが背後の黒いパネルからちょっと浮いてる(気がする)

f:id:bibinbaleo:20180206170147p:plain

Morgan lives in a Rocket House in VR

パネル式

f:id:bibinbaleo:20180206170153p:plain

 

SYMMETRY alfa

左のコントローラーの上に出て、右のコントローラーのポインターで選択。

f:id:bibinbaleo:20180206170201p:plainf:id:bibinbaleo:20180206170203p:plain

STYLY

f:id:bibinbaleo:20180206172431p:plain

NEUTRANS

f:id:bibinbaleo:20180206170158p:plain

Spatial Gate

球をグリップボタンを押しながら選択で、遠隔で手元に持ってこれる。

トリガーボタンで発射して、その球の写真の中に入れる。

f:id:bibinbaleo:20180206170215p:plain

Live2D VR Girls

視線操作。ずっと見つめて丸が一周したら選択

f:id:bibinbaleo:20180206185217p:plain

f:id:bibinbaleo:20180206185226p:plain

Mermaid VR

小さくてやりにくい。

f:id:bibinbaleo:20180206185213p:plain

VRchat

最初に出てくる文字だけのメニューは小さいが、

f:id:bibinbaleo:20180206185530p:plain

アバターやワールド選択など画像付きのメニューはでかい。

視線の先に出る。

f:id:bibinbaleo:20180206185525p:plain

steamVR

f:id:bibinbaleo:20180206190001p:plain

RecRoom

立体的。右手の腕時計を見る動作をするとメニューが現れる。

基本的にボタンを押す動作をする。

f:id:bibinbaleo:20180206191712p:plain

カメラはつかむ

f:id:bibinbaleo:20180206191717p:plain

Blocks

左のコントローラーにメニューが出てくる。

f:id:bibinbaleo:20180206210152p:plain

選択すると項目が少し浮き上がるf:id:bibinbaleo:20180206210151p:plain

Bigscreen Beta

一番小さいメニュー画面

f:id:bibinbaleo:20180206192336p:plain

Altscape

f:id:bibinbaleo:20180206194543p:plain

メニューは丸くてかわいい。ちょっと小さい

f:id:bibinbaleo:20180206194544p:plain

Facebook Spaces

4つのボタンが両腕についている。

f:id:bibinbaleo:20180207145116p:plain

ボタンは押し込む。

f:id:bibinbaleo:20180207145111p:plain

f:id:bibinbaleo:20180207160553p:plain

VRカノジョ

目線で選んで、トリガーで決定。

f:id:bibinbaleo:20180207160322p:plain

頭の動きで選択。

f:id:bibinbaleo:20180207160319p:plain

VRTK

f:id:bibinbaleo:20180216135506p:plain

スライドバー

f:id:bibinbaleo:20180206185947p:plain

f:id:bibinbaleo:20180206185951p:plain

f:id:bibinbaleo:20180206172415p:plain

VRカノジョは頭で動かす。

f:id:bibinbaleo:20180207160415p:plain

スライドバーではないけど、recroomは届いたアイテム箱の開封を実際に手をスライドさせている。

f:id:bibinbaleo:20180206192035p:plain

 

文字入力

難しいUI

 

Youtube VR

死ぬほどやりにくい。ちなみにテレビ版Youtubeもこんな感じのキーボードで、リモコンの左右上下キーで選択させる。Youtubeはもっとがんばって。

f:id:bibinbaleo:20180206171451p:plain

Recroomは実際に押す。楽しい。これが正解なのでは???

f:id:bibinbaleo:20180206191730p:plain

MermaidVR

f:id:bibinbaleo:20180206170159p:plain

bigscreen

文字が大きい。

f:id:bibinbaleo:20180206192316p:plain

Altscape

f:id:bibinbaleo:20180206194517p:plain

WinMRのホーム。大きいけど離れてるから入力しにくい。あとすぐキーボードが消える。

f:id:bibinbaleo:20180207145247p:plain

SYMMETRY は音声入力のみ。マイクがないときはどうするんだ

f:id:bibinbaleo:20180206220804p:plain

VRTK

f:id:bibinbaleo:20180216135502p:plain

MRTK

hololens用?

f:id:bibinbaleo:20180216135054p:plain

配布されているドラム式

f:id:bibinbaleo:20180216135059p:plain

楽しい。

f:id:bibinbaleo:20180216135824p:plain

github.com

移動

基本的にwinMRだと上を長押しでワープ

f:id:bibinbaleo:20180206171348p:plain

STYLY

f:id:bibinbaleo:20180206172326p:plain

SteamVR

f:id:bibinbaleo:20180206190040p:plain

Recroom

f:id:bibinbaleo:20180206191745p:plain

Altscape

f:id:bibinbaleo:20180206194501p:plain

NEUTRANS

これは地面に向かってトリガーで移動

f:id:bibinbaleo:20180206172308p:plain

動画

Morgan~

f:id:bibinbaleo:20180206172429p:plain

Mermaid VR

アイコンが小さくてやりずらい。

f:id:bibinbaleo:20180206170237p:plain

Youtube VR

f:id:bibinbaleo:20180203143203p:plain

色選択

スライダー

f:id:bibinbaleo:20180206185947p:plain

一覧から選ぶ

f:id:bibinbaleo:20180206191804p:plain

 

 選ぶ

f:id:bibinbaleo:20180206194436p:plain

Bigscreen Betaはペンキ一覧の中から漬ける。

f:id:bibinbaleo:20180206192347p:plain

NEUTRANSもカラーパレットはあるがf:id:bibinbaleo:20180206170158p:plain

ペンを付ける方式

f:id:bibinbaleo:20180206201040p:plain

メニューの裏側のパレットから筆に絵の具を付ける方式

f:id:bibinbaleo:20180206210255p:plain

facebook space

f:id:bibinbaleo:20180207163035p:plain

めっちゃ書きやすい。

f:id:bibinbaleo:20180207163041p:plain

写真を撮る

facebook spacesはこのジェスチャー

f:id:bibinbaleo:20180207145404p:plain

すごい!ちゃんと手の大きさに合わせた写真が撮れる。しかもこれ、説明とかを見ずたまたまこジェスチャーを初めて2分ぐらいで見つけれたことに驚き。

多分指の折り曲げを変えれることとかがそうさせたんだと思う。

 自撮り棒方式もある

f:id:bibinbaleo:20180207163126p:plain

ほかにも縦長と横長のフレームがある。たぶんfacebooklive用

f:id:bibinbaleo:20180207163223p:plain

SYMMETRY はメニューで選んで右コントローラーの上にカメラが出る。

f:id:bibinbaleo:20180207145923p:plain

 Recroomはカメラをつかみ、

f:id:bibinbaleo:20180206191717p:plain

右手に出てくる。f:id:bibinbaleo:20180207153540p:plain

自撮り棒方式

f:id:bibinbaleo:20180207160500p:plain

 

追記:公式のガイドライン

daydreamもといgoogleのUX担当の人ががVRのUIについて語っている動画。

www.youtube.com

具体的な数値がいっぱいでわかりやすい。日本語で聞きたい

f:id:bibinbaleo:20180206232656p:plain

f:id:bibinbaleo:20180206232906p:plain

最後の方にUnityのCanvasについても語ってた。よくわからないけど、canvas自体の大きさは0.001ぐらい小さくしておいて、それを大きさ1の空オブジェクトの子にしたらスケール変更がしやすいよ的な感じかな??

f:id:bibinbaleo:20180206232652p:plain

 

ここでsketchファイルを配布していた。

Google VR  |  Google Developers

sketchは無料期間が切れてひらけないのでfigmaで開いた。

f:id:bibinbaleo:20180206232256p:plain

UIの距離の話や、アイコン、パネルの並びなどの例があった。

f:id:bibinbaleo:20180206233450p:plain

コピペして使っていいのかな

そういえばsketchとかで作ったUIの配置をUnityに取り込むのってどうやるんだろう?

このskrych>unity使って見たけど動かなかった。

github.com

GoogleCardBoardの時のUIガイドラインもあるそうです。翻訳してくださってる。

vr-lab.voyagegroup.com

 

ちょっと違うけどARkitでappleが出しているガイドラインもある

bibinbaleo.hatenablog.com

 

MicrosoftのMR部門のデザインについて

https://developer.microsoft.com/en-us/windows/mixed-reality/mixed_reality

最後に

ここからどう研究していったらいいのでしょうね・・・

自分で考えた方法と既存手法を比較するとか、すでにあるものを比べて最も良い距離や大きさを導き出すとか?

それかもっと別のとこに注目してもいいかも。

部屋の大きさとか

 

個人的にはキーボードが気になります。

キーボードは物理のキーボードをVR内に持ち込む商品もあります

www.moguravr.com

あとtwitterで見た、腕につけるミニキーボードでコントローラー外の操作をするとか

dmiyamo3.hateblo.jp

文字入力なら、入力速度で数値化が簡単そう。

あと音声入力との兼ね合いもありますね・・・

 

追記:若干ばずった。

f:id:bibinbaleo:20180207150141p:plain

Goromanさんがspaces、lone echo、Mediumをお勧めしてくれた。

lone echoとMediumはoculus専用かつ有料っぽいので実況動画を見ます。

www.youtube.com

www.youtube.com

spacesは最近Vive版が出たのでWinMRでも行けるのでは?と思いやってみたら無事できた。

最初はいつものように頭の位置がすごく高くなるけど、一回テーブルを非表示して、再表示したら治った。

 

というわけでどんどん新しい(無料)VRやって、このページに追加していきます。

本当は有料のもやったほうがいいんだろうな~

最近WinMRでやった無料ゲーム&コンテンツ

 これの第2弾

bibinbaleo.hatenablog.com

steamはこんな感じ

f:id:bibinbaleo:20180206140730p:plain

 映像を見れるやつはこっちにまとめました。

bibinbaleo.hatenablog.com

 

Live2D VR Girls

 女の子と1対1で会話?する短いコンテンツ。Live2Dとは思えない。すごい。操作は視点のみ

store.steampowered.com

f:id:bibinbaleo:20180206143653p:plain

NEUTRANS

お部屋でボール投げたり絵をかいたりできる

store.steampowered.com

f:id:bibinbaleo:20180206143227p:plain

ドールハウスに入るのが楽しい。

Morgan lives in a Rocket House in VR

ショートアニメ。とてもきれい。明るいので好き。

store.steampowered.com

メニューで自分の大きさを変えることができる。Giantにしたら奥のほうの景色も見れた。

f:id:bibinbaleo:20180206143233p:plain

SYMMETRY alpha

skp形式のモデルを読み込んでみることができる。3dwarehouseにアップロードされているモデルも観れる!!!!これいい!ほかの形式も観れるようになったらいいな~

store.steampowered.com

f:id:bibinbaleo:20180206143521p:plain

上からも観れるし、

f:id:bibinbaleo:20180206143529p:plain

等身大になってみることもできる

f:id:bibinbaleo:20180206143528p:plain

遊べなかったもの

Cluster.はWinMRだと位置がずれるし、コントローラーが表示されない。

steamVRで作ってないと厳しい・・・

f:id:bibinbaleo:20180206143516p:plain

FigmaとAdobe XD【UIデザイン】

UIデザインツールにAdobe XDというものがあることを最近知りました。

またFigmoという無料のUiツールもあるそうです。

sketchしか知らなかったので調べてみます。 

bibinbaleo.hatenablog.com

XD

www.adobe.com

プロトタイプが簡単に作れるらしい。スマホでタッチなどのインタラクティブなことが自動で同期されてできる。

去年の10月にベータ版が終わり有料になった

www.webcreatorbox.com

Figma

ブラウザで使える。無料でも使える。

www.figma.com

こちらの説明が詳しかったです。qiita.com

 

初期画面はこんな感じ。

f:id:bibinbaleo:20180205184919p:plain

左上のregion Toolsを押すと

f:id:bibinbaleo:20180205184901p:plain

右側のDesignに画面の大きさ一覧が出る。

f:id:bibinbaleo:20180205184927p:plain

あとは簡単にデザインできる。初見でもわかりやすい。英語だけど

f:id:bibinbaleo:20180205184855p:plain

もう一つ画面を追加して、Prototypeタブでページ遷移を設定できる。

f:id:bibinbaleo:20180205184904p:plain

設定したものは右上のPresentでクリック確認できる。

f:id:bibinbaleo:20180205184900p:plain

 

そしてこちらもXDと同様スマホと同期できる。

play.google.com

アプリを入れてログインして、パソコンで画面を選択したらすぐに反映される!

やばい!楽しい!

f:id:bibinbaleo:20180205185410p:plain

エクスポートはレイヤーごとに設定を行える。

f:id:bibinbaleo:20180205185834p:plain

設定したら右上のマークから一括でエクスポートもできる?

f:id:bibinbaleo:20180205185836p:plain

書き出したのがこれ。

f:id:bibinbaleo:20180205185838p:plain

CODEタブを押すとそのUIのコードが観れる。

f:id:bibinbaleo:20180205190905p:plain

f:id:bibinbaleo:20180205190910p:plain

ここら辺はよくわからないや・・・

そのほかにも複数人でGoogleSlideみたいに同時に作業できるのが強みらしい。

 

ここまで無料でできたのですごい!Sketchも無料期間終えてしまったし、XDも有料なのでこれはとても良い!

最後に

デザインとプログラミングどっちもかじっているのが私の強みなのに、最近全くデザインしてないよ!

WinMRで自分で撮影した360度画像&映像を見る方法まとめ

MermaidVR Video Player

steamにある無料ソフトです。動画のみ見れます。

store.steampowered.com

パソコンの中から動画ファイルを選び、

f:id:bibinbaleo:20180203163037p:plain

メニューから360度モードにします。

180度モードとかもあってすごい。

f:id:bibinbaleo:20180203163033p:plain

入り込めました!

f:id:bibinbaleo:20180203163206p:plain

背景の設定もできます。

f:id:bibinbaleo:20180203161253p:plain

ニコニコ動画youtubeも観れます。360度では見れないです。

www.gadget-underwood.com

SpatialGate for WinMR

画像のみ見れます。

www.microsoft.com

日本の方が作っていて、前々からtwitterで見ていたのでwinmrにも対応してくださってうれしかったです。演出がすごいきれい。

読み込む画像はピクチャフォルダ内に入れておけば、ゲーム内で空の球を押してimportできます。

Youtube VR

steamの無料アプリ。公式

store.steampowered.com

自分で360度動画をyoutubeにアップロードして見れました。

f:id:bibinbaleo:20180203143014p:plain

f:id:bibinbaleo:20180203143117p:plain

もちろん一般のVR動画も観れるし、

f:id:bibinbaleo:20180203143125p:plain

平面の動画も見れます。

f:id:bibinbaleo:20180203143203p:plain

自分の動画を簡単に見れるようになったら便利だなと思います。今は検索するしかないっぽい??

Unity

unityでも見れます。私は今までこの方法で見ていました。

bibinbaleo.hatenablog.com

有料

 

Moon VR Video Player

980円。5ちゃんのwinmr掲示板で紹介されてた。

store.steampowered.com

Simple VR Video Player

798円。エロいやつを見るのにこれが一番いいらしい。

store.steampowered.com

Power Media Player MR

有料のwinMRアプリです。4650円。高いわりに評判がめっちゃ悪い。

www.microsoft.com

最後に

動画も画像も観れる奴はないのかな・・・

Thetaに公式で出してほしい。

bigscreenでも平面のyoutubeなら見れます。というか自分のデスクトップを取り込めるだけです。

store.steampowered.com