Unityに関連する記事です

 ここより、ゲームの演出について制御処理を実装していきます。

 この手順では、障害物に接触した際にゲーム画面に霜のエフェクトを表示する制御を実装します。
霜のエフェクトが表示されている状態で別の障害物に接触すると、霜のエフェクトが濃くなって、よりゲーム画面が見えにくくなります。
このエフェクトは時間の経過とともに徐々に消えていくようにします。


<完成画像>



<実装動画>
https://gyazo.com/68963c692c8827725c02166907d80bf5


手順21 −霜のエフェクトの実装−
37.カメラに霜のエフェクトを追加する
38.スクリプトを使って、障害物に接触した際に霜のエフェクトを発生させる制御を実装する



新しく学習する内容


 ・インポートしたアセット内に含まれているスクリプトの利用方法
 ・ゲームオブジェクトにアタッチされているコンポーネントをコピーし、別のゲームオブジェクトに貼り付ける方法


37.カメラに霜のエフェクトを追加する


1.設計

 
 ゲームの雰囲気作りシステム的な部分の両方をふまえて、霜のエフェクトをカメラに追加したいと思います。

 雪山をすべるゲームですので、画面を通じて寒さの表現がユーザーに伝わることで、ゲームへの没入感をより高めていただくことが出来ます。

 またゲーム画面を覆うように霜のエフェクトを制御することで、画面を見えにくくしてゲームのペナルティを発生させるというシステム面での効果もあります。
どのような場面で霜のエフェクトを発生させるかは任意です。

 今回は障害物に接触した際に霜のエフェクトを表示させるように制御を行っていく予定です。
霜のエフェクト表示中に続けて障害物に接触した際には、霜のエフェクトが濃くなってゲーム画面を覆う部分を多くし、ペナルティ量を高めます

 また今回は時間の経過とともに霜のエフェクトが薄らいでいって消える処理も実装しています。
この部分も設計時には任意で調整しましょう。一度霜が発生したら、特定の条件を満たさないと取れない、というようにしても構いません。

 どうしたら面白くなるだろうか、その処理はどのようにすれば制御できるだろうか、という部分を考えていきましょう。



 最初に、下記の無料のアセットをインポートして、そちらに用意してあるスクリプトを利用して霜のエフェクトを実装します。

 ・Frost Effect


2.アセットストアにて無料アセットを探してインポートする


 アセットストアへ移動して、上記のアセットの名前(Frost Effect)で検索をしてください。対象のアセットが見つかります。


Frost Effect



 このアセットをクリックするとアセットの詳細が画面に表示されますので、 画面の右側にある Add to My Assets という青いボタンを押します。





 Unityのアカウントでのサインインを求められますので、自分のアカウントを利用してストアへサインインしてください。


 このとき、このアセットが古いバージョンのUnity用に製作されているため、利用の確認を求めるポップアップが開く場合があります。
Accept を選択して進めてください。


確認のポップアップ


 
 再度ページが読み込まれて、先ほどのボタンのメッセージが変わり、 Open in Unity となりますので、またこの青いボタンを押します。
あるいは、画面の上部にウインドウが表示されて、その中に Open in Unity のボタンがありますので押します。





 自動的にUnityのエディター画面に遷移します。サイトは閉じてしまって問題ありません。



 エディターのPackageManagerビューが開いて、対象のアセットが表示されますので、右下にある Download ボタンを押します。

PackageManagerビュー Download



 Download が終了すると左隣にある Import というボタンが押せるようになりますので、そちらを押します。

PackageManagerビュー◆Import


 
 インポートするアセットの一覧がポップアップウインドウとして表示されますので、そのまま右下にある Import ボタンを押します。


Import確認のポップアップ



 待機するようにプログレス表示が出て、しばらくするとアセットのインポートが終了します。


 Project内を確認しましょう。Frost という新しいフォルダが追加されていれば無事にインポートされています。
(ダウンロードした際のアセット名とインポートされる際のフォルダ名が同一であるとは限りません。インポート時に、フォルダ構成を確認しておきましょう)


Frost



 以上でアセットをインポートは完了です。


3.Frost スクリプトの内容を確認する


 インポートしたアセットに含まれている Frost スクリプトを利用することで霜のエフェクトを実装出来ます。
Frost スクリプトは、Camera コンポーネントを持つゲームオブジェクトにアタッチすることで利用することが出来るようになります。

 そこまでまずは、サンプル用に実装されているゲームオブジェクトのプレファブを Scene ビューに設置し、挙動を確認します。
以下のパスにあるゲームオブジェクトをヒエラルキーにドラッグアンドドロップして設置してください。

Assets/Frost/FrostExampleCamera_sharp.prefab

フォルダ画像



ヒエラルキー画像



 このゲームオブジェクトは、参考用に使うものです。最後に削除しますので、覚えておいてください。



 設置すると、Game ビューのカメラ情報に FrostExampleCamera_sharp ゲームオブジェクトが適用されるため、霜のエフェクトが追加されます。


Gameビュー



 FrostExampleCamera_sharp ゲームオブジェクトのインスペクターを確認しましょう。
Frost スクリプトがアタッチされていると思います。


FrostExampleCamera_sharp ゲームオブジェクト インスペクター画像



 Frost スクリプトには項目がいくつかあります。Frost フォルダ内にスクリプトの説明用ファイルが入っているので一読しておいてください。

 このうちの FrostAmount プロパティを変更してみてください。Game ビューの霜のエフェクトに変化が現れます。


<検証動画 どの項目がどのような挙動を行うのか、自分で確かめる>
https://gyazo.com/17232c18167d4e77cdc58d4e611516d3


 この FrostAmount 値は 0 〜 1 の間でのみ正常な動作を行います。
(マイナスにもなりますし、1 以上の数値にもなりますが、実際に判定しているのは 0 〜 1 範囲の値のみです。)


 確認していただいたことから、この値をゲーム中にスクリプトから変更することが出来れば、霜のエフェクトを発生させたり、徐々に薄くしていく、という挙動が実装出来ます。


4.MainCamera ゲームオブジェクトに Frost スクリプトをアタッチする


 先ほどもお伝えしたように、Frost スクリプトは、Camera コンポーネントを持つゲームオブジェクトにアタッチすることで動作するようになります。

 今回のゲームでは Camera コンポーネントは MainCamera ゲームオブジェクトにアタッチされています。
そのため、MainCamera ゲームオブジェクトに Frost スクリプトをアタッチしたいのですが、そのままアタッチをすると不具合が出てしまって実装できません。

 まずは現状確認のため、Frost スクリプトをドラッグアンドドロップして MainCamera ゲームオブジェクトにアタッチし、FrostAmount の値を操作してみてください。
Game ビューが先ほどと異なり変化していないことが分かります。
これは現在のバージョンの Unity に対応していないために発生しています。(Unity 3〜5 という古いバージョン時代のアセットです)

 ただし、先ほど確認していただいたプレファブのゲームオブジェクト内にある Frost スクリプトは正常に動いていました。
そちらを上手く活用しましょう。


ゲームオブジェクトにアタッチされているコンポーネントをコピーし、別のゲームオブジェクトに貼り付ける

 ヒエラルキーにある FrostExampleCamera_sharp ゲームオブジェクトを選択して、インスペクターを確認します。
こちらにアタッチされている Frost スクリプトは正常に動作していますので、このスクリプトをコピーして利用します。

 Frost スクリプトの右上にある … アイコンを押してメニューを表示し、Copy Component を選択してください。
このスクリプトの情報がコピーされます。


<手順動画 コンポーネントをコピーする>
https://gyazo.com/94deaaef678faa780c8fbc8af904fcff


 コピーが終了しましたので、次は MainCamera ゲームオブジェクトを選択します。
どのコンポーネントでもよいので、右上の … アイコンを押してメニューを表示し、Paste Component As New を選択してください。
ここでは CameraController スクリプトのアイコン部分で行っていますが、どのコンポーネントでも構いません。

 コピーしたコンポーネントが貼り付けてアタッチされます。


<手順動画 コピーしたコンポーネントを貼り付ける>
https://gyazo.com/6b9e4b9caac938440be67fee2e325317


MainCamera ゲームオブジェクト Frost スクリプトがアタッチされたインスペクター画像




 一時的に Game ビューが黒くなってエラーが表示される場合がありますが、これは描画設定が変更されたためです。一度ゲームを実行すれば元に戻ります。


Game ビュー エラー発生時(発生しない場合もあります)



Game ビュー




 最後に、Frost スクリプトの設定を行います。
下記のインスペクター画像のように調整を行ってください。

 なお、MinFrost と MaxFrost の値以外は自由に調整していただいて構いません
これらの値は FrostAmount の値の下限と上限を設定するもので、FrostAmount 自体が 0 〜 1 の間でしか動作しないため、それに合わせているためです。

 説明書を読みながら設定を行ってみてください。


MainCamera ゲームオブジェクト インスペクター画像



Game ビュー画像



 以上で MainCamera ゲームオブジェクトの設定は終了です。

 また、Frost などの参考用にヒエラルキーに配置した FrostExampleCamera_sharp ゲームオブジェクトは
MainCamera ゲームオブジェクトの設定が終わったので不要になりました。
FrostExampleCamera_sharp ゲームオブジェクトをヒエラルキーから削除してください


38.スクリプトを使って、障害物に接触した際に霜のエフェクトを発生させる制御を実装する

1.設計


 霜のエフェクトを発生させるには Frost スクリプトにある FrostAmount の値の操作が必要であることはわかっていますので、こちらを操作するにはどうするかを考えます。
また、この値を操作するに際して、障害物に接触した場合にこの値を変化させるという制御が必要になりますので、そのつながりをどのようにするかも一緒に考える必要があります。

 設計とはしては、次のようなロジックを考えてみましょう。

 1.Frost スクリプトを操作するスクリプトを1つ決める。新しく作成してもよいし、既存のスクリプトに追加してもよい。
 2.操作を行うスクリプトに、Frost スクリプトの FrostAmount の値を操作するメソッドを用意し、その中で FrostAmount に値を代入する制御を行う。 => 霜のエフェクトが発生する
 3.同じく操作を行うスクリプトに FrostAmount の値が 0 よりも大きい場合には、その値を徐々に減算して 0 になる制御を行う。
 4.障害物のゲームオブジェクト用に新しくスクリプトを作成して障害物にアタッチし、障害物とキャラが接触したら、2.の処理を呼び出す制御を行う。

 今回は、新しい FrostEffectController スクリプトを作成して、そちらを利用しています。
 こちらのスクリプト内に必要な処理をメソッド単位で作成し、その中で FrostAmount の値を操作する制御処理を記述します。
また、ゲーム開始時や、FrostAmount の値がゲーム内で 0 になった際に初期化をする専用のメソッドも用意しておくと便利です。

 実際に処理を記述してみて、同じような処理を複数の場所で書いている部分があったら、その処理をまとめてメソッドとし、処理をメソッド単位で1つにまとめましょう

 例えば、1つの処理が5行で、その処理を書いている場所が3箇所あった場合、5行の処理をまとめたメソッドを1つ用意してください。
メソッドの呼び出しは1行で書けます。つまり、その5行の処理を実行したいならば、呼び出し命令を1行書けば済みます。
上記の例なら、3回命令を記述すれば済むようにできます。


2.FrostEffectController スクリプトを作成する


 必要な変数や処理の内容について、まずは自分でロジックを考えてみましょう。
 新しいメソッド内の処理にはコメントを省略してあります。
こちらには処理の内容を自分でコメントとして書いてみてください。


FrostEffectController.cs

 <= クリックすると開きます。


 スクリプトの作成したらセーブします。


3.MainCamera ゲームオブジェクトに FrostEffectController スクリプトをアタッチする


 FrostEffectController スクリプトを MainCamera ゲームオブジェクトにドラッグアンドドロップしてアタッチしてください。


MainCamera ゲームオブジェクト インスペクター画像



 以上で設定は完了です。


4.FrostEffector スクリプトを作成する


 最後に障害物のゲームオブジェクトにアタッチして、接触判定を行うためのスクリプトを作成します。

 キャラと接触した際に、FrostEffectController スクリプトに用意した UpdateFrostAmount メソッドを呼び出せれば制御が可能です。
UpdateFrostAmount メソッドには float 型の引数がありますので、その値も一緒に渡してあげる必要になります。

 そのための処理をこのスクリプトにロジックを組んで書いてみましょう。


FrostEffector.cs



4.FrostEffector スクリプトを障害物のゲームオブジェクトにアタッチする


 IsTrigger のスイッチがオフであるコライダーを持つ障害物のゲームオブジェクトであれば、このスクリプトをアタッチすることによって
FrostEffector スクリプト内にある OnCollisionEnter メソッドが実行されます。

 現在障害物用のゲームオブジェクトは木のゲームオブジェクトとモグラのゲームオブジェクトの2つがあります。
どちらかにアタッチしてみてもよいですし、両方にアタッチしても構いません。ここでは両方にアタッチした場合の画像を載せておきます。


Mole ゲームオブジェクト インスペクター画像



SnowyTree ゲームオブジェクト インスペクター画像


 
 今後も霜のエフェクトを発生させたいゲームオブジェクトを作成したなら
この FrostEffector スクリプトをアタッチすれば、そのゲームオブジェクトとキャラとの接触判定に対して霜のエフェクトを発生させる機能を追加することが出来ます


5.ゲームを実行して動作を確認する


 スクリプトをアタッチし忘れると正常に動作しませんので、いままでの手順を確認して、スクリプトがアタッチされていることを確認してください。

 また、デバッグを行う際には、「どういった処理が実行されれば成功なのか」を、理解した上でゲームを実行してください

 設定が完了しましたのでゲームを実行してキャラを FrostEffector スクリプトがアタッチされている障害物のゲームオブジェクトと接触させてください。
MainCamera ゲームオブジェクトにアタッチされている Frost スクリプトの FrostAmount の値が加算されて、霜のエフェクトが発生すれば制御成功です。

 FrostAmount の値は、ヒエラルキーにある MainCamera ゲームオブジェクトを選択しておくことで、インスペクターより確認できます
下記の動画を参考にして、デバッグを行ってみてください。(あるいは、Debug.Log メソッドを追記しておいてもよいでしょう。)


<実行動画>
https://gyazo.com/c0d6688791c765d3fe7f045a20a42729


 画面での動きだけではなく、内部的な処理を常に見ていくようにしてください



 同じ障害物に続けて接触しても再度の加算処理が発生しなければ、重複接触時の防止処理も制御出来ていることになります。
特に接触後に障害物を破壊しないようにしている場合には、この処理がないとずっと FrostAmount の値を加算する処理が実行されてしまいますので注意しましょう。



 キャラと障害物のゲームオブジェクトとの接触時に FrostEffector スクリプトの次の行でエラーが表示される場合があります。

  Camera.main.gameObject.GetComponent<CameraController>().UpdateFrostAmount(duration);

 エラーとしては CameraController スクリプトの取得に失敗しており、そのため、以下が原因として考えられます。

MainCamera ゲームオブジェクトのタグに MainCamera が設定されていない
  => MainCamera ゲームオブジェクトのタグに MainCamera を設定します。
  
ヒエラルキー上に複数の MainCamera のタグを持つゲームオブジェクトがあって、CameraController スクリプトのアタッチされている方の MainCamera タグが取得できていない
  => サンプルで設置したFrost がアタッチされているカメラのゲームオブジェクト(FrostExampleCamera_sharp ゲームオブジェクト)が
    まだヒエラルキー上に残っている可能性がありますので、それを削除してください。



 Console ビューにエラーは出ないものの、Mole などに接触しても霜のエフェクトが発生しない場合には、以下のようなケースが考えられます。

 1.FrostEffector スクリプト内の OnCollisionEnter メソッドが動いていない
   → OnCollisionEnter メソッド内に Debug.Log メソッドを記述して、原因を調べましょう。
    OnCollisionEnter メソッドがそもそも反応していないのか、あるいは、OnCollisionEnter メソッド内にある if 文の判定がおかしいのか、
    どこに問題があるのか、問題点を切り分ける必要があるためです。

 2.FrostEffector スクリプト内の OnCollisionEnter メソッドが動いているが、if 文内の処理が実行されていない
   → この場合も、OnCollisionEnter メソッド内の、if 文内に Debug.Log メソッドを記述して、原因を調べましょう。
    if 文内内の処理が実行されないことが原因なのであれば、次は if 文の条件を1つずつチェックする必要があります。

     タグの文字列のつづりに記述間違いがあったり、isApplyEffected 変数の判定値が逆になっていたり、違う変数を使っていたり、というケースが考えられます。


 いずれのケースも、適切な位置に Debug.Log メソッドを記述することで、どの処理まで正常に動いているのかを可視化していくことが出来ます


6.必要に応じてプレファブ(設計図)の情報をクローンのゲームオブジェクトの情報に更新する


 ヒエラルキー上にあるプレファブのゲームオブジェクトは、プレファブ(設計図)のクローンであるゲームオブジェクトです。
そのため、このクローンのゲームオブジェクトに新しい情報を追加した場合、それは設計図であるプレファブ側には反映されません
あくまでも、ヒエラルキー上にあるクローンでのみ利用できる情報となります。
このように設計図とクローンのゲームオブジェクトに異なる情報がある場合、クローンのゲームオブジェクトにはプラスのアイコンが表示されます。


クローンのゲームオブジェクトに、設計図のプレファブとの差分がある場合(FrostEffector スクリプトの左側のアイコンにプラスが表示されている)



 ですが、今後、常に特定のゲームオブジェクトで FrostEffector スクリプトをアタッチする予定であれば、その都度、FrostEffector スクリプトをアタッチするのは大変です。

 方法としては、設計図のプレファブのゲームオブジェクト自体に FrostEffector スクリプトをアタッチする方法と、
ヒエラルキー上にあるクローンのゲームオブジェクトの情報をプレファブに対して上書き更新し、設計図の情報をクローンの情報を上書きする方法があります。

 この2つ目の手順の、クローンのゲームオブジェクトの情報を設計図に対して上書きして更新する処理をプレファブのオーバーライド処理といいます。



 オーバーライド処理の方法は簡単で、設計図に反映したいヒエラルキー上にあるクローンのゲームオブジェクトを選択し、
インスペクターの上部にある Overrides ボタンを押すだけです。このボタンは、プレファブをクローンであるゲームオブジェクトにのみ表示される情報です。


Overrides ボタン(プレファブのクローンのゲームオブジェクトでない場合には表示されません。確認してみましょう)



 Overrides ボタンを押すと、クローンのゲームオブジェクトと、設計図のゲームオブジェクトとの差分の情報が表示されます。
今回の場合であれば、クローンのゲームオブジェクトには FrostEffector スクリプトがアタッチされていますが、設計図のプレファブにはアタッチされていません。
そのため、FrostEffector スクリプトが差分の情報として表示されます。

 Apply All のボタンを押すことで、クローンのゲームオブジェクトの情報で設計図のプレファブの情報を更新します
なお、差分となる情報がない場合、Overrides ボタンを押した際には No Overrides と表示されて、Apply All ボタンは押せないようになります。


<手順動画 プレファブのオーバーライド処理>
https://gyazo.com/fab4f9d1c9da22fb9b0bf909c2c37b4a



 上記の動画例の場合、SnowyTree ゲームオブジェクトに対して、Overrides を行っています。
 Prefabs フォルダにある設計図のプレファブ・ゲームオブジェクトを確認してみると、こちらにもクローンのゲームオブジェクトにアタッチした
FrostEffector スクリプトがアタッチされて、クローンのゲームオブジェクトの情報を設計図に更新していることが確認できます。

 
設計図となるプレファブのゲームオブジェクト



クローンのゲームオブジェクトの情報をオーバーライド処理して反映した後の設計図のプレファブのゲームオブジェクト



 比べていただくと分かりますが、オーバーライド処理を行っても、クローンのゲームオブジェクトの位置情報については更新されません
これはクローンのゲームオブジェクトがどの位置に生成されるかはその都度配置が変わるため、、設計図にはその情報の更新が不要であるためです。

 あくまでも位置情報以外のコンポーネントの情報が更新されますので、クローンのゲームオブジェクトがどの位置にあるかということは考慮せずに
オーバーライド処理をしていただいて問題ありません。

 必要な手順であれば、このオーバーライド処理を行っておいてください。



 以上でこの手順は終了です。

 次は最後の手順である、 手順22 ーステージ作成ー です。

コメントをかく


「http://」を含む投稿は禁止されています。

利用規約をご確認のうえご記入下さい

Menu



技術/知識(実装例)

2Dおはじきゲーム(発展編)

2D強制横スクロールアクション(発展編)

3Dダイビングアクション(発展編)

2Dタップシューティング(拡張編)

レースゲーム(抜粋)

2D放置ゲーム(発展編)

3Dレールガンシューティング(応用編)

3D脱出ゲーム(抜粋)

2Dリアルタイムストラテジー

2Dトップビューアドベンチャー(宴アセット使用)

3Dタップアクション(NavMeshAgent 使用)

2Dトップビューアクション(カエルの為に〜、ボコスカウォーズ風)

VideoPlayer イベント連動の実装例

VideoPlayer リスト内からムービー再生の実装例(発展)

AR 画像付きオブジェクト生成の実装例

AR リスト内から生成の実装例(発展)

private



このサイト内の作品はユニティちゃんライセンス条項の元に提供されています。

管理人/副管理人のみ編集できます