Creating a Basic Isometric Map
Last year Christian Weber wrote a helpful introductory article showing how to use CSS to layout tiles for an isometric map. However, the screen shot and demo looked a little odd; note the black V below where you can see "underneath" a tile.
The problems were partly caused by placing tiles adjacent to each other when they didn't have matching sides (i.e. a side that is all grass should butt up against an all grass side of another tile). In addition, the CSS styles for the tiles had the wrong offsets for identifying the positions of the sprites. The code in the article compensated for the style errors with some "corrections", which of course made it more confusing.
I've posted a corrected version here. It has a table indicating the type of each tile side, allowing for the generation of a random map were each tile's neighbors are appropriate, such that there are no gaps. For example:
The problems were partly caused by placing tiles adjacent to each other when they didn't have matching sides (i.e. a side that is all grass should butt up against an all grass side of another tile). In addition, the CSS styles for the tiles had the wrong offsets for identifying the positions of the sprites. The code in the article compensated for the style errors with some "corrections", which of course made it more confusing.
I've posted a corrected version here. It has a table indicating the type of each tile side, allowing for the generation of a random map were each tile's neighbors are appropriate, such that there are no gaps. For example:
Awesome! :) Thanks for pointing that out and correcting my awful css mistake^^
ReplyDelete