View Full Version : A hex world WIP (and WIP app) - personal project

06-30-2014, 07:19 PM
Here's a little in progress project so far:

Hex proof of concept. Trying out isometric hexes (conveniently the base has a perfect 2:1 aspect ratio in iso!):

Working out the basic coding to get the hexes displaying

Multiple terrains - plus infinite panning, and the UI workfow to allow picking multiple terrains

Roads and rivers. Rivers run down hex edges, roads run through the middle, solves any conflicts nicely!

Proof of concept for placing locations. This might just work!

06-30-2014, 07:47 PM
This is really cool! Is this a personal project or a commission? Is it intended for distribution and/or sale at some point?


06-30-2014, 07:48 PM
Dear Torstan, what is this Magic about :D ?
It reminds me slightly of Settlers of Catan.

07-01-2014, 09:09 AM
Impressive work Torstan! It's a dream for board gamers :)

07-04-2014, 09:58 AM
It's a personal project so far. This is all proof of concept - the images are all likely to change (the buildings certainly will).

The magic is trigonometry, javascript/jquery, and - down the line - a little node+mongo for save/load.

Here's some more buildings to show the layering of locations:

07-06-2014, 06:46 AM
Reminds me a lot the graphics used in Civilization V and an old strategy game from the deep 90's which used hex-mapping: imperialism.

07-06-2014, 11:26 AM
A little more - showing region overlays and notes (and some bugs):


07-06-2014, 11:43 AM
Reminds me a lot the graphics used in Civilization V and an old strategy game from the deep 90's which used hex-mapping: imperialism.

Oh Hell, I played it infinite times... I simply loved it. Torstan`s game looks awesome as it is, if I imagine even more different tiles for each terrain type. WOW, just wow. I would buy an early accessgame on steam with this visuals!.

09-07-2014, 12:48 PM
A little more progress on this:






09-10-2014, 09:00 AM
@Torstan-Those symbols are insanely good! I love the Dwarven site symbols. Excellent stuff! Wow! Quick question: Do you create these in a vector program, then resize as needed? What program do you use?

09-14-2014, 12:38 PM
They're all done freehand in photoshop.

A few more pieces:


09-15-2014, 11:50 PM
I love that building with the huge slanted roof - I'm picturing kids sneaking out at night and pillow-sledding down it... :D

10-09-2014, 08:12 AM
I got some grief for that one :) but I agree - it's fun.

Here's some progress shots and finals of those locations, and how they look integrated into the map.





10-11-2014, 11:15 PM
And a little more


10-12-2014, 10:59 AM
More icon work this morning - this time a wood elf watchpost:


10-12-2014, 05:36 PM
Wow! these are all just amazing! :)

My only critique if I may be so bold would be that the rivers are a bit lost when not looking close in so could do with something to make them pop out a little more maybe?

...but thats a minor niggle and I absolutely love how even in repetition the skill and detail in these tiles is such that they still fool the brain into thinking each is unique!

10-13-2014, 11:27 PM
Thanks! I know that the rivers aren't quite there yet. I have a couple of routes to try. I'll post some versions as they progress.

And because I'm trying not to post without an image/sketch :)

More final lines, on top of the sketched lines.


10-14-2014, 08:41 PM
This is a crazy cool project. I'm looking forward to seeing the app in motion :)

Edit: Is this going to be a game or a map creator? I could see this solving many non-artist-writers' novel-mapping woes.

10-14-2014, 10:00 PM
It's a map creation app. But it's also online, so inevitably allows you to share the viewable map with others, and they can interact with them. The tool allows you to add in some notes that other users can see - but only the creator gets to edit the map (for now).

And, keeping to the rule. Some more sketches:

10-24-2014, 07:55 AM
Here's the final sheet of those extra icons.


10-24-2014, 11:08 AM
Beautiful work Jonathan!

10-24-2014, 12:08 PM
Incredible icons!

10-30-2014, 09:04 AM

And a couple more WIPs with the images in the tool:




12-06-2014, 11:35 AM
Some edits:


01-29-2015, 12:56 PM
Man!! I just found this doing a search for hex info....Glad I made the effort (didn't find what I was looking for, but who cares... :) )

You say you want this Online? oooooo Can't wait :D

01-30-2015, 03:15 PM
Dude this is absolutely awesome! I hope you keep working on this project! Honestly if you finish it I would purcahse the software to make my own map with it.

Also, would you be willing to post the photoshop template to your iso hex base? I seen your post & have been trying to create a grid base like yours but have been failing miserably xD

I mostly want it to try convert my own 2D campaign map into an isometric :)

01-30-2015, 03:39 PM
Oh also have you tried incorporating anything like this into your hexes where hills/mountains do actually have a height? I dunno if it would work well or not but would be neat for buildings that are built into mountains and things like that, the only problem might be that when the mountains descend on the 'backside' it would be difficult to see I think. And the hundreds of sprites that you would have to paint for the hexes to match up as well xD




05-24-2015, 06:43 PM
@Arkaidyn The problem is precisely that. As soon as you add irregularities like that, the system gets awfully complicated, and would need a lot of sprites.

An Update!


Lots of backend improvements to make this work with lots of people usin the tool at once (the result of a rather abortive testing session)
A complete re-working of roads and rivers (see below).

Next Up

More natural coastlines
Output to high resolution images

Here's some examples of the new roads and rivers. Note, these are all segments that automatically snap to the previous sections that have been placed. So you can quickly lay roads and rivers across your map.



Getting there...

05-24-2015, 09:02 PM
I have no words. Simply amazing. :o

05-24-2015, 09:31 PM
That is really cool torstan. :)
Very nice freehand work and a wonderful set of concept images.
I do not know how I missed this thread.

05-24-2015, 10:14 PM
Not concept images - a working prototype :) Just search the web for #hexallthethings and you'll see the live test results using the actual app.

05-24-2015, 10:35 PM
Just searched that. Thanks for that. Now I have my reading for tonight. :)
All of it that I've seen so far looks great. Did you do the code? If so, did you have experience before you started this project?
I only read a quick snippet from your site, which I will read in depth later. ;)

05-24-2015, 10:38 PM
Yep, I've been coding for a long time. I took a run at this last summer on holiday when I wondered 'how hard can it be?'. Here we are close to a year later, getting close to a functional version.

If you're interested - it's a mongoDB backend, with nodejs as the middleware, but the heavy lifting is all done client side, and that's all html, css, and jquery. And quite a lot of math.

05-25-2015, 12:01 AM
I know enough to know what you're talking about but not enough to know how to do it. ;)
So how did you come to be doing both code and illustration? I haven't encountered many people who do both.

I assume you are developing this for a profit in the end. If so, are you going to use a pay model or ad model for revenue?
I have to say, I find this stuff very interesting.

05-25-2015, 01:33 PM
It'll likely be a payment to have your maps live for a given amount of time. People tend not to need this always on, so a monthly subscription won't be a good match for everyone - and everyone is rightly nervous about never ending monthly subs (gymn membership anyone?). The traffic through the app will be too low for ads to pay the costs (and they always look a bit crap and hurt performance)

So, something like an upfront payment for a given amount of time. There'll almost certainly be a free sandbox. And also a commercial license for a company interested in using the app to support a campaign setting.

It's an open secret that I was also a research scientist for 10 years. I did most of my mapping evenings and weekends, and my day job involved a decent amount of coding. And a bunch of that work also involved data visualization using web coding. So that helped too :)

05-25-2015, 03:37 PM
And a little more progress. Coastlines coming together:


05-25-2015, 04:41 PM
I had to subscribe to this thread. Too much good stuff in here.
What was your area of research, if you don't mind me asking?
You seem to have a rather interesting life story Torstan.

05-25-2015, 05:14 PM
Theoretical high energy physics. Specifically particle physics beyond the Standard Model, dark matter, predictions for the Large Hadron Collider, and Ultra High Energy Cosmic Rays from other galaxies. That took me from the UK to the US, via Poland. I moved to data science and now run a research group. Mapping is still an evenings and weekends gig, but a fun break from the research world.

05-25-2015, 06:53 PM
And a little more progress. Coastlines coming together:

Just out of curiosity, are you doing these top down, then the 58% squash to make them isometric? That's a technique that strikes me as very useful :)

05-25-2015, 07:14 PM
I'm free handing them direct. After doing this for a while I only use the squashed top down trick for complex maps like cities. Super useful though.

05-26-2015, 08:38 AM
A quick update - testing the coastlines with a rough colour, and a couple of terrains:


05-26-2015, 10:21 AM
Looks good. It will be interesting to see a larger set utilizing the coasts.
The jaggedness and irregularity adds a lot.
The 3d nature of the mountains is really nice. Takes it to another level.

05-26-2015, 09:05 PM
Indeed. Here's a larger style test, and I think the lower set of sea styles will do the trick.


05-26-2015, 09:32 PM
It looks good. The only problem I can foresee with the lower sea texture is the rotation issue.
Though... I guess you probably have these tiles coded to not need to rotate... so I guess it isn't a problem. ;)

05-26-2015, 10:09 PM
Yep :) As soon as you go with isometric, you break the symmetry and can't do any rotation. So these are staying aligned as is :)

05-27-2015, 03:09 AM
Very cool project! Very nice style and well done! Maybe the sea could be a little "calmer" if you know what I mean?

05-27-2015, 07:58 AM
You're not the only one asking for that. Looks like I need to create some intermediate options for the sea tiles. Thanks for the note.

05-31-2015, 01:07 PM
Here's the progress on the coastlines. Getting there, they're up and in the app, and currently being tested.


05-31-2015, 04:33 PM
And a quick test, mapping Slaver's Bay:


Full write up: http://www.fantasticmaps.com/2015/05/mapping-slavers-bay/

06-06-2015, 11:23 AM
Which type of borders?

I'm testing different ideas for border styles. I think all of these are possible to create, and each have some pros and cons:
1. Filled Regions: simple - easy to fill a hex with a colour
2. Blurred Edges: a bit of a pain to illustrate and code, but totally doable.
3. Illustrated borders: works until you have two different border types collide (a fence, and a line of standing stones side by side?)
4. Simple Dots: already coded, but a little stark.

Thoughts? (and 'none of those' is a totally valid answer)


06-06-2015, 11:49 AM
I thought that maybe if you could do a humped dot, hand drawn like illustrated border, but just a nice 3d drawn shaded dot that might work well.
It would fit your drawn style tiles but not be so plain as the basic dot nor as intrusive as the illustrated stones.
The first 2 seem incongruous with your style.
It looks like you can do some variety with the illustrated style so maybe several illustrated dots. I'd like to see how that would look.

06-06-2015, 12:21 PM
The "illustrated borders" look amazing, and they would fit best with the rest of the style.

I can see where it would lead to difficulties though... in this case, I'd say go for the dots.

06-07-2015, 08:19 AM
The four examples look good (not a surprise :)!), but I would go for the dots too. The illustrated one is very cool but too "strongly present" imho.

06-07-2015, 10:08 AM
Yep, that seems to be the consensus. I'm adding in the blurred borders, and the dots, so that there's an option. One will be a 'border' set, and the other is a 'region'. The two work a little differently - so they get their own UI element.

Thanks for the feedback!

And here's a screenshot of the fuzzy border pieces (and some new isometric border dots).


Will Phillips
06-12-2015, 01:37 PM
Oh my sweet Lord, how have I just now noticed this glorious piece of work?

Really, really impressive concept.

Going to have to take my time this evening working through it.

06-16-2015, 08:44 AM
Thanks! A little more progress: regions now work, and play nicely with borders!

Now, you pick one of the colours, click hexes, and the borders naturally adjust to outline the region. This was a little tricky, but actually worked out really well. Under the hood it's a lot like coastlines. But for region edges we can use x and y symmetry. So I only need 4 sections for each colour, to allow me to create arbitrary hex borders. It does require some careful pixel alignment, and a few browser specific flipX and flipY commands in the css - but it works!


And because it's just a sprite sheet, it's trivial to add more colours. Here's seven to start with, and an example of what that looks like on a map. The top white region is a crop of the sprite sheet. It really does only need those few image sections.

The border lines are placeable anywhere, so they could designate ancient burial hexes that provides victory points when fully controlled, or an old fortified border that changes the attack score of armies that invade across it. Regions and borders compliment each other - and should provide the basic tools required for interesting strategic kingdom building.

- Max -
06-16-2015, 08:52 AM
That looks awesome Torstan, nice job!

06-21-2015, 08:23 PM
A couple more developments - new roads, and a question about Fog of War.

The roads:

And the options for Fog of War:

How would you want fog of war to work on a world map? And is this - one person sees all? Or many people see different partial regions (ie person 1 can see hex 3 and 4, but not 5, person 2 can see hex 4 and 5 but not 3)?
1. Everything is hidden
2. Terrain is visible, but not locations
3. Everything is visible, but not labels


06-21-2015, 08:44 PM
Normally, in most strategy games, the tiles are like #1 until they are explored. After that, we can still see the tiles and locations but they are usually not up to date.
For example, if somebody builds an improvement after you visited the area, the improvement will not appear on the map if there is a fog of war. Not until you discover it.

With an open border treaty, the player should be able to see the map as it is since he's having full access.

So, everyone will see the map differently depending on the tiles they have explored or gained knowledge of if they exchanged maps. Fog of way tiles don't appear black. they are grayed like in number 3.

06-22-2015, 12:39 AM
I'm totally with Azelor:

Unexplored - #1
Explored but not present - #3 until they are close enough

Do you have in mind introduce marks of PC position with a visibility radius?

07-03-2015, 12:12 AM
Visibility radius is a game mechanic - so lies outside the remit of this as a game agnostic mapper. But GM settable hard and soft FOW should make it easy enough to set this appropriately.

Here's the version I have in production now:

One is the GM view (so you can see what is/isn't in FOW), the other is the player view.

And if you want to try it out, sign up here! https://docs.google.com/forms/d/1G7yKsp0SjVggzh0ezuN_Hr17oedwcypzZZHfoj4CGt4/viewform

07-03-2015, 12:27 AM
That is so awesome. Will it be possible to remove the hex frames for pure mapmaking purposes? Looks like a well-fitting map with smooth transitions behind the frames. Just wondering. :)

07-03-2015, 12:30 AM
I think the GM should be like God, everywhere at the same time. He should be able to see everything clearly.

07-03-2015, 12:34 AM
I think the GM should be like God, everywhere at the same time. He should be able to see everything clearly.

But he needs to know what the players can see and what not.

07-03-2015, 10:46 AM
The GM view of FOW is toggle-able in the app. So you can have it on when you're laying FOW, and off when you're not.

The hex edges are a feature that will stay. It is, after all, a hex mapper - not a photoshop replacement.

07-03-2015, 04:52 PM
Looks amazing. Going through the form now

Sent from my SM-G357FZ using Tapatalk