Build 10 classic Flash games and learn game development along the way with this ultra-fast paced game development course.

If you love this blog, this is the book for you.

Get the source code of 12 commercial Flash games, which have been loaded more than 50 million times!

Learn from real world successful examples.

Get it now

Box2D for Flash Games teaches you how to make Flash physics games from scratch with the most advanced features.

Create the new Flash game smashing hit.

# Using marching squares algorithm to trace the contour of an image

Did you ever wonder how graphic softwares can trace the contour of an image? No? Actually, I never cared about it, but since I needed to do it for a more complex project, I discovered the magic world of marching squares algorithm to trace the contour of an image.

The idea of the process is simple:

1) Find a pixel placed on the edge of the image (this has nothing to do with marching squares, which assumes you already found such pixel). This will be the current pixel to analyze

2) Consider a 2×2 pixel square which includes the current pixel which generally is located in the top left or the right bottom of the square.

3) At this time you have 4 pixels, and each one of them can be transparent or opaque. So we will have 16 possible 2×2 squares, although the cases with all transparent pixels or all opaque pixels will never occur as we are moving around the edge of the image.

4) According to the number and position of opaque pixels in the 2×2 square, we can guess the direction of the contour, move the current pixel in such direction, and continue from step 2 until you reach again the pixel found at step 1

Now, how can we find the starting pixel needed at step 1? This is just a matter of brute force, we need to scan the image pixel by pixel until we find an opaque pixel.

Let’s see this fully commented code:

And this is the result:

The green line is the contour traced by the algorithm. Next time, I am showing you how to use this algorithm with Box2D to create interesting things.

Rate this post: (12 votes, average: 4.75 out of 5)
Flash Templates provided by Template Monster are pre-made web design products developed using Flash technology.
They can be easily customized to meet the unique requirements of your project.

## This post has 7 comments

on March 1, 2013 at 2:17 pm

Amazing, we can use the vector got from marchingSquares method together with b2Separator to create a complicated polygon, and what’s more, we could load a customer Image on fly. am I right?

2. ### Carlos Ribeiro

on March 1, 2013 at 4:16 pm

My God, you are amazing.

3. ### Emanuele Feronato

on March 1, 2013 at 4:19 pm

@ladeng6666: yes, using b2Separator (http://www.emanueleferonato.com/2011/09/12/create-non-convex-complex-shapes-with-box2d/) or triangulation (http://www.emanueleferonato.com/2012/06/27/polygon-triangulation-decomposition-of-a-polygon-into-triangles-with-as3/)

4. ### jamal

on March 3, 2013 at 12:33 pm

amazing tutorial as usual , thank u

5. ### narongrit

on March 14, 2013 at 9:50 pm

what direction to move
when
square value = 0 and square value = 15

6. ### Emanuele Feronato

on March 18, 2013 at 6:40 pm

@narongrit: if the scripts executes correctly, you’ll never find 0 or 15 values

7. ### thx

on March 21, 2013 at 2:40 pm

amazing,thank u!