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\$ Nov 13 '12 at 2:24
  • \$\begingroup\$ youtube.com/watch?v=yCxQlU1XYWs \$\endgroup\$
    – lgrevenl
    Nov 13 '12 at 2:35
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
    Nov 13 '12 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
    Nov 13 '12 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
    Oct 27 '13 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
    Nov 13 '12 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
    Nov 13 '12 at 9:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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