LibGDX에서 사다리꼴 스프라이트 구현하기

Question

단순한 2D 게임을위한 절차 적 애니메이션 엔진을 만들려고합니다. 이렇게하면 적은 수의 이미지에서 멋지게 보이는 애니메이션을 만들 수 있습니다 (이 접근법과 유사하지만 2D의 경우 : http://www.gdcvault.com/play/1020583/Animation-Bootcamp-An-Indie-Approach)

나는 다른 애니메이션 객체에 대한 데이터를 저장할 키 프레임이 순간

, 키 프레임은 다음과 같은 표현 수레의 배열 인 :

translateX는, translate Y를, scaleX가, scaleY를 회전 (도)

I skewX, skewY, taperTop 및 taperBottom을이 목록에 추가하려고합니다. 그러나 저는 h입니다. 제대로 렌더링하는 데 어려움이 있습니다.

float[] vert = sprite.getVertices(); 
vert[5] += 20; // top-left vertex x co-ordinate 
vert[10] -= 20; // top-right vertex x co-ordinate 

batch.draw(texture, vert, 0, vert.length); 

불행하게도이 이상한 질감 모핑을 생산 :

이

내 그것을 사다리꼴 모양을주고 스프라이트의 상단에 테이퍼를 구현에서 시도였다.

나는 구글의 비트와 StackOverflow의 주위를 살펴했고 나는 데 문제로 나타나는이 발견 :

http://www.xyzw.us/~cass/qcoord/

그러나 나는 그 뒤에 수학을 이해하지 못하는 (s, t, r 및 q는 무엇입니까?).

누군가가 좀 더 간단하게 설명 할 수 있습니까?

Answer 1

기본적으로 쿼드가 적을수록 직사각형과 비슷하지만 모양 전체에서 텍스처 좌표를 선형 적으로 보간하는 효과로 인해 모양이 더 나쁩니다. 쿼드를 구성하는 두 개의 삼각형은 다른 크기로 늘어나므로 선형 보간법을 사용하면 이음새가 매우 눈에.니다.

각 정점의 텍스처 좌표는 조각 셰이더가 처리하는 각 조각마다 선형 보간됩니다. 텍스처 좌표는 일반적으로 이미 분할 된 객체의 크기와 함께 저장되므로 좌표는 텍스처의 가장자리와 일치하는 0-1의 범위에 있습니다 (이 범위를 벗어나는 값은 고정되거나 감싸집니다). 또한 일반적으로 3D 모델링 프로그램이 메시를 내보내는 방법이기도합니다.

사다리꼴을 사용하면 직선 보간 후에 텍스처 좌표에 너비를 미리 곱한 다음 텍스처 좌표에서 너비를 사후 나누어서 왜곡을 제한 할 수 있습니다. 이것은 사다리꼴의 넓은면에있는 구석에서 기울기가 더 수평이되도록 두 삼각형 사이의 대각선을 휘게하는 것과 같습니다. 그것을 설명하는 데 도움이되는 이미지가 있습니다.

텍스처 좌표는 일반적으로 구성 요소와 2D 벡터로 표현 U와 V, 또한 S 및 T.로 알려진하지만 구성 요소에서 크기를 분할하려는 경우, 당신은 또 하나 개의 구성 요소를 필요 보간 이후에 나눌 것입니다. 이것을 Q 성분이라고 부릅니다. 3D 텍스처에서 2D 텍스처 대신 무언가를 찾는 경우 P 구성 요소가 텍스처의 세 번째 위치로 사용됩니다.

여기에 어려운 부분이 있습니다 ... libgdx의 SpriteBatch는 Q 구성 요소에 필요한 추가 정점 속성을 지원하지 않습니다. 따라서 SpriteBatch를 복제하고 texCoord 특성에 추가 구성 요소가 포함되도록주의 깊게 살펴본 다음 수정하거나 서명되지 않은 바이트로 저장되어 있어도 기존 색상 특성을 다시 사용할 수 있습니다.

관계없이 미리 너비 분할 된 텍스처 좌표가 필요합니다. 이를 단순화하는 한 가지 방법은 4 개의 꼭지점에 대한 쿼드의 실제 크기를 사용하는 대신 사다리꼴의 상단 너비와 하단 너비의 비율을 얻으므로 맨 위 부분을 너비 1로 처리하여 남겨 둡니다. 혼자.

그런 다음 너비로 미리 곱하기 위해 TextureRegion의 기존 텍스처 좌표를 수정해야합니다. 위의 단순화 때문에 사다리꼴의 꼭대기에 꼭지점을 남길 수 있지만 두 개의 좁은 꼭지점의 U와 V 좌표에 bottomWidth을 곱해야합니다. TextureRegion 또는 테이퍼 값 중 하나를 변경할 때마다 정점 배열에 다시 계산해야합니다.

버텍스 셰이더에서는 여분의 Q 구성 요소를 프래그먼트 셰이더에 전달해야합니다.

vec4 textureColor = texture2D(u_texture, v_texCoords); 

을하지만 우리의 경우에 우리는 여전히 Q 구성 요소로 분할해야합니다 : 프레 그먼트 쉐이더에서, 우리는 일반적으로 다음과 같은 크기 분할 텍스처 좌표를 사용하여 우리의 질감 색상을 찾아

vec4 textureColor = texture2D(u_texture, v_texCoords.st/v_texCoords.q); 

그러나 이것은 벡터가 텍스처 함수로 전달되기 전에 벡터를 수정하기 때문에 의존 텍스처를 읽습니다. GLSL은 자동으로 위를 수행하는 기능을 제공합니다 (그리고 나는 종속 텍스처 읽기가 발생하지 않는 가정) :

이

vec4 textureColor = texture2DProj(u_texture, v_texCoords); //first two components automatically divided by last component