[FMX] Dynamic "chessboard"

Now I could do with some hints as to how this should be done :slight_smile: Hopefully someone will help me out here.

Ok, basically I have a map (a jpg/gif file), which should be divided into squares (like a chessboard). Each square has a coordinate (X, Y) and other pictures should be shown on top of a map square - like a small house or something (also a jpg/gif file).

It should also be possible to hide some (most) of the squares from view - like with a black square on top or whatever. Perhaps Flash should also make some lines between each square to divide them.

Furthermore only a part of the map should be shown through a window (using a mask, I guess) as the map could be large and buttons at the edge could be used to scroll the map.

All of the jpg/gif files should be loaded dynamically into Flash, so it’s possible to change them (or rather the path to them). All the information about which squares can be seen (not hidden) and which squares have houses, etc. is saved in an Access database (using ASP to get it).

I could use some help to how to:

  1. make Flash display the map through a window (along with the other stuff I described)
  2. get the information from the database to Flash
  3. make Flash show the things according to the data

Any ideas that could get me started?

Wow…lots of questions in one post…
Have you started yet?
Your “window” could easily be a scrollpane, no need for buttons as you’ll get the scrollbars with it.
Flash can’t load gifs, so you’ll have to go with (non-progressive) jpg’s.
Each square = movieclip with empty holder to load the pic into, and set either to _visible = true or false; maybe make a quicky component, just basic, so you can reuse one for all your squares…
What’s this gonna be when it’s ready?

Note: I apologize for this lengthy post - I’m just trying to spilt up the problem a bit (and describe it to myself for a better understanding. You can skip the first three paragraphs if you just want to look at my questions)… please bear with me :slight_smile:

I started somewhat - besides planning how it should look and work - with trying things in Flash. I’m not too good at Flash - that’s why I asked for hints :wink:

I started out by simply loading the map into an empty movie clip (after I converted the .gif into a .jpg). I set up a mask (for a window) and added a couple of buttons, which changed the _x, and _y of the movie clip. After that I added some grid lines on top of the mask to give the impression that there’s a grid all over. Then I tried adding a few new movie clips on top for houses and black squares, and then I realized that all of these movie clips would have to be moved along the map, in order for the scroll to work.

Then I saw your post and tried with the ScrollPane component and after a while I found out that if I placed another movie clip in the scene in the same size as the map, I could get the ScrollPane to accept it (and be able to scroll the map). You suggest splitting the map into the squares. This seems be a good solution as it’s easy to control which to be hidden. In this way the grid lines should probably also be on the jpgs themselves instead of in Flash.

Ok, so far so good. The next part is showing other pictures on top of a square. In my earlier solution I thought about using .gifs with a transparent background put on top of the square. This gives the impression that for example a house is on the square. However .jpgs don’t allow transparent backgrounds (as far as I know?) so in order to keep the illusion the .jpgs have to be square - or is it possible to do it in another way?

I plan for having up to two pictures on top of a square - a house and a person. I just plan to use layers to get them placed right. Now I also need to be able to select a square somehow in order to show some data that could be changed by the user (like moving a person-picture to another square or adding a house to a square that doesn’t have any). Any suggestions for how to do this?

Finally I’m thinking about making some arrays in Flash to store info about the squares. How do I get data to Flash to create the arrays? I guess Flash should call an .asp file that returns the data to flash but in what form should this be and how to Flash get the data and convert it to arrays?

Phew… I hope you’re still with me :wink: Any ideas, hints or links to places where I can find them?

Thanks in advance :slight_smile:

*Originally posted by eyezberg *
**What’s this gonna be when it’s ready? **
Ah, just wanting to answer this as well :slight_smile:

The whole project should end up in a map campaign module. Not supposed to be a game itself (though I think it could be with a little tweaking) but a helpful tool. A number of players participate in the campaign and each start somewhere on the map without knowing anything else but the nearby squares.

The players have some armies they can move around the map to explore and conquer and those squares they own give some kind of income. Income can be used to buy new armies or upgrade squares (build houses, etc.). You could compare it to the computer game Civilization.

First I thought about making it using just html and style sheets but I figured that maybe something nicer could be made using Flash (though right now it seems daunting and I think about going back to html). For some time ago I worked on a similar project though I never finished it - now I make a new attempt :slight_smile: The earlier project can be seen at: http://bfg.misfire.dk.

The reason for why I want to load the pictures dynamically is that I want to be able to reuse it easily. If I had to create all the stuff in Flash each time it wouldn’t be that easy.

For a couple of years ago I made a small Internet game that works more or less as I described this project (expect no upgrading). I stopped supporting the game and some stuff is not too good but if you’re curious it can still be found at http://lethian.misfire.dk/green.You can create an account very quick and then see the map once you log in (I even created an account yesterday) :slight_smile: