12/19/2010

Vector Gaphics Maps

Fast, Large, Scalable, Flexible, Layered Maps with Vector Graphics

See the end for "screenshots."

Free programs to view or make SVG files (some browsers can view SVG):

http://www.adobe.com/svg/viewer/install/
http://inkscape.org/

3000x3500 map
Normal BMP = 40MB (might be able to adjust to 4MB)
SVG = 25kb (less than 1 MB)

Vector graphics are basically "connect the dots" lines that scale well and can form roads/rivers/coastlines or create continents and quickly fill the bounded area with colors. Inkscape can import bitmaps and trace outlines of terrain.

Normandy and Cotentin Peninsula 3000x3363

I made an SVG Normandy map in the basic PG field ("clear" terrain) green color. A game could use this as a base layer (all those "clear" and ocean hexes would not have to call any tile) with vector roads/rivers/coastlines over it and a small tile set of PNG for woods, mountain, and a few other items. Replace the PG dry tile sheet's #c3c377 with the pink mask to get an idea of how a few PNG layered over any weather of the Normandy SVG would work. The result effectively makes all the rivers/roads/coasts universal to be used on woods, mountains, etc., instead of only on field ("clear") terrain.

I added the PG beach and lighter-blue coastal water simply by stroking the line and adding a glow filter. I lightened the green and brown to a hex average to account for the original tiles' speckled effect.

The way vector graphics fills bounded areas makes it good for contiguous forest (you could use a repeated forest pattern instead of the field color on the whole land area). It is easy to make features as jagged or as smooth as you like (jagged increases the file size but is often still less than bitmap). Mountains are difficult to do well at a small file size so BMP or PNG might be used too. The nice part of the SVG base layer is you still have the option to do a huge SVG map with smooth coast at a very small file size and then place BMP or PNG costal tiles on top if you prefer.


"Screenshots"

These images show how one universal "all-weather" tile sheet would look on the SVG background map, where the SVG's hexadecimal color is changed for dry, mud, snow/frozen, and desert.

This was a quick test. The PG dry tile sheet's major green became transparent but further clean-up of the tiles to remove speckles and corners would help (and there might be better non-dry colors for the SVG).






Update 12/20/10

I tried a few changes:
  • Erased speckles from bitmap tiles
  • Gray rough/mountains as a neutral color for all-weather tiles, using a variation of Bingo's mountains
  • Transparencies in the rough/mountains so they blend with the background (actually show the background color when it changes)
  • A darker and lighter yellow (#efe3a0) for desert (the snow was and still is lighter than the PG snow color)
Dry, Mud, Snow/Frozen, Desert (PG average), Desert (light):






Update 12/20/10 Part 2

This method is easier because I quickly changed PG mountains' 2 brightest yellows to transparent on the whole dry sheet, so the SVG's basic ground color becomes highlights on rough/mountain (mountains automatically get snowy in winter and green in spring). Replacing some of the green-gray with brown-gray might help. Reduce obvious hexsides by drawing vector shapes for contiguous hexes and filling with pattern of PNG tiles.





0 Comments