Perfect fit for isometric tiles in AS3 with BitmapData

Question

I'm creating a game which uses 320x160 sized isometric tiles. I've got an editor that allows me to take loaded in tiles and plot them. The map size is 8x8, and instead of placing down 64 movieclips, and then moving them around, I thought I'd use the bitmapData.draw function to plot these mc's directly to a bitmap (as I'm not doing anything with them after they are put down anyway).

That works fine apart from there's a small line appearing between the tiles, along the edges. I think this has something to do with anti-aliasing, because when I export the tile as a .png with no smooth, and use that tile in my editor, there's no faint line between the tiles, but that also makes the tile overall look pixely, so I'm at a bit of a loss.

I want the edges to fit perfectly together so need to be pixel perfect, but I want the interior of the tiles to be smoothed, any ideas? unless there's a way to solve this with the bitmapData approach in itself? The only thing I can think of right now is to make the tiles slightly bigger than they need to be so they overlap slightly, but that's a bit of a fudge, which I want to avoid if possible.

Answer 1

You should make sure the alpha channel of your tile is crisp.

So if we zoom in a bit, the alpha should look like this:

Not like this:

If you have anti-aliased alpha edges like before, you'll always see bits of the background shining through where edges meet. A good way to get the transparency right, is by using "layer masks" in Photoshop or use the polygonal-lasso tool and disable "Anti-Alias".

Edit: I'm sorry, I just re-read your question and saw that your tiles are actually MovieClips, and not Bitmaps. One option (as indicated in the comment below) is to save the image as PNG, with a aliased alpha channel. Another option would be to use the BitmapData.copyPixels method and provide a separate (aliased) alpha channel as the alphaBitmapData parameter. That works best, if your tiles don't come with an alpha initially and are filled with the border-color, as in the following image:

On the left, there's the tile color (which can still be a MovieClip) and on the right, there's the alpha channel which is aliased and can be provided separately to the copyPixels method.

Answer 2

I just thought of this, you could try using a game engine or tiling engine like Flixel or FlashPunk. I haven't used them yet myself, but I have been looking into it.