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.

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

share|improve this question

2 Answers 2

up vote 5 down vote accepted

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.

share|improve this answer
    
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. –  ArtWorkAD Jun 2 '11 at 6:57
1  
Replace Y with X then. They are just points that are straight down. –  Tetrad Jun 2 '11 at 15:00
    
thanks, I have updated my questions ;) –  ArtWorkAD Jun 3 '11 at 14:51
    
The lines in your updated image should be pointing straight down. Not crisscrossing. –  Tetrad Jun 3 '11 at 15:00
    
Great, got it. See my update :) –  ArtWorkAD Jun 3 '11 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)
etc...
share|improve this answer

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.