Before we start this post, we ask that all non-nerds leave the room. Seriously, it’s for your own good.

Alright, now that we’re alone, let’s get down to business. When we first started messing with FLARToolkit, we were confused as hell about how to create our own markers, as were many other people we came across in our augmented reality induced travels. So now that we’ve got a grasp on it, let’s break it down so that future Magellans of the internet won’t make that stop in the Philippines.

First thing you need is the ARToolkit Marker Generator, which is graciously available online, for free, and looks like this:

Step 1: Create your pattern image.

First thing you need is your custom marker image. We’ve found that the easiest way to do a marker image is to make a 256×256 block in photoshop, like the one below. You can save it out as either a gif or png for best results. Also, keep in mind the generator won’t read images that are too large, so stick to marker images that are less than 300×300.

A few things to note: the symbol cannot be symmetrical either horizontally or vertically. This is important so the code can tell which direction is “up”, “left”, etc. Also, your marker image should be fairly simple, or at least not too finely detailed (looking at you, Prince fan). Anything too elaborate and FLARToolkit has trouble reading it from far away.

Step 2: Upload your pattern image into the generator.

Now, you can get your marker image into the generator a few ways. The first is to print it out and capture it using your webcam (the default way). But in our opinion, the best thing to do is hit the drop down under “Mode Select” and choose “Load Marker Image”. Choose your marker image and you’re good to go.

Step 3: Select your marker resolution.

If you select the drop down under “Marker Segments:”, you’ll see options for “4×4, 8×8, 16×16, 32×32 , 64×64″. This is basically the resolution of your actual marker pattern file. The simpler your marker, the lower your resolution can be. 16×16 has worked well for us for all but the most detailed markers. Ideally, you want the lowest resolution possible — this increases the likelihood that the FLARToolkit will be able to pick out your pattern from a distance.

You should also be able to tell in the preview window if things are looking too crunchy — if you can’t distinguish the marker, the computer won’t be able to either.

Step 4: Select the marker size.

This was perhaps the most confusing part for us at first. Marker size is the percentage of your marker image that the actual pattern takes up. So in our example above, the area that we use for our unique markings is 50% of the overall width and height of the marker image:

Again, this is one of those things that you’ll be able to double check in the “Preview Marker” window.

Step 5: Preview and save your pattern.

Once you’ve set the segments and size of your marker, go ahead and hit “Get Pattern”. You should see the central part of your marker image appear, according to the marker size (so in the example above, we only see what’s within the red lines). When you’re happy with this, go ahead and hit “save” and put the “.pat” file wherever you like.

A tip of advice: When saving your pattern, make sure to put both the number of segments and the size of your marker into the file name, e.g. “marker16_50.pat”. When you’re testing multiple markers, or tweaking settings for the best results, this will come in handy for our next part:

Step 6: Set up the FLARCode properly in actionscript:

Now that you’ve got your custom marker pattern saved down, let’s be sure you’re set for success in the actionscript.

new FLARCode( i_width:int , i_height:int , i_markerPercentWidth:uint = 50 , i_markerPercentHeight:uint = 50 );

This is the actionscript to create a new FLARCode. If you’re using the FLARToolkit starter kit, this will already be set up for you.

Now in order for your pattern to be properly detected, the values passed into FLARCode must match the segment and size values you set when making the pattern. So for our example above, the proper constructur would look like this:

new FLARCode( 16 , 16 , 50 , 50 );

But if you chose “32×32″ for your segements and a size of 80, your constructor would be:

new FLARCode( 32 , 32 , 80 , 80 );

One final detail.

Once you’ve got your markers loaded in and set up properly, you’ll notice that there’s a 3rd variable called “i_marker_width” in the constructor for FLARSingleMarkerDetector. This represents the physical size of your marker when printed out, measured in millimeters.

So if your pattern is 80mm x 80mm when printed, that means if you create a papervision plane that’s 80w x 80h, it will match the pattern exactly. While the physical dimensions won’t actually change the way your papervision object looks, it is important when making sure the paperversion world mirrors the physical world as close as possible. See the comments below for more details. [Thanks makc]

WHEW

So that’s about it, at least to our understanding. If you have any other advice or hints, please drop them like they are hot in the comments below.