Unityに関連する記事です

 ステージ選択を行うためのワールドシーンの作成と、シーンの見栄えをよくするための機能を実装します。

<実装画像 .櫂好肇廛蹈札奪轡鵐阿覆掘



<実装画像◆.櫂好肇廛蹈札奪轡鵐阿△蝓 Color Granding、Vignetteー>




 新しい学習内容は、以下の通りです。

 ・ポストプロセッシング ーColorGrading、Vignetteー



17.ワールドマップを作成する

1.設計


 多くのゲームにはステージ選択の機能がありますので、本ゲームにも、ステージ選択用のシーンを新しく作成し、
その中でステージを選択することにより、そのステージをバトルシーンに設定するように設計を作っていきます。

 まずは最初に、ステージ選択用のシーンを作成し、ゲームの画面を作ります。
例えば、タイトルシーンが別にあるとするならば、タイトルシーン後に遷移するのが、このステージ選択用のシーンになります。

 このシーンのゲームの画面としては、ゲームの舞台となるワールドの画像があると、プレイヤーがどんな雰囲気のゲームを遊ぶのか、
どんなステージがあるのだろうか、という部分で想像力をかきたてることになります。

 本手順では、シーンを作成し、その後、ゲーム画面となるワールド用の画像の設定を行います。
その後、ポストプロセッシングというカメラにエフェクトのフィルターをかける機能を利用して、ゲーム画面の見た目を豪華にしていきます。



 シーン内の設計の方法としては、Canvas ゲームオブジェクトを2つに分けて作成します。今回はまず、1つの Canvas を作成しますが、
こちらは RenderMode の設定を変更し、MainCamera ゲームオブジェクトのカメラを利用してゲーム画面に UI の描写を行います。
カメラを利用することにより、UI 内のゲームオブジェクト(今回は Image)に対して、ポストプロセッシングが機能するようになります。

 通常の Canvas の場合、RenderMode が Orverlay になっており、こちらすると、ポストプロセッシングは無効になります。
そのため、ポストプロセッシングを利用したい UI については、カメラを利用して描画する Canvas 内に配置し、
それ以外のポストプロセッシングは利用しなくてもいい UI については、いつも利用している Canvas 内に配置する設計にします。


2.ワールドマップを準備する


 ワールドマップ用の画像を準備をします。
色々な方法があるので、自分のイメージに沿ったものを準備するようにしてください。

<準備方法>
・無料のイラストを探して使う
・自分でイラストを書く
・Inkarnete(地図を作るジェネレーターアプリ)を使って作成する

   など

 ファンタジーやSFのマップであれば、Inkarnete(インカーネイト) というサイトが便利です。
こちらではブラウザ上で作業が行え、ワールドマップ、エリアマップなどを選択し、無料素材を利用してマップの作成が可能です。
作成後はセーブでき、画像ファイルとして出力(Export)できます。
1画面に収まらないサイズの画像でも問題ありません。その場合には、Unity 側で画面のスクロールを実装し、全体を見渡せるようにします。


<Inkarnete>
Inkarnete
https://inkarnate.com/


<操作方法紹介サイト>
Gigazine 様
無料で簡単にファンタジーな世界観のマップを作れる「Inkarnate」を使ってみた
https://gigazine.net/news/20200824-inkarnate/


 画像が準備できたら、Unity へインポートしてください。


3.World シーンを作成する


 新しくシーンを1つ作成します。名称は任意です。
World 、Stage 、StageSelect など、ワールドマップを管理し、バトル以外のシーンであることが分かる名称で名付けてください。
なお、教材ではこのシーンのことをワールドシーンという名称で用います。


ヒエラルキー画像



 作成したら、Game ビューの画面の解像度の設定を変更します。
いままでのバトル用の画面と同じ解像度で設定してください。(ご自分の設定値を使ってください。ここの画像の値である必要はありません。)


Game ビュー画像 〜澗



Game ビュー画像◆_鯀度設定(参考値)



 続いて、ワールドシーンの背景画像を作成する手順に入ります。


4.Canvas_Area ゲームオブジェクトを作成する


 ヒエラルキーの空いている場所で右クリックをしてメニューを開き、UI => Canvas を選択してください。
ヒエラルキーに Canvas ゲームオブジェクトと EventSystem ゲームオブジェクトが作成されます。

 Canvas ゲームオブジェクトの名称を Canvas_Area に変更してください。
このシーンでは複数の Canvas ゲームオブジェクトを配置するため、どの Canvas であるかを明確にわかるようにするために名称を変更しています。


ヒエラルキー画像



5.Canvas_Area ゲームオブジェクトの設定を行う


 ヒエラルキーにある Canvas_Area ゲームオブジェクトを選択し、インスペクターを確認してください。

 Canvas コンポーネントの設定を変更します。

 Render Mode を Screen Space - Camera に変更します。
Screen Space - Camera に変更することにより、この Canvas ゲームオブジェクトと、子オブジェクトについては
指定したカメラを通じてゲーム画面内に表示されるようになります。

 Render Mode の詳細についてはご自分で調べておいてください。


インスペクター画像



 Render Mode を Screen Space - Camera に変更すると、すぐ下に Render Camera という新しい設定項目が追加されます。
どのカメラを利用するか設定できますので、ヒエラルキーにある Main Camera ゲームオブジェクトをドラッグアンドドロップしてアサインしてください。
この設定により、この Canvas ゲームオブジェクト内のゲームオブジェクトは、Main Camera ゲームオブジェクトの Camera コンポーネントを通じてゲーム画面に描画されることになりました。

 この設定を行う理由ですが、次の手順であるポストプロセッシングの機能はカメラに適用する機能であるため、
通常の Canvas に設定されている Render Mode (Overlay)には、ポストプロセッシングの機能が反映されません
よって、Render Mode を変更し、Canvas の情報を Camera コンポーネントを通じて描画することにより、Canvas ゲームオブジェクトにもポストプロセッシングの設定を適用することが出来るようになります。



 続いて、Canvas Scaler コンポーネントの設定を変更します。
ここでは、Canvas のサイズを Game ビューの解像度と合わせるための設定を行います。
3つの手順がありますので、順番に設定します。

 最初に UI Scale Size を Scale With Screen Size に変更します。

 上記の設定を変更すると、すぐ下に Reference Resolution の項目が追加されますので、次は、こちらの項目内の x と y の値を Game ビューの解像度と同じ値に設定します。

 最後に Screen Match Mode を Expand に設定します。

インスペクター画像




 以上で設定は完成です。

完成時のインスペクター画像



6.Canvas_Area ゲームオブジェクトの子オブジェクトとして、imgAreaMap ゲームオブジェクトを作成する


 Canvas_Area ゲームオブジェクトの上で右クリックをしてメニューを開き、UI => Image を選択してください。
Canvas_Area ゲームオブジェクトの子オブジェクトとして、Image ゲームオブジェクトが新しく作成されます。
子オブジェクトになっていない場合には、一度 Image ゲームオブジェクトを削除して、再度作り直してください。


ヒエラルキー画像



 Image ゲームオブジェクトの名称を imgAreaMap に変更します。
続いて、3箇所の設定を行います。


7.imgAreaMap ゲームオブジェクトの設定する


 最初に、imgAreaMap ゲームオブジェクトのインスペクターを確認し、Image コンポーネント内の Source Image プロパティの部分に
先ほど Unity にインポートしたワールドマップ用の画像をドラッグアンドドロップしてアサインしてください。
ゲーム画面にワールドマップ用の画像が適用されます。

 次に Raycast Target プロパティのチェックを外して、スイッチを切っておいてください

 最後に画像のサイズを変更します。
RectTransform コンポーネントと Sceneビューを見ながら、画面全体を覆うように設定してください。
基本的には、Width と Height の値を Game ビューの解像度と同じ値にすれば、ゲーム画面と同じサイズになります。
気持ち、少しはみ出る位に大きくしておくといいでしょう。


設定後のインスペクター画像



Sceneビュー画像



Gameビュー画像



 以上で、ワールドシーンの背景画像の設定は完成です。


18.ポストプロセッシングを利用する

1.設計


 ポストプロセッシングとは Unity の持つ機能の1つです。
カメラにエフェクト用のフィルターをかけて、ゲーム画面全体の画像に対して演出を行い、見た目を豪華に装飾します。

 ポストプロセッシングには複数のエフェクトが用意されており、それらを上手く組み合わせる事によって、相乗効果を生み出せます。

 この機能は2Dだけではなく、3Dでも機能します。


参考サイト
Unity 公式マニュアル
ポストプロセス
https://docs.unity3d.com/ja/current/Manual/PostPro...
Unity 公式マニュアル
ポストプロセスを理解する
https://docs.unity3d.com/ja/current/Manual/BestPra...
STYLY 様
Post Processingの基礎を理解する【Unity】
https://styly.cc/ja/tips/unity_postprocessing_mast...
エクスプラボ 様
【Unity】ポストプロセシング(Post-Processing)を使ってプロ級の画面に
https://ekulabo.com/post-processing


2.ポストプロセッシングをインストールする


 ポストプロセッシングは Unity の機能ですが、標準機能ではありませんので、プロジェクトごとに自分でインポートする必要があります。

 Unity の左上のメニューより、Window => PackageManager を選択し、PackageManager ウインドウを開きます。
ウインドウ内の項目などは、公式サイトに説明がありますので、そちらにて操作方法を確認してください。

PackageManager ウインドウ
https://docs.unity3d.com/ja/current/Manual/upm-ui....


 
 PackageManager ウインドウ内の左上には、Packages という現在ウインドウ内に表示しているパッケージの内容が設定できます。
Packages の設定が My Asset である場合、今まで自分がダウンロードしてインポートしたことがあるアセットが一覧表示されます。

 この部分を UnityRegistry に変更してください。最初から設定されていれば、変更せずに問題ありません。


Packages の設定



 UnityRegistry を選択すると、PackageManager ウインドウ内の表示が、Unity の管理しているパッケージの一覧表示になります。
左側のパッケージ一覧から、PostProcessing を探して選択します。バージョンはその時の最新のバージョンが表示されますので、そのままで問題ありません。
右側に選択しているパッケージの詳細情報が表示されますので、右下にある Install ボタンを押してインストールしてください

 インストールが完了すると、PostProcessing の右側にチェックマークが表示されます。
また、Projects フォルダ内に PostProcessing フォルダが追加されています。


PackageManager ウインドウ



Projects フォルダ



 これで、Untiy 内においてポストプロセッシングの機能が利用できるようになりました。


3.Main Camera ゲームオブジェクトに Post-process Layer コンポーネントを追加する


 実際にポストプロセッシングの機能を利用できるように設定を行っていきます。
ポストプロセッシングはカメラに対して機能するため、シーン内のカメラに対象となるコンポーネントをアタッチする必要があります。

 ポストプロセッシング用のコンポーネントは2つあります。

 1つは Post-process Layer(ポストプロセス・レイヤー)といい、ポストプロセッシングを適用する Layer を設定するためのコンポーネントです。
必ずカメラにアタッチするコンポーネントになります。このコンポーネントで指定している Layer に対して、ポストプロセッシングを適用します

 もう1つは Post-process Volume(ポストプロセス・ボリューム)といい、こちらはカメラのゲームオブジェクト、
あるいは新しくゲームオブジェクトを作成して、このコンポーネント専用のゲームオブジェクトとして用意します。

 こちらの機能は、どの範囲でポストプロセッシングを適用するかを設定するためのコンポーネントです。
シーン全体にポストプロセッシングを適用するか、あるいは特定の範囲にのみ適用するかを設定します。
 
 また、実際に適用するエフェクトを設定する際にも利用しますので、このコンポーネントがポストプロセッシングの実体であるとも言えます。



 それでは、順番にコンポーネントの追加と設定を行います。

 ヒエラルキーにある Main Camera ゲームオブジェクトを選択し、Layer の設定が Default になっているか確認してください。
初期設定では Default のはずですが、もしも違う場合には、Default に設定を直して下さい。


インスペクター画像




 次に、インスペクターの一番下にある Add Component ボタンを押して
Post-process Layer コンポーネントを探して追加してください。検索窓で探すといいでしょう。

 Post-process Layer コンポーネントの中にある Layer の設定を Nothing から Default に変更します。
Default に設定するとすぐ下に警告が表示されますが、こちらは問題ありません。
それ以外の部分の設定は初期設定のままで問題ありません。


インスペクター画像

 


 以上で Main Camera ゲームオブジェクトの設定は完成です。
これにより、ポストプロセッシングによるエフェクトを Layer で指定しているカメラに適用できる状態になりました。

設定後のインスペクター画像



4.Post-process Volume ゲームオブジェクトを作成し、Post-process Volume コンポーネントを追加する


 続いて、Post-process Volume コンポーネントを追加します。
今回は Main Camera ゲームオブジェクトではなくて、専用のゲームオブジェクトを作成していく方法で実装します。

 ヒエラルキーの空いている場所で右クリックをしてメニューを開き、Create Empty を選択して新しいゲームオブジェクトを作成します。
ゲームオブジェクトの名前を Post-process Volume とし、このゲームオブジェクトがどのような役割を持っているかを判別しやすいようにします。


ヒエラルキー画像





 Post-process Volume ゲームオブジェクトを選択して、Layer の設定が Default になっているか確認してください。
初期設定では Default のはずですが、もしも違う場合には、Default に設定を直して下さい。

 つづいて、インスペクターの一番下にある Add Component ボタンを押して、Post-process Volume コンポーネントを追加します。
これも検索窓を利用すると見つけやすいです。


インスペクター画像




 Post-process Volume コンポーネントの設定を行います。2か所ありますので、順番に設定します。

 最初に IsGlobal のスイッチにチェックをいれて、このプロパティを有効にします。
この IsGlobal のスイッチにチェックが入っていると、ポストプロセッシングがシーン全体に有効化されます。
次に、Profile の部分が None になっています。右横にある New ボタンを押してください。
新しくポストプロセッシング用のアセットが作成されて、自動的に Profile にアサインされます

 このファイルは Scenes フォルダ内に、自動的に <シーン名>_Profiles フォルダが作成されて、
その中に PostProcessing Volume Profile という名前のファイルで作成されます。


フォルダ画像



 次にエフェクトを追加します。


5.Post-process Volume コンポーネントの設定を行い、エフェクトの項目を追加する


 Profile に情報がアサインされていると、Overrides という項目内に Add Effect… というボタンが表示されます
このボタンを押すことにより、ポストプロセッシング用の PostProcessing Volume Profile アセットファイル内にエフェクトの情報を追加できます

 今回は2つのエフェクトを実装しようと思いますので、Add Effect… ボタンを押して、Unity => Color Grading を選択します。
インスペクターに、ColorGrading コンポーネントが追加されます。

 再度、Add Effect… ボタンを押して、Unity => Vignette を選択します。
インスペクターに、Vignette コンポーネントが追加されます。


インスペクター画像



参考サイト
エクスプラボ 様
【Unity】ポストプロセシング(Post-Processing)のエフェクトまとめ
https://ekulabo.com/post-processing-matome


 最後に、それぞれのエフェクトの内容を設定し、シーン全体にポストプロセッシングによるエフェクトを適用していきます。


6.Color Grading の設定を行う


 Color Grading(カラーグレーディング)とは、画像の最終的な色や輝度に対して調整を行う機能で、色調補正とも呼ばれます。
 
Unity 公式マニュアル
Color Grading
https://docs.unity3d.com/ja/current/Manual/PostPro...
Unity 公式マニュアル
Color Grading
https://docs.unity3d.com/Packages/com.unity.postpr...


 このエフェクトはゲーム画面を装飾する上で欠かせない機能の1つであり、ほぼすべてのゲームにおいて用いられているエフェクトの1つになります。
今回のシーン全体の色味や明るさは、すべてこのエフェクトによって調整されています。

 なお、各エフェクトは、右上にあるオン/オフの切り替えによってエフェクトを適用するか、適用を停止するかを選択できます。
初期設定ではオンになっています。


オンの状態



オフの状態




 Color Grading には複数の設定項目がありますが、今回は一部を設定することで調整しています。
これは用意しているワールド用の画像によりますので、あくまでも参考画像として設定内容を掲載しておきます。


インスペクター画像(参考用)


 設定した内容についてまとめておきます。



 各項目内にはチェックがあり、チェックのある部分のみが適用される効果になります。

 Mode は解像度に合わせた設定です。今回はモバイルでの動作を想定し、 Low Definition Range を設定しています。

 White Balance では、白を基準とした色の見え方の補正を行います。この中にある Temperature を設定して、画面に色温度を付けています。
値は -100 〜 100 で設定でき、プラス方向であるほど暖色系の色、マイナス方向であるほど寒色系の色になります。

 Tone の項目では Color Filter と Contrast 以外の3つの設定にチェックを入れて適用しています。
それぞれ、Hue Shift は色相の設定、Saturation は彩度の設定、Brightness は明るさの設定です。

 いずれも実際に操作することにより、適用する内容が理解しやすくなりますので、ご自分のワールド画像を見ながらどんどん変更して調整を繰り返してみてください。


エフェクト設定前



エフェクト設定後




 これら以外の機能も利用して、自分好みの調整を行ってみてください。
この機能によって驚く程にシーン内のゲーム画面の見え方が変わることが体験できると思います。

 下記のサイトがとても詳しく解説しています。


参考サイト
エクスプラボ 様
【Unity】ポストプロセシング(Post-Processing) Color Grading(カラーグレーディング)
https://ekulabo.com/post-processing-matome#outline...


7.Vignette の設定を行う


 Vignette(ビネット)は、画像の端を暗くするエフェクトです。画面の中央にはエフェクトはかからず、主に四隅にエフェクトをかけます。
雰囲気のある画面作りが出来る他、画面の周りが暗いため、画面中央にユーザーの視線が集めることにも一役買います。

Unity 公式マニュアル
https://docs.unity3d.com/ja/current/Manual/PostPro...
Unity 公式マニュアル
https://docs.unity3d.com/Packages/com.unity.postpr...



 参考用のインスペクター画像を掲載しますが、ご自分の画像に合わせて調整してください。

インスペクター画像



 調整方法ですが、まずは Vignette 内のすべての項目にチェックを入れてから、Intensity の値のみを動かしてみてください。
どのようなエフェクトになるのかが分かります。

 Intensity の値をある程度で設定したら、Smoothness や Roundness といった他の値を操作します。
そうすることにより、四隅をどの程度ぼかすのか、暗い部分に丸味をつけるのか、といった内容が、どの項目によって制御されていることが理解しやすくなります。

 Center の値を変更することにより、Vignette を適用する中心地点を変更できますが、
初期値で画面の中央になっていますので基本的には変更は不要です。

 Mode と Color も初期値のままで問題ありません。


エフェクト適用後


 
 画面の周囲の暗さが変わるだけで、シーン全体の印象が変わることが分かります。

 
 こちらのサイトに詳細な情報があります。

参考サイト
エクスプラボ 様
【Unity】ポストプロセシング(Post-Processing) Vignette(ビネット)
https://ekulabo.com/post-processing-matome#outline...



 以上で完成です。

コメントをかく


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

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

Menu



プログラムの基礎学習

コード練習

技術/知識(実装例)

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

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

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

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

レースゲーム(抜粋)

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

3D脱出ゲーム(抜粋)

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

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

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

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

3Dトップビューアクション(白猫風)

VideoPlayer イベント連動の実装例

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

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

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

private



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

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