PDA

View Full Version : How to align isometric tiles?



cu11
01-31-2011, 06:03 PM
Hey

Im trying to get my isometric tiles to align properly but this always leaves alternative tiles of emptyness see image below:

http://imgur.com/RRRta

From what i can tell its impossible to line images of isometric tiles to be placed side by side due to the empty corners.

This is the example tile im trying it with http://www.clker.com/cliparts/9/b/0/7/12296937161148666855rg1024_isometric_floor_tile_1. svg.med.png

So how do engines with isometric tiles line up properly :S

RobA
01-31-2011, 06:07 PM
What software are you using?

(You are correct that isometric tiles are made to be placed each row and column 1/2 offset)

-Rob A>

ravells
01-31-2011, 06:13 PM
As far as I know this is the only way you can place them....or rotations of the same pattern.

cu11
01-31-2011, 07:23 PM
Im am trying to achieve it in JS/HTML/CSS :P

And yes that is how they are placed ravells but the corners causes issues..ill look into js setting images with 1/2 offsets

RobA
01-31-2011, 08:01 PM
Im am trying to achieve it in JS/HTML/CSS :P

And yes that is how they are placed ravells but the corners causes issues..ill look into js setting images with 1/2 offsets

Something like this should work with CSS:

<div style="background: url(tile.png) repeat scroll 0% 0% transparent; height: 600px; width: 600px;">
<div style="background: url(tile.png) repeat scroll 0% 0% transparent; height: 750px; width: 750px; position: relative; top: -75px; left: -150px;">
&nbsp;</div>
</div>

You can figure how to clean up the edge overlaps, etc.

Here: http://testbed.cartocopia.com/test.html

edit - looks like you need to trim 1 row off your image to get rid of the white line...?

-Rob A>

Gidde
01-31-2011, 08:19 PM
If you can, cu11, try to leave the JS out of that equation, as many end users browse with JS turned off. So if your stuff requires it to display correctly, it's going to look wonky to those folks.

Midgardsormr
01-31-2011, 08:47 PM
I don't know if your programming paradigm permits this, but try chopping each tile into four triangular pieces, reshuffling the pieces into rectangular sections, and laying those out on a grid.

That is, if Rob's solution doesn't work for you, although his is more elegant since it's all in CSS.

cu11
01-31-2011, 10:59 PM
Rob's suggestion works perfect... just quick question how do i work out the numbers if the tile i use happens to be changed in size ? Im assuming theres a formula ?

Rob's idea is exactly what i was trying to work out :P

RobA
02-02-2011, 02:28 PM
Rob's suggestion works perfect... just quick question how do i work out the numbers if the tile i use happens to be changed in size ? Im assuming theres a formula ?

Rob's idea is exactly what i was trying to work out :P

Just the offset: relative; top: -75px; left: -150px;

-75 is half the tile height and -150 is half the width.

-Rob A>