Take the 2-minute tour ×
Game Development Stack Exchange is a question and answer site for professional and independent game developers. It's 100% free, no registration required.

I've been looking at a 2D physics game called 'Hill Climb Racing' (Android and iOS) and was wondering how they went about texturing the terrain?

I've had a think about it and I've come up with nothing and finding a resource on the web has proved impossible. Please help.

The game mentioned uses Cocos2d. Would it be just as doable in a different environment?

EDIT:

I was looking at another question: Drawing large 2D sidescroller level terrain

The end result is what I'm looking for, but in my mind I was thinking that there would be some way to add this effect (using small textures) to some terrain specified by vertices rather than making a very large image to match whatever is seen in the level.

share|improve this question
    
Can you post a screenshot or video or something, so those of us who don't happen to have played this game can see what you're talking about? –  Nathan Reed Nov 13 '12 at 2:24
    
youtube.com/watch?v=yCxQlU1XYWs –  lgrevenl Nov 13 '12 at 2:35
add comment

2 Answers 2

up vote 6 down vote accepted

You can accomplish this with UV mapping. Most likely they generated 2 "layers" of geometry. One for the grass, and one for the dirt.

The "dirt" strip lies below and has texture-coordinates that accumulate horizontally. As long as the dirt texture is tileable, it will nicely repeat. The goal here is to have no distortion.

For the "grass layer", I would create another strip of triangles that follows the curve of the landscape. There you can use a small texture (including shadow) and map the texture directly to each quad.

Here's an illustration:

UV terrain mapping example

The Strip 2 is the dirt and Strip 1 is the grass. As you can see a small grass-texture will be mapped to each quad of Strip 1, whereas the texture coordinates of Strip 2 just add up and generate tiling (you can see the approximate horizontal texture coordinates below).

share|improve this answer
    
pretty pictures are pretty. And a nice answer to boot. How would I get the texture to not show up above the grass? Use a clipping method like in Marton's answer? –  lgrevenl Nov 13 '12 at 8:58
    
@lgrevenl No clipping/masking. Just create the geometry for the dirt accordingly. Ideally, that it will get covered by the grass. I painted the dirt geometry red in this image. Hopefully this clears things up. –  bummzack Nov 13 '12 at 9:29
    
This is a great answer. I found this when I was trying to figure out how to do this. If you need a complete example (and are using Unity), I created an asset that can do this for you called Endless - 2D Terrain Generator –  Neil Oct 27 '13 at 0:50
add comment

There are probably better solutions, but here's how I would do it:

  1. Create two fairly large textures: one for the grass, one for the ground below. These textures should be roughly as large as the screen, or larger if the game engine and the hardware allow it. The texture should also look seamless when tiled.

  2. As you generate the level (the curve of the grass), you should also generate two masks: one for the band of grass (mask A), and one for the ground (mask B).

  3. Your final screen will look like this:

    • background (sky)
    • ground, clipped with mask B
    • grass band, clipped with mask A
share|improve this answer
    
I've been fiddling around with libGDX. Terminology of gaming does my head in. Is clipping similar to this? code.google.com/p/libgdx/wiki/GraphicsScissors –  lgrevenl Nov 13 '12 at 8:51
    
@lgrevenl When you generate the terrain, you are practically creating a bunch of Y coordinates (the level of the ground, relative to the top of the screen). You only need to render the pixels of the ground texture that have a larger Y coordinate at the same X (assuming Y increases from the top of the screen towards the bottom of the screen). –  Marton Nov 13 '12 at 9:29
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.