Filling A Polygon With A Texture

[SamStorms]

I'm new here, though not new to game programming

I'll try being short and to the point. My university's final year project is a Car Racing (2D top-down) game that takes any (ANY) route of the player's choice from Google maps and turns it into a race track. Then the player challenges their friends and race in real-time multiplayer. And the game is made in Phaser.

 

I can take the array of points returned by the maps API and convert those into Cartesian coordinates and draw the whole track, with the boundaries of the road and everything. The problem I'm facing now is that I have a rectangular road texture, and I want to fill that shape generated from the points of the route with that road texture.

 

Now, I asked this question to someone before and they suggested that I make the rectangular texture into a trapezoid and manipulate the individual sections, the more the sections the smoother the fill will be. Makes sense in theory.

 

However, I can't find anything related to this in Pixi. Using another topic, I did learn how to skew images in HTML5 Canvas, but I can't figure out how to go about doing this in Pixi.

 

Any help would be appreciated Thanks for reading!

 

PS: Here's what my application can do, at the moment (apologies, I couldn't upload the picture here directly for some reason):

 

[msha]

Try this: http://www.goodboydigital.com/pixijs/docs/classes/Rope.html

[SamStorms]

Thank you for the response, that looks really promising, but I haven't gotten a chance to try it out yet because of work I'll try it and report how it worked out.

[SamStorms]

That actually kind of worked, only problem is that Rope stretches the texture, this would be perfect if, by some means, I can tile the texture on the rope. For now, I can't figure out how.

[CtlAltDel]

I believe the uv's should handle that.

[SamStorms]

I believe the uv's should handle that.

 

Could you please elaborate that a bit? The Rope object wraps the whole texture around the array of points one gives it. It would be better to tile the texture instead of wrapping it around the shape. How would I manipulate the UVs in order to do that?

[CtlAltDel]

UVs go from 0 -> 1 I believe, which means 0 start of texture 1 end of the texture. And in the rope code you see the UVs being set like that. I guess you should determine the tiling size and set the UVs accordingly for each triangle. If that makes sense.