2
\$\begingroup\$

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.

\$\endgroup\$
2
  • \$\begingroup\$ 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? \$\endgroup\$
    – Nathan Reed
    Commented Nov 13, 2012 at 2:24
  • \$\begingroup\$ youtube.com/watch?v=yCxQlU1XYWs \$\endgroup\$
    – lgrevenl
    Commented Nov 13, 2012 at 2:35

2 Answers 2

Reset to default
6
\$\begingroup\$

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

\$\endgroup\$
3
  • \$\begingroup\$ 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? \$\endgroup\$
    – lgrevenl
    Commented Nov 13, 2012 at 8:58
  • \$\begingroup\$ @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. \$\endgroup\$
    – bummzack
    Commented Nov 13, 2012 at 9:29
  • \$\begingroup\$ 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 \$\endgroup\$
    – Neil
    Commented Oct 27, 2013 at 0:50
0
\$\begingroup\$

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
\$\endgroup\$
2
  • \$\begingroup\$ 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 \$\endgroup\$
    – lgrevenl
    Commented Nov 13, 2012 at 8:51
  • \$\begingroup\$ @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). \$\endgroup\$
    – Marton
    Commented Nov 13, 2012 at 9:29

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .