【Unity】Vignette(ビネット)の使い方と効果【Post Processing】

【Unity】Vignette(ビネット)の使い方と効果【Post Processing】

Vignetteを「び……びぐねっと?」と読んだあなたとは仲良くなれそうです。

Vignette(ビネット)はPost Processing(ポストプロセシング)のエフェクトのひとつで、映像の周りが暗くなっている表現ができます。

例えば下の画像をご覧ください。この画像は普通の家の外観です。まさに今目の前で見ている印象を受けます。

夕暮れの家
夕暮れの家

 

続いてVignette(ビネット)を適用した画像がこちら。なんだか主人公が昔を思い出しているような「思い出の我が家」感がありませんか?

思い出の我が家
思い出の我が家

 

シーンを映しているカメラの映像なのですが、周囲が暗くなっていて、どこかノスタルジックでレトロな雰囲気が出てきます。また、画面中央に視線が集まることも注目ポイントです。

この記事では以下の点に触れています。

  • Vignette(ビネット)の使い方
  • 各設定値が何を表しているか
  • 使用したサンプル

レトロな雰囲気のシーンを作る時には重宝するのでぜひ覚えてくださいな。

 

 

環境

macOS 10.15 Catalina

Unity2019.2.9f1

Unity Hub 2.2.2

Post Processing 2.1.7

 

参考文献

公式のマニュアル

 

公式のパッケージ解説

公式のバッケージ解説の方は英語で書かれていますが、自動翻訳すれば概要を掴みやすくなります。

 

Post-Processing(ポストプロセシング)とは

Post-Processing(ポストプロセシング)とは、画面に描画する前の画像に対して処理を行うことで、最終的に描画される画像の見栄えを良くする機能です。インスタのフィルターのようなイメージです。

ポストプロセシングの概要や導入方法については以下の記事で解説しているので、こちらもご参照ください。

 

 

この記事の中ではポストプロセシングが導入されている状態で進めていきます。

 

Vignette(ビネット)とは

Vignette(ビネット)とは、画像の中央をそのままに、画像の端(特に四隅)を暗くするエフェクトです。

写真の世界では口径食とかケラレのことを指します。

  • 口径食……レンズ端に入ってくる光の量が中央に比べて少なくなること
  • ケラレ……レンズフードなど物理的なものが映り込んで端が暗くなること

本来は撮りたい映像がちゃんと撮れていない状態なのですが、「この写真、なんかイケてね?(意訳)」なんて意見が広がって表現技法のひとつとして使われるようになりました。

今でこそ鉄板のおつまみとして扱われている「たこわさ」も同じ道を通りました。もともと食品工場で仲間内の罰ゲームとして作られた「たこわさ」でしたが、食べてみたら「あれ? なんかイケてね?(意訳)」と好評で、全国に広まったのです。

つまり、ビネットは写真エフェクト界の「たこわさ」なのです。Q.E.D.

 

冗談はさておき、「たこわさ」のように主食にするにはきついので、常用するのではなく要所要所で使っていくと良いでしょう。

 

どんな効果が得られるか

Vignette(ビネット)では以下のような効果が得られます。

  • 画面中央のオブジェクトに注目させる
  • レトロやノスタルジックな雰囲気を表現する
  • トイカメラの雰囲気を出す

 

1点目については、四隅を暗くすることから、自然と画面中央のオブジェクトに視線が集まります。イベントシーンで何かに注目させたい場合に使えます。

2点目のレトロやノスタルジックな雰囲気に関しては、冒頭で紹介したこの画像が分かりやすいかもしれません。Skyboxを夕焼けにしているのでずるいですが、四隅が暗くなっていることでノスタルジックな感じが出てきます。

思い出の我が家
思い出の我が家

 

3点目のトイカメラについてですが、トイカメラは子供用のおもちゃ、という観点から子供の視点を演出するのにも使えます。例えば、敵のアジトにいる子供を救出するイベントで、子供の目線のシーンを挟む時にVignetteを使うと「あ、これは子供の目線かな?」とプレイヤーに伝わりやすくなります。

 

Vignetteを追加する

「Vignette」のエフェクトを追加する場合は、「Post Process Volume」のコンポーネントで [Add effect…] ボタンをクリックし、[Unity] -> [Vignette] を選択します。

Viginetteの追加
Viginetteの追加

 

ポストプロセシングを使うための設定は以下の記事をご覧くださいな。

 

 

Vignetteの設定項目

Vignetteの設定項目は以下のようになっています。Vignetteの左にあるチェックボックスを外すとエフェクトが適用されなくなります。チェックを外すと全体がグレーアウトされて設定値を変更できなくなるため、うっかり値を変更するのを防ぎたい時はこちらで。

また、右側にあるOn/Offのボタンで切り替えてもOKです。On/Offで切り替える時は値を変更できるので、エフェクトは表示しないけど値は変えておきたい、なんて時にはボタンで切り替えると良いでしょう。

設定値を変える場合は、各項目の左側にあるチェックを入れます。チェックを外した状態だとデフォルトの値が使用されます。

 

Vignetteは設定モードが2つあり、Modeの項目で「Classic」と「Masked」から選べます。

Vignetteの設定項目
Vignetteの設定項目

 

「Classic」は設定値からビネットを計算するのに対し、「Masked」はマスク画像からビネットを表示します。「Masked」の場合は以下のように設定項目が変わります。

Maskモード
Maskモード

 

Classic

設定値からビネットを計算します。基本的にはこちらを使います。

 

Color

ビネットの色を変更します。基本は黒が良いと思いますが、他の色を使うのもアリです。

下の画像では赤、緑、青のビネットを並べています。

  • 赤……敵やモンスターの視点を表現したいときに
  • 緑……森やエルフのような自然に近い存在の視点や回想
  • 青……海や水中を表現したいときに

画像を撮る都合でビネットを強めに入れていますが、もう少し弱くするとちょうど良いかもしれません。

色を変更
色を変更

 

Center

ビネットの中心位置を設定します。

例えばXの値を0にすると以下のようにビネットの中心が左に寄ります。

X方向にずらしたビネット
X方向にずらしたビネット

 

Yの値を1にしてみると以下のようにビネットの中心が上に寄ります。

Y方向にずらしたビネット
Y方向にずらしたビネット

 

注目させたいオブジェクトが画面中央にいない場合はCenterの値を使って動かすと良いかもしれません。また、その場合はカメラワークで解決できないかどうかも検討すると良いでしょう。というのも、ビネットの中心が画面の中心と一致していないと不自然に感じられるためです。

 

Intensity

画面にかかるビネットの量を設定します。Intensityが0であればこの画像のように画面にビネットが表示されません。デフォルトだと0になっているので、ビネットを使いたい時は変更する必要があります。

Intensityの量が0
Intensityの量が0

 

Intensityが1だと以下のようになります。完全に画面が隠れる訳ではないことに注意してください。

Intensityの量が1
Intensityの量が1

 

Smoothness

Smoothnessはビネットのスムーズさを決める設定です。0.01まで下げるとかなり硬くなります。逆に1.0まで上げるとフワッとした感じになります。内側に広がってくるイメージなので、Intensityと一緒に調整すると良いと思います。

Smoothnessの設定
Smoothnessの設定

 

Roundness

Roundnessは丸みの設定です。分かりやすいように以下の画像ではIntensityを1にしています。デフォルトでは1になっています。

Roundnessが0だと四角に近づくイメージ、Roundnessが1だと丸い感じです。表現したいイメージに合わせて設定するようにしてください。

Roundnessの設定
Roundnessの設定

 

Rounded

Roundedはビネットを画面に合わせて周辺を暗くするか、画面によらず円にするかの設定です。

画面を縦にすると分かりやすいので、以下の画像を見てみてください。画面が縦だと、ビネットも縦長になっています。

Roundedの設定
Roundedの設定

 

この設定は望遠スコープのような表現をしたいときに便利です。

 

Masked

マスク画像を使ってビネットを表現したいときに使います。ドキュメントを見ると「イレギュラーな効果を出したいときに」とあるので、普通のビネットとは違った雰囲気を出したいときに。

 

Color

Colorはマスク画像の色を設定します。この部分はClassicと同じイメージで良いと思います。

 

Mask

Maskはマスク用の画像を設定します。例えばデフォルトのUISpriteを使うと以下の画像のようになります。正直に言うとマスク用の画像を作るのはめんどくさいので、Classicモードがおすすめです。

マスクを使ったビネット
マスクを使ったビネット

 

Opacity

Opacityは不透明度の設定です。マスク画像をどれくらい透過させるかを決めるので、お好みで変更してもらえればと思います。基本的には1で不透明にしておいた方がいいと思います。

下の画像だと0.5でうっすらとしたマスクになっています。

Opacityの設定
Opacityの設定

 

Vignetteのデモ

Vignetteの使用例をいくつか紹介します。

 

デフォルトのオブジェクト

設定値の説明で使用したデフォルトのオブジェクトに対してVignetteを適用すると以下のようになります。

  • Intensity……0.48
  • Smoothness……0.18

こんな感じでシンプルに使うのをおすすめします。

デフォルトのオブジェクトでのVignette
デフォルトのオブジェクトでのVignette

 

思い出の我が家

こちらは冒頭で紹介した画像です。個人的にはVignetteのポイントは「ほんのり」だと思います。というのも、Vignetteはたこわさ枠なので、あまり主張しすぎるのもよくないですからね。

  • Intensity……0.45
  • Smoothness……0.21

ほぼデフォルトでIntensityを下げた程度です。

思い出の我が家
思い出の我が家

 

寝ぼけまなこ

冒険から帰ってきて、拠点にしている宿の酒場でご飯を食べていたけれど疲れて寝落ちしてしまい、仲間たちが「今日は前衛で敵の攻撃を防いでいてくれてたもんな」と労っているのを夢うつつで聞いていた女騎士が徐々に目を覚ますときの演出。

Depth of Field(被写界深度)のエフェクトと組み合わせることで、寝ぼけている時の視界がはっきりしない雰囲気と、まぶたが視界に覆いかぶさっている雰囲気を出しています。

  • Intensity……0.59
  • Smoothness……0.65

VignetteのIntensityをスクリプトから変更することで、まぶたがだんだんと開いていく様子を表現することもできます。

寝ぼけている演出
寝ぼけている演出

 

Depth of Field(被写界深度)のエフェクトについては以下の記事をご参照ください。

 

 

まとめ

Post-Processing(ポストプロセシング)のエフェクトのひとつであるVignette(ビネット)について使い方とデモを紹介しました。

改めて効果をまとめると、

  • 画面中央のオブジェクトに注目させる
  • レトロやノスタルジックな雰囲気を表現する
  • トイカメラの雰囲気を出す

の3点がポイントです。Vignetteで演出をサポートできる場面があれば使ってみましょう。

なお、記事内では「ビ」ネットで通しましたが、実際に誰かの前で発音するときは下唇を噛みながら「ヴィ」ネットと発音されるとカッコよくて大変よろしいかと思います。

 

     

ゲーム開発の攻略チャートを作りました!

CTA-IMAGE

「ゲームを作ってみたいけど、何から手を付けていいか分からない!」


そんなお悩みをお持ちの方向けに、todoがアプリをリリースした経験を中心に、ゲーム作りの手順や考慮すべき点をまとめたe-bookを作成しました。ゲーム作りはそれ自体がゲームのように楽しいプロセスなので、「攻略チャート」と名付けています。


ゲームを作り始めた時にぶつかる壁である「何をしたら良いのか分からない」という悩みを吹き飛ばしましょう!