Creating an isometric map with hexagonal tiles for iPad

Question

I'm new to game development, so I need a little help.

I have to write down a little game which has a floor with hexagonal tiles but it must be seen in a isometric view like The Sims. Ignoring the UIKit way, I used CoreGraphics method and I managed to draw an hexagonal map and to get it working but this only in the orthogonal view.

Hoping that Cocos2D could help me, I've studied a little, but I only see that the hexagonal maps are supported only in orthogonal mode. In the stackoverflow community, someone who understand about that much more about me, told me that I simply cannot draw it with Cocos2D tiles, so, thinking at this image

I guessed that there must be another way, which I hope is not to calculate the "skew" manually.

The nearest results I managed to obtain is with CAAffineTransform which doesn't give the depth effect seen in the image above (at least I didn't managed to give it) or with CATransform3D without perspective.

Can someone tell me if I'm in the right way, and if so, how should I set the parameters of the Transform matrix to get the desired effect?

EDIT:

Here's the code I used

sfondo = [[Sfondo alloc] initWithFrame:CGRectMake(sfondoX, sfondoY, sfondoWidth, sfondoHeight)];
/*sfondo = [[Sfondo alloc] initWithFrame:CGRectMake(200, 200, 300, 300)];*/
[sfondo setBackgroundColor:[UIColor clearColor]];
[sfondo setDelegate:self];

CGAffineTransform transform = CGAffineTransformIdentity;
transform.b = 0.5;
transform.a = 1;
sfondo.transform = transform;

Answer 1

From the image you posted it looks like the only thing you did wrong was the order in which you applied the scale and rotation to your transformation. I don't have any experience with Cocos2D but I just mocked it up in XNA and here are the results:

And here's the transformation matrix I used in XNA. See if you can find any correlation to your code:

Matrix matrix = Matrix.CreateTranslation(-origin) *
                Matrix.CreateRotationZ(MathHelper.ToRadians(45f)) *
                Matrix.CreateScale(1f, 0.5f, 0f) *
                Matrix.CreateTranslation(position);

The origin and position were just to position it in the middle of the screen and aren't really important here. What's important is that you perform the rotation before the scaling otherwise you'll get the result depicted above.

Edit

From taking a quick look at the documentation it seems to me that you should start with CGAffineTransformIdentity, apply CGAffineTransformRotate to it, and finally apply CGAffineTransformScale to the result of the previous operation. I think that should be enough to figure it out.