55
\$\begingroup\$

Games like Super Metroid and Aquaria present the terrain with the other facing parts having rocks and stuff while deeper behind them (i.e. underground) there's different detail or just black.

enter image description here

enter image description here

I would like to do something similar using polygons. Terrain is created in my current level as a set of overlapping square boxes. I'm not sure if this rendering method will work such a system for creating terrain but if anyone has ideas I'd love to hear them. Otherwise I'd like to know how I should re-write the terrain rendering system so it actually works to draw terrain in this manner...

\$\endgroup\$
2
  • 1
    \$\begingroup\$ Aquaria includes a level editor, so you could look at that to see how exactly they built the assets. \$\endgroup\$
    – user744
    Commented Jul 28, 2011 at 13:01
  • 2
    \$\begingroup\$ Other than looking at Aquaria's level editor, the basic method used here is to have two (or more) layers of terrain being rendered. \$\endgroup\$
    – thedaian
    Commented Jul 28, 2011 at 13:19

2 Answers 2

131
\$\begingroup\$

Metroid's just using tiles, nothing special going on there.

Aquaria however is doing something rather clever. If you'll notice, a lot of those rocks on the bed get repeated several times. Here's one of the rocks for instance:

one variety of repeated rock with each instance circled

It looks like they've just dumped sprites along the edges of their terrain. It's kind of like what Metroid did - a massive arsenal of edge tiles, but if you pay attention you can notice the repetition of the tiles. Acquaria's doing the same thing, except with rock sprites, and not on a grid.

How to replicate it

This might not be exactly how they do it, but it's one way of producing the same end result.

First, get yourself a nice bunch of rock sprites like this:

some perdy rock sprites

Now there's a process to follow so you know where to put them.

Determine the vertices and edges that make up your terrain. Traverse them like a spider walking across a line of web and at regular distances store the current coordinate. The inverval distance depends on the size of your sprites! Colour one side black then dump a sprite on each point you recorded.

Tada!

You can use this once to generate a list of rocks and where to draw them, then you just draw all your rock sprites. Or maybe you can just draw all the points and pick a different sprite to draw on it on each step, making the edge of a lava pit or an alien terrain!

And other terrain features...

Aquaria could've used a very similar method to dump all the mushrooms, coral and other features on the seabed (including the giant rocky structures that form the backdrop). The mushrooms could have been generated like this:

  1. Gather some points at random intervals, not fixed intervals.
  2. Don't just store the point. Also store the normal of the edge you picked the point from.
  3. Pick a random rotation within a certain range of the normal's rotation. For example if the normal is pointing off at 30 degrees, pick a rotation within 20 degrees of that (i.e. between 10-50 degrees).
  4. Draw your mushroom at the chosen rotation, and at a random stalk length.

Everything else is probably a variation on those same instructions: the coral isn't rotated much, those two shells/stones are probably only placed if the terrain normal is pointing roughly upwards (i.e. the terrain's flat).

Final Notes

Since a commenter asked: I create these images in Adobe Photoshop (shrunk on here by 50% for crisp lines) using a Wacom Intuos3 tablet (which lets me draw freehand and naturally, and vary my line width etc).

\$\endgroup\$
7
  • 25
    \$\begingroup\$ Nice answer! Great accompanying artwork. \$\endgroup\$
    – Tim Holt
    Commented Jul 28, 2011 at 14:39
  • 2
    \$\begingroup\$ Wow, the most drawings and photos I've ever seen on an answer. \$\endgroup\$
    – Xeoncross
    Commented Jul 28, 2011 at 16:25
  • \$\begingroup\$ Best answer. Great work \$\endgroup\$
    – Ellis
    Commented Jul 28, 2011 at 17:21
  • 2
    \$\begingroup\$ @Jonathan Hobbs: Very nice artwork. Did you draw all this? If so, what program did you use? I really like the result and the effect it gives when trying to demonstrate something. Thanks. \$\endgroup\$ Commented Jul 30, 2011 at 0:35
  • 4
    \$\begingroup\$ I think "I have to get one of those tablets so I can make good art like that!" Then I think "Oh right, I'm not good at drawing anyway and a tablet is not going to help that" \$\endgroup\$
    – House
    Commented Jul 11, 2012 at 22:19
3
\$\begingroup\$

Doing this with Polygons would be quite simple, so long as you have a nice repeating/tiling pattern, you can easily set your models to duplicate along a curve, nothing complex at all.

Hope that helps.

\$\endgroup\$
2
  • \$\begingroup\$ After this you COULD render it, and just use planes to achieve the same result (provided they are just for the foreground and the player is never touching them, this way the polycount within the scene would be smaller, as its possible that having as many objects duplicated (as in the 2 above examples) will be quite poly intensive. \$\endgroup\$ Commented Jul 29, 2011 at 13:34
  • \$\begingroup\$ If you use a triangle strip to create the border, it will be less poly intensive (N/2)+2, but you will not be able to get the nice 'overlapping' effect without creating specific tiles. \$\endgroup\$ Commented Aug 1, 2011 at 8:00

You must log in to answer this question.

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