Results 1 to 9 of 9

Thread: How to align isometric tiles?

  1. #1
    Guild Apprentice
    Join Date
    Dec 2009
    Posts
    43

    Default How to align isometric tiles?

    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/..._1.svg.med.png

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

  2. #2

  3. #3

  4. #4
    Guild Apprentice
    Join Date
    Dec 2009
    Posts
    43

    Default

    Im am trying to achieve it in JS/HTML/CSS

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

  5. #5

    Default

    Quote Originally Posted by cu11 View Post
    Im am trying to achieve it in JS/HTML/CSS

    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:
    Code:
    <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>

  6. #6
    Community Leader Guild Sponsor Gidde's Avatar
    Join Date
    May 2009
    Location
    Michigan, USA
    Posts
    3,673

    Default

    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.

  7. #7

    Default

    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.
    Bryan Ray, visual effects artist
    http://www.bryanray.name

  8. #8
    Guild Apprentice
    Join Date
    Dec 2009
    Posts
    43

    Default

    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
    Last edited by cu11; 01-31-2011 at 11:13 PM.

  9. #9

    Default

    Quote Originally Posted by cu11 View Post
    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
    Just the offset: relative; top: -75px; left: -150px;

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

    -Rob A>

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •