複数の2Dスポットライトを作成するにはどうすればよいですか?


12

複数のエンティティにスポットライトを使用できる2D「スポットライト」効果を作成したいと考えています。すなわち、いくつかのスプライトがトーチを保持しているかのように。単一のエンティティ(1つのスポットライト)の場合、グラデーションスプライトをオーバーレイし、中心点でそのエンティティを追跡する手法を使用します。この手法は、単一のスポットライトでうまく機能します。これが私が話していることを説明するスクリーンショットです。

シングルスポットライト-作品

1つのスポットライトでのスポットライト効果

私が遭遇する問題は、この手法が複数のエンティティに拡張されないことです。別のスポットライト画像をオーバーレイすると、いくつかの問題が発生します。シミュレートされたスクリーンショットは次のとおりです。

複数のスポットライト=問題

2つのスポットライトによるスポットライト効果

最も明らかな問題は、目に見える角です。これは、レベル全体をカバーするようにスポットライト画像を巨大にすることで解決できますが、それは適切ではありません。2番目の難解な問題は、このテクニックを使って暗闇を効果的に増やしていることです。したがって、追加された各スプライトは、他のすべての人を暗くする効果があります。明らかに、この問題に間違って近づいています。

何か案は?


継続的な取り組み

コメントにはブレンドオプションに関する議論がいくつかあります。これが私の現在の考え方です。上記の単一のスポットライトの例では、次のような画像ファイルを使用しています:(わかりやすくするために、透明部分を緑色に置き換えました)

透明性アプローチ

上記で説明したように、問題は、この画像を別の画像とアルファブレンドしても、望ましい効果が得られないことです。代わりに、これが生成されます:

2つの透明円を重ねる

それはブレンドオプションの問題として私を襲いません。問題は、私には、その種の画像には、透明マスクと画像(黒い正方形)が組み込まれているため、それらを分離する必要があるということです。

そのため、カットアウト透明度が組み込まれた黒い画像の代わりに、実行時に黒い正方形に対して使用される透明度マスクを使用する必要があります。それを行うとき、私はまだ伝統的な白と黒の透明マスクを使用することができません、または同じ問題に遭遇します。次に例を示します。今回は白と黒が白と黒を表します。

透明マスク

解決策は、それ自体が透明度を利用する透明度マスクを適用することであると思われます。このようなもの:(緑=透明)

透明度付きの透明度マスク

これにより、複数の透明マスクをアルファブレンドし、黒い正方形に対する透明マスクとして使用できます。アルファブレンドされた2つの透明度マスクの例を次に示します。

透明度を持つ2つの透明度マスク

とにかく、それが私が実装に取り​​組んでいるアプローチです。これが機能する場合、結果を投稿します。(現時点では)わからないのは、それ自体が透明性を持つ透明マスクを使用できるかどうかです。


それについて考えると、透明マスクを動かして大きな黒いテクスチャに適用する必要があるようです。しかし、それがどのように行われるかはわかりません。
キャメロンフレッドマン

7
グラデーションをどのように作成または適用しているかはわかりませんが、これはブレンドの問題になる可能性があり、適切なブレンドを使用すればうまく機能します。テクスチャに関する詳細情報が必要です。
dennmat

私はAndEngineをフレームワークとして使用しており、「setBlendFunction()」が利用可能ですが、多くのブレンドが舞台裏で行われています。
キャメロンフレッドマン

あなたがリンクしたものを見ると、それがうまくいかない場合、おそらく2番目のソリューションを下部または3番目にリストしたいと思うでしょう。私はandEngineについて明確ではありません、そして彼らはドキュメントを持っていなかったようです舞台裏のオプション。
dennmat

そのスレッドはそもそも問題を修正しているようですが、その変更を含むバージョンはありますか?
-dennmat

回答:


3

概念的には、複数のスポットライトのソリューションは以下で構成されます。

  1. シーン内の各ピクセルの照明値を保持するために、完全に黒い配列から始めます。
    • ゼロは、まったく光のない画像の領域を表します。
    • 100%は、日光で完全に飽和しているエリアを表します。
    • 派手にしたい場合は、100%を超える値(たとえば200%)を使用して、画像の領域が飽和状態になり、すべてをぼやけてピクセルの白い塊にすることができます。これについては後で心配し、当面は値を0〜100%に制限します。
  2. 画面内の光源、またはハローが光に追加するエッジに十分近い光源ごとに、その光源からのライト値をシーンピクセルのライト値の配列に追加します。
  3. 結果のlight-value-arrayを使用して、次のようにシーンのピクセルを変更します。
    • 0%の光で照らされたピクセルは黒です。
    • 100%の光で照らされたピクセルは、通常の色です。
    • 他のピクセルは中間の色です。
    • スクリーンショットから判断すると、このステップの実行方法はすでにわかっているようです。

秘Theは、アルファブレンディングがこれらの手順の1つ以上を実行できることを理解することです。アルファブレンディングとは、アルファマップ/画像を使用して、画像またはテクスチャのピクセルを簡単な方法で変更することを指します。また、通常は、高速化するために高速な機能セットになるか、特別なハードウェアコマンドで実装されることを意味します。通常の配列と通常の言語コマンドでそれを行うことができますが、特別なアルファ/ブレンドライブラリ関数を使用する方がおそらく良いでしょう。...そしてバグはありません。これは時々ピクセルを部分的に透明にすることを意味しますが、あなたの場合、これは以下を意味します:

  • 各ピクセルにアルファ値を追加して、#1からlight-value-arrayを構築します。
  • #1のlight-value-arrayを使用して、ステップ#3のピクセルの最終色を解決します。

アルファブレンド関数のドキュメントを調べて、さまざまな種類のピクセルを結合するために提供される機能を確認します。私は彼らがあなたが実行する必要がある各ステップのための機能を持っていると思うが、それらは明白ではない名前の下にあるかもしれない。


この答えを掘り下げて、試してみます。100%を超える値のレンズフレア/ぼかしのアイデアは、素晴らしいインスピレーションを与えるボーナスでもあります。プロセスで学んだ教訓を含む更新を投稿します。おかげでET
キャメロンフレッドマン
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.