試した環境

• Unity 2019.3.3
• Universal RP 7.2.1
• Post Processing 2.3.0

はじめに

• Universal RP において、Post Processing V2 は互換性のために使えるようになっていて、2020.1でサポート外になるようです。Universal RP で Post Processing V2 を使う方法などは、過去の記事に書きました。
• 手探りで試していたので、この構成で試してしまいました。
• 本記事では、Auto Exposure の挙動を確認するために　Debug 表示ができる Post Processing V2 を使っています。HDRPのAuto Exposureは、一部、機能が異なりますが、考え方を理解すれば、応用できると思っています。
• 本記事で述べている内容は、個人的に動作確認して得た見解なので、誤っている可能性があります。特にデバッグ表示機能に関しては、全く資料をみつけられなかったので、勘になります。現状、ソースコードを読めていなく、今後、読もうと思っています。

準備

• Post Processing の基本的な設定方法、操作方法は、ここでは省略させていただきます。
• Post Processing の Auto Exposureを設定しています。
• Post-proces Debug コンポーネントを追加しています。
• 以下にスクリーンショットを載せています。

ヒストグラムの表示

• 以下のスクリーンショットの解説です。
• Post-process Debug - Monitors - Light Meter にチェックをつけると左上にグラフが表示されます。
• ビューポートのピクセルの輝度の分布情報を示すグラフだと思われます。
• 左が暗い、右が明るい、だと思います。画像編集ソフトと一緒です。
• Histogram にチェックをつけると 自動露出を行った後の輝度の分布情報が見ることができると思われます。同時に2個並べられます（めちゃくちゃ高機能！）。

Auto Exposure をON

• 以下のスクリーンショットの解説です。
• グラフがシアンで塗られる点については、後に述べます。
• Auto Exposure をONにすると、平均輝度を計算後、ビューポート全体が暗い（平均輝度が暗い、輝度の低いピクセルが多い）と判断して、自動露出補正が適用されて、明るくなると思われます。
• グラフのマジェンタの線が、平均輝度だと思われます。
• グラフのマジェンタの線が、中央よりも左なので、暗いと判断していると思われます。
• 極端な事例にしたため、自動露出補正の結果、明るくなりすぎています。

Fitering による平均輝度の計算対象の指定

• Fitering を用いることで、極端に明るい、極端に暗いピクセルを平均輝度の計算の対象外にできるようです。
• 以下に試したGIFアニメーションを載せました。GIFアニメーション内に説明を書いてみました。無限ループなので、どこが開始がわからないです。大失敗です。「極端に明るいピクセルがある」が開始になります。そして、GIFアニメはポーズできないので見づらいですね。
• 補足を書きます。
• 平均輝度を求めるときに、明るいピクセルを計算の対象外にしたので、結果として平均輝度が下がり、マジェンタの線が左に移動したと思われます。
• 平均輝度が下がったので、自動露出の結果、全体が明るくなったと思われます。
• UnityのEditor内の説明にパーセント指定とあります。ビューポート内の最大輝度と最低輝度の範囲内で、パーセントを指定して、フィルタリングできると思われます。シーンによって、最大輝度、最低輝度が異なるので、その方が都合が良さそうです（シーンごとに設定を変えるのは、辛すぎるので）。
• 最初、飛び抜けた点を無視するために、輝度の分布状況にたいして、パーセント指定して、フィルタリングするのかと思いましたが、試した限りでは、そうではなさそうです。それだと、とある1点が光っているという演出ができなくなってしまい使い物にならないので、私の考えが愚かだと気づきました。

Minimun(EV) と Maximun(EV) の設定

• 自動露出に使用する平均輝度を計算した結果の最大値と最小値を調整できると思われます。
• MinimunとMaximunの範囲が半透明のシアンで塗られと思われます。
• MinimumとMaximumを動かすと、求めた平均輝度の値が範囲が制限され、マジェンタの線が動きます。
• この時、マジェンタの線は、平均輝度を計算後に、最小値と最大値処理が適応された結果の値になっていると思います。
• 以下のGIFアニメーションを載せました。私は、このアニメーションが意味することを理解するのに、かなり時間がかかりました。

以上で、調査結果の報告は終了になります。
デバッグモニターが超絶高機能で、ソースコードを読まなくても、Auto Exposureの動作をおそらく理解することができました。絵を作るときも、便利に使えそうです。

動機（より光を感じる演出を求めて）

動機を冒頭に書こうと思いましたが、Too Longにもほどがあるという状態になってしまったので、下部に持ってきました。ここから先は、語りたいだけで、得られる情報はないのでご注意ください。

光を感じる絵作りをするためにはどうすればいいか

• 私の感覚では、BloomとAuto Exposure の演出を加えると、光を感じ、神秘的な気持ちになります。モニタの設定で輝度を最大値して、モニタ全体が真っ白な画面を見るのとは異なる感覚のような気がします。あまりにも輝度が高いと不快になります。
• AEの演出において、急に画面を暗くして、一部のみを明るい領域にすると、虹彩が適応が間に合わず、明るい領域をより明るく感じるのかもしれません。もしそうならば、リアルな感覚です。または、カメラが身近に存在する現在において、「強い逆光などで、人をなどを撮ろうとすると、人が暗くなる」という感覚は、なんとなく学習している気がします。目が光の量を調整する感覚も経験していると思います。そのような経験から、光を感じるのかもしれません。
• Bloomの演出においては、光があふれている情景を経験的に知っているので、光を感じるのかもしれません。
• 科学的な根拠が全くない、個人的な見解です。このあたり、人間の感覚の面白さを感じ、絵画やCGで、より光を感じさせるには、どうしたらいかを追求したくなります。

光を感じさせる演出について考えて、最近作った事例の紹介

太陽の位置確認(日時計)モバイルアプリ

• 以下のGIFアニメーションは、画面に占める太陽の大きさをもとに、他のオブジェクトの輝度を調整するように独自にシェーダープログラミングしたものです。
• 平均輝度は計算していません。Post Processingもしていません。
• 物理法則は完全に無視で、感覚だけで輝度を調整しています。本シーン限定で、汎用性がなく、すぐに破綻します。作っているときに、何度も整合性が取れなくなり泣きそうになりました。「空に対して、地面が明るすぎない？」など。
• 太陽の光の放射の演出は、Fragment Shaderで描いたものです。Bloomがないのであまり光を感じません。
• AE演出の遅延を試してみましたが、しない方がマシという品質になってしまったので、最終的に取り除きました。

2D画像を使った光を表現する映像作品

• 以下のGIFアニメーションは、リアルタイムではなく、動画に書き出すことを前提に作った作品です。
• HDRPの Bloom + Auto Exposure機能で2Dの画像を演出しています。
• 背後の光によって、キャラクターが暗くなって見えなくなる、リムライトが現れる、という演出をやってみたく試してみました。
• Visual Effect Graphで作ったParticleで、Line形状のライトではありません。
• 法線ありの2D画像のではなく、背後から光があたったときに光りそうな箇所を感覚で絵を描いて、Emittional Mapに設定しています。
• つまり、物理法則を完全に無視した演出です。すぐに破綻します。つまり、調整に苦労するという地獄がまっています。
• 少しですが、光を感じる演出が作れたと思っています。

動機のまとめ

• Post Processing を使うと光の表現がしやすく 積極的に導入したいと考えるようになりました。
• 今まで、Auto Exposure のパラメーターを適当に値をいじって、いい感じになる値をみつけてきたが、ちゃんと理解したいと思いました。
• 本来はこの後、本題に入る。

全体のまとめ

• Auto Exposure は、光を感じられますが、目に負担がかかりそう、見づらくもなるときがありそうなので、慎重に採用する必要があると感じました。
• インタラクティブなコンテンツの場合、あらゆるシーンを事前に確認できるわけではないので、Auto Exposureが適用された結果の絵を把握しづらく、しっかりと設計しないと、シーンによって、暗すぎ、明るすぎなどになってしまうことがあると感じました。Auto Exposureというより、HDRレンダリングに言える話なのかもしれません。
• 一方で、シーン固定の動画などを作るときは、Auto Exposure の演出を気楽に使えると思いました。

参考資料

Unity Technologies Post processing V2 github

こちらを参考にしました。

UnityのTransformのワールド空間とローカル空間について
参考URL：https://gametukurikata.com/basic/worldlocal

スクロール内のセル内の区切り線と
スクロールの上にあるヘッダーの区切り線を合わせたいので、
スクロール内のセルの区切り線の絶対座標を取得して、
ヘッダーの区切り線に入れたところ一致した。
(Vertical Layout Group で Child Force Expand しているので、
　都度１セル当たりの横幅が変化するため、このような事を行っている。
　高速スクロールを実現するためにEnabledはTrueにしてからFalseに必ず戻す)

名前　｜　数　｜　値段
あ　　｜　１　｜　１００　　← 解像度対応で縦棒がVertical Layout GroupのEnabledをTrueにするたびに変化
い　　｜　２　｜　２００　　← 解像度対応で縦棒がVertical Layout GroupのEnabledをTrueにするたびに変化

        /// <summary>
        /// スクロールする１セル最初の区切り棒のワールド座標
        /// </summary>
        [SerializeField]
        private Transform CellFirstColumnWorldPosition;

        /// <summary>
        /// スクロールする１セル２つ目の区切り棒のワールド座標
        /// </summary>
        [SerializeField]
        private Transform CellSecondColumnWorldPosition;

        /// <summary>
        /// スクロールヘッダー最初の区切り棒のワールド座標
        /// </summary>
        [SerializeField]
        private Transform HeaderFirstColumnWorldPosition;

        /// <summary>
        /// スクロールヘッダー２つ目の区切り棒のワールド座標
        /// </summary>
        [SerializeField]
        private Transform HeaderSecondColumnWorldPosition;

// １つ目のヘッダーのX座標
HeaderFirstColumnWorldPosition.position = 
    new Vector3(CellFirstColumnWorldPosition.position.x, 
                HeaderFirstColumnWorldPosition.position.y, 
                HeaderFirstColumnWorldPosition.position.z);

// ２つ目のヘッダーのX座標
HeaderSecondColumnWorldPosition.position = 
    new Vector3(CellSecondColumnWorldPosition.position.x, 
                HeaderSecondColumnWorldPosition.position.y, 
                HeaderSecondColumnWorldPosition.position.z);

※ Qiitaなのに技術的な話は少なめです...

unity1weekとは

出されたお題に沿ったゲームをUnityで1週間以内に作成しWebGL版を公開、その後1週間で評価し合い結果発表!!って流れです
1週間以内に間に合わなくても罰則なしで遅刻公開できますし、アセットの使用や諸々特に制限ないので制作物の最低限の倫理観と著作権さえ守れれば自由に作れるのがいいですね
またTwitter投稿やランキングの実装など普遍的な機能はサイト運営者がライブラリを作ってますので初心者にも安心です

作ったゲーム

今回テーマが「逆」だったので、ブロック崩しのブロックを守るディフェンスゲームを作ってみました
タイトルはブロック崩し被害者の会です
　

バーから発射されるボールをクリックした場所に発生する爆風に巻き込んで壊していくゲームです
クリアまで3分とかからないので良かったら遊んでみてください

参加して学べたこと

※ 普段スマホでゲーム作成をしている者としての所感です

WebGLビルドの経験

ビルドファイルをアップロード後起動中に何度かエラーが発生しました。そのエラーメッセージがJavaScirptに関するもので、UnityのWebGLに関する資料が少なく、対応に四苦八苦しました(私の場合は再ビルドであったり環境設定を見直したりすることでなんとかなりました)
また、Unity単体でローカルサーバーを立てて動作確認ができるのですがセキュリティソフトに引っかかって起動ができないってのもありました(ポート設定大事)

入力デバイスの違い

今回PCで制作するにあたり、キーボード+マウスで操作させなきゃいけない訳で...普段スマホでカジュアルゲームを作っているので即座に「マウスのみ」という選択に至りました
ただ考慮漏れで...マウスと言っても
・マウス
・トラックパッド
・タッチスクリーン
等々様々なものがあるわけで。私自身MacBookProで開発しているのでトラックパッド基準で開発したのですが、実際に遊んでもらうとマウスやタッチスクリーンだとかんたんにクリアできることが分かり、デバイス差を吸収できるゲーム性じゃないとダメだなぁと反省しました

遊んでもらう対象の見誤り

unity1weekって約300本ほどのゲームが投稿されるんですね
なので今回は「30秒ほどで雰囲気を理解してもらい、3分ほどでクリアできるようなゲーム」と思って作ったんですが...他のゲームを遊んでるともっと短いスパンで理解し楽しんでもらう必要があるなと
自身、たくさんのゲームを遊ばせてもらったのですがルールが分からず最初の20秒ほどでゲームオーバーになったものは「他のゲームに移ろ」ってなりました

またunity1weekを遊ぶ層はゲーム好きが多いので、コア向けに楽しんでもらえるようランキング機能の実装やそれに即した内容を追加すべきでした
今回のゲームだと...タイムアタックですね。ステージ10まであるんですが、残存するブロックが多いほどゲームテンポを上げて難易度が上がるようにし(太鼓の達人方式)より高難易度で素早く倒すゲーム作りにしてヘビーユーザーに何度も楽しんでもらえるようにすればよかったなと反省です

遊んでて感銘を受けた他ゲーム

ヒイテケス

クリックしてブロックを掴み、他の場所にブロックを移動させて一行の累計数字を10の倍数にするゲームです
これ序盤は適当にしてても偶然10の倍数になったりするんですよ、でも進めていくとスピードアップしてきてうまく作れなくてヒヤヒヤしちゃう...でもその中で活路を見出して10の倍数が連続で発生したときにはまぁ気持ちいい！！
普通にスマホゲーとして遊びたい作品です

Coin&Block

ボタン操作でブロック部分とコイン部分が変わるので、それを巧みに操作しながらゴールを目指すゲームです
このゲームはテンポ感がいい！リトライやクリア後の転換時間も丁度いいし、それを美麗なアニメーションを用いてて更に気持ちよく進んでいるように感じさせてくれました
また、クリアするだけなら容易なのですが、コイン数を多く取ろうとすると途端に難しくなり、その難易度設計が丁度良かったです

最後に

今回作成した何倍もの時間をかけてスマホゲーをリリースしても、宣伝がないとDLって殆ど発生しないんですよ
でもunity1weekだと他の人のゲームを遊べば遊ぶほど自分のゲームが他者に遊んでもらいやすくなりますし、そういったことがなくてもYoutubeでの「unity1week全ゲーム遊ぶ」企画等もあり100PV以上遊んでもらえる...しかもありがたいコメントもいただける
作り手として嬉しいことって「遊んでもらうこと」と「フィードバックをもらう事」だと思ってますんで、それが確立しているunity1weekっていい環境だなぁと思いました

今回参加できて本当に良かったです、また次回も参加したいですね!!

使用環境

Unity2019.2.11

結論

ゲーム内にあるオブジェクトどれかのUpdate内を以下のようにすると、
バックキーを押した際にタスクキルではなくアプリのタスクをバックグラウンドに持っていける

   void Update()
   {
      if (Input.GetKeyDown(KeyCode.Escape))
      {
#if UNITY_ANDROID && !UNITY_EDITOR
            AndroidJavaObject activity = new AndroidJavaClass("com.unity3d.player.UnityPlayer").
                GetStatic<AndroidJavaObject>("currentActivity");
            activity.Call<bool>("moveTaskToBack" , true);
#endif
      }
   }