Creating the SVG
The first step in making a map is create an SVG file. This SVG file defines what the map looks like, where the territories are, what their shapes are, as well as the "bonus link" rectangles that show the bonus values.
You can use any SVG editor you want. Many graphic design applications have the ability to export to SVG, so if you're already familiar with one you may use that. If you don't know what to use, try Inkscape. Inkscape is a good choice since it's free, works across all of the major operating systems, and is overall very nice application. You can download it at http://inkscape.org.
It's a good idea to test your SVG file as you are building it. Don't wait until you've spent a bunch of time building the perfect map before uploading it into Warzone the first time. You want to make sure the tools and techniques you are using will work with Warzone, as Warzone doesn't support some SVG features.
Getting Started
After opening Inkscape, you should do a few things to set up your document:
- Optionally, set the background to black: This is so it fits in with Warzone's theme. In Inkscape, click "Document Properties" (top-rightmost button, or shift-control-D) and click the "Background" (under the default "Page" tab). Set the R,B, and G to 0 and the A to full to get black. This isn't a required step, as Warzone will ignore the background color you set here and always have a black background. However, making it black in Inkscape helps you visualize how it will appear when you upload it.
- Set the document size: Go back to "Document Properties" and look at "Custom Size". First set the Units to "px", then set the Width and Height to the desired size of your map (900x900 is a good starting point). Then expand the "Viewbox" drop down and set the Width and Height to the same values as your "Custom size". You can adjust the size for your own map's needs, up to a maximum of 3500x2500. If army numbers appear too small when you test your map, that means your map is too big and had to be shrunken down, causing the army numbers to shrink. Thanks to the magic of SVG, you can reduce the size of your map without losing any detail.
- Ensure the Scale is also set to 1 (both x and y)
Then just start drawing, using Inkscape's drawing tools. For learning how to draw in Inkscape, there are many good tutorials on the web. Try searching with search engines or on Youtube.
Assign Territories
As you are drawing, you will need to designate which objects will be player-controllable territories and which are just for decoration. To mark an object as a player-controllable territory, give it an id of Territory_#. For example, Territory_1, Territory_2, Territory_3, etc. To do this in Inkscape, right-click on the object and select "Object Properties." Then set the "ID" to Territory_1.
Inkscape will tell you if you try to re-use the same number more than once (it will say "id exists!"), so you don't need to pay super close attention to where you left off in the numbering. Also, you don't need to use every number - it's okay to jump around (for example, skipping from Territory_11 to Territory_19.) This is also good if you decide to delete one; you don't need to go back and fill in the gap.
Anything that doesn't start with Territory_ won't be a territory, so you can include extra objects for decoration or instruction, such as lines, arrows, etc.
If you're making a really large map, note that maps may not contain more than 4000 territories or 1500 bonuses and your SVG file cannot be bigger than 3 megabytes. For very large maps (>3000 territories), keep this filesize limitation in mind. One strategy that helps is to use as few nodes as possible for your shapes.
Starting from an image
If you're modeling your map after something you have an image of, it's often helpful to insert an image, set its opacity to 50% and just draw over the top of it. The image itself won't show up when you upload it to Warzone.
To insert an image in Inkscape, just drag the image file into your canvas. Then, you can move it to the back by selecting Object -> Lower to Bottom. You can adjust its opacity by selecting Object -> Fill and Stroke.
Overridden Properties
Warzone will override a few properties of each player-controllable territory. Therefore, it does not matter what you set for these properties when designing the map, since the values will be overwritten when the map is used in a real game:
- Fill color: The fill color will be replaced with the color of the player who controls the territory
- Stroke color (border color): The stroke color will be replaced with the color of the bonus the territory belongs to (you'll set these colors for each bonus later)
- Stroke width (border width): The stroke width will always be 1.
Player-controllable territories are "brought to the front." That is, you can't overlap a player-controllable territory with another object and expect it to stay that way.
Further, player-controllable territories should not overlap each other - you don't want to have territories that players can't click on. If you want a territory to be on top of another, you really need to cut a hole in the outer territory in the shape of the inner one. This makes the inner one look like it's on top, even though technically the territories aren't overlapping. In Inkscape, one way to do this is with Path > Flatten (keybind shift+F).
Bonus Links
You can make a small "bonus link" rectangle that shows the number of armies a bonus gives. This is preferred over making your own rectangles with a number in them for two reasons:
- If players click on the bonus link, it selects the bonus.
- If players override the value of the bonus, the game will show the correct number.
To make a bonus link, make an object near the bonus. A 16x16 rectangle is the standard, but some players prefer to use circles or other artistic styles. Give the object an ID of BonusLink_BonusName. Remove any spaces or punctuation, special letters (like the ß), letters of any other alphabet then the latin alphabet, or letters with diacritics (such as ë, î, ú) from the bonus name. For example, the Earth map has a bonus named "Middle East" and the rectangle's name is "BonusLink_MiddleEast". Be sure to use the same casing; for example, bonuslink_middleeast would not work.
If you are not sure what to name your bonus link box, Warzone will help you out. After uploading your SVG file and creating the bonuses in the map designer, open the Bonuses window and look at the text. The Bonuses window will tell you what to name your Bonus Link rectangle. If you've named the object correctly, but Warzone still isn't recognizing it, it may be because your bonus link is a group (a "g" node in the svg file.) Only individual objects can be bonus links, not groups. To fix this, in Inkscape, just right-click the offending object and select "Ungroup."
The fill color of a bonus link will be set to the color assigned to the bonus. The stroke color of the bonus link will always be set to yellow, and this color is not overridable. However, the yellow stroke can be hidden by setting the stroke opacity to zero.
Including Text
To include text in your SVG file, please follow these steps:
- Make the text using the text tool in Inkscape.
- Arrange the text exactly as you want it.
- Select the text.
- Select Path -> Object to Path
After doing this, your text will behave as an object. If you need to modify what the text says, you must delete and re-create the object.
If you followed these steps but the text still is not showing up, please also verify that the text isn't overlapping any player-controllable territories, and that the text's color isn't the same as what's behind it. A common mistake is to make black text, and if you didn't change your Inkscape background to black as instructed above, it will appear in Inkscape but not when Warzone changes your background to black.
SVG file limitations
New Warzone maps are currently subject to the following limitations:
- Max 3500 x 2500 pixels (W x H)
- Max 1500 bonuses
- Max 4000 territories
- Max SVG file size: 3 MB
- Max height map size: 2 MB
- Max texture size: 2 MB