Tactics Game

Hi everyone,

A few of us are working on tactics type game. No, I'm not asking how to do tile based games, the question isn't that exciting! So far, I've developed an isometric map editor that can support different layers with objects both textural and multiple tiled.

We also have a working pathfinding engine that's already been created and implemented within the map editor and it's been going great!


Until today.

Since I'm more of the programmatic type person, I've never really had to deal with the 'art' aspects of making Flash games. And today I've realized that it's a whole separate things entirely ...

Our artist has created some amazing tiles to be used (you can see them here) and as a test. However, simply importing them has caused a few problems:


Problem 1
Importing an isometric tile results in an invisible bounding box. Well, it's not invisible, but looking online I've learnt how to export PNG files with transparency. However, as you can probably guess, the invisible bounding box gets in the way when trying to select other tiles to place objects on.

I believe there was a way to use the Wand Tool (can't find it though?) in Flash, break up the image, and delete the bounding box. Then converting the rest of the visible image to a movieclip, you won't have a problem.

Thoughts?


Problem 2
Importing the images looks like crap!

I believe, from what I read online, that importing pixel art images into Flash are automatically anti-aliased or something? Is there a way (if that's the case) to make sure that the pixel art is 100% the way it should look?



Other than that ... I guess we're on the right track. It's been going well, we have some good tiles, a working map editor with pathfinding as well as a good premise for the story.

Will have a website up and running soon, so I'll be sure to post it once it's ready and whatnot.

Thanks everyone! :)

P1: You can use diamond-shaped mask above the graphics to get rid of invisible parts. You should never break up images in Flash.

P2: Right click on the image in library, choose properties. Uncheck "allow smoothing" and make sure compression is "Lossless (PNG/GIF)".

Hey Tonypa,

Thanks for the tips, I'll be sure to do them. By the way, your tutorials on tile based games was a real inspiration for me to learn and try making tile based games of my own. Which ultimately led me in creating a tactics game.

Thanks!

Tonypa, why do you say that you should never break up images? For speed or something else?

I assumed that if you have an image with a lot of empty alpha around the edges, it was faster at run time to break it into a bitmap-filled shape (not a traced bitmap) and remove the empty parts, rather than have it calculate all the unused pixels, especially if you have a lot of layers of nothing being drawn over the top of each other, which can cause problems for the renderer.

Its all about the speed of course as Flash Player slows down when it has to draw lots of objects. You have to consider 3 things:
*size of your game. Larger the stage to draw, slower it gets
*number of visible objects. This can be important for tiles as there could be huge number of visible tiles and each tile takes time to render.
*bitmaps take less time then vector graphics. Bitmap is just bunch of data in memory, vectors however need to be recalculated every time they are drawn. Vector graphics can also be quite complicated even when they are tiny

So you should try to reduce the number of separate display objects. For example backgrounds could be done with only one visible bitmap and drawing all the tiles directly on it. I usually find easier to keep animated graphics as separate object above background.

Ah, I think Osteel is talking about a different thing altogether.

Put a bitmap on stage, select it, then hit Ctrl-B to 'break' it. This changes it from a bitmap, to a bitmap fill. You can now grab the edges and modify them, or delete parts of the bitmap, this can be used to tile the bitmap, or to mask off unwanted areas of the bitmap.

Yes, slight has is. I read online there was a magic wand tool in CS4 (haven't been able to find it), so that you can inverse selection to grab all the unused white space of the bitmap. Because as it is, it's a little hard to select some tiles because of that.

Anyone know where to find the magic wand tool? If not, I'll definitely go with Tonypa's suggestion with the mask. At least that'll get rid of it.


As for speed, I'm not too worried about it. Tiles are small, and I'm only allows a 20x20 grid view area. There will be scrolling of course, but only visible as the tiles move into view. And besides, since it's a tactics game, the maps don't have to be enormous; just your classic Final Fantasy tiled game.


I'll upload an example map once I make a separate SWF from the engine. Also bought the web domain too, so will be hosting everything there once the website is up. Will keep it posted here. :)

Sorry, I forgot to add, the magic wand tool appears as an "option" of the lasso tool, so select lasso, and notice the bottom two icons on the toolbar change to magic wand and wand settings.

Another option for you, since your artist is making pixel art, is to just save the images as GIF with whatever image editor you use, so long as it supports transparency.

GIF transparency is ideal for pixel art, pixels are either on or off. PNG is a bit of overkill for what you're doing, you'd use PNG if you wanted soft edges, since it supports 256 levels of translucency per pixel.

Oh, yeah because we were using PNG's. So you're saying that a transparent GIF export won't have the bounding box issue? Or will I have to 'break it up' in Flash, and if so, do I still have to delete the unused white space?

But I'll definitely try to get him to export the tiles in GIF. Thanks for the tip. :)

Any bitmap image will have the rectangular bounding box. The reason to use GIF over PNG is the smaller swf filesize with lossless compression.

GIF is an 8 bit format, meaning 256 colours only. One of those colours can be set to be transparent. GIF uses lossless compression only meaning the pixels aren't altered by the compression. The downside of GIF is less colours and on/off transparency. Since your source images seem to be designed to look like old school pixel art, ie, using < 256 colours, there's no good reason to use PNG.

PNG is (usually) a 32 bit format. It has 8 bits dedicated to alpha, meaning 256 shades of transparency. When flash compresses a PNG it more or less turns the colour data into a JPEG, and the alpha data into a GIF. The jpeg means the image quality is no longer lossless. You do have the option of not jpeg compressing the PNG, but this will usually be about 4 times larger than the same image as a GIF.

On the issue of breaking things up, it used to not even be possible to do that in flash. Instead, to mask off an area of a bitmap for hit testing or whatever, you'd put another 'invisible' MC that was the right shape on top of the graphic, and test that instead of the image itself. Breaking the image up should be more efficient, but be careful using the magic wand, it can potentially create a complex vector 'staircase' edge which brings up the problems Tonypa was talking about.

Thanks for the tip guys, really helpful. Will be reimporting the existing images as GIF now.

While I have this thread up and going, I want to ask something and get some input on an issue I just realized I was having, though avoiding.


So, to avoid having to depth sort every time someone add's an object to the tile, especially since you can 'stack' raised tiles to make hills and what not, I've decided to go with this approach. Start by drawing the grid from the top, across the columns then the next row, so on and so forth. In other words, background to foreground.

When you click a tile to add an object, the objects are attached INSIDE the tile movieclip itself. Therefore, already been sorted through the placement of the tiles. However, it just came to my attention that it's not always the case, that there will sometimes be an overlap.


So, my question is if there is any possible way to place an isometric grid tile that all tiles are in the proper depth of one another from the get go? Personally, I was thinking attaching clips in a diamond shape, starting from the top point.

Do you have items on tiles that extend past the edges of the tile, or sit between tiles? Otherwise I can't see where you'd get an overlap. Normally columns and rows would be OK. If you have an object that straddles two or more tiles, just attach it to the front most one. Or am I missing something? Also, are you in AS2 or AS3 because depth handling is totally different.

Quote:

---

Originally Posted by Osteel

Thanks for the tip guys, really helpful. Will be reimporting the existing images as GIF now.

While I have this thread up and going, I want to ask something and get some input on an issue I just realized I was having, though avoiding.


So, to avoid having to depth sort every time someone add's an object to the tile, especially since you can 'stack' raised tiles to make hills and what not, I've decided to go with this approach. Start by drawing the grid from the top, across the columns then the next row, so on and so forth. In other words, background to foreground.

When you click a tile to add an object, the objects are attached INSIDE the tile movieclip itself. Therefore, already been sorted through the placement of the tiles. However, it just came to my attention that it's not always the case, that there will sometimes be an overlap.


So, my question is if there is any possible way to place an isometric grid tile that all tiles are in the proper depth of one another from the get go? Personally, I was thinking attaching clips in a diamond shape, starting from the top point.

---

You problem sounds like an apt application for strille's super tiles demo. Granted, it's not isometric, and it's AS2, but I've seen the code; shouldn't be too bad to port over to meet your needs.

To be honest, I'm working in AS2. Though I understand OOP (have done it all in Java), I just don't have the time and energy to learn the syntax for Flash. So since I have been working in AS2 for years, the game will be made with it. :)

Still possible ... maybe not as efficient. But hey, it'll work.


Thanks a lot for the resource. I'm going to read it when I get home, it might give me some better insight and ideas. Currently my grid layout for the maps don't unattach themselves when they go out of the view range.

I've tested it with scrolling and there is no lag. I assumed that since the grids will be small such as in a typical Tactics game, the need to actually unattach the movieclips won't be needed. Also, since the objects are placed within the tiles themselves, there's not actually more movieclips being moved when you're scrolling.

Sigh~

So this entire time I've been trying to avoid the need for depth sorting and sadly it has come back to haunt me. Before reading on, open this screenshot of some object placements so my explanation will make sense:

Example


To begin, the tiles are attached one by one starting from the top left corner, going across the columns then beginning at the next row (back to front). That way, each tile theoretically should be placed behind each other properly. In fact, it works when you place objects ...

I made it so that objects are attached inside the tiles themselves. This way the depth's are already sorted because of the initial attachment of the tiles. Also, this means for the scrolling (as little as there is), I really only need to scroll the tiles, and not the tiles + objects.


Now the problem occurs with 'multiple tiled' objects.

As you can see in the screen shot, the large tree sorts fine with objects on all the surrounding tiles but one. I should note that within the tile itself, the large_tree is lined up on the tile from the bottom right.

That way it is placed on the tile that is of the highest depth, and all excess parts of the tree overlap tiles that are behind it. Therefore, when you place objects around behind it, they'll appear behind it.

But as you can see, it also counts for that ONE tile.



So what I'm really asking I suppose is some input. Is there any way to attach tiles in a different way that'll ensure proper depth sorting? Or are there any suggestions anyone can give?

If you have any questions, feel free to ask. :)

Right, so the problem is with tiles that span across tiles.
With AS2 the order you place stuff down can be unrelated to the depth order, eg, when you calculate the X and Y coordinates, you could do something like tile.swapDepths(_y*1000+_x*10) but it will depend on which grid location the big tile sits.

I think if your 0,0 point on all the tiles was at the left point of the diamond, then the depths would fall into place properly using the code above.

Amazing!

I applied the this.SwapDepths(etc) inside the tile movieclip so it would apply it as soon as it was attached. I also moved the tile, as you suggested, to the left and it worked. Tested all sides, and everything was sorted properly.

Thanks so much. That was one of those "Ugh, I better find a fix to this eventually" problems I was having from the start. I can finally continue on with this without that thing nagging at the back of my mind.

:)

you should hire me, and let me make all the graphics in vector in flash for you... ^_^

This is an old thread, and we have since moved onto a more viable tactical RPG. Unfortunately we're not looking for an artist, since we're about to contract a pixel artist next week.

Thanks for your interest anyway. :)

well thats cool ^_^ if your pixel artist falls through hit me up!

Ill swing you a portfolio, with award winning works.

SO keep me updated regardless please Id like to see how your project progresses!