ブルーノのC#プログラミング & unity勉強日記

プログラミング素人、ブルーノの自主勉強ノートです。他のプログラミングを勉強したい方の助けになれば幸いです。その他趣味の雑記もしていきたいです

Unity / GUI(サブカメラ編)

f:id:covory10101101276:20180306153008j:plain

ノートルダム大聖堂

 

みなさんこんにちは🌚

スマブラでロイを極めようと思って日々練習しているものの空ダの3式が安定しないブルーノです。ベクトル操作エクスプロージョン強いんだけどなあ〜

 

さて今回もGUIということで、ゲームでよくある画面端の別画面を作ってみます。具体的に例を挙げるならゼルダのダンジョンマップとかですね。

 

サブカメラについて

カメラをもうひとつ使用して上から主人公を投影し、そのカメラを画面隅に配置する、という流れならなんとなく想像はつきますがそれでは普通なので少しこれを変えてみます。例えばマップ上では主人公の位置を点で表示する事で普通にキャラクターを真上から見下ろすよりその位置はわかりやすくなると思います。

f:id:covory10101101276:20180307144455p:plain

というわけでまた風景を作ってみました。相変わらずこのクオリティを作るのに一瞬でできてしまうのはすごいですよね。

 

では、カメラをひとつ追加しましょう。

f:id:covory10101101276:20180309135332p:plain

f:id:covory10101101276:20180309135402p:plain

名前を「SubCamera」にしておきました。この時のポイントとして、単にカメラを追加するだけでは二つの画面が重なってしまいうまくゲーム画面に表示できません。そこで

 このカメラのインスペクターの「Viewport Rect」を以下のように編集しています。

f:id:covory10101101276:20180309135647p:plain

X,Yがカメラの座標、W,Hがその幅と高さになります。このように設定してゲームを再生すると

f:id:covory10101101276:20180309135740p:plain

左下にもカメラが!!

これを今回は見下ろしタイプのカメラにして、イーサンくんを追従するようにしたいと思います。もちろんメインカメラもイーサンくんを追いかけるようにしたいです。

f:id:covory10101101276:20180309140144p:plain

f:id:covory10101101276:20180309140217p:plain

向きを下に向けて、イーサンくんの真上に配置しました。次にスクリプトを書いてみます...

f:id:covory10101101276:20180309155906p:plain

うまくいかない....なぜだ...?

調べてみると....

f:id:covory10101101276:20180309160023p:plain

Vector3は構造体だった!

構造体の値は呼び出しても得られるのはそのコピーなので直接値を変更できないんでしたね。

ではどうするか調べてみたところ、Vector3構造体を別に用意して、その値を変更してからそれを代入してやれば良いそうです。

f:id:covory10101101276:20180309172002p:plain

こんなんでどうでしょう。

f:id:covory10101101276:20180309172046p:plain

サブカメラがついてきた!!メインカメラも同じ要領でイーサンに追従させます

f:id:covory10101101276:20180309172702p:plain

ゲーム画面っぽいですね!ですが現在この画面、二つほど気になった点があります。

・カメラはついてくるが向きは変わらないので後ろが永久にわからない

・マップのイーサンくんが小さすぎていまいちよくわからない&向きがわからない

この二つです。

ひとつめはイーサンくんの向きを取得、そしてその後ろの座標を計算しイーサンくんと同じ向きで配置....って

めちゃくちゃ難しい!!

どーやるんだ....

探索を続けて原始的ですがようやく突破口を発見しました!!

learn-unity.herokuapp.com

こちらのサイトを参考にさせていただきました。

f:id:covory10101101276:20180309211328p:plain

15-16行目でまずイーサンくんと同じ座標・方向に変更し、TransLateメソッドで指定した分だけ座標を移動します。この移動する距離というのが現在の向きを参照するようで、そのおかげで向きを変更しても常に背後を取ってくれているようです。これを探すのに丸一日かかった.....

最後にLookAtメソッドでイーサンくんの方を向くようにカメラを向かせ(18行目)、そのあとにさらにカメラを上に移動することで(20行目)視界を広くしています。

f:id:covory10101101276:20180309212146p:plain

感無量です😭

ですがあと一息。左下のイーサンくんを見やすくしましょう。

そこで、まず大きめの矢印をイーサンくんと同じ位置に配置し、その向きをイーサンくんと揃えて向きをわかりやすくします。

f:id:covory10101101276:20180309214007p:plain

この再生ボタン使えそうだな(苦肉)

この再生ボタンのみインポートさせていただきます笑

こちらの実装はとても簡単です。画像をサブカメラの前に持ってきて...

f:id:covory10101101276:20180309214615p:plain

イーサンくんの子に設定します。

f:id:covory10101101276:20180309214701p:plain

これでイーサンくんと座標、向きを共有します。

f:id:covory10101101276:20180309214847p:plain

それっぽくできました!!

いやあ長かった!この記事を作るのに実に2日間以上もの時間がかかっていました!

Learning / Unityさんありがとう😂

これだけ時間がかかったのに後出しなんですが実はこれも前回と同じレガシーGUIなんです(>_<)今はあまり使われない...

この画面だからこそこう見えているのであってスマホやPCの大きさによっては最適な画面にならないことも十分あり得るのです。そこで登場するのがUnityUI(nGUI)というGUI編の本編です!!次回はこれについてやっていきたいと思います。

 

Nintendo Switchスマブラの新作が発表されましたね。スイッチは持っていないので自分的には複雑ですが、いざ画面が発表されたらとても買いたくなるんだろうなあ...

いやいや、まずは別のゲームたちを消化しなくては!とりあえずモンハンだ😄