# SamStorms

Members

5

• #### Last visited

• Rank
Newbie
• Birthday March 4

## Contact Methods

• Website URL
http://sammetal92.github.io

## Profile Information

• Gender
Male
• Location
Behind You
• Interests
Computers
Programming
Games
Guitars and Drums
Books
Movies And TV Series
1. ## Determining Starting Positions of Cars (Top-Down Racing)

Hello, everyone. I've previously posted here before regarding my university project, and you all were very helpful in figuring out the solution to my issue. That's why I've decided to discuss something with you again that has been hindering the development on my project. The project is a real-time multiplayer top-down car racing game in which the host of a game selects a route of his/her choice via Google Maps, and the app makes a racing track out of the shape of the route (point-to-point race track, no laps). Now, the first issue that I'm having is determining the starting positions of all the cars on the race track. Basically, what I'm doing is taking the array of points returned by the Google Maps API and converting them into Cartesian coordinates, then putting a rope object on those coordinates with a road texture. Right now, I just have the cars start out at the first point in the array rotated in the correct direction of the track. This is the code of the module that converts the route coordinates into Cartesian coordinates, determines the starting direction of the car, the starting point of the car and the X and Y bounds of the world. I've just put this here in case its relevant and in case someone would need to see it to help me out. var startingDirection, startingPoint, maxX=0, maxY=0, points = [];function trackGen(scale, xOffset, yOffset){ temp = JSON.parse(localStorage.pointsArray); for (i in temp) { points[i] = {}; points[i].x = temp[i].lng + xOffset; points[i].y = temp[i].lat + yOffset; maxX = maxX < points[i].x * scale ? points[i].x * scale : maxX; maxY = maxY < points[i].y * scale ? points[i].y * scale : maxY; points[i].x *= scale; points[i].y *= scale; } startingDirection = Math.atan2(points[1].y - points[0].y, points[1].x - points[0].x) + (Math.PI / 2); startingPoint = {x: points[0].x, y: points[0].y};}This is how it looks at the moment: So if anyone can help me figure out how to calculate the starting position of the car, that would be great. Thanks for reading!
2. ## Filling A Polygon With A Texture

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?
3. ## Filling A Polygon With A Texture

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.
4. ## Filling A Polygon With A Texture

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.
5. ## Filling A Polygon With A Texture

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