How to create tilted (height) isometric tiles

Question

This is perhaps best explained pictorially. I am trying to create a 2.5D isometric game. My vision is for the game to look something like my goal:

I am not a graphics artist, so I'm having some trouble creating the "tilted" tiles to simulate terrain of different height. Creating the basic isometric tile was easy using the following steps:

1. Create a 64x64 square version of the tile
2. Rotate by 45 degrees
3. Scale the height down by a factor of 2

Creating the "tilted" tiles is more of a challenge. At my disposal I have Photoshop, but I am far from an expert at using it. Here is my current problem:

I am not sure how I can manipulate vertices, otherwise this would be easy, but basically, to get a "tilted" tile from my basic isometric tile, all I need to do is to shift the bottom and the right vertex down by 16 pixels, while fixing the other two vertices. This would generate the tile I want.

What is an easy way to accomplish this. Is Photoshop the right tool for this? Any suggestions?

Answer 1

You can create the tiles if you want - using Photoshop or something else. I would recommend a vector drawing program, not a pixel drawing program (I don't know enough about Photoshop etc, to know what it provides nowadays).

Personally I would suggest you don't bother creating tiles, instead have the game actually draw them using your drawing API, it's going to be a lot easier (especially if you realise how many different slanted tiles you'd need).

Answer 2

Keep the square 64x64 image as source, to get slanted versions you would first skew the image down on the right side (to match your image example), then rotate 45 degrees and scale it down in height. The result would be the slope you were looking for (with a bit of trial-and-error for how much to skew).

Seeing as all steps (changing the shading, skewing, rotating, scaling) besides creating the initial square are fairly simple, you might want to look into doing these steps with openGL either in startup of your game, or as an automated step in the build process (simply make a small program that can do all the skewing/rotations you need and add it to the build script).

Using vector graphics would probably be an idea if you want to continue manually making each sloped tile. Photoshop has support for vector layers so you won't need to learn a new program to try this.