Diary SiteMap RecentChanges About Contact Calendar

Search:

Matching Pages:

Journal

2013-03-04 Text Mapper With Lines

SVG Mapper now knows how to draw lines. These lines try to flow from hex to hex…

Example input:

2114 hill
2115 hill
2213 forest
2214 forest "Delan"
2215 hill
2314 forest
2315 forest
2414 hill "Forest Bight Fortress"
2415 forest
2515 forest "Boghra Little"

2214-2615 river
river path attributes fill-opacity="0" stroke="black" stroke-width="5"

include http://alexschroeder.ch/contrib/default.txt

Result:

Dangerous Forest

I think that I’m not quite understanding how the viewBox is supposed to work. But anyway: these lines can be used for roads, rivers, borders, cliffs, and the like. If they’re very straight, they don’t look too good. There’s no random waviness. One feature I definitely have to add is providing more intermediary points such that the user can guide rivers around the hills or to allow rivers to merge.

Tags: RSS RSS RSS

Add Comment

2013-03-01 Text Mapper Progress

I’m a big fan of the Forgotten Depths. I wanted to use its map as the goal for my Text Mapper. As the mapper now allows the inclusion of other files, I’ve saved my library of colors and icons as default.txt and I’ve saved the map as forgotten-depths.txt. That’s why all you need to do now is include the map:

Forgotten Depths SVG

If you see white hexes, then I haven’t added any definitions for them, yet.

Tags: RSS RSS RSS RSS

Comments on 2013-03-01 Text Mapper Progress

Wow, this looks great! I think I’ll need to re-map parts of the Mystara campaign … I may have some time on Sunday.

– Harald 2013-03-01 10:56 UTC



AlexSchroeder
Too bad creating new icons takes so damn long. Also, two line labels would be nice. And big, diagonal labels to label areas. “Mirkwood” or something like it. Nice coastlines, roads, rivers…

Regarding roads and rivers: I’m discovering that Bézier curves need a bit more effort since simply doing a quadratic curveto (’T’ in the SVG spec) the hex midpoints isn’t working very well. I will need to rediscover my trigonometry basics!

AlexSchroeder 2013-03-01 12:00 UTC

Add Comment

2013-02-27 New Text Mapper Shapes

How to create new shapes for Text Mapper?

First, start with an empty SVG file:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg"
     height="200px"
     width="200px">
</svg>

I like to draw stuff using the calligraphy tool (c). I usually simplify the nodes a lot (Ctrl+L), unify the shapes (Ctrl++), edit the nodes by hand (n) until you’re happy with the fewest number of nodes you can manage.

Now move the entire shape such that it is centered on the top left corner. This is (0,0) as far as SVG is concerned. Save it.

https://farm9.staticflickr.com/8240/8512911746_4f1c405dba_o.png

Look at the SVG file and notice something like this:

    <path
       style="fill:#000000;fill-opacity:1;stroke:none"
       d="m 7.647323,-20.341905 c -5.784973,-11.791839
       -36.204242,-5.139394 -43.951039,7.112364 8.922877,-5.977096
       34.793258,-11.641806 37.046343,-5.498373 -17.505656,0.485788
       -29.019956,5.940662 -33.027811,23.8472764 C
       -21.859546,-12.603312 -7.5022983,-14.191144 2.47485,-12.984161
       -8.2112223,6.06712 -19.987316,13.477858 -15.788864,50.225619 c
       3.988368,3.362713 8.6116517,-5.097214 4.510279,-7.531518
       -0.559084,-6.64895 -0.875559,-13.360661 -0.08632,-20.004922 C
       -9.6892813,9.718021 1.072969,-6.510207 8.835372,-12.256094
       26.823805,-7.758432 35.550312,0.1756144 34.450001,15.351883
       44.387089,3.7916614 29.882349,-11.701263 14.406587,-15.219388
       28.287217,-15.939127 40.549839,-6.589098 45.412784,1.4541824
       47.026796,-8.361333 28.866764,-19.205208 16.79733,-20.277164 c
       10.765708,-6.95198 25.316253,-3.074379 29.792108,3.226712
       -4.893545,-14.115874 -36.158133,-10.60357 -38.942114,-3.291453
       z"
       id="path3007"
       inkscape:connector-curvature="0"
       sodipodi:nodetypes="ccccccccccccccc" />

You can already extract this path and use it! Usually it takes several attempts to get the placement right. Once I’m happy, I turn all these floating point numbers into integers in order to save space. Personally, I use Emacs to do it (EmacsWiki:RoundFloatingPoints).

This is what I want:

m 8,-20 c -6,-12 -36,-5 -44,7 9,-6 35,-12 37,-5 -18,0 -29,6 -33,24 C -22,-13
-8,-14 2,-13 -8,6 -20,13 -16,50 c 4,3 9,-5 5,-8 -1,-7 -1,-13 0,-20 C -10,10 1,-7
9,-12 27,-8 36,0 34,15 44,4 30,-12 14,-15 28,-16 41,-7 45,1 47,-8 29,-19 17,-20
c 11,-7 25,-3 30,3 -5,-14 -36,-11 -39,-3 z

Example input:

0202 jungle
jungle attributes fill="white" stroke="#b3b3ff" stroke-width="3"
jungle path m 8,-20 c -6,-12 -36,-5 -44,7 9,-6 35,-12 37,-5 -18,0 -29,6 -33,24 C -22,-13 -8,-14 2,-13 -8,6 -20,13 -16,50 c 4,3 9,-5 5,-8 -1,-7 -1,-13 0,-20 C -10,10 1,-7 9,-12 27,-8 36,0 34,15 44,4 30,-12 14,-15 28,-16 41,-7 45,1 47,-8 29,-19 17,-20 c 11,-7 25,-3 30,3 -5,-14 -36,-11 -39,-3 z

Output:

Jungle Hex

Example input:

0101 jungle
jungle attributes fill="#9acd32" stroke="black" stroke-width="3"
jungle path attributes fill="#228b22"
jungle path m 8,-20 c -6,-12 -36,-5 -44,7 9,-6 35,-12 37,-5 -18,0 -29,6 -33,24 C -22,-13 -8,-14 2,-13 -8,6 -20,13 -16,50 c 4,3 9,-5 5,-8 -1,-7 -1,-13 0,-20 C -10,10 1,-7 9,-12 27,-8 36,0 34,15 44,4 30,-12 14,-15 28,-16 41,-7 45,1 47,-8 29,-19 17,-20 c 11,-7 25,-3 30,3 -5,-14 -36,-11 -39,-3 z
text font-size="20pt" dy="15px"

Output:

Green Jungle Hex

Tags: RSS RSS RSS RSS

Comments on 2013-02-27 New Text Mapper Shapes

Not enough trees for a jungle (-: At a watering hole and you have a decent oasis …

– Harald 2013-02-27 11:17 UTC



AlexSchroeder
There you go!

Oasis

I think I like how easy it turns out to be.

AlexSchroeder 2013-02-27 11:29 UTC



AlexSchroeder
I’m still pondering how to do labels.

https://farm9.staticflickr.com/8507/8511938807_5a793d726a.jpg

AlexSchroeder 2013-02-27 12:01 UTC


Very nice and readable!

– Harald 2013-02-27 12:37 UTC



AlexSchroeder
Thank you for the feedback. Added. :)

Harald's Repose

AlexSchroeder 2013-02-27 14:10 UTC

Add Comment

2013-02-26 Text Mapper

Recently I wanted to create a little hex map and I wanted to do it on an iPad, I wanted to eventually integrate it into my campaign wiki, I wanted it to be SVG based, and so on. All that meant, Hexographer wasn’t the appropriate tool. I needed to cook something up myself. Based on code I wrote nearly five years ago—the Old School Hex Mapper—I wrote up a little something.

I’m calling it the Text Mapper because it takes text input. No interactive fiddling with the map.

There are various sections of the input.

Map

This is simple. Coordinates, terrain.

# map definition
0101 mountain
0102 mountain
0103 hill
0104 forest
0201 mountain
0202 hill
0203 coast
0204 empty
0301 mountain
0302 mountain
0303 plain
0304 sea
0401 hill
0402 sand
0403 forest

The rest of the input determines how things look: what colors to use, what icons to display. When you start the Text Mapper, the input area already contains an example. Start with that before doing anything else.

Terrain attributes

Now it gets tricky. For every terrain we used, the script will generate a hex. We need to provide some SVG attributes! Need documentation? Check out the polygon in the SVG specification and click on show next to presentation attributes. That’s what you should be looking at.

# attributes
empty attributes fill="#ffffff" stroke="black" stroke-width="3"
plain attributes fill="#7cfc00" stroke="black" stroke-width="3"
forest attributes fill="#228b22" stroke="black" stroke-width="3"
hill attributes fill="#daa520" stroke="black" stroke-width="3"
mountain attributes fill="#708090" stroke="black" stroke-width="3"
sand attributes fill="#eedd82" stroke="black" stroke-width="3"
coast attributes fill="#7fffd4" stroke="black" stroke-width="3"
sea attributes fill="#4169e1" stroke="black" stroke-width="3"

Icons

In order to add little icons, you can specify a path per terrain.

hill path M -42,11 C -38,5 -34,0 -28,-3 C -20,-6 -11,-5 -5,-0 C -2,2 1,6 3,9 C 4,12 2,13 0,14 C -3,9 -7,5 -13,2 C -21,-1 -30,0 -36,6 C -38,9 -40,11 -43,14 C -43,15 -44,14 -44,13 C -43,12 -43,12 -42,11 z M -5,-0 C 0,-6 7,-12 15,-16 C 21,-18 28,-17 33,-14 C 39,-11 41,-5 43,-0 C 42,2 41,5 39,2 C 37,-2 33,-8 27,-10 C 20,-13 12,-12 6,-7 C 2,-4 -1,-1 -4,1 C -7,4 -6,0 -5,-0 z

plain path M -18,-13 C -13,-6 -13,4 -8,12 C -11,14 -15,21 -18,26 C -20,17 -22,4 -28,0 C -26,-4 -21,-9 -18,-13 z M 5,-31 C 4,-19 3,-6 6,5 C 1,10 -0,14 -3,19 C -2,6 -3,-4 -4,-16 C -4,-21 2,-26 5,-31 z M 26,-1 C 16,6 19,5 9,18 C 12,3 21,-8 34,-17 C 32,-12 29,-6 27,-1 z

If you don’t want this path to be black, you need to specify attributes for the path element.

plain path attributes fill="#76ee00"
hill path attributes fill="#b8860b"

And finally, the coordinates are simple text elements.

text font-size="20pt" dy="15px"

If you wanted a black and white map, for example, you could use different strokes…

empty attributes fill="white" stroke="#b3b3ff" stroke-width="3"
mountain attributes fill="white" stroke="#b3b3ff" stroke-width="3"
hill attributes fill="white" stroke="#b3b3ff" stroke-width="3"
forest attributes fill="white" stroke="#b3b3ff" stroke-width="3"

If you want to create new path elements yourself in Inkscape, you should draw them in a rectangle from (-100,-100) to (100,100) and extract the the path info from the SVG. Yeah, adding new icons isn’t easy.

I need to add more icons. I’d also like to add multiple icons for the same terrain such that the code will pick one at random.

I wonder how easy it’s be to add text labels, roads, rivers and borders. :)

The result of the above:

Example map

(Also on GitHub.)

Tags: RSS RSS RSS RSS RSS

Add Comment

Show Google +1