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

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

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月末に発売されます!!😆めちゃくちゃ面白いのにここ最近は色々訳あって進んでいなかったようですね。ハルオがかっこよすぎる😍こんな青春を送りたかったなあ笑 ゲーム部分くらいしか共通点がない🙄