Representing a city with structures grahically

[Sunchaser]

I have a question:

I would like to display a village with an interactive picture like the following one:



(i will order the picture to a graphic artist).

The village may or may not have the castle, or the tribunal or some other structures. If the players decide to build a particular structure,
a building site will appear where (for example) the red circle is and when completed, the real building will appear.
Clinking on the structure will open a tooltip with a menu.

I found this in many games so I guess is something that can be done in some way.

I think what should be done is:

1 - let a graphic design the basic village picture
2 - create some divs and position them absolutely on the village
3 - set the picture in the div in relation with the village status on the database

What is a possible/best technique to accomplish what i need? Using CraftyJS? Custom solution?

Thanks

[Chris]

Is this for Medieval Europe's city interface? In such case it is more complex and problematic. You have different layouts of structures, like forest, harbour (require water gfx which basicly change the whole one side of the picture), various mines, crops/livestock farms. You can't assign a space for these and then display only if present, too many combinations, it would be too big (which means empty most of the time).

If this is only for city buildings then the soultion you described should work fine.

[BlackScorp]

easiest way would be , to have a database table like this

table : towns
id | name |

table: buildings
id | name | picture

table : town_buildings
id | town_id | building_id | position


the position will be just like 1,2,3 and so on. with ON DELETE or UPDATE CASCADE your buildings will be automaticly removed from a town, if you delete a building, and if you remove a town from towns you will clear the town_buildings table.

the position you dont need to save x/y div position if you just fix some points. if you want to make a free placement , then you need the x/y positions.

so your divs could look like this
<?php
$sql = mysql_query("SELECT position,picture FROM towns t INNER JOIN town_buildings tb ON(t.id = tb.town_id) INNER JOIN buildings b ON(tb.building_id = b.id) WHERE t.id = ".$town_id);

?>
<div id="town"><!-- here is a background image of the town -->
<?php while($row = mysql_fetch_object($sql)) : ?>
<div class="pos<?= $row->position ?>" style="background:url(<?= $row->picture ?>)"></div>
<?php endwhile; ?>
</div>

so anythink you need to do is just to setup your pos1 pos2 .. classes in your style.css

[Doidel]

Uhm, on a side note: I wouldn't use divs, simply because:
- you probably want a clickable area instead of a whole square
- with which you can layer the buildings properly (which building covers which one? represented both grafically and with clickable areas)

So use a <map> with <area>s (most graphical tools, e.g. fireworks, provide a neat graphical interface for defining positions of the area polygons) and transparent pngs (or ugly gifs if you want support for early IE versions). Whether you add/remove picture/area sets in JS or another language is up to you.

[MrMaxx]

For the Database structure Blackscorp proposed, i wouldnt suggest using that. You will probably never need the structure that a normalized Databaseschema like this provides you with. You will never have a Query like "give me the building of type 'church' in town with id 2331". But the downside of having this normalized Schema is, that every time you want to load a whole town (which is probably your only usecase), you will need to make a join..and joins are expensive.

So my proposal is just to serialize your town and store it as BLOB/TEXT. You will load the whole Town anyways...deserialize when needed.

For the ClientSide I strongly suggest the use of frameworks where it makes sense...craftyJS, CAAT or whatever other rendering framework you like makes total sense. It is worth every minute you spend learning it. Saves you much time and frustration in the future.

MrMaxx

[Sunchaser]

Ok, let's imagine i want to have something like this:



to summarize:

1) I need to create the structure of a city and cache it/serialize it somewhere. If something changes (i.e. building added or removed), I will invalidate the cache and rebuild the city structure/reserialize it
2) On load, get the serialized city, parse it, send a json request to a framework (example JSCrafty) and render it.

Demo that i can use/copy: http://craftyjs.com/demos/isometric/

Question: but when i serialize the city in a BLOB, cant I serialize also the AREA information, so when a user will hover/click on the area map i will show the related-building functions?

thanks.

[BlackScorp]

MrMaxx but serialized arrays in fields are bad to handle, lets assume you will remove a building from a game and you have already registered 100 players.

serialized arrays are quicker than joins that true. but you can only use them if youre 100% sure that you dont edit your data and use the field for read only.

@sunchaser

just do following stuffs

map.php
<?php
//read data from database
$city = array(
'buidlings' => array(
 array('name' =>$name
'level' => $level,
'id' =>$id
),
//more buildings
)
)
?>
<script type="text/javscript">
var city = "<?php echo json_encode($city) ?>";
</script>

now you have your array in javascript array. and you can render it then