Hegagons viewed at an angle

[Arne]

I compiled a page for my Skeleton Wars project today. It's inspired by a game called Warlords, which is a TBS with 2D grid movement. Now, I'm thinking of doing a hexagonal solution, since: I don't need to do straight walls. Movement is more accurate. I haven't done it before.

Also, structures often look better at an angle. I know you can cheat a bit with perspective and do side view and top view at the same time, but I want to try and go for a more accurate perspective (with no diminishing point). After pondering the issue for minutes, I came up with this solution:



Now, since it's probably good form to do a '2 slope', the problem becomes: calculating the length of the horizontal line, and my viewing angle. I could probably do this using... math (I'm guessing it's about SinBackwards (aSin?)( angled height / topdown height  ), not sure though. ), but perhaps someone else have already researched this kind of problem and made a neat page about it. I did a few quick searches but found nothing, so I ask you guys.

The most practical solution for me as an artist is probably to pop up a 3D program, put a cube or cylinder on a hexagon and rotate until it fits (or faster, rotate until a '2 slope' appears). Then I know which angle I'm working at (visually, the angle in degrees is less interesting).

[Tourist]

I worked on something like this last year, let dig up my notes....

For a hexagon of side N, the distance across the hex point to point is 2N.  The distance across the hex from edge to edge is N * sqrt(3). 

The view angle is the projected height (pixels on the screen) vs the real dimension it represents.  I'm pretty sure the asin function gets you the viewing angle.

You might consider turning the hexes 90 degrees from your picture (pointy bits going up and down rather than left/right) in order to prevent units from covering each other up as much.

Hope this helps,
Tourist

[Arne]

THanks:

Someone gave me this to put into google:

cos(arcsin((1/2) / sin(60 degrees))) in degrees

= 46.7818081 degrees

But I haven't checked it yet. Don't have a 3D program.

I thought about rotating the hexs 90 degrees. I think it will give a more topdown view as I'm limited to 2 or 3 slopes. A hex already has a 2 slope for the pointy end, so I'd have to go for a 3 slope I'm guessing. I'm not sure if units/terrain overlapping is good or bad thing, actually. I might need a little overlap it to create depth, but to have things completely obscure each other is a bad idea of course. A test might be in order...

[Lizzrd]

With unit overlapping, you mean one unit overshadowing another, right?
BBecause that sound completely reasonable as long as you make it clear that it's an unit behind the other.

[Arne]

Yeah, tall stuff standing on the tile, not badly made edges.

Below, Top left: I just drew something, but something looked off. To tall, but I wasn't sure. I did a somewhat accurate normal hex tile and scaled it until I got a decent '3 slope' (top right). Then I realized it was not a 3 slope, and that my initial eyeballed attempt was actually somewhat correct (top center).

There are a lot of ways to do the edges, and I guess no way is mathematically perfect since we're dealing with pixels here. It just has to look and feel right, I guess.  



Edit. Fixed mess up.

Ideally the view angle should not be too top down (can't show height) or too side view (hard to eyeball measure distances during gameplay)

[Arne]

Bah. I'm a fool. My hexagon above is not a hexagon at all, it seems. I based it on a faulty assumption. Now I'm just gonna let Photoshop draw one for me, and if it can't, I'll download one, from the internet.

[ptoing]

Whatwhat? How is it not a hexagon? It might not be equilateral, but it still is a hexagon, since it has 6 sides. And indeed for games it does not matter that stuff has a perfect perspective (well, projection in this case) but that it reads well and looks nice enough, which I think your latest ones do.

[Tourist]

That equation doesn't look right to me, but I could be wrong.  I think it's like this:



The angle beta (B) is asin(screen hex / real hex)
The angle alpha (a) is 90 - B (in degrees)

It looks like you were trying to use a cotangent (=cos/sin) to convert the sin to a cosine angle, but I don't know where you got the fixed 60 degrees.


I think the hexes in the upper left of your most recent post are correct.  The ratio of the height of the pointy 'cap' to the length of the side won't change no matter what angle you view it at.  For a side of N, each end cap is height N/2, for a total of 2N height.  Changing the angle only changes the angle of the slanted lines.

@Lzzrd:
Overlapping units make it difficult for the user to select them, and it covers up the splendid artwork you did.

Screen clip from my previous project, with placeholder art.  


That's a 3:1 angle on the lines and an overall 4:3 for the hexes.  The angle of the city is wrong (iso), and the critter isn't quite right either, but I left it in to show how one could avoid overlapping.

Tourist

[Arne]

Ok, I hope I'm not stupid again here.

So, I found the polygon/hex tool in PS, made a big one. It seems the 2 slopes, while clean, are not true to the angles of hexagons. But this doesn't matter to me since I can choose slope by compressing. I realized that I could simply turn on a grid. Then I can downscale to any size I need and clean up the slopes.



Yeah, I mean an 'equilateral hexagon of course. I noticed that some sides were longer when I flipped.

The formula wasn't mine.

[Tourist]

That looks like a good solution to me.

Tourist