![](https://gameanimation.info/wp-content/uploads/2020/12/matome-2.gif)
光は演出を作る上で重要な役割を持っていますが、UI上で目にする光の演出は現実的な光(影の落ちる光)ではなく、全方向均等に光の当たるデジタル的な表現になります。
余分な影の情報がないので、純粋に光だけでユーザーの視線を誘導し、ゲームを遊ぶための手助けや面白さを演出することができます。
なのでUIの演出で影を入れることは中々ないのですが、光源がある場合の光と影の表現を知ることや、光の残像表現を知っておくことで、ゲーム全体の演出表現をする際に役に立つ可能性が・・・ある・・・かも・・・
今回はそんな役に立つかわからない光についてですが、記事を書いていきます。
2Dと3Dの光の演出
![](https://gameanimation.info/wp-content/uploads/2020/12/7a7ea972a65f9f04a74629abb0e6514d.png)
▲2Dの全方位の光
![](https://gameanimation.info/wp-content/uploads/2020/12/995b356969e6595ec8948bafda7fc200.jpg)
▲3Dの光源
2Dの光の表現は全方位均等に照らされる影のない光になり、UIではこちらの表現がメインになるかと思います。
フラットなミニキャラのアバターがいる世界などは影のない世界が基本になります。
![](https://gameanimation.info/wp-content/uploads/2020/12/454276969d0cbf9bdee059a2023723eb.jpg)
3Dライト
![](https://gameanimation.info/wp-content/uploads/2020/12/2D-2_1.gif)
2D調整前
![](https://gameanimation.info/wp-content/uploads/2020/12/2D-3_3.gif)
2D調整後
2Dのフラットな表現にスポットライトの光が入るとどうなるか、何も意識せずに作ると2番目の画像になることが多いかと思いますが、光源を意識して2Dへ落とし込む表現法もあるので世界観に合わせてどのような表現をしていくのが良いか模索していくと良いと思います。
光(スポットライト)が奥にある場合は手前のオブジェクトは影を作るため、暗く表現されます。
2D表現は光を誇張するために影を実際よりも濃くも明るくも表現できることや、余分な影を消す、画面全体に黒い影を入れたりと、簡単に調整ができるのは良いところです。
このように、少しだけ工夫すると説得力が増すのと、影は光を目立たせるので意図的に入れることでより視線を集めることができます。
光と影の表現は見た目に大きな変化を与えるので、影をどの程度反映させるのか意識すると表現の幅が広がるかと思います。
今回は地面への影は落としていないですが、どこまで求めるか、工数と期間、今後の運用を考えてどこに落とし込むかも考えておくと運用していく時に制作者にやさしいゲームを作れると思います。
運用コストを低くする、大事。クオリティ、大事。バランスが、大事。
2Dの光演出
3Dの光源のある光とは違い、フラットな光はゲーム内では沢山あります。
その中で印象を変える演出として、光る順番、点滅(明滅)や光の流れ、反転、色の変化、影、残像があります。
![](https://gameanimation.info/wp-content/uploads/2020/12/ae6ae32f795cae7ae80bcf3128a9251e.gif)
光る順番
![](https://gameanimation.info/wp-content/uploads/2020/12/79381c3dfbc91d486dbb68871aca6c1c.gif)
点滅
![](https://gameanimation.info/wp-content/uploads/2020/12/2f69a12bac1286bb07a19a4fa00be689.gif)
反転
![](https://gameanimation.info/wp-content/uploads/2020/12/9b095e2911304f6cbd99a4c879c7ed9a.gif)
色変化
![](https://gameanimation.info/wp-content/uploads/2020/12/6b8ee3c18c16b8e17654d6da30c6ffe2.gif)
影
![](https://gameanimation.info/wp-content/uploads/2020/12/8f6c8b17c2ef4c7a632f027b050ee131.gif)
残像
光らせるだけでも様々な表現ができ、ユーザーへ刺激を与えてエンターテイメントを提供することができます。
ここでは普段表現することがない残像についてみていきます。
残像
![](https://gameanimation.info/wp-content/uploads/2020/12/bf2d5c030e6f5e066b1e805e90a00c89.gif)
同じ明度の軌跡
![](https://gameanimation.info/wp-content/uploads/2020/12/b61e4f39ffebbc28a5226b9a4eec9b5d.gif)
相対となる黒の残像
![](https://gameanimation.info/wp-content/uploads/2020/12/4a8d880d0cee9459560284ae27aed23a.gif)
ぼかした同じ明度の残像
演出の中でもなかなか表現しないものが、残像の演出です。
本来は視覚から光が入り、網膜、脳のどちらかの影響でこの残像現象が見られますが、演出で残像表現を行うことも可能です。
モーショングラフィックスや、PVなどでは軌跡の残像表現を行う気化もあるかと思いますが、白い光が消えるときに相対となる黒を入れることで白の光を際立たせることができます。
光が消えるときにぼかしで同じ色の残像を出すことで、電球の消た時に残る光の残像を表現するなど、使い道が難しいですが一つの表現方法としてあります。
UI演出上では、消えた光の後に残像を残すのは目立たせたいものが消えた後も注目をさせてしまうのであえて表現することはないですが、より説得力を持った演出を必要とするときに使うと良いかもしれません。
陰性残像
陰性残像は明るい背景で鮮やかな色を注視し、白い背景に目を移すと補色の色が残像として残ります。
陰性残像の表現は使い道が中々ないですが知識として入れておくと、ちょっとした驚きを与えたい時の演出で使う機会があるかもしれません。
基本は補色が残像として残るようですが、自分の目ですべて確かめて色を再現してみたところ、完全な補色というより、少しずれがあるように思えました(自分の目がこのブログを書くために色を見すぎて混乱している場合があります。)
自分の目で見たものを大体の色で再現しているので間違っていそうですが、参考程度に見ていただけると良いかと思います。
普段ゲームの演出で使われることのないような表現ですが、新しい表現の模索として役立ってもらえると幸いです。
ここまで読んでくださりありがとうございました!
ご意見ご感想はお問い合わせホームから、またはTwitterからお願いします!