How would I implement an endless road the player runs down?

Question

I want to create the illusion that a man is running down a long road i.e. this pic

http://camlinecambridgelimited.web.officelive.com/images/road%20graphic1.jpg

If you have played Temple Run on the iPhone, it's the same principle, but instead of a temple it's a normal road.

I want to know how this is implemented. For example, do I just repeat this road image in a loop?

Answer 1

I would draw a single textured quad on the ground (i.e. lying on the XZ plane), as big as the visible area should be, and then play around with the vertices texture coordinates (with the texture addressing mode set to wrap) in order to automatically take care of both texture repetition and texture scrolling.

1. For repetition instead of setting your vertical texture coordinate from [0 to 1], set it from [0 to N] where N is the number of times you'd like the texture to repeat. Adjust this value depending on how tall your quad is in comparison to your texture height.
2. For scrolling I'd simply scroll the vertical texture coordinate, so that instead of ranging from [0 to N] it would range from [inc to N+inc] with the value of inc being incremented or decrement each frame. From time to time I'd wrap inc back to the origin in order to prevent overflow/underflow.

---

EDIT I just tried implementing this exactly as I described (but in XNA) and it worked quite well. See this video of the demo. Source code here for those interested.

---

For instance, with N equal to 3 you would get something like the image below (I've painted the middle section in red so that you can see where the repetition occurs). Then, simply changing the value of inc would make the road scroll in one direction or the other, depending on whether you incremented or decremented it.

Answer 2

If you want to make an endless road "for real", you create three surfaces and have them loop as each surface moves outside of view. Place the surfaces end to end in world space and move them all towards the camera. As the nearest end moves off camera, reset its position to the end of the furthest surface.

If you want to implement it as a sprite with the illusion of movement, you need to create a number of different textures, which should look something like this:

As the view moves forwards loop through the textures in order.

Answer 3

Repeating the image is a good idea. Figure out how many repetitions need to be visible on screen, and draw the image that number of times. As the road scrolls, there will be a point where one image is completely behind the camera and thus invisible. At that point, you want to move that image from behind your feet to the far end of your finite image strip.

While we're at it, you'll get the best effect out of it by mimicking the unsteady perspective of a running man. Record a movie of you running from the perspective of your eyes, and study it.