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で開いてください。二次配布になるため音声ファイルは削除しています。(音声なくても動作するようにはしています。)

Blenderで結月ゆかりにアニメーションをつけてみました。

トップダウンシューティングのチュートリアルが完了したので、以前MagicaVoxelで作った結月ゆかりモデルにBlenderでアニメーションをつけて、Unityで動かしてみました。はじめてのモーション作成ですが、やっぱり自分で作ったキャラクターが動くのはいいですね!

Blenderでアニメーションを用意して、Unityで再生
Blenderでアニメーションを用意して、Unityで再生
002
.blendファイルとpngをドラッグアンドドロップするとfbxが作成される

Unityでは、Cubeなどを拡大縮小したり回転したりしてアニメーション・クリップを用意できますが、Blenderで作ったhumanoidベースのモデルの場合は、Unityでボーン修正してアニメーション作るのは簡単ではないようです。Unity上で試行錯誤しましたが、私は結局やり方が分からず、最終的にはBlender側でアニメーションを作成して、それをUnityに読み込むことにしました。

Unityでゲームを作る場合は、Blenderでモデリングとアニメーションをする人と、Unityでプログラミングをする人を明確に分けれるので、複数人がやりやすいと感じました。

FBXを生成する必要なし?

ネット上を見るとBlenderで、FBXファイルをエクスポートするという方法をよく見かけますが、特に細かい設定をしない場合は、そのまま.blendファイルを画像ファイルをUnityにドラッグアンドドロップすれば自動で、FBXが生成されるようです。

 

ImageEffectsをいろいろつけた
ImageEffectsをいろいろ試した

まとめ

Blenderでアニメーションを複数用意して、FBXファイルとしてエクスポートして、Unityで動作させる一連の作業フローが確立できました。まずはゲームを作るため適当なモーションになりますが、少しづつ磨き上げていこうと考えています。

 

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で作ったキャラクターのガンシューティングを作っていきたいです。