Polygon2D Texture Stretching

alib123

Hi everyone,

I have a Polygon2D that is set to a trapezoid shape. I have a non-repeating texture (png image) that I want to display uniformly stretched inside it.

I set the Polygon2D vertices to the trapezoid shape I want, apply the texture and set the UV veritces to the exact texture(image) size (rectengular) and achieve something close to what I want. Sides of the texture are mostly correctly stretched, but the middle is always skewed to one side. (You can see below in the resulting image that the center is to the left, while the trapezoid is isosceles so I expected it to stay in the middle.)

Below are the values I am using and the results I get. Am I missing something, or is there a better way to uniformly stretch an image into a trapezoid? Thanks!

Original texture/image:

Values for the trapezoid Polygon2D:

Result I get:

Expected:

TwistedTwigleg

(I'm not sure why, but this post was stuck in the moderation queue. Seems like everything is in order though, so I think the forums software accidentally flagged it or something.)

If I had to guess, the issue is probably related to the -10 and 522 offsets, which is skewing the polygon just enough to cause the issue. Maybe change vertex position 3 to (522, 128) and see if that fixes it? It could be the difference between the second and third vertex on the X coordinate is giving the skewed perspective.

If that does not work, then maybe try using (0, 0) (512, 0) (512, 128) and (0, 128) as positions and see if that fixes it? I don't know if that would help, but it might be worth a try.

Outside of that I do not know right off, I haven't really used the Polygon2D node very much in Godot. Regardless, hopefully this is of some help! (Side note: Welcome to the forums!)

alib123

Thank you very much for the answer, I will give it a try and report back with the results.

Trying to put a perspective illusion on a 2D image by stretching it into a trapezoid, any other suggestions to accomplish this are also welcome.

Note: Sorry accidentally opened this thread as a discussion rather than a question.

Edit: Just tried it and moved all the coordinates to the positive side keeping the same shape, getting the exact same result.

Edit 2: This gave me an idea, reversed the trapezoid so the bottom is the larger side and the top is smaller, and the stretching seems to be working correctly. Then rotated the Polygon2d 180 degrees and got what I originally wanted:

If it works out I'll post another update with an actual usage image from the project if anyone is interested.

Edit 3: That last one wasn't quite right, UV vertices were off. Still getting the skewed result.

TwistedTwigleg

Hmm, I don't know then. I primarily do 3D game development, so unfortunately I haven't really used the Polygon2D node so I don't know what is expected behavior and what isn't. It sounds like it might be a bug.

Later I can try to test the texture on a local project and see if I can figure out a potential solution (or a workaround).

@alib123 said: Note: Sorry accidentally opened this thread as a discussion rather than a question.

No problem, I can change it. It should now be a question instead of a discussion.

alib123

I think I found the cause and a potential solution. Could be considered a bug.

I am quite new to game development, but from what I understand Godot internally uses a shader applied to the texture to resize/stretch etc. The math in the shader, either due to performance/choice or a bug is not producing uniform results if the texture isn't a rectangle, maybe because this is more efficient and considered unnecessary in 2D.

Applying a simple shader to move the vertex points of the texture on a sprite gives the same skewed result.

I am working on a custom shader and got close to what I want, but probably need to spend more time on the math to get it exact.

Megalomaniak

http://www.reedbeta.com/blog/quadrilateral-interpolation-part-1/