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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

このプロジェクトの配布

Unity5.4で作成。

https://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用

https://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で動作させる一連の作業フローが確立できました。まずはゲームを作るため適当なモーションになりますが、少しづつ磨き上げていこうと考えています。