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

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ゲームの敵の動きなどに使いそうなのでよく理解しておく必要がありますね。とりあえず今回はここまでにしておきます。

 

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

Unity / アニメーション(ブレンドツリー編)

f:id:covory10101101276:20180227143651j:plain

セノーテ

 

みなさんこんにちは🌚

高校の時の友達とカラオケオールをしてきてめっちゃ眠いブルーノです。3人で6時間は結構キますね笑 でも彼らに会うのも久しぶりでとても楽しかったです。

今回はUnityアニメーションの醍醐味であるブレンドツリーについて勉強していきたいと思います。

 

ブレンドツリー

これまでのアニメーションの回において、様々な動きをつなげたり、色の変化にグラデーションをつけたりしましたが、その要所要所の設定しかしていなかったのに実際にゲームを再生して見ると色は滑らかに変わったり動きも前の動きと次の動きが少し被って中間の動きが生み出されることで自然な挙動になっていましたね。この中間の動きを生み出すことがブレンドであり、複雑な動きをブレンドしたいときに便利なのがこのブレンドツリーなのです。

では複雑な動きのオブジェクトを一から知識もないのに作るのは難しいのでAssetsの[Import Package]から[Characters]をクリックして標準アセットのキャラクターをダウンロードし、これを見ていきましょう。

f:id:covory10101101276:20180227164759p:plain

f:id:covory10101101276:20180227164805p:plain

これがUnity標準装備のイーサンくんのプレファブです。Rigid Bodyやコライダー、アニメーションの挙動が一通り詰まっていますね。便利!

ではイーサンくんを動かすために適当な大きさのPlaneで足場を作り、その上にPrefabごとヒエラルキーにこのThirdPersonControllerを配置しましょう。

f:id:covory10101101276:20180227165454p:plain

ちょっと大きすぎたかな?笑 まあちょっと拡大すれば良いでしょう

f:id:covory10101101276:20180227165853p:plain

早速イーサンくんのアニメーションコントローラーをのぞいて見ましょう。方法はなんでも構いません。3つのステートがありますね。名前から察するにGrounded(地上)Airborne(空中)Crouching(しゃがみ)の3つの状態があるようです。とりあえず再生して見ると、方向キーやWASDキーでイーサンくんがその向きに動き出し、スペースキーでジャンプしたりすることができます。このコントローラのそれぞれのスクリプトをのぞいてみたのですが....

ちっともわかりませんでした😭😭😭

C#の勉強をしてから臨んだのに。。。やはりUnity用のスクリプトリファレンスも勉強しなければならないようですね...今回はとりあえずコードの中身はあまり追求しないでブレンドツリーの勉強をします。。

 

さて、このアニメーションウィンドウのGroundedこそが実はブレンドツリーなのです。ダブルクリックして覗くと

f:id:covory10101101276:20180227173606p:plain

なんかいっぱい伸びてる!!

この左のステートこそがGroundedの正体であり、右のステートたちはそれぞれ小さなアニメーションたちです。よく見ると名前に「HumanoidIdle」などの名前がありますね。クリックすると右下に変なおっさんが現れその動きを繰り返してくれます。

f:id:covory10101101276:20180227174252p:plain

 

またブレンドツリーを開いたまま再生して移動させると右のステートたちの色の濃さが変わります。

f:id:covory10101101276:20180227175303p:plain

これがアニメーションのブレンド具合を表します。

ではブレンドツリーのインスペクターを見てみます

f:id:covory10101101276:20180227180816p:plain

一見難しそうですが...下のリストに各モーションの指定と移動距離が書いてあります。赤い点が現在の状態で、青い点はそれぞれの動きの状態を表します。この青い点をクリックするとこのモーションの影響範囲が青色で表示され、下にそれがどのモーションなのかが表示されます。

白いぼやが網目状に伸びているように見えますがこれはどちらかというと逆で、この青い点から青いもやが伸びていてアニメーションの影響具合が重なっている部分が白くなっているのです。

赤い点をドラッグするとブレンドツリーにおけるその地点のTurnやForwardの値がわかります。しかしこれでもだいぶ複雑なので前後の動き以外を削除してしまいます

f:id:covory10101101276:20180227182331p:plain

「HumanoidIdle」「HumanoidWalk」「HumanoidRun」以外のモーションを選択した状態で下の「−」(マイナス)を押すとそのモーションを削除できます。

f:id:covory10101101276:20180227182550p:plain

これでこのイーサンくんは現在「止まる」「歩く」「走る」ことしかできなくなってしまいました。方向転換こそできるものの、再生してみると以前よりも動きが固くなっているのがわかります(まあこれくらいの動きのゲームならいくらでもあるので気にはなりませんが)。

まず3つの直線的な関わりの動きしかないので二次元的な設定画面はあまり意味はありませんね。インスペクター上部の[Blend Type]から[1D]を選択しましょう。すると以前やったアニメーションのような画面になります。

f:id:covory10101101276:20180227183342p:plain

Parameterの最大値が0.7くらいになっているので1にしておきます。次に、イーサンくんにもともとついているコントロールスクリプトを全て切っておきます。

f:id:covory10101101276:20180227201123p:plain

チェックマークを外しておけば機能しないんでしたね。[Remove Component]で消してしまっても構いません。ここから自分でスクリプトを書いてイーサンくんを動かしてみましょう

f:id:covory10101101276:20180227201430p:plain

イーサンコントロールとしてみましょう。中身を書いてみます

f:id:covory10101101276:20180227204217p:plain

Animator型の変数を用意し、GetComponent<Animator> と次の .SetFloat でAnimatorのForwardの値にアクセスします。Startイベントで最初は0を代入します。UpdateイベントではInput.GetAxisメソッドで垂直方向のキー入力に応じて1 ~ -1の値をForwardに代入するようにしています。- が代入されることもあり得るのでその場合(18 - 19行目)は0を代入します。

f:id:covory10101101276:20180227213436p:plain

実行すると前にイーサンくんが歩いて→走り出します。これで歩く→走るの動作をスムーズに行うことができました。

GetAxisメソッドは方向キー入力を受け取れるメソッドですがGetKeyメソッドというものも存在し、こちらも方向キーを含むキー入力を受け取ることができます。この二つは何が違うかというと、GetKeyは押されているかどうかだけを判断するいわゆるbool型を返しますが、GetAxisはキーを押されているとやんわり1 ~ -1の値が変動していきます。よってこれをForward値に送ることでスムーズに走り出すことができるようです。今回はここまでにしておきます。

 

ちょっとこのところ記事が長くなってしまいがちですね😓実はもう一回アニメーション編があるのですがこれで1章が終わりそれが12章ほど、そしてこれでもだいぶ端折って説明してあるというのですからUnityの底は計り知れません。

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

f:id:covory10101101276:20180221145841j:plain

バチカン市国

 

みなさんこんにちは🌚

最近朝もそんなに寒くなくなってきたなあと感じるブルーノです。もっとも田舎なので常に寒く、気温に慣れてきただけなのかもしれませんが笑

 

さて今回はアニメーションの新しいウィンドウ、「Mecanim」についてやっていきたいと思います。

とその前に一つ、アニメーションの中にイベントを発生させる方法についてだけ勉強します。

イベントとは、スクリプトコンポーネントの関数(メソッド)のことで、アニメーションウィンドウのSamplesの隣の隣にある四角いマーク(Add Event)から追加することができます。

f:id:covory10101101276:20180221232101p:plain

ん?でもこれじゃあアニメーションは繰り返されてるんだからその度にイベントが呼び出されることになるのか?

それはその通りなのですが、そもそもそのアニメーションを条件分岐させれば、例えばテニスのサーブの時はサーブのモーションとインパクトの瞬間にボールが打ち出されるメソッドを呼び出す、といった風にすれば違和感なくこの機能を使えますね。その条件分岐の詳しい設定が次のMecanimなのです。

 

Mecanim

f:id:covory10101101276:20180226165301p:plain

最初にアニメーションを作った際にできた樹形図のようなファイルをアニメーターコントローラー(Animator Controller)と言います。これをクリックすると

f:id:covory10101101276:20180226165338p:plain

このようなメニューが開きます。前回のAnimationのように視覚的なメニューですね。色がついたそれぞれの中身はステート(State)と言います。ゲーム用語でいう「ステータス」のように状態を表すと考えると理解しやすいです。名前をそれぞれ選択して見ると前回作ったCubeAnimation01以外は中身が記述されていませんね。このコントローラは現在CubeAnimation01しか持っていないことになります。 では開いておいてアレですがこのメニューをいじる前に別のアニメーションを作成しましょう。これはあくまでコントローラーであって新しいアニメーションステートを作れるわけではないみたいなので。

f:id:covory10101101276:20180226171309p:plain

さて戻ってきましたアニメーションウィンドウ。前回同様ゲームオブジェクトのCubeを選択しています。Animationウィンドウタブの下の下を見るとCubeAnimation01という名前と上下の矢印がありますね。ここから別のアニメーションを編集したり新たに追加したりできます。01は回転するアニメーションだったので今度は上下に移動するCubeAnimation02を作ってみます。

f:id:covory10101101276:20180226171707p:plain

f:id:covory10101101276:20180226171914p:plain

前回の要領でPositionを追加しましょう

f:id:covory10101101276:20180226172137p:plain

f:id:covory10101101276:20180226172431p:plain

Position.Yをやんわり持ち上げました。これで再生すると上に動く....と思ったら動かなかったです。

f:id:covory10101101276:20180226172837p:plain

どうやらAnimatorウィンドウにヒントがあるようです。この再生中の画面ではCubeAnimation01ステートの青いゲージが時間経過とともに変動しているだけですね。先ほど作ったCubeAnimation02は追加されましたが色がついておらず沈黙した状態ですね。どうやら現在機能していないようです。ちなみにオレンジのステートは初期ステートで、ここからアニメーションは開始します。早速02をアクティブにしてあげましょう。

f:id:covory10101101276:20180226173524p:plain

CubeAnimation01を右クリックし、[Make Transition]から道を作ります。

するとマウスポインタにステートから矢印がついてくるので02に引っ張ってきましょう

f:id:covory10101101276:20180226173723p:plain

この状態で再生すると

f:id:covory10101101276:20180226173949p:plain

一通り色付きで回転した後上下にピストン運動(CubeAnimation02)をし始めました。その後はずっと02の方をしていますね。これは01⇨02の道しかないためで逆に02⇨01の道を作ってあげると交互にアニメーションを繰り返すようになります。

f:id:covory10101101276:20180226174257p:plain

ここまでは予想通りでしたが、これをよく見ると互いのアニメーションが終わりきる前に次のアニメーションが再生されていますね。おかげでスムーズに動いているように見えますが。これは一体どうしてでしょうか。

これはそれぞれの矢印に秘密があり、矢印を選択するとそのインスペクターを覗くことができます。

f:id:covory10101101276:20180226174624p:plain

f:id:covory10101101276:20180226174748p:plain

この矢印は先ほどあったようにトランジション(Transition)といい、ここで別のアニメーションとの移り変わりを設定します。このインスペクターの最後のConditionsはパラメータを設定することで再生される条件を追加できます。なんかC#の時と似ていますね。ここでパラメータを新規作成して、スクリプトでそれを操作できるようにしておけば条件にそってアニメーションを実行できます。

最後に他の最初からあるステートについてだけ勉強しておきます。

Entry...文字通り最初に再生されるステートで、ここから伸びているオレンジのトランジションの先のステートに向かいます。ここからたくさんトランジションを伸ばすこともでき、その場合は条件に応じて、どの条件にも当てはまらない場合は初期ステートに向かいます

Any State...直訳すると「どんなときでも」。どの状態からでもこのステートから先ほどのコンディションを満たせば再生されます。

Exit...このアニメーションコントローラーを終了します。

 アニメーションとアニメーションコントローラ。この二つを上手に使うことで様々な動きを生き生きと生み出すことができるようですね。今回はここまでにしておきます。

 

前回から2回分やっているアニメーション編ですが、最後にもう一つブレンドツリーという概念が待っています。

次回はそのブレンドツリーについても勉強していきます。

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

f:id:covory10101101276:20180220203115j:plain

サムイ島

 

みなさんこんにちは🌚

先日ついにMHWを手に入れたブルーノです。モンハンでは片手剣が一番好きなのですが今回は趣向を変えて大剣で挑みたいと思っています。

さて今回は前回に引き続きアニメーションについて様々なコンポーネントで試して見たいと思います。マテリアル編!

 

さて、まずは変更するマテリアルをAssets以下に作成しましょう。

f:id:covory10101101276:20180220204041p:plain

赤色と青色のマテリアルを作成しました。

f:id:covory10101101276:20180220204251p:plain

[Add Property]からMesh Renderer > Material Reference[0]を選択します。

また録画ボタンを押して変更を記録しましょう

f:id:covory10101101276:20180220204525p:plain

今度はCubeのインスペクター上のMesh Rendererも赤くなりましたね。このように該当欄の色が変わって見やすくなります。

f:id:covory10101101276:20180220204717p:plain

Redを選択しました。Blueと交互においてみます。

f:id:covory10101101276:20180220205216p:plain

色がチカチカ変わった!でもこれは最初に思ったものと実は違います。前回のRotateのように自然にねっとり変わってほしいですよね笑

それはズバリプロパティの種類が違うからです。今のはReferenceなのでマテリアルのアクセス先を変えるというものだったので変更前と後の間が存在しません。色をグラデーションのように変えるならば直接ゲームオブジェクトの色情報にアクセスする必要があるということですね。

では今のプロパティは削除して、改めて今度は「Material_Color」を追加しましょう

f:id:covory10101101276:20180220210444p:plain

そしてさっきの要領で録画してみます

f:id:covory10101101276:20180220210610p:plain

よく見るとマテリアルのAlbedoのスポイトマークが赤くなっていますね。Material_Colorに該当しているということのようです。さっきのようにいろんな時間でこれを変更すれば...

f:id:covory10101101276:20180220210825p:plain

ねっとり色が変わった!この画面だけでもキーフレームではない部分で色が変わっているのがわかりますね。そしてこれも下のCurvesをクリックすると

f:id:covory10101101276:20180220210939p:plain

色の成分の数値を視覚的に編集できます。先ほどのReferenceの時はこのCurvesはありませんでした。

つまりこのアニメーションという機能は数値で管理されているコンポーネントを直感的に編集できるようになる機能のことのようです。オリジナルのスクリプト内ならばその変数の値を、スポットライトなどの光源ならばその明るさの数値をこのように視覚的に管理して、再生した時に自然に変化させることができるのです。

短いですがこの事実は自分的に大きな発見だったので今回はここまでにしておきます。

 

ExcelVBAでゲームを作っているときは色の効果の変更や画像の回転の時にいちいち微妙に向きや色を変えた画像を用意してフレームごとにその画像参照を変えて....ととても苦労しました。この機能があればもっと滑らかに画像を動かしたり色のエフェクトを手軽に変更できたんだろうなー。やはりUnity、凄すぎです!

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

f:id:covory10101101276:20180217215235j:plain

アトランティック・オーシャン・ロード

 

みなさんこんにちは🌚

久しぶりにクレヨンしんちゃんのハイグレ魔王の映画を見て面白かったので一気に10本くらい勢いで続けて見てしまったブルーノです。個人的にはカスカベボーイズあたりまでが好きですね。

さて今回はゲームオブジェクトにアニメーションの機能を実装してみようと思います。これができればオブジェクトに動きをつけてとてもオリジナリティあふれる作品が作り出せるはずです!!

 

Animation

アニメーションと一口に言っても様々な種類があります。前回のようにRigidBodyを実装して物理法則にしたがって動くのもゲーム画面上で動いているのでアニメーションですね。しかし人の走る動きや独特のポーズなどやっぱり自分で動きを作りたいですよね!そんな時の手っ取り早い方法の一つとして、Animationという機能があるのです!

では前回のキューブにアニメーション機能を実装するためにWindowからAnimationを選択しましょう。

f:id:covory10101101276:20180220174951p:plain

アニメーションウィンドウという新しいウィンドウが現れたと思います。

f:id:covory10101101276:20180220175245p:plain

次にCubeを選択するとAnimationウィンドウに「Cubeのアニメーティングを開始するにはアニメーションクリップを作成してください」というメッセージとともに[Create]ボタンがあると思います。早速作ってみましょう

f:id:covory10101101276:20180220175643p:plain

よっ

f:id:covory10101101276:20180220175705p:plain

「Where:」に設定したAssets下に二つのファイルが新しく作成されました。一つ目のセフィロトの樹みたいなのが「アニメーションコントローラ」、再生マークの付いているものが「アニメーションファイル」です。そしてもう一つ、先ほど選択したCubeのインスペクターに「Animator」というコンポーネントが追加されています。

f:id:covory10101101276:20180220180127p:plain

Controllerでアニメーションの条件となるアニメーションコントローラを設定します。

Avaterではゲームでキャラクターなどに組み込まれている骨組みを指定します。今回はただのCubeなので何も指定しません。

Apply Root Modeはその名の通りルート(道のり)モードということで、これがチェックされているとアニメーションにより場所を移動します。チェックがなければパーツの動きのみアニメーションに適用します。

Update Modeはアニメーションの適用をいつ、どのように行うかを指定します。

  • デフォルトのNormalはUnity内のタイムスケジュールに従うので、スクリプトでTimeを制御すればそれに従います。
  • Animate Physicにすると物理演算にも影響を与えるようになります。
  • Unscaled Timeはその名の通りスクリプトの時間操作に干渉されなくなります。

Culling Modeは見えていないときにもアニメーションを適用するかを設定できます。

 これらを駆使してゲームオブジェクトに挙動をつけていきましょう!!

 

 アニメーション作成

ではAnimationウィンドウの[Add Property]をクリックして詳細を決めましょう。

f:id:covory10101101276:20180220182317p:plain

つけられる動きにもやはりたくさん種類があるようです。まずはシンプルに回転させてみます。[Rotate]を選択。

f:id:covory10101101276:20180220182620p:plain

Rotationが追加されました。ウィンドウを長く見たかったのでタブを外して伸ばしました。右側のタイムスケジュールのようなものがタイムラインで、Samplesの欄が60に設定されている場合は秒間60フレームの場合の1秒の中の動きを設定します。ちょっとわかりにくいですね。アニメーションの動きはフレームで管理されるのですが、それを1秒間で何フレーム動かすかというのを設定できる、すなわちこのSamplesを120にすれば1秒間で120フレーム動くというとても滑らかな動きにできる...というのが正しいでしょうか。

タイムライン上のひし形のマークがそれぞれCube: Rotationのアニメーション開始位置と終了位置です。これを2秒まで引き伸ばしてみます。

f:id:covory10101101276:20180220190230p:plain

そして左上の録画ボタンを押して向きを回転ツールでくるくるしてみましょう。すると

f:id:covory10101101276:20180220190626p:plain

1秒の場所にもひし形が現れました。これはExcelのマクロのように録画中に変更した情報をその時間の場所に保存しているのです。適当に1秒の場所に向きの情報を入れたところで一旦録画モードを解除して、その3つ隣の再生ボタンを押してみましょう。これは画面上部の再生ボタンと異なり、そのゲームオブジェクトのみで動きを再生します。すると...

f:id:covory10101101276:20180220191020p:plain

キューブちゃんがキュートにお尻をフリフリしていますね!!これは指定されたフレームで各ひし形(回転軸情報)に合わせて動いているということですね!でもやたら滑らかですね。座標だけの設定ならば動きは一定になりそうなのにならないですね。それはアニメーションウィンドウ下のCurvesに秘密があるようです。押してみましょう

f:id:covory10101101276:20180220191550p:plain

心電図のようなものが現れました。では、適当な時間にタイムラインのバーを合わせ、黄色の線を選択して右クリックで[Add Key]を押します。すると新しいキーフレームが追加されます

f:id:covory10101101276:20180220192331p:plain

これをドラッグすればカーブを変更でき、視覚的に数値の変動を見ることができます!すごい!

さらにこのキーフレームの上で右クリックすると様々なポップアップメニューが出てきます。

f:id:covory10101101276:20180220195028p:plain

Clamped Autoは自動で両隣のキーフレームに自然な形で繋いでくれます。

Autoはキーフレームから伸びているヒゲのような線に合わせて結構極端に両隣と繋ぐようです。試して見るとその違いがわかりやすいですね

f:id:covory10101101276:20180220193950p:plain

f:id:covory10101101276:20180220193955p:plain

わかり...やすい...?

Free Smoothを選択するとヒゲを回転させて線の折れ具合を調整できます。実は他のモードでもヒゲをドラッグすれば回転させて調整できるのですがその場合は勝手にこのモードになります。

Flatにするとヒゲが横向きになります。

Brokenにするとこのヒゲが左右独立して動かせるようになります。曲線の具合を歪にできますね。

その下のTangentシリーズは両隣のヒゲを手軽に設定できます。なおこれをすると両隣のカーブがそれぞれ自然でなくなるので自動的にBrokenになります。

Free...自由に動かすことができます

Linear...斜めという意味ですね。その隣のキーフレームまでなるべく一直線になります。

Constant...そのキーフレームの次のキーフレームまで真横に伸びるようになり、次のキーフレームで一気に垂直に上がります。つまり動いてなかったのにその時間に一瞬にして変わっているような動きになります

 便利な機能のおかげで視覚的、直感的に回転の動きを編集できましたね。実はこのAnimation、先ほど[Add Property]を押した時に見たようにコンポーネントならなんでもこのように編集できるのです。次は他のコンポーネントについてもやってみましょう。今回はここまでにしておきます。

 

いやー今回は思ったより長くなってしまいましたね。本で見ると少ないページでしたがその中にあらゆる要素がギッシリでした。奥の深さが伺えますね😂

こんな風に自分で綴っていかないと読むだけではUnity、理解できる気が全くしません。この記録をガシガシ書いていかないと自分の知識にならないということですね。全てをちゃんと理解するため、コーラを飲みながらこれからも頑張りたいと思います。

Unity / スクリプトコンポーネント

f:id:covory10101101276:20180216162737j:plain

レーヌ村

 

みなさんこんにちは🌚

最近寝落ちしてばっかでYoutubeが全く知らない動画を再生しているせいでトップページが身に覚えのない動画で埋め尽くされているブルーノです。知らないYoutuberのチャンネルが必ず出てくる...

さて今回は短いですが、前回やったコンポーネントについて。もう一つとても大事なコンポーネントをやっていませんでした。それこそがスクリプトコンポーネントであり、このおかげでゲームは多様に動くものと思われます。

 

スクリプトコンポーネントとは

スクリプト(Script)とは英語で「台本」みたいな意味ですね。ゲームの進行や各部品の動きを命令するのがこのスクリプトコンポーネントで、プログラムに命令するのですからその言語はプログラム言語です。そしてこのUnityではC#JavaScriptで命令することができます(ちなみにJavaScriptは厳密にはUnity用に調整されたもので普通のJavaScriptとは似ているが違うそうです)。

まずゲームの進行のためのオブジェクトとしてヒエラルキーブラウザに新しく「GameManager」という名前の空のゲームオブジェクトを作ります。

f:id:covory10101101276:20180216231725p:plain

この名前にするとゲームの進行を管理するものであるとUnityに分からせることができます。

そしてこの空のGameManagerに[Add Component]から[New Script]を選択しましょう。言語はもちろんC#で名前は「DropCube」としておきましょう。すると

f:id:covory10101101276:20180216231949p:plain

Assetsにスクリプトが追加されました!!これをダブルクリックすると...

f:id:covory10101101276:20180216232259p:plain

いつか見たことある感じの画面が!!

このサイトでは解説していませんが、この画面はUnityをダウンロードした時にデフォルトならば一緒にダウンロードされるMonoDevelopというアプリケーションの画面です。そしてこのコードはUnity用の初期設定のコードです。ジェネリックが宣言されているのと、UnityEngine名前空間が宣言されているのが特徴ですね。そして中身のStartメソッドとUpdateメソッドも見たことがありませんね。これら全てUnityEngine名前空間で定義されたゲーム用のメソッドのようです。なるほど!!この中にゲームの機能が詰まっているんですね!!このライブラリを眺めるだけでもワクワクしてきますよ!!

いかんいかん。続きを

とりあえず以下のように書きます

f:id:covory10101101276:20180216233007p:plain

わっけわかんないですね!!

一つずつ概要をフィーリングで書いていきます。それぞれの機能と書き方はUnityスクリプトリファレンスを見ればとても詳しく載っているので分からない場合はそちらを見ましょう。

public class DropCube : MonoBehaviour

Unityのオブジェクトは全てこのMonoBehaviourクラスから派生します。派生したクラスの名前はスクリプトを生成した際に自分がつけた名前ですね

void Start () {
        InvokeRepeating ("DropOne", 2f, 1f);
    }

Startメソッドはゲームがスタートした時に一度だけ呼び出されます。このStartのような呼び出される「時」のことをイベントと言います。

InvokeRepeatingメソッドは順に(関数名、呼び出される時間、それ以降何秒ごとに呼び出されるか)を記述し、繰り返し(Repeating)呼び出す(Invoke)メソッドです。DropOneとは?それを次で記述しています。

void DropOne()
    {
        CubeCount += 1;
        Instantiate (CopyCube,new Vector3 (0, 40, 0), Quaternion.identity);
        if (CubeCount == 100) {
            CancelInvoke();
        }
    }

DropOneが呼び出された場合、冒頭で宣言したCubeCountを1増やし、Instantiate関数を呼び出します。Instantiate関数は(複製するオブジェクト、位置、向き)の順に指定すると、その座標に指定した向きでオブジェクトを生成します。

そしてCubeCountが100になるとCancelInvokeメソッドで呼び出しを止めます。

 

ん?肝心のCopyCubeを宣言したはいいけどそんなオブジェクトの情報なくないか?と思いますよね?まあまあ先ほどのGameManagerのインスペクターを見てみると...

f:id:covory10101101276:20180216234849p:plain

CopyCubeって欄ができている!!ということはこれにCubeを設定すれば...

f:id:covory10101101276:20180216235040p:plain

100個ものキューブが!!!

すごい!!!!これは自由自在ですね!!!100個もコピーしなくて良いのです。

このようにUnityEngineの機能を把握すればあらゆることを実装できます。これはUnityEngine名前空間の中身を熟読しなければ...いくつあるんだ...?今回はここまでにしておきます。

 

なんか今回一気にゲームって感じになりましたね!しかしUnityはこんなものでは終わりません。まだまだあらゆる便利でハイクオリティな機能をいくつも備えているようです。Unity....やり尽くしてやるぜい!!!😤