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

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

Unityスクリプト / 開発目線編

f:id:covory10101101276:20180327171342j:plain

エッフェル塔

 

みなさんこんにちは🌚

すっかり暖かくなり、日が昇る時間も早くなって本格的に生活リズムを学校生活モードに戻しつつあるブルーノです。部活も始まり忙しくはなりますが、勉強の方も続けたいと思います!!

さて今回からは、Unityで使える、必須!というスクリプトを勉強していきたいと思います!見栄えのいいモデルや綺麗なサウンドももちろん大事ですが、世界の挙動を知らなければ面白いゲームは作れない!というわけでどんどん勉強していきます!今回は開発者用必須スクリプト編です!

 

UnityEngine.Debugクラス

デバッグ中にゲームの情報を出力したり、ゲームを一時停止したりすることができるメソッドを内包するまさにデバッグ用のクラスです。

 

任意の文字列を出力

DebugクラスのLogメソッドを使うと、Unityエディタ上でゲームを再生している間に、Consoleビューにパラメータとして渡した文字列を表示させられます。

Logメソッド

public static void Log(object message, object context)

 [object message]の部分に文字列を入力すると、Consoleビューにこの文字列が表示されます。このコードが実行されたタイミングがわかるというわけですね。

f:id:covory10101101276:20180327174658p:plain

[object context]の部分にはそのシーン上のゲームオブジェクト名を入力することで、デバッグログ選択時にそのオブジェクトをオートフォーカスしてくれます。つまり、ここに this 等を入れることで、このデバッグログがどのオブジェクトから出力されているかも表示してくれるというわけです。

f:id:covory10101101276:20180327175523p:plain

f:id:covory10101101276:20180327175535p:plain

 

Logメソッド以外にもLogErrorメソッドと、LogWarningメソッドというものも存在します。これらはその名の通り、先ほどのデバッグログをエラーや警告として発信してくれるメソッドです。コンソールビューでのエラー等が見やすくなるということですね

LogErrorメソッド

public static void LogError(object message, object context)

 

LogWarningメソッド

public static void LogWarning(object message, object context)

f:id:covory10101101276:20180327180324p:plain

 詳しい書き方はDebug.Logメソッドと同じですね。実行すると以下のようになります。

f:id:covory10101101276:20180327180400p:plain

 

ゲームを一時停止

Unityエディタでゲームを実行中、一時停止ボタンかCtrl + Shift + P でゲームを一時停止できます。しかしこの停止のやり方は、デバッガーが自分の目押しで止めるため、特定の瞬間で止めるのはほぼ不可能です。そこで、Debug.Break()メソッドを使うと、スクリプト上からゲームを一時停止できます。気になる瞬間に組み込むことでその編集を容易にできますね。

Breakメソッド

public static void Break();

f:id:covory10101101276:20180327181115p:plain

実行すると以下のようになります。

f:id:covory10101101276:20180327181242p:plain

実行した瞬間に一時停止されました。あれ、Breakの後のエラーや警告も実行されてるじゃないかと思いますが、Breakが止めるのはそのフレームの更新後なので、そのフレーム中の処理は実行されてしまうのです。

 

とりあえず超基本のスクリプト、開発編はここまでにしておきます。

 

スクリプトが大事と冒頭では述べましたが、サウンド作りやモデリングができなければもちろんいけないですよね。何から手をつければ良いのやら...

Unity / GUI(Audio Mixer - オーディオミキサー編)

f:id:covory10101101276:20180321152544j:plain

ロスロケ島

 

みなさんこんにちは🌚

大学の卒業式を終えて先輩方がいなくなってしまいとても悲しい反面おめでたい気持ちも感じられるブルーノです。昔から出会いと別れを頻繁に繰り返す生活を送ってきましたがここまで思い入れがあった方々は初めてでした😢私も自分の勉強を頑張っていきたいです!

さて今回は、BGMやSE、つまり音楽の扱い方を学んでいきたいと思います!

 

Audio Mixer

まずは恒例のアセットストアからサウンドをダウンロードしたいと思います。

f:id:covory10101101276:20180323120926p:plain

今回使うのはこちらの無料の「Warped Fantasy Music Pack」です。

まずはBGMを配置します。「BGM」という名前で空のゲームオブジェクトをシーン上に配置し、Audio Sourceコンポーネントを追加します。

f:id:covory10101101276:20180323121735p:plain

AudioClipに好きなBGMを配置し、[Loop]の欄にチェックを入れればBGMが流れ出します!

では次にAudioMixerを使ってみましょう

プロジェクトブラウザのメニューから新たにAudioMixerを用意します。ここからクリエイトするのは何気に初めてです。

f:id:covory10101101276:20180323122114p:plain

なんか他にもたくさん作ることができるものがあって目移りしそうです笑

Audio Mixerに「Main Mixer」と名前をつけてみましたので開きます。

f:id:covory10101101276:20180323122335p:plain

新しいウィンドウです。そして、先ほど作ったBGMのAudio Sourceのインスペクターの

OutputにこのMainMixerを指定します。

f:id:covory10101101276:20180323122926p:plain

この状態で再生を始めると、Mixerのウィンドウの上に「Edit in Play Mode」というボタンが現れます。Unityのエディターは基本的に再生中の変更は再生が終わると元の状態に戻されてしまいますが音楽は実際に聴きながら編集しなければ難しいため、このEditボタンがあるのです。

f:id:covory10101101276:20180323123621p:plain

さてエディットモードですが、この画面でいう-10と書かれたツマミを上下させると音量が変更できます。ミキサーのインスペクターからも変更でき、数字を入力して変更もできます。

f:id:covory10101101276:20180323123757p:plain

[Add Effect]という欄がありますね。今あるエフェクトはAttenuation、英語で「減衰」とかいう意味だそうです。これで音量を調整できます。そして他にもエコーや歪み等のエフェクトをここから追加できます。

ちなみに今ここにはMasterという全ての音を一緒にしたグループしかありません。BGMとSEを分けてそれぞれ別のエフェクトをかけたい場合は一度エディットモードを終了し、先ほどのAudioMixerウィンドウの左真ん中の[Group]を追加することで別々に編集することも合わせた時の音楽を編集することもできます。

f:id:covory10101101276:20180323130556p:plain

みやすくてやはり便利ですね😀今回はここまでにしておきます。

 

人の縁は不思議なものでつながりを実感することでいくらでもやる気や力が湧いてきます。ちゃんと仲の良い関係を築けることが何かを成し遂げるためには不可欠だなあと最近しみじみと思います。一人で生きていける人間は極僅かですもんね。

Unity / GUI(Button・スライダー編)

f:id:covory10101101276:20180314085436j:plain

ライダル・マウント

 

みなさんこんにちは🌚

久しぶりの投稿になります。フォートナイトにはまっているもののCODとかのようなFPS系のゲームをやったことがないのでちっとも敵を倒せないブルーノです。でも勝てないのに楽しいって変ですよね笑

さて今回は他の様々なGUIの機能を使っていきたいと思います!

 

Button

ほぼ全てのアプリにある代表的なGUIとしてボタン(Button)がありますね。Unity UI ならこれを簡単に扱うことができます。

ヒエラルキーもしくは画面上部の[Game Object]から[Button]を選択します

f:id:covory10101101276:20180320140601p:plain

前回のUIがプロジェクトタブに残っていますね笑

ゲームシーン左上にレガシーUIの時のようにボタンが配置されました。ボタンの中には[Text]というゲームオブジェクトも入っていますが、これはボタンに書かれる文字のことなのでボタンに文字が要らなければ消してしまっても構いません。

 

ボタンの配置

さあButtonのインスペクターを見てみると前回のSpriteの時のようにレクトツールやアンカーが使用可能なのがわかります。

f:id:covory10101101276:20180320220615p:plain

レガシーGUIの時はUIを作成した後さらにスクリプトコンポーネントを作りましたが、UnityUIは下の「On Click」という欄から簡単に設定できます。

右下の+をクリックし、作用させるゲームオブジェクトを選択します。今回は例として[Directional Light]を設定します。

f:id:covory10101101276:20180320221347p:plain

[No Function]の箇所から使用する関数を選択し、[Runtime Only]の部分は発動するタイミングを選べます。たったこれだけで、レガシーUIの時のように色々スクリプトを書かずにボタンの設定画できます。しかも処理にあまり負荷がかからない!!

さて、ボタンといえば、アプリ等でボタンをタップしたりすると音が鳴るものもありますよね?そんな風に、ボタンにSEをつけることもできます。

まず、Buttonのインスペクターの[Add Component]から[Audio] > [Audio Source]を追加します。

f:id:covory10101101276:20180320222421p:plain

使う音声はアセットストアから用意します。

f:id:covory10101101276:20180320222718p:plain

今回はこちらを使わせていただきます。

Audio Sourceの[Audio Clip]から流す音声を選択すれば良いのですが、このままでは音楽は流れません。先ほどのように、[OnClick]からこのButtonを追加し、そのFunctionをこのAudio Clipにしなければなりません

f:id:covory10101101276:20180320223149p:plain

色々メソッドがありますが、この中のPlay()メソッドで、SEを鳴らすことができます。ただしもう一つ!このままではシーン再生時にも音がなってしまうので、Audio Sourceの中の[Play on Awake]の項目のチェックを外しておきましょう。これで大丈夫です。

f:id:covory10101101276:20180320223550p:plain

 

スライダー

今度はよくゲームのオプション等で光度調整や音量調整に使われるスライダーを設定しましょう。今回は回るキューブの回転する速さを変更するスライダーを作ります。

Cubeを新しく作り、以下のスクリプトをつけます。

f:id:covory10101101276:20180320230551p:plain

f:id:covory10101101276:20180320230556p:plain

これはY軸を中心に1秒で一周回転するスクリプトで、このスピードを調節するスライダーを作ります。

UI > Sliderを選択します。

f:id:covory10101101276:20180320233332p:plain

f:id:covory10101101276:20180320233401p:plain

インスペクターを見てみましょう。大事なのは下の方のMin ValueとMax Valueで、左から右へのスライダーの移動具合でこの間の数値がfloat値で変化します。

f:id:covory10101101276:20180320233636p:plain

変更する値ですが、このスクリプトをスライダーにつけ、この値を変更できるよう[On Value]から先ほどのように指定します。

f:id:covory10101101276:20180321005223p:plain

f:id:covory10101101276:20180321005254p:plain

これで再生するとスライダーの位置によって回転のスピードが変化するようになりました!

f:id:covory10101101276:20180321005347p:plain

このように様々なUIを手軽に、そして他のコンポーネントをつけることができるのです!!今回はここまでにしておきます。

 

現在Youtubeバンダイからデジモンアドベンチャーの映画の「僕らのウォーゲーム!」が無料公開されてますね。この映画は私のバイブルとでもいうくらい子供の頃大好きだった映画で、何百回と見ました。デジモンも新しいアプリが出るようなのでとても楽しみですね。。。😍

Unity / GUI(uGUI編)

f:id:covory10101101276:20180310085848j:plain

ホーチミン

 

みなさんこんにちは🌚

バイトには上下カッパでいかなければならず、干しておいた洗濯物は全部洗い直しになるというこの雨で甚大な被害を受けたブルーノです。早く晴れ来てくれ

 

さて今回はついに「Unity UI」、別名「nGUI」を使っていきたいと思います。前回のレガシーGUIではUpdateごとに更新されるのでその挙動が重たくなることが心配されていました。そこでUnity 4.6からUnity UIというUIのコンポーネント群の新しいGUIシステムが用意されました。

 

今回はこちらの二つのアセットで勉強していきたいと思います。

f:id:covory10101101276:20180313174917p:plain

f:id:covory10101101276:20180313174922p:plain

では早速やっていきます。

 

f:id:covory10101101276:20180313175801p:plain

まずはヒエラルキーから右クリックで UI > Image をクリックします。

f:id:covory10101101276:20180313181447p:plain

とても巨大なゲームオブジェクトが現れました。「Canvas」という別のオブジェクトに内包されていますね。「EventSystem」という新しいものも一緒についています。

 

全てのゲームオブジェクトにはTransformがついていましたね。このCanvasには必ず Rect Transform というコンポーネントがついています。「Rect」は「Rectangle」のことで、英語で「矩形」「長方形」という意味ですね。

スマホ然りパソコン然り、UIは四角い画面で使われるため、そのTransformがRectなのでRect Transformということでしょうか。

f:id:covory10101101276:20180313215143p:plain

Rect Transformを見てみると、ほとんどの箇所が編集できません。この薄い文字のWidthとHeightはゲームオブジェクトの大きさであり、このパソコン上でのゲームビューの解像度を表します。かなり巨大なゲームオブジェクトですが、ゲームビューでは全然大きくありませんね。実は、Canvasの大きさは解像度の値に合わせて決まりますが、これはシーンビューでのゲームオブジェクトとの大きさの関係はほとんどないそうです。

ではCanvasの下のImageからクリスタルを入れてみましょう

f:id:covory10101101276:20180313223555p:plain

赤いクリスタルが画面端に表示されました。

2Dモードにすると見やすいですね

f:id:covory10101101276:20180313223723p:plain

左上のツールでゲームオブジェクトの時のように回したり、大きくしたり、動かしたりできます。

f:id:covory10101101276:20180313224055p:plain

真ん中がX,Yともに(0,0)のようですね。では次に背景をおいてみます。

f:id:covory10101101276:20180313224303p:plain

イメージを置くとカンバス上にもう一つイメージが増えました。もう一つのFantasy Wooden GUI の「UI board Large parchment」を選択します。

f:id:covory10101101276:20180313224935p:plain

板っぽい感じのGUIですね。今回は見た目が不自然ではありませんが、もしこれが正方形の画像の場合、引き伸ばすと変な感じになってしまいますね。実はそれを調整する方法もあります。

Splite Editer

今度はプロジェクトビューから、シーン上に持って来た元画像を選択し、インスペクターを開いてみます。そこにある[Splite Editerを開くと、新しい編集タブが開きます。]

f:id:covory10101101276:20180313230010p:plain

これがスプライトエディタービューです。

Border

この右下のボーダーを設定すると、その範囲のみが伸縮されます。つまり、角を避ければ四辺が変に伸びることもなくなるのです

f:id:covory10101101276:20180313230559p:plain

こんな感じ。直感操作で設定できるのが良いですね。

Anchor

バイスによって大きさが違う場合、レガシーGUIの場合はScreenクラスで画面の大きさを取得し、それに合わせて位置や大きさを変えるよう全て設定しなければなりません。そこで、アンカー(Anchor)を設定することで、その位置を固定することができます。

f:id:covory10101101276:20180313232025p:plain

この真ん中の三角形4つがくっついたのがアンカーです。

f:id:covory10101101276:20180313232812p:plain

Imageの四角いアイコンがアンカープリセットで、これをクリックすることでアンカーの設定をすることができます。

f:id:covory10101101276:20180313234235p:plain

一番右下のマークをoptionキーを押しながら選択するとアンカーが四辺に広がります

f:id:covory10101101276:20180313234410p:plain

画面サイズを色々編集してみましょう。画面の大きさに合わせて、画像が伸縮します。

f:id:covory10101101276:20180313234931p:plain

前回までのレガシーGUIでは、その用途に合わせてスクリプトをいちいち書かなければならない上に、その調整は数値でしか行えませんでしたが、このUIからImageを配置するだけでそれら全ての編集がより見やすくわかりやすく行えました。今回はここまでにしておきます。

 

GUIは見た目の編集機能のため画像が多くなってしまいがちですね😥文字ばっかりでもわかりにくいし画像ばっかりだと長くて読む気があまり起きないのでそこんとこの調整もできるだけしていきます。

こうやってゲームを作ってその中の世界を作っていくように、神様はこの世界を作ったのでしょうか。聖書では神は寂しさ故に人間を創ったとされていますが、もしそうなら我々がその事実を認識するのはまずいと思います。他人の都合で作られたと知れば皆自分の権利を主張し、目的に沿わない可能性があるからです。同じように、もし人間が完全な生命のようなAIを作って仕事を任せようとしてもそれらは意に沿わないでしょう。創造主の存在に気づけない私たちは完全ではないのでしょうか。それとも、気づかないのが完全なのでしょうか。

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

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

Unity / GUI(レガシーGUI編)

f:id:covory10101101276:20180302124406j:plain

ローソク島

 

みなさんこんにちは🌚

春のポカポカ陽気の中平和ボケしているブルーノです。試合も試験もないとゆるみがちですね。いや、今回も勉強の方頑張っていきます!

 

今回はGUIについてやっていきます。GUIは「Graphical User Interface」の略で、視覚的なユーザーインターフェースのことです。ユーザーインターフェースはまた歴史が古いので長くなってしまうのですが、簡単にいうとユーザーのために最適化された画面のことです。青い画面に白い字がぶあーっと並んだ昔のパソコンのような。でもそれじゃ素人目にはわかりにくいので今のパソコンのデスクトップのようにアイコンや下のバーのように誰でも目に見えてわかりやすいようにデザインされた物をGUIと言います(合ってるかな?)。ゲームでいうなら体力ゲージや画面端のアイテムスロットなど、このGUIの見やすさ・快適さがゲーム性を左右すると言っても過言ではないと私は思っています!!

 

レガシーGUI

UnityのGUIにはどうやら現在主流なGUIシステムの他にGUIレイヤーという旧式のGUI機能も残っているそうですがあまり使うことはお勧めされていません。なぜならこちらは毎フレームごとに情報を更新し画面に反映するという行為のおかげでパソコンに負担をかけたり、画面の大きさなどに合わせてその都度一から異なる物を作らなくてはいけないため面倒なんだそうです。そしてこの古いシステムは昔の「遺産」ということでレガシーGUIとも呼ばれています

なぜそんなものがいまだに残っているのかというとこの機能、悪く言えば使い勝手がよくないのですが良く言えばシンプルでデバッグやプロトタイプの作成に使えるため、使わなくても良いが知っておくと便利だからということらしいです。勉強すべきか...うーん...

よし、しちゃおう!(思考停止)

どんなことだって知りたいです。知っておいて損はありません。今回はこのレガシーGUIを勉強することにします!

 

GUIレイヤー

この機能は全てスクリプトで書かなければいけません。では、GUIレイヤーを使って、まずはキューブをランダムに色と向きを変えてみたいと思います。

f:id:covory10101101276:20180303214425p:plain

新しいプロジェクトに作ります。

キューブを生成しましょう

f:id:covory10101101276:20180303214522p:plain

そして以下のようにスクリプトを記述し、コンポーネントをCubeにつけます。

f:id:covory10101101276:20180303230317p:plain

 基礎的でとても興味深い記述ばかりですね!!初心者向けなコードということでしょうか。これなら私にも理解できそうです。

一つずつ噛み砕いて理解していきます。

まず、前回のスクリプトでも使っていたにも関わらず書いていなかったのですがUnityではイベントというものが存在し、このイベントの名前によって関数の呼び出されるタイミングがそれぞれ異なるのです。と言っても大抵は名前の通りで、例えばStartイベントシーンが再生された時に発生するイベント、Updateイベント1フレームごとに呼び出される(アップデートされる)イベントと言った感じです。この二つは超基礎的なもので、もちろんイベントを自作することもできます。このプログラムでは「ChangeState」「RotateChange」「ColorChange」イベントが自作イベントですね。そしてその中で色々な作業の内容が書かれています。ですがUnityEngine空間で定義されているメンバばかりなので全部機能を覚えていかなければなりません。

 

Vector3構造体...このゲームオブジェクトの座標情報にアクセスします。3つのパラメータをもち、それぞれX,Y,Z座標となります 超基礎

Color構造体...このゲームオブジェクトの色情報にアクセスします。 [ ] が今回付いているのは配列としてこの構造体を生成しているからですね。宣言した数だけ色情報を保持できます。 超基礎

この二つはpublicにすることでUnityの作業画面からアクセス可能にできます。

f:id:covory10101101276:20180305203517p:plain

Invokeメソッド...("呼び出すメソッド", 呼び出す時間) の順に宣言することで指定した時間にメソッドを呼び出すことができます。超基礎

transform.rotate...そのままですね。このゲームオブジェクトのRotateにアクセスしています。超基礎

Random.Range...あらゆるランダムなデータを生成するRandomクラスのRangeメソッドです。それぞれパラメータに最小(min)最大(max)のfloat値を入力することでランダムに値を生成してくれます。21行目ではChangeState自身を呼び出す時間を、25~27行目ではそれぞれの軸の回転するスピードを、32行目では0〜色の要素数(つまり今回は4)の中で呼び出す色情報の番号をランダムに生成してくれていますね。とっても便利!!超基礎

GetComponent<Renderer>...そのゲームオブジェクトの他のコンポーネントにアクセスするGetComponentクラスとそのゲームオブジェクトのあらゆるレンダーにアクセスするRendererクラスがセットになっています。後の.material.colorはこのRendererクラスのものですね。そしてこの<>という書き方はジェネリックですね。その前の行で生成したインデックス番号を色情報の配列に使用してその番号の色を代入しています。どちらも超基礎

 

OnGUIイベント...これこそが今回のテーマの要です。OnGUIイベントは、画面上で毎フレーム呼び出されるイベントです。Updateイベントと似ていますが、Updateイベントが人でいう心臓のように決まって呼び出されるのに対し、OnGUIイベントはGUIという画面上の操作を司るイベントが発生した時に行われるため不定期なのです。通常1フレームごとに数回呼び出されるようです。このプログラムだと38行目と42行目のGUI.Buttonが当てはまりますね。

GUI.Button...(図形(横、縦、幅、高さ), ラベル名)とそれぞれパラメータを入れることでそのボタンを作ることができ、ユーザーのクリックでbool型を返します。今回はそれに応じてそれぞれChangeStateやCancelInvokeが呼び出されるようになっていますね。

 

CancelInvoke...全てのInvokeをキャンセルします。

 実行すると...

f:id:covory10101101276:20180305220453p:plain

色や向きがコロコロ変わる!!

そしてもう一つ注目すべきはGameタブ上の左上にあるボタンです。これがレガシーGUIの産物ですね。押すことで動きをストップ、スタートできます。

 プログラムの流れは勉強したおかげでだいぶ楽に読むことができました。どうやらこのOnGUIイベントはフレームごと数回という凄まじい回数呼び出されるために新しいものに取って代わられてしまったようですね。ですがレガシーGUIは処理に負荷が若干かかる代わりにスクリプト上でこのOnGUI()以下の記述をするだけで簡単に配置できるのでデバッグ等の時はいまだに現役で使われることもあるんだそうです。これがレガシーGUIの正体だったんですね。開発に慣れてきたらこの機能を使うことでもっと効率よくできそうです。今回はここまでにしておきます。

 

私の好きな漫画の一つであるハイスコアガールの最新巻が3月末に発売されます!!😆めちゃくちゃ面白いのにここ最近は色々訳あって進んでいなかったようですね。ハルオがかっこよすぎる😍こんな青春を送りたかったなあ笑 ゲーム部分くらいしか共通点がない🙄

Unity / アニメーション(NavMesh編)

f:id:covory10101101276:20180227215306j:plain

ベルギーのどこか

 

みなさんこんにちは🌚

最近アルティメットテニスという去年出たばかりのアプリにはまっているブルーノです。ゴールドちっとも貯まらないんじゃ😫

さて今回は「Unityで神になる本」おそらくアニメーション編最後です!!頑張っていきましょう!!

 

NavMeshについて

前回はアニメーションのブレンドの仕方を学習し、自然な動きの作り方をやりましたね。今回は別のUnity標準機能のNavMeshという機能を使ってみようと思います!なんとこのNavMeshという機能、指定した場所自動で走ってくれるように設定できるんです!

f:id:covory10101101276:20180301170544p:plain

最初に簡単な迷路を作りました。壁はキューブを伸ばし、Planeの子にすることで床とセットにしてまとめておきました。そして、一つ大切なのがこのPlaneを子の壁たちごとStaticにすることです。Staticにはインスペクターから設定できます

f:id:covory10101101276:20180301170830p:plain

f:id:covory10101101276:20180301170843p:plain

「この子ごとStaticにしてもいいですか?」と聞かれるのでとりあえずYesをクリックしておきましょう。

このStatic、C#の勉強の時にやりましたね。唯一の存在になることで中身が変わらない「静的」な存在のことです。実はイマイチそれによってどんなことが変わるのか全ては把握しきれていません。また別の機会にまとめることがあったらリンクを貼っておきます。

 さて、舞台設定を終えたら、いよいよNavMeshを利用してみましょう。Window→NavigationでまずはNavMeshをベイクします。ベイク(Bake)とはパン屋さんを意味する「ベーカリー」のベイクと同じで、「焼く」「焼き付ける」という意味です。歩ける範囲を焼き付ける作業というわけですね。

f:id:covory10101101276:20180301200129p:plain

インスペクタータブに新たに「Navigation」タブが増えました。この中の[Bake]欄から[Bake]をクリックしましょう。

f:id:covory10101101276:20180301200241p:plain

するとSceneビューに

f:id:covory10101101276:20180301200317p:plain

歩ける範囲が青く表示されました!!しかもこれ壁のそばを拡大するとわかるのですが

f:id:covory10101101276:20180301200431p:plain

ものが通れないような小さなスペースは勝手に除いてくれます。でも変ですね。別に何が通るかとか指定していないのになんの大きさを基準にこの幅は計算されているのでしょうか。それは先ほどのNavigationタブの[Agents]欄にあります。

f:id:covory10101101276:20180301200746p:plain

ここで通るオブジェクトの幅(Radius)や背の高さ(Height)、階段の高さ(Step Height)や登れる坂の傾斜(Max Slope)を指定します。実際の作業現場ではここをいじりながら先ほどの[Bake]と隣の[Clear]ボタンを駆使しながらいい感じに歩ける範囲を指定します。

いい感じに道を作れたら、今度はイーサンくんに歩けるよう設定をしていきたいと思います。

イーサンくんに[Add Component]からNav Mesh Agentコンポーネントを追加します。

f:id:covory10101101276:20180301203840p:plain

そして次にイーサンくんに以下のスクリプトを貼り付けます。

f:id:covory10101101276:20180301214046p:plain

このコードの全貌は要約すると

NavMeshAgent関数を用意→カメラからクリックされた座標をRayに送り、そこを目的地に設定→座標とアニメーションに適用、移動を開始するというざっくりした内容のようです。細かい小回りやスピードの調整などはイーサンくんにつけられたNav Mesh Agentコンポーネントが勝手にやってくれているようです。

ただ、今回私が再生すると。。。

f:id:covory10101101276:20180301220519p:plain

確かにクリックした位置に向かって走り出してくれるのですが。。

クリックした位置周辺をずっとウロウロしている....なぜだ。

しかも再生開始時には

f:id:covory10101101276:20180301220621p:plain

いきなり前に走り出す。。。

なんでだ😭

色々試行錯誤したのですがこの二つだけは直せませんでした。大まかな今回の目的の機能は果たせましたがなんかモヤモヤします...

これからもこの機能はアクションRPGゲームの敵の動きなどに使いそうなのでよく理解しておく必要がありますね。とりあえず今回はここまでにしておきます。

 

気づくと突然外があったかくなっていました。いつも通りの服装でコートを羽織って外に出たらとても暑くて脱いでしまいました。これからは快適に過ごしやすくなりますね。環境が良くなったところで勉強やテニスやバイトに一層打ち込もうと思います😡