java - Implementando sprites trapezoidales en LibGDX

opengl animation

Question

Intento crear un motor de animación de procedimientos para un simple juego 2D, que me permita crear animaciones atractivas a partir de un pequeño número de imágenes (similar a este enfoque, pero para 2D: http://www.gdcvault.com / play / 1020583 / Animation-Bootcamp-An-Indie-Approach )

En este momento tengo fotogramas clave que contienen datos para diferentes objetos de animación, los fotogramas clave son matrices de flotantes que representan lo siguiente:

translateX, translateY, scaleX, scaleY, rotation (degrees)

Me gustaría agregar skewX, skewY, taperTop y taperBottom a esta lista, pero estoy teniendo problemas para renderizarlos.

Este fue mi intento de implementar una conicidad en la parte superior del sprite para darle una forma trapezoidal:

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);

Desafortunadamente, esto está produciendo una textura morphing extraña.

Tuve un poco de Google y una mirada alrededor de StackOverflow y encontré esto, que parece ser el problema que estoy teniendo:

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

Sin embargo, no entiendo las matemáticas que hay detrás (¿qué son s, t, r y q?).

¿Alguien puede explicarlo un poco más simple?

Answer 1

Básicamente, cuanto menos se parezca un cuadrángulo a un rectángulo, peor será la apariencia debido al efecto de interpolación lineal de las coordenadas de textura a lo largo de la forma. Los dos triángulos que forman el quad se extienden a diferentes tamaños, por lo que la interpolación lineal hace que la costura sea muy notable.

Las coordenadas de textura de cada vértice se interpolan linealmente para cada fragmento que procesa el sombreador de fragmentos. Las coordenadas de textura normalmente se almacenan con el tamaño del objeto ya dividido, por lo que las coordenadas están en el rango de 0-1, correspondiente a los bordes de la textura (y los valores fuera de este rango se sujetan o se envuelven). Esto también es típico de cómo cualquier programa de modelado 3D exporta mallas.

Con un trapecio, podemos limitar la distorsión multiplicando previamente las coordenadas de la textura por el ancho y luego dividiendo posteriormente el ancho de las coordenadas de la textura después de la interpolación lineal. Esto es como curvar la diagonal entre los dos triángulos de modo que su pendiente sea más horizontal en la esquina que está en el lado más ancho del trapezoide. Aquí hay una imagen que ayuda a ilustrarlo.

Las coordenadas de la textura generalmente se expresan como un vector 2D con componentes U y V, también conocidos como S y T. Pero si desea dividir el tamaño de los componentes, necesita un componente más por el que se dividirá después de la interpolación. y esto se llama el componente Q. (El componente P se usaría como la tercera posición en la textura si buscas algo en una textura 3D en lugar de una textura 2D).

Ahora viene la parte difícil ... SpriteBatch de libgdx no admite el atributo de vértice adicional necesario para el componente Q. Así que puedes clonar SpriteBatch y revisarlo y modificarlo para tener un componente adicional en el atributo texCoord, o puedes intentar rediseñar el atributo de color existente, aunque se almacena como un byte sin signo.

De todos modos, necesitará coordenadas de textura divididas previamente al ancho. Una forma de simplificar esto es, en lugar de usar el tamaño real del quad para los cuatro vértices, obtener la proporción de los anchos superior e inferior del trapezoide, para que podamos tratar las partes superiores como un ancho de 1 y, por lo tanto, dejarlas solo.

float bottomWidth = taperBottom / taperTop;

Luego debe modificar las coordenadas de textura existentes de TextureRegion para pre-multiplicarlas por los anchos. Podemos dejar los vértices en el lado superior del trapecio solo debido a la simplificación anterior, pero las coordenadas U y V de los dos vértices del lado estrecho deben multiplicarse por el bottomWidth . Debería volver a calcularlos y colocarlos en su matriz de vértices cada vez que cambie la TextureRegion o uno de los valores de reducción.

En el sombreador de vértices, necesitaría pasar el componente Q adicional al sombreador de fragmentos. En el sombreador de fragmentos, normalmente buscamos nuestro color de textura usando las coordenadas de textura divididas por tamaños como esta:

vec4 textureColor = texture2D(u_texture, v_texCoords);

pero en nuestro caso todavía tenemos que dividir por ese componente Q:

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

Sin embargo, esto causa una lectura de textura dependiente porque estamos modificando un vector antes de pasarlo a la función de textura. GLSL proporciona una función que automáticamente hace lo anterior (y supongo que no causa una lectura de textura dependiente):

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