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

 

Unity5でポップアップのダメージ表示を行う

Youtubeのチュートリアルを参考に3D上で、ポップアップのダメージ表示を実装してみました。これにより結月ゆかりのゲームにダメージ表示ができるようになります。あとは、視点移動したときに、ヘルスバーが表示できれば基本的な状態表示が完了します。

 

カメラが移動してもテキストがターゲットを起点として表示される。

細かい計算を想定していたのですが、実際は、UnityEngine.UI.Textは、スクリーン座標で表示され、シーン上のオブジェクトはワールド座標で表示されるので、それをCamera.main.worldToScreenPointで正しく変換させるだけでした。

テキストが上下に移動するのは、何か特殊な処理をしているわけではなく、UnityEngine.UI.Textを通常のオブジェクトと同様にアニメーションで、座標移動させているだけです。

 

 

このプロジェクトの配布

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

 

 

Unity Create a Game Series (E25. Finishing up)をやってみました。

とても長いチュートリアルで途中苦しかったですが無事にチュートリアルを完了できました。23回目、24回目でAudioの設定、25回でメニュー作成、26回でスコア、ヘルスメーター、最後にImageEffectsを追加してこのゲームを動かすことができました。

全体の感想

Sebastian LagueさんのProcedual cave generation tutorialは、Unity公式チュートリアルに載っていてYoutubeでいくつか動画チュートリアルを配信してくれています。

このチュートリアルは、トップダウン・シューティングゲームを作るために最もお勧めできるチュートリアルでした。ただしある程度プログラミングが分かっている必要がありました。実際に、再生数が回を重ねるごとにユーザーが減っているのを見ると、動かなかったときに自分でgithubのプロジェクトと比較したり、プログラミングのエラーを自分でつぶす能力がないと、フィードバックはあまり期待できないので先に進めない状態になっているようでした。

また、ウェーブ生成や各種アニメーションは、コルーチンやUnityの機能を使わず、プログラミングで各種アニメーションの基礎を実現しました。例えば銃のリコイルやリロードのアニメーションなどです。実装してみればそこまで難しいことではないので経験になり、Unityのアニメーション方法と、基本的なイージングやアニメーションをプログラミングで実装する方法の2つの選択肢を手に入れられました。しかし、これは初心者向けのチュートリアルと思っていたので、ちょっとこれは難しすぎるのではとも感じました。

レベルの自動生成は、何も知らないと実装に苦労するところなので、チュートリアルの中でかなりの時間を割いて説明してくれたのが大変良かったです。またこの部分の動画とソースコードが独立して切り出せるので、他のプロジェクトにすぐ適用できそうです。

クラス構成について

最初にクラスの全体像などが分からないため、こうしたほうがいいのでは?と途中に何度も思いながら実装しました。ただゲームの複雑な仕組みを学習していくうちに、Unityでは、C#スクリプトはオブジェクトの振る舞いを制御するための部品の1つなので、デザインパターンや高度なC#の使い方(Linqなど)や、立派なクラスデザインより、とりあえず動かせるスクリプトを作って誰でも読めるものを用意すればよいかなと考えるようになりました。手軽に読めて、ゲームが面白ければそれでよいかなと。。。

チュートリアルと公式のソースコード

https://github.com/SebLague/Create-a-Game-Source

Unity5の3Dサウンドについて

このゲームでは、ゲーム中はプレイヤーに、音が出る部分(リスナー)が付いているので、そこから音が出て3Dサウンドになります。3Dサウンドは単純に音声再生時に、座標を指定するとそこから音が出るようになります。

uGUIのDynamicな値とStaticな値

Unityでメニュー画面を作るときにボタンやスライダーなどを使いますが、スライダーなどは、入力された値をプログラムに渡すことができます。このとき、ユーザーがUIのスライダーを変更したDynamicな値を渡す方法と、どんな時も固定値を渡す方法(Static Parameters)の2種類が選択できます。

以下の画像のように、上部にDynamicなメソッドが表示され、下部にStaticなメソッドが表示されます。よくあるミスで、Dynamicな値を渡したいのに、Staticなメソッドをイベントハンドラーとして設定してしまう場合があります。注意しましょう。

スライダーのメニューの上部がDynamicな値
スライダーのメニューの上部がDynamicな値

最後の回でヘルスメーター作成

下の赤線がヘルスメーター
下の赤線がヘルスメーター

最後の回で、ヘルスメーターを作成しました。今後メーターを作るときに別途サンプルを探す必要がなくなってよかったです。

スコアを見やすくするアウトライン(Outline)

Unityには、テキスト表示の他にOutlineコンポーネントがあります。これにより輪郭エフェクトをつけることができます。ほかにもShadowがあります。Unityで初めてゲームを作る場合、Outlineを使わずデフォルトフォントのため何かパッとしないゲームになってしまいます。ちょっとした装飾をすると印象が変わるので、お手軽ですしおすすめです。

005
Outlineなし
006
Outlineあり

007

Unity5の強力なImageEffects

このプロジェクトの最後の数分でImageEffectsを適用しましたが効果が絶大でした。Unity5であれば、Standard Assetsをプロジェクトにインポートすればすぐに使えます。

008
ImageEffectsなしの状態
009
Vignette and Chromatic Aberrationのみ適用。角にいくほどボケて黒くなる。
010
Screen Space Ambient Occlusion(SSAO)のみ適用。キューブの上と右に影が表示
011
Color Correction Curvesのみ適用。色補正
012
上記3つのImageEffectsをすべて適用

UnityはImageEffects(≒ポストエフェクト)を設定するだけで、劇的な変化があるため今後ゲーム制作で積極的に使っていきたいです。公式マニュアルはちょっと重たいですが、気が向いたときに、ImageEffectsの一覧を見てみるとよいです。

http://docs.unity3d.com/ja/current/Manual/comp-ImageEffects.html

このプロジェクトの配布

http://hajimete-program.com/games/Unity Create a Game Series (E25. Finishing up).zip

Assets/Scenes/Menu.unityをUnity5.3で開けばタイトル画面(メニュー画面)が表示されます。

まとめ

インベントリー管理は別途学習する必要がありますが、玉転がしでアイテム取得は行ったので、それを応用して簡易的なインベントリー管理を作成すれば、このゲームに組み込めそうです。

このチュートリアルで、ガンシューティングの実装方法と動作するプログラムは入手できたので、次回からは、MagicaBoxelで作ったキャラクターのガンシューティングを作っていきたいです。

 

Unity Create a Game Series (E19. crosshairs)をやってみました。

E17. weapon variationでは、単発、バースト、オートマティックで弾を打てるように修正し、E18. wave difficultyでは、敵ウェーブごとに敵の強さなどを調整できるようにしました。そしてE19.crosshairsでは、照準を作成しました。

002
ウェーブ毎に敵の攻撃力や速度を調整できるようにした

照準の表示の仕方

照準を実装する方法は、すこし特徴的で、照準オブジェクトのレイヤーをUIにしました。またメインカメラはUIレイヤーを映さないにして、UIレイヤーのみを映すカメラ(Crossharis camera)を別途用意しました。これで、Crossharis cameraの深度(Depth)を上げることで、必ず標準が手前に表示されるようにしました。シンプルな2Dゲームの場合、ゲームオブジェクト自体のz軸を変更して手前に表示するか奥に表示するかなを調整したりしますが、カメラでどのレイヤーを映すかを設定できるのは、大きなゲームフレームワークでないと使わない機能なので、新鮮で勉強になりました。

003
crosshairs(照準)はUIレイヤー
004
マスキングでUIレイヤーのみ対象にしたカメラ

このプロジェクトの配布

http://hajimete-program.com/games/Unity Create a Game Series (E18. wave difficulty).zip