Posted by: Xalthorn | September 28, 2007

Creating Isometric Tiles from Square Tiles

Whilst I was doing some graphic tests for one of my game projects, I wanted to test the feasibility of either an Isometric or angled top down view (Zelda like).

Because I just needed some placeholder graphics, I found the following graphic set extremely useful for prototyping the angled top down view:

http://lostgarden.com/2006/07/more-free-game-graphics.html

This meant that the angled view looked gorgeous, but my isometric view, with way too vibrant colours, made the aesthetic comparison difficult as I found myself looking at the quality of the image rather than the general view type.

So I decided that it would make sense to used the same graphics for both versions, which meant I would need to turn the angled view graphics, which were square, into an isometric version.

I tried the obvious method of rotating the image 45 degrees and then halving the height, finally scaling the image to the size of my original isometric images.

Photoshop did the job wonderfully, except it anti aliased the image when it was rotated, and even though I tried manually scaling it, there was a horrible white edge around the tiles.

I tried an alternative method of having a new layer on top of my image, filling it with black, and then rotating and scaling that (meaning there was no anti-aliasing of the layer underneath), removing the black layer once it was done, but I still had issues with getting it to fit properly.

The final solution I found that worked nicely is detailed below. My original square tiles were 100 x 100, and my target isometric tile is 101 x 51 (a tile fitting on a 100 x 50 grid with an overhang to clean up the edges).

I started by opening my 101 x 51 tile gif (with transparency), changing the Image->Mode to RGB colour so I could do some processing on it.

I then used CTRL+Click on the thumbnail in the layers window to select everything that wasn’t transparent.

With that prepared, I could open up my 100 x 100 tile jpg, do Image->Rotate Canvas->Arbitrary with an angle of 45 degrees clockwise. This gave me a diamond version of the tile.

I then did Image->Image Size, and changed it to 104 x 52 (remembering to uncheck the Constrain Proportions). This gave me my Isometric version of the tile.

I then selected everything (CTRL+A), copied it (CTRL+C) and then switched back to my original isometric image.

A quick Edit->Paste Into, and I had my final tile, ready for saving to the web as a GIF image.

Advertisements

Responses

  1. Wow! that is surprisingly effective. Nice work man.

  2. […] Creating Isometric Tiles from Square Tiles (via Xalthorn’s Weblog) Posted on December 7, 2010 by danctheduck Whilst I was doing some graphic tests for one of my game projects, I wanted to test the feasibility of either an Isometric or angled top down view (Zelda like). Because I just needed some placeholder graphics, I found the following graphic set extremely useful for prototyping the angled top down view: http://lostgarden.com/2006/07/more-free-game-graphics.html This meant that the angled view looked gorgeous, but my isometric view, with way too vib … Read More […]


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Categories

%d bloggers like this: