A Flash Developer Resource Site

Results 1 to 6 of 6

Thread: Creating multi-layered side scrolling terrain

  1. #1
    Join Date
    Apr 2007

    Creating multi-layered side scrolling terrain

    Hi Guys,

    I've spent four or five days working on this problem now and every approach I've tried has failed for one reason or another..

    Here's what I'm after doing:

    Notice how the floor graphic has 3 different 'layers' to it with different colouring. To start with though, I only really need it to have two different layers.

    These floor graphics will be drawn out using graphics.beginBitmapFill and graphics.lineTo with a number of points.

    My first approach was just to redraw the line to another sprite, make the sprite smaller and then offset it's position by half the amount I made it smaller. This worked great apart from with some shapes that could be created:

    Working properly:

    Not working with irregular terrain:

    My second approach was:

    1. Find the point which is the 'highest' and use this as the start point.
    2. Get the angle to the previous point on the loop, and the angle to the next point of the loop. Divide this value by 2.
    3. Using the angle found in 2, use Math.sin and Math.cos to get an offset above and below this point.
    4. Find the angles from the previous 'inner line' point to the two new points found. Keep the point which has it's angle closest to the corresponding angle on the outer lines.
    5. Repeat from 2 until all points are visited.

    Unfortunatley - I couldn't get this to work either - I feel I might of overcomplicated things and am hoping that somebody might know of a simpler way to do things?

  2. #2
    Senior Member bluemagica's Avatar
    Join Date
    Jun 2008
    sorry, i couldn't understand the exact look you are trying to achieve, but from what I understand, it seems, you need to define the points that are to be considered as the top points. You can do this either by comparing the relative y values, or define them manually in a separate vector....from there on, it is just about finding the offset with refference to the mean center coordinate of that set of points!
    If you like me, add me to your friends list .

    PS: looking for spriters and graphics artists for a RPG and an Arcade fighting project. If you can help out, please pm me!

    My Arcade My Blog

    Add me on twitter:

  3. #3
    Join Date
    Apr 2007
    apologies for not being more clear - a game which uses a similar effect to what I'm after is Cyclomaniacs:

    Notice how the floor first has a black line, then a lighter ground area and then a darker fill for the remaining area.

    Points aren't defined as 'top points' rather, just a set of points are defined by the user clicking a bunch of times on the stage. This set of points is then turned into a loop and then filled appropriatley.

    It would be a lot easier if I could use the mean center co-ordinate of the set of points - but in a case like this one:

    The mean center of points would not give a good reference point to draw the inner shape...

  4. #4
    Funkalicious TOdorus's Avatar
    Join Date
    Nov 2006
    Nijmegen, Netherlands
    I don't know the math behind this, but I had this stuff in math class. I only needed to draw it, not calculate the points.

    At every piont you need to draw line orthogonal to the lines at the point. Then at some distance connect the lines with a new line. This will leave open spaces at the points, as you create two new points per original point. To do it properly you need to fill these open spaces using a a circle with the original point as the centre, but I think you can get away with just a line connecting the two new points.

    I just noted that this only works for convex shapes. I'll have to remember how to do concave shapes, but this can get you started atleast.
    Last edited by TOdorus; 10-26-2009 at 06:01 PM.

  5. #5
    Senior Member ozmic66's Avatar
    Join Date
    Oct 2005
    Here's how I would do it:

    (See the attached image)

    For every point in the shape, find the tangent line between it and the previous point (the red lines. You can see each red line makes a 90 degree angle with its corresponding edge). Once you have the tangent lines you can connect points a few pixels along those lines (the blue points) and make a new shape (the blue line).

    Let me know if you have any questions... this relies on vector math, so I'd suggest tonypa's vector tutorials. I guess you could do it with sin/cos too though
    Attached Images Attached Images
    Pixelwave Flash-based iPhone framework
    iPhone Games: Flyloop | Freedom Run

    Twitter: Oztune

  6. #6
    Senior Member
    Join Date
    Jan 2008
    If you can isolate shapes like that one you can just duplicate the shape and then scale it up and place it underneath with whatever color you want. If that looks a little boring offset the smaller shape slightly for some variation in the line width (unless it's just flat :/ )

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts

Click Here to Expand Forum to Full Width

HTML5 Development Center