Last month, I experimented a lot in game development using cocos2d for the iPhone, especially on moving and modifying sprites. However, vertices and polygons are still new stuff for me.

I developed an algorithm that creates a set of points. I now want to use them to create my 2D terrain. Here is how it looks like when I connect the points in java, so that you can get the idea

A line graph of connected dots

The points are connected with lines. However a real game terrain is a shape that is colored or has a texture overlayed, right? For example:

An image of in-game terrain looking pretty

How could I use my points to create such a terrain?

What I tried so far is I created an array and filled it with my points. I pass this array to this method

void ccDrawPoly ( const CGPoint *  vertices,
    NSUInteger  numOfVertices,
    BOOL  closePolygon   

draws a poligon given a pointer to CGPoint coordiantes and the number of vertices measured in points. The polygon can be closed or open

This actually draws a plain shape. But from the blue picture it looks like there is not one shape but many.

Please share you knowledge on how to create 2d game terrain.

Update 03.06.2011

Based on the two good answer I have following result

enter image description here


2 Answers 2


The easy/naive solution would simply be to take your existing points, and for each point have a corresponding point that's at the same Y position but off screen. From there, create your polygon by taking, say, points 0, 1, 1's pair, and 0's pair and pass that to your DrawPoly method. Then continue on with (1, 2, 2's pair, 1's pair), etc.

  • \$\begingroup\$ Y represents the height. I dont understand how it can be the same Y but off screen at the same time. I would mean the X is out off screen...? I dont get your idea. \$\endgroup\$ Commented Jun 2, 2011 at 6:57
  • 1
    \$\begingroup\$ Replace Y with X then. They are just points that are straight down. \$\endgroup\$
    – Tetrad
    Commented Jun 2, 2011 at 15:00
  • \$\begingroup\$ The lines in your updated image should be pointing straight down. Not crisscrossing. \$\endgroup\$
    – Tetrad
    Commented Jun 3, 2011 at 15:00
  • \$\begingroup\$ Great, got it. See my update :) \$\endgroup\$ Commented Jun 3, 2011 at 15:12

I would loop through your array two points at a time, extrapolating two more points (by using the X value for each of the two and making the Y value 0) to give you the bottom of your shape. Pass those four points into ccDrawPoly() and repeat until you run out of array values.

so, if you have say:

P1 = (0, 25)
P2 = (5, 30)
P3 = (10, 20)
P4 = (15, 25)
for the first shape, you pass in P1, P2, (0, 0), and (5, 0)
second shape is P2, P3, (5, 0), (10, 0)
third shape is P3, P4, (10, 0), (15, 0)

You must log in to answer this question.

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