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

[Arne]

Here's a rotated version.

[Arne]

So, 4 is the height of the angled hexagon at the top of the image in the post above and 7 is the plain top down height...

asin(4/7) in degrees

 = 34.8499046 degrees

I don't know much about trig, but I ran with this assumption, which seems to return a 4.



(Yeah, I checked 90 - 34.8 just to be sure.)

These angled lines can be useful later if I need to check perspective and overlap of things, perhaps.

[happymonster]

I don't really understand the problem.. I assume you will flatten the hexagons to get a nice angle for even steps on the lines anyway?

[Arne]

I don't understand what it is that you don't understand. The problem was to determine good (w/h) proportions and view angle. I also wanted even slopes. I think it's solved.

Here's one that's proportional to +-0.5px or so. It's viewed at about 52 degrees. Edit: 43.8 degrees, I think. Edit: thought wrong, it's 35.1 degrees. Maybe.

[Lizzrd]

Why is it so important to have completely "hexagonal" hexagons anyway?

[Arne]

It's good to be informed. You have to know the rules to break them, etc. Now if I break something I can know which direction I'm breaking it in.

Also, chances are that since I know the view angle, I can draw buildings and stuff which doesn't feel disjointed with the perspective of the ground. If I feel the need to, I can use a 3D program to help me make complex stuff like castles or skyscrapers.

Completely 'equilateral' hexagons ensures... that all directions are fair... I mean, look fair. The graphics are just a representation of some array of course. It always bothered me that the (text) 'tiles' in rogue-likes are tall, because it makes it difficult to judge distance. My hexagons are wide of course, but we're used to seeing compressed perspective along the ground plane like that. If the perspective and proportions are proper, then it's easier for the brain to... read what's going on, I'd say.

[Rosse]

Interesting problem. I tried to calculate it and found out that your original tile is not really correct. Is that possible? According to my calculations, the width of an hexagonal tile (with a 2px slope) is height*4 or height/0.25. Your original tile was 10px height and 30px width. I redraw your tile with a 10px height and 40px width. It doesn't really look better (it feels too flat), but I think it's more correct mathematically. The top-view hextile is drawn with the photoshop polygon tool and proved my calculations were ok (The height or the top-view tile is the height of the tilted *3.464: 10px*3.464=34px)



For the other problem, the tilt-angle, I tried to calculate that too and got 73°. I think it should be correct, but of course I can make mistakes. I post the sheet where I calculated everything. I hope it helps you and you can understand what I did. If something is unclear, just ask. The text is very thin, so if it's too hard to read, I can send you the original scan (300dpi), which is much easier to read.

[Arne]

Wouldn't my first tile (which is indeed not wide enough, I noticed this soon after having posted it), be similar to the flat brown one some posts above. It's 8 wide and 2 high, and yours is 40w 10h. My big brown top down hexagon is 7 high, but I'm not sure if that's exact.

asin(2/7) in degrees

90 - 16.6015496 = 73.3984504

Yeah, that's a 73, but not an exact match to yours.

---

After this test below I concluded that doing... smoothing, or anti aliasing at tile level (half forest, etc) will probably just make the strategy element suffer because the map is less distinct. I can probably vary the forests a bit, but not in density. I'm thinking that it's better with some more Boolean terrain cases.

Also, I should add some faint lines around the edges of the hexagon where the ground shows.



Painted sloppily at 5x, scaled down, sharpened, masked.

[Arne]

Right, so, perhaps I shouldn't have used an integer 7 there. It seems like the actual height falls short. It seems like my new (eyeballed) height gives a value closer to Rosse's:

asin(2 / 6.93) in degrees

90 - 16.7741759 = 73.2258241

I hope this is somewhat accurate, as far as Photoshop experiments can go. I wouldn't trust me here, because I keep making silly mistakes.

Edit: Indeed I did: Updated the rightmost column.

[Arne]

More distinct tiles this time, and some border. I think it's an improvement.

[Lizzrd]

You got someone to code it?

[Rosse]

The left column looks correct to me. Not sure about the D tile, though. As far as I can see, you used the width to height ratio 2:1. But the slope is 4:1 and not 2:1 - maybe it's intentional. A 2:1 slope would look too close to the topdown-hex-tile (in my photoshop experiment I have a 8:8 w/h ratio). In your painted example you used a 3:1 slope which works really nice.
If I understand you correct, your going to paint the tiles bigger and then resize it (and eventually fix it up). If that's the case, a 2:1 slope is not so important (like when you would pixel it from scratch), so it's only about having nice slopes/edges to make seamless transitions?

Your new painted tiles works well. Did you eyeball the "correct foreshortening" or did you use some distorted cubes for reference?

[Arne]

Oh, I should've mentioned, the squeezed hexagons are scaled versions of the top down ones, so I haven't drawn anything myself. D is just a compressed E.

I paint at 500%, or rather, I paint/draw at 100% and scale down to 20%. No pixel optimization other than the mask and some minor cleanup. The clean slope now is mostly  important because of clean tiling and edge lines, perhaps selection boxes hexagons. It also makes the masking job structured and easy. Right now I keep the mask and edges in separate layers, so I can tweak my large scale image whenever I need to, and then pop the down scaled version in underneath the mask, without having to re-mask everything.

Yeah, I just eyeballed the tilt of the tower and trees here. If I need to, I could consult a box model.

I haven't thought about coding yet. This is just a test to see top-side view hexagons feel.

I really don't wanna draw 2^6 edges for beaches, rivers and roads. Thinking about a pie-slice system, an on the fly visual effect (based on adjacency) rather than an actual tile in the array.

[Arne]

Some thoughts on the pesky road, beach-river problem.

[Arne]

I've added my little adventure here onto my Skeleton Wars page.