Unityのイメージエフェクトを分かりやすく視覚化したプロジェクト

イメージエフェクトは劇的な変化をもたらす

Unity5には、イメージエフェクト(Image Effects)という機能が無料で用意されています。これはカメラの被写界深度やブラー効果などです。また煙などのパーティクルもスタンダード・アセットとして公開されています。今回は、イメージエフェクトやパーティクルを画面上のチェックボックスで、有効化、無効化できるプロジェクトを作成しました。

以下の2つの画像は、上部がUnityエディターのSceneに表示されている画像で、下部の画像が、実際のゲーム画面で表示されるものです。

UnityエディターのSceneに表示されているシーン
UnityエディターのSceneに表示されているシーン
イメージエフェクトで劇的な変化をもたらすことができる!
イメージエフェクトで劇的な変化をもたらすことができる!

イメージエフェクトを適用前の画像は、地面が白いため、木や草が唐突に生えている感じがします。また、ロボットのキャラクターはアニメ風のテクスチャーなので、統一感がありません。

イメージエフェクトを適用後の画像は、夜にして各オブジェクトの違和感をなくし、色の調整や、ぼかし、画面端を暗くしたり、霧で遠くが白くするようにしたり様々な効果で、上手くごまかしています。

TODO:別途チュートリアル記事を用意して、ここにリンク張る。

イメージエフェクトは簡単!

イメージエフェクトはプログラミングではなく、カメラへの設定です。やり方を知っているか知らないかです。別記事でチュートリアルを作成しますが、実際は以下のようにカメラにコンポーネントを追加して設定します。

003
カメラにイメージエフェクトの各種コンポーネントを設定(このプロジェクトようにenabled=falseにしている)

上記のように複数のイメージエフェクトを追加したら、設定項目が多すぎて困惑するかもしれませんが、大丈夫です。私も設定方法分かりません。適当にスライダーを動かして、先ほどの暗闇の森の画像を作成しました。コンポーネントはうまくいかなければ削除すればいいだけなので、とりあえず試してみるのが良いです。

試してみてから公式マニュアルを見てみよう。

イメージエフェクト公式マニュアル を見てもらうと分かりますが、イメージエフェクトはかなりの種類があります。でもアンチエイリアスや、Blur(ブラー)や、Depth of Field(背景のぼけ)は聞いたことがある人も多いと思います。

イメージエフェクトの種類はかなりある
イメージエフェクトの種類はかなりある

とりあえず使ってみて、日本語のマニュアルがあるので、少しづつ設定項目の意味を理解していけばよいです。

このプロジェクトの配布

Unity5.4で作成。

http://hajimete-program.com/games/SandboxSnow.zip

※125MBあります。このプロジェクトを作るときに、木を作成するため、スタンダードアセットのEnvironmentパッケージをプロジェクトに追加しました。この時にEnvironmentパッケージを全部入れたので、Waterフォルダーも追加されました。どうやらこれは100MBぐらいあるようで、これが原因でファイルが大きくなってます。

 

 

Unity5でImageEffectsをいろいろ使ってみます。

A03

Unity 5.3では、Standard AssetsにImage Effectsがあります。(公式マニュアル)イメージエフェクトで分かりやすいのは、アンチエイリアスやカメラーのブラー効果や被写界深度(Depth Of Field デプス・オブ・フィールド)などです。これをカメラに追加することで劇的な変化をもたらすことができます。このイメージエフェクトは基本的にプログラミングは必要ありません。単純にコンポーネントを追加してスライダーでみながら調整するだけでとっても簡単です。是非アプリをリリースする前にイメージエフェクトを身につけましょう。

最初の画像

以下はイメージエフェクトを設定していない場像です。

001.1
Image Effectなし

エフェクトを追加

エフェクトを順々に加えていきます。

002_bloom
Bloomで発光し、街灯の光が強くなっている。
003_b_dof
Depth Of Fieldで遠くをぼやけさせる。遠くのビルがぼやけている
004_b_dof_vaca
Vignette And Chromatic Aberration

Vignette And Chromatic Aberrationで、角が暗くなり、外側ほどブラーがかかるようになります。

005_b_dof_vaca_ccc
Color Correction Curves で色調整
006_b_dof_vaca_ccc_fog
Global Fog で霧を用意。遠くがうすい灰色で見やすくなっている。

公式マニュアルの画像を見ると、Global Fogは晴天で逆光をあてるなどでも効果がありそうです。

 

007_b_dof_vaca_ccc_fog_ssao
SSAOで、ビルと地面の影が濃くなっている。
008_b_dof_vaca_ccc_fog_ssao_edge
Edge Detectionでビルの輪郭を表示。

設定一覧

009

010

 

各種モデルについて

実際にプロジェクト内を見てもらえば分かりますが、ビルは単純にCubeを大きくしただけです。また窓や街灯はポイントライトを光を弱くして配置しただけです。街灯もCubeを細長い棒状にして、ポイントライトを地面に向けただけの単純なモデルです。

スクリプトについて

スクリプトは、Directional Lightを回転させるスクリプトと、プレイヤーにカメラを追随させるスクリプトだけです。プレイヤーの移動やプレイヤーキャラクターはStandard Assetをそのまま使っています。

このプロジェクトの配布

Unity5.4用

http://hajimete-program.com/games/Sandbox2DSideScrollerPlatformer.zip

Assets/Scenes/Main.unityをUnityで開いてください。二次配布になるため音声ファイルは削除しています。(音声なくても動作するようにはしています。)

Unity5でクラッシーロードのようなIsometric(アイソメトリック)な画面の作成

クラッシーロードのような画面はISOMETRIC(アイソメトリック)と呼ばれ、日本語では等角を意味します。Unity5では位置と回転を調節するだけで、2,3分で簡単にIsometricなカメラを作成することができます。それではやってみましょう。

001

 

1.GameObjectを作成し、RotationをX:30,Y:45にして、Main Cameraを子要素にする。

002

2.Main CameraはPositionをX:0,Y:0,Z:-10にして、ProjectionをOrthographicにして、お好みでSizeを調整します。

003

できた!!

004

 

Perspectiveカメラで同じような感じを出してみる。

1.GameObjectを作成し、RotationをX:45,Y:45

101

2.Cameraを子要素にして、Position Z:-45、Projection:Perspective, Field of View を 30以下。

102

等角ではない感じですが、Perspectiveカメラでも近い感じにできました。もしかするとPerspectiveでももっと等角にできる正確な値があるのかもしれません。

103

 

参考資料

http://answers.unity3d.com/questions/12027/how-to-do-a-camera-that-is-top-downisometric.html

 

このプロジェクトの配布

http://hajimete-program.com/games/Isometric.zip

 

Unity5で、ダメージ表示とヘルスバーを作成する

前回、前々回で、Unity5で、ダメージ表示用のFloatingTextとlocalScaleを使ったライフバーを作成しました。また小さなBillboardスクリプトでカメラのほうに向くようにしました。これによりリアルタイム・ストラテジー・ゲームで使われるような表示が可能になりました。

びるぼー
ビルボードで、ダメージ表示とライフバーを表示、ピンクオブジェクトはY軸で回転してる。

テキストを表示する方法

Render Modeを「World Space」にしたUI Canvasを用意してもテキストは綺麗に表示されませんでした。どうやらCanvas Scaler (Script)を修正すればひとまず綺麗に表示できるようです。とはいえ細かく調べていないので、デバイスごとに修正する必要があるかもしれません。

002
Dynamic Pixels Per Unitを1000に変更

ビルボードの挙動

ヘルスバー用のCanvasと、ダメージテキスト用のCanvasを2つ用意して、それぞれにBillboardスクリプトを設定したら、ダメージテキストは文字が逆さまになり反転してしまいました。何か設定がまずいのかもしれませんが、ひとまずVector3.up,Vector3.forwardなど反転して対応しました。

最適化

おそらく、Canvasを1つにしたほうがパフォーマンスが良いです。ただパラメータが多すぎるので、多くを把握するためには時間が必要です。たとえばレベルアップ用のジャンプアップテキストをさらに追加する場合は、もっと知識が付くまでは、べたですが新たにCanvasを作成して別途スクリプトを書こうと考えてます。

このプロジェクトの配布

http://hajimete-program.com/games/HealthbarUsingLocalScale_LookToCamera (xOctManx) and DamageText.zip

要望があればチュートリアルを作成しますが、ひとまずプロジェクトを配布します。

Unity5でビルボードに対応したヘルスバーを作成する

xOctManxさんのUnity5チュートリアル動画である、「Eash Health Bar C# using localScale」と「Health Bar Look To Camera C#」で、ストラテジーゲームで使われるヘルスバーを3D空間で作成することができました。ポイントとしては、2つあって、1つは、Unity5で新たに用意されたWorldScaleのCanvasを使うことです。通常のCanvasはスクリーン座標ですが、この機能で、ワールド座標でキャンバスを使えます。

ビルボード
ビルボード

また2個目の動画で作成したビルボードは凄くシンプルなスクリプトで以下のようになります。カメラの傾きの逆の傾きをVector3.back、Vector3.downで考慮することで、傾きが相殺されて、結果的にカメラに対してオブジェクトが向き合う形になります。そのためこのビルボードの仕組みは、このCanvsに特化したスクリプトでははなく、Unityのすべてのオブジェクトに対して使用できるスクリプトでした。

 

これでヘルスバーやマジックポイント用のバーをさくせいすることができたのであとは、ダメージテキストを組み合わせることで、敵やプレイヤーの基本UIを作成できそうです。

このプロジェクトの配布

http://hajimete-program.com/games/HealthbarUsingLocalScale_LookToCamera (xOctManx).zip