Hi there, I just found this site: MyLane (www.mylane.de) It seems they are using mootools to create this nice pixel grid you can see there. Anybody here knows how to do that? Where can I find some tutorials or code snippets? Can you point me in the right direction, please? Thank you for your help!
erm not sure. isometric games tend to use mootools a lot due to the class inheritance model. a friend of mine did one recently, actually. as for how to get started... can't really comment, not tackled it much. it is basically as you say, a 2-d grid with 2d elements that point to some structures and then there's a render grid function that will convert into the isometric view for example, is an image with adequate transparency. they use exactly 45% skew which means the maths is relatively easy to do the isometrics. by positioning 2 next to eachother on one row and 2 next to each other on the next one but offset by half the grid block width (128 / 2 = 64) and half the block height (64 / 2 = 32) - you get what appears to be a seemless floor. extapolate that model and you can build a grid size of any proportion. all you really need is artwork.
pixel grid is normal grid just set grid{width:1px;height:1px;overflow:hidden;font-size:1px}. It will slow down your browser if there are too many tags even using javascript. Here is a link just for demo to create grid in javascript. I have revised a lot but has not updated the page. As said, set {width:1px;height:1px;overflow:hidden;font-size:1px}, you get pixel grid. http://www.pagecolumn.com/javascript/js_grid_framework.htm
I've checked out their source codes and noticed that they also make use of JSON. There is a file called "items.json" in which you can find data like this: [{"hover_image":null,"default_image":{"outline":[{"x":"63","y":"60"},{"x":"4","y":"30"},{"x":"62","y":"2"},{"x":"123","y":"32"}],"path":"images/item_images/b5ee8c00-cadd-11de-8b44-0017f227e974.gif","blend":0},"x":1056,"target_id":null,"display_id":null,"y":-496,"width":128,"z":466,"url":null,"id":527,"type":"Item:rimitive","selected_image":null,"height":64},{"hover_image":null,"default_image":{"outline":[{"x":"63","y":"60"},{"x":"4","y":"30"},{"x":"62","y":"2"},{"x":"123","y":"32"}],"path":"images/item_images/b5ee8c00-cadd-11de-8b44-0017f227e974.gif","blend":0} Guess that's the coordinates of the houses, trees etc. on the pixel grid. But I doubt they put this information by hand ... do you think they are using some kind of editor with graphical interface to place the houses and the other items ?! Do such classes for mootools exist somewhere?! There must be resources for scripts like this ?!
erm - this is probably in a DB. you can use php's JSON_ENCODE(array) to output json which you can then read from the js class directly. it is a great way to organise your data as you can actually output methods / abilities for entities if you wanted to. but basically - any multidimensional array will come to json nicely. or ... almost any. the fact they have things like Item:rimitive leads me to believe this may be a dump of a php object or something. then again, they may parse the property and it could be used totally differently.