# Perfect fit for isometric tiles in AS3 with BitmapData

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.

• What is the code your are using to place the tiles? I have been using the Flash IDE and just creating movieclips for my tiles and they fit together with no gaps. I think placing them as a bitmap would be better, but I don't know how to do it. – Sean May 26 '11 at 15:54

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.

• I'm able to create .pngs without anti-aliasing and they fit together perfect, but then the entire tile is pixelated, which I don't want, I only want the edges to pixelated, not the interior of the tile. – Phil May 26 '11 at 16:11
• Yes, that's why you only "pixelate" the alpha channel, not the whole tile. If you save it as PNG24, you won't get a pixelated PNG. – bummzack May 26 '11 at 16:19

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.

• This is not a helpful answer. Phil needs to fix his graphics, he already has a system to render and update the game. – AttackingHobo May 26 '11 at 22:44