여러 개의 2D 스포트라이트를 만들려면 어떻게합니까?


12

여러 엔터티에 스포트라이트를 허용하는 2D "스포트라이트"효과를 만들려고합니다. 즉, 여러 스프라이트가 횃불을 들고있는 것처럼. 단일 엔티티 (하나의 스포트라이트)의 경우 그라디언트 스프라이트를 오버레이하고 중심점에서 해당 엔티티를 추적하는 기술을 사용합니다. 이 기술은 단일 스포트라이트에 적합합니다. 다음은 내가 말하는 것을 설명하는 스크린 샷입니다.

단일 스포트라이트-작동

하나의 스포트라이트로 스포트라이트 효과

내가 겪는 문제는이 기술이 여러 엔티티로 확장되지 않는다는 것입니다. 다른 스포트라이트 이미지를 오버레이하면 몇 가지 문제가 발생합니다. 다음은 시뮬레이트 된 스크린 샷입니다.

다중 스포트라이트 = 문제

두 개의 스포트라이트로 스포트라이트 효과

가장 명백한 문제는 보이는 모서리입니다. 전체 레벨을 커버하기 위해 스포트라이트 이미지를 거대하게 만들어서 해결할 수는 있지만 옳지 않습니다. 두 번째로 더 다루기 힘든 문제는이 기법으로 어둠을 효과적으로 곱한다는 것입니다. 따라서 추가 된 각 스프라이트는 다른 사람을 어둡게하는 효과가 있습니다. 분명히 나는이 문제에 잘못 접근하고있다.

어떤 아이디어?


지속적인 노력

주석에서 혼합 옵션에 대한 논의가있었습니다. 여기 내 현재 생각이 있습니다. 위의 단일 스포트라이트 예제에서는 다음과 같은 이미지 파일을 사용합니다. (투명성을 쉽게 설명하기 위해 녹색을 녹색으로 바꿨습니다)

투명성 접근

위에서 논의 된 바와 같이, 문제는이 이미지를 다른 이미지와 알파 블렌딩하여 원하는 효과를 생성하지 못한다는 것이다. 대신에 이것을 생성합니다 :

두 개의 투명도 원 오버레이

그것은 혼합 옵션 문제로 나를 놀라게하지 않습니다. 문제는, 일종의 이미지가 투명 마스크와 이미지 (검은 사각형)가 분리되어야 할 때 내장되어 있다는 것입니다.

따라서 컷 아웃 투명도가 내장 된 검은 이미지 대신 검은 사각형에 대해 런타임에 사용되는 투명 마스크를 사용해야합니다. 그렇게 할 때 여전히 전통적인 흰색과 검은 색 투명 마스크를 사용할 수 없거나 같은 문제가 발생합니다. 예를 들어, 이번에는 흰색과 검은 색이 흰색과 검은 색을 나타냅니다.

투명도 마스크

해결책은 자체적으로 투명성을 활용하는 투명성 마스크를 적용하는 것입니다. 이와 같은 것 : (녹색 = 투명)

투명도가있는 투명도 마스크

이렇게하면 여러 개의 투명도 마스크를 함께 알파 블렌딩 할 수 있으며 검은 사각형에 대한 투명도 마스크로 사용할 수 있습니다. 다음은 알파가 함께 혼합 된 두 가지 투명도 마스크의 예입니다.

투명도가있는 두 개의 투명성 마스크

어쨌든, 그것이 내가 구현하려고하는 접근법입니다. 이것이 작동하면 결과를 게시 할 것입니다. 내가 현재 모르는 것은 투명성이있는 투명 마스크를 사용할 수 있는지입니다.


그것에 대해 생각하면 투명 마스크를 움직여서 큰 검은 질감에 적용 해야하는 것처럼 보입니다. 그래도 어떻게 될지 모르겠습니다.
Cameron Fredman

7
그라디언트를 작성하거나 적용하는 방법을 잘 모르지만 올바른 혼합을 사용하면 제대로 작동하는 혼합 문제 일 수 있습니다. 텍스처에 대한 자세한 정보가 필요합니다.
dennmat

AndEngine을 프레임 워크로 사용하고 있으며 "setBlendFunction ()"을 사용할 수 있지만 많은 블렌딩이 배후에서 일어나고 있습니다.
Cameron Fredman

당신이 연결된 것을 보면 아마도 두 번째 솔루션이 맨 아래에 나열되거나 세 번째 솔루션이 효과가 없다면 세 번째 솔루션을 원한다고 말하고 싶습니다. 나는 andEngine에 대해 명확하지 않으며 문서가없는 것 같습니다. 아마도 해당 스레드에서 답을 찾을 수 없다면 이미 블렌딩으로 놀고있는 것처럼 보이기 때문에 더 도움이 될 수 있습니다 뒤에서 옵션을 많이.
dennmat

해당 스레드가 처음에 문제를 해결하는 것처럼 보이지만 해당 변경 사항이 포함 된 버전이 있습니까?
dennmat

답변:


3

개념적으로 여러 스포트라이트에 대한 솔루션은 다음과 같이 구성됩니다.

  1. 완전히 검은 색 배열로 시작하여 장면의 각 픽셀에 대한 조명 값을 유지합니다.
    • 0은 빛이 전혀없는 이미지 영역을 나타냅니다.
    • 100 %는 일광으로 완전히 포화 된 영역을 나타냅니다.
    • 화려하게 만들고 싶다면 100 %보다 높은 값 (예 : 200 %)이 과포화되어있는 이미지의 영역을 나타내며 모든 것을 눈부신 흰색 픽셀 덩어리로 흐리게합니다. 나중에 걱정하고 당분간 0-100 % 사이의 값을 제한하십시오.
  2. 화면 내의 각 광원에 대해 또는 후광이 광원에 추가 할 수있는 가장자리에 충분히 가까워지면 해당 광원의 광원 값을 장면 픽셀의 광원 값 배열에 추가하십시오.
  3. 결과 광값 배열을 사용하여 다음과 같이 장면의 픽셀을 수정하십시오.
    • 0 % 빛으로 비추는 픽셀은 검은 색입니다.
    • 100 % 빛으로 비추는 픽셀은 정상적인 색상입니다.
    • 다른 픽셀은 중간에 색상입니다.
    • 스크린 샷으로 판단 하여이 단계를 수행하는 방법을 이미 알고있는 것 같습니다.

트릭은 알파 블렌딩이 이러한 단계 중 하나 이상을 수행 할 수 있다는 것을 이해하고 있습니다. 알파 블렌딩은 알파 맵 / 이미지를 사용하여 이미지 나 텍스처의 픽셀을 간단한 방식으로 수정하는 것을 말합니다. 또한 일반적으로 빠른 기능을 구현하거나 특수 하드웨어 명령으로 구현하여 빠르게 만들 수 있음을 의미합니다. 일반 배열과 일반 언어 명령으로 수행 할 수 있지만 특수 알파 / 블렌딩 라이브러리 함수를 사용하는 것이 좋습니다. ... 버그가 없습니다. 때때로 이것은 픽셀을 부분적으로 투명하게 만드는 것을 의미하지만 귀하의 경우에는 다음을 의미합니다.

  • 각 픽셀에 알파 값을 추가하여 # 1부터 조명 값 배열을 만듭니다.
  • 1 단계의 빛-값 배열을 사용하여 3 단계의 픽셀에 대한 최종 색상을 결정합니다.

다양한 종류의 픽셀을 결합하기 위해 어떤 기능을 제공하는지 알기 위해 알파 블렌딩 기능에 대한 설명서를 찾기 시작했습니다. 나는 그들이 수행해야 할 각 단계마다 기능이 있다고 생각하지만 명확하지 않은 이름으로 표시 될 수 있습니다.


나는이 대답을 파고 그것을 발사 할 것입니다. 100 % 이상의 값에 대한 렌즈 플레어 / 블러 아이디어는 훌륭하고 고무적인 보너스이기도합니다. 과정에서 배운 교훈과 함께 업데이트를 게시합니다. 감사합니다 동부 표준시
Cameron Fredman
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.