Results 1 to 9 of 9

Thread: How to align isometric tiles?

  1. #1
      cu11 is offline
    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
      RobA is offline
    Administrator RobA's Avatar
    Join Date
    Apr 2007
    Location
    Niagara, Canada
    Posts
    5,532

    Default

    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>

  3. #3
      ravells is offline
    Community Leader Gracious Donor ravells's Avatar
    Join Date
    Jun 2006
    Location
    London, UK
    Posts
    10,900

    Default

    As far as I know this is the only way you can place them....or rotations of the same pattern.
    Attached Thumbnails Attached Thumbnails How to align isometric tiles?-iso.jpg  

  4. #4
      cu11 is offline
    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
      RobA is offline
    Administrator RobA's Avatar
    Join Date
    Apr 2007
    Location
    Niagara, Canada
    Posts
    5,532

    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
      Gidde is offline
    Community Leader Gidde's Avatar
    Join Date
    May 2009
    Location
    Michigan, USA
    Posts
    2,992

    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
    Guild Master Gracious Donor Midgardsormr's Avatar
    Join Date
    Aug 2007
    Location
    Los Angeles, CA
    Posts
    2,401

    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
      cu11 is offline
    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
      RobA is offline
    Administrator RobA's Avatar
    Join Date
    Apr 2007
    Location
    Niagara, Canada
    Posts
    5,532

    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
  •