눈에 띄지 않게 반복되는 넓은 공간 배경을 만드는 방법

RTS 게임에서 반복되는 넓은 공간 배경을 어떻게 만들 수 있습니까? 복잡한 성운과 먼지 필드도 갖고 싶지만 장치가 탐험 할 공간이 많기 때문에 120000 x 1200000px jpeg를 가질 수 없으므로 이미지를 반복하고 싶지만 세그먼트간에 선이 변경되지는 않습니다.

웹 GL 캔버스를 위해 Microsoft의 Babylon 프레임 워크와 함께 이것을 사용하고 있습니다.

1. 시차 스크롤을 사용하십시오. 주 관측점의 속도의 다른 비율로 스크롤되는 여러 배경 레이어가 있습니다. 레이어가 낮을수록 스크롤 속도가 느려집니다. 이것은 깊이의 착시를 제공하는 좋은 방법 일뿐만 아니라 레이어가 동기화되지 않아서 다른 레이어의 객체가 다른 컴포지션에 나타나기 때문에 배경이 덜 반복적으로 보이게합니다.

2. 절차 적으로 배경을 만듭니다. 하나의 거대한 배경 그래픽 대신 여러 개의 다른 작은 요소가 있으며 모든 요소를 ​​게임 세계에 무작위로 여러 번 배치합니다.

그리고 당신이 그것을 피할 수있을 때 JPEG를 사용하지 마십시오. 이 형식은 수정 및 저장할 때마다 더 많은 품질을 잃어 버리는 손실이 많은 형식으로, 사진에 크게 최적화되어 있으며 투명성을 지원하지 않습니다. PNG와 같은 알파 채널에 무손실 형식을 사용하십시오. 유일한 이유는 소스 이미지가 JPEG (NASA에서 모두 공개 도메인에있는 멋진 천문학 그림을 많이 게시 한 경우)에서만 사용할 수 있고 그에 대해 수정하지 않으려는 경우입니다.

2D 게임을위한 무한한 배경을 구축하는 방법은 다음과 같습니다.

1. Mac 용 iDraw와 같은 그래픽 편집기 소프트웨어를 사용 하여 배경의 일부를 나타내는 이미지 A 를 만듭니다 . 이 이미지는 크기가 제한되어 있어야합니다.
2. A를 복제하고 Y 축에 대칭시킵니다. 이것은 B입니다.
3. 이제 (가로) togheter A와 B를 붙여 넣으십시오 . 이것은 AB 입니다.
4. 마지막으로 게임에서 이미지 AB 를 가져 와서 원하는만큼 코드를 통해 가로로 반복하십시오.

도움이 되었기를 바랍니다.

레이어가 잘 작동합니다.

수학은 다음과 같습니다.

철도 선로가 잘못 만들어 져서 __ __그들 사이의 간격을 알 수 있다고 가정 해보십시오 . 휠이 롤오버되면 작은 노치 (작은 노치)가 만들어집니다.

트랙 길이는 경우 l휠은 반경 r다음 2pi r, 바퀴의 원둘레 인 ration=l/(2pi r)비율이 오래 타기로 다음 바퀴가에서 매 분기 노치를 얻을 것이다 10.25 말할 경우.

이것은 공백을 설명하는 가장 쉬운 방법입니다.

따라서 두 개의 이미지가 있다고 가정하십시오. 하나의 분기 비율을 가지면 4 단계 패턴이 생기고 4 개의 타일 후에 반복됩니다. m 및 n 단계의 1 개의 기본 배경과 2 개의 오버레이가 있다고 가정합니다. 그런 다음 m * n 타일 후에 패턴이 반복됩니다.

숫자가 동일 프라임 인 경우 패턴이 가장 잘 보이지는 않지만 가장 큰 제수는 1입니다. 예를 들어 6 단계와 4 단계가 있다고 가정하면 다른 모든 단계는 "일렬로 정렬됩니다. " 어떤 의미에서.

이 기술을 사용하면 (특히 파티클 및 재료와 함께) 아주 적은 노력으로 많은 "고유 한"재료를 만들 수 있습니다.

기차 바퀴로 돌아 가면 비율이 비합리적 인 경우 노치가 바퀴를 덮습니다! 그러나 이것은 실제로 중요하지 않습니다.

누락 된 것으로 보이는 또 다른 아이디어는 다음과 같습니다.

스카이 박스와 같은 장거리 배경의 경우 시차 레이어는 실제로 기분이 좋지 않습니다. 예를 들어, 지구를 걸을 때나 밤새 잘 지낼 때 별을 생각하십시오. 우리는 별이 서로 멀어지면 수백 또는 생각이라는 것을 알고 있지만 모든 별이 함께 움직입니다. 문제는 거리가 너무 멀다는 것입니다. 우리는 여전히 계산 능력이 제한되어 있기 때문에 (120k * 120k) 매우 큰 텍스처를 원합니다 (최대 8k * 8k 처리 가능). 여러 시차 레이어를 사용하는 것과 같이 각기 다른 종류의 디테일을 가진 다른 텍스처를 만들어야합니다. 예를 들어, 하나는 은하를 나타내고 다른 하나는 별의 무리 등을 나타냅니다. 그러나 이번에는 다른 속도로 이동하는 대신 크기가 달라야합니다. 예를 들면 다음과 같습니다. 3 개의 텍스처를 사용해보십시오. 하나는 2048 * 2048이고 다른 하나는 729 * 729이고 세 번째는 625 * 625입니다. 이 숫자는 서로 공통점이 있기 때문에이 3 개의 텍스처를 3 개의 레이어로 결합 할 때 원점에서 lcm (2048,729,625) = 764M 픽셀을 이동하여 같은 것을 그려야합니다. 실제로 다른 레이어를 추가하거나 각 텍스처의 크기를 변경할 수 있으며 항상 다음과 같은 결과를 얻을 수 있습니다최소한 의 텍스처 크기의 배수 .

이것은 절차 적 픽셀 셰이더에 대한 작업 인 것 같습니다.

이미지를 사용하는 것의 장점은 다음과 같습니다.

• 큰 비트 맵을 제공 할 필요가 없습니다
• 절차 적이므로 고정 된 이미지를 반복 할 필요가 없습니다 (무한하게 달라질 수 있음)
• 시차 효과를 원한다면 이미지를 사용하여 실용적이지 않은 수천 개의 평면을 시뮬레이션 할 수 있습니다
• 다이내믹 라이팅과 같은 매우 고급 효과를 낼 수 있습니다
• 대부분의 처리는 GPU에서 수행되므로 게임의 다른 부분에는 CPU를 사용할 수 없습니다.

간단한 웹 검색으로이 셰이더를 http://casual-effects.blogspot.com.au/2013/08/starfield-shader.html로 가져올 수 있습니다.

WebGL의 전문가는 아니지만 이 페이지 에 따르면 일반 GLSL 언어를 사용하는 것 같습니다 (그래픽 카드에서 셰이더를 프로그래밍하는 데 사용하는 C와 같은 언어입니다). 즉, 작동하게하기 위해 변경 사항이 거의 없거나 전혀 없을 것입니다.

그러나 기본 셰이더로 시작하여 작동 방식을 이해할 수 있습니다.

이 블로그 페이지 에는 WebGL에서 셰이더를 구현하는 모든 단계가 나열되어 있습니다. 시작하기 좋은 곳인 것 같습니다.

멋진 쉐이더 예제를 찾는 또 다른 좋은 곳은 https://www.shadertoy.com/

큰 jpeg를 작은 ​​세그먼트로 잘라내어 (보이는 부분) 배치 할 수 있으며 항상 메모리에 저장할 필요가 없습니다.

그리고 오래된 게임처럼 일부 '타일'은 반복 될 수 있습니다. 그것은 NES 콘솔의 일반적인 솔루션이었고, 심지어 하드웨어에서도 지원되었습니다.