ImageLocalization

NOTE: This article is in support of a feature proposal, its content is not applicable at the moment. The patch to make it work on the code side: http://caslav.gmxhome.de/misc/wesnoth-loc-img-06.diff The tracker script for keeping images up to date http://websvn.kde.org/*checkout*/trunk/l10n-support/scripts/lbundle-check.py

Being a game, Wesnoth's graphics data carries higher significance than it would in utilitarian software. An image containing English text in an otherwise native language environment, may bite at user's immersion. E.g. having a mismatch between geographical names in translated text and on maps (think "Blackwater Port", "Ford of Abez", etc.) will certainly not improve user's feeling of completeness of localization effort.

To offset this, a willing translator can also localize images into the world of Wesnoth.

How Does It Work?

Quite not unlike with text. Most text appearing in Wesnoth is up for translation, but given language's translators may leave some untranslated -- either deliberately (i.e. just copying English original), or because they didn't get to it yet. Likewise with the images: any can be localized, but none needs be; if there is no localized version of a given image, the user is presented with the original one. The only difference between text and images is that, unlike text, very few images possibly need to be localized -- presently, about 30 in total.

Once the localized image is made, putting it to work is simple: if the path of the original image in the source tree is:

foo/bar/baz/image.png

then the localized image should be put in:

foo/bar/baz/l10n/ll/image.png

where ll is the given language's code, like that used for names of PO files (e.g. de, pt_BR, etc.) That's it.

A tracker script is run periodically on the repository to indicate that localized images need updating when the original image has been changed or moved. There is a file named l10n-track in the root of the source tree, which tracks the state for every localized image, grouped by language:

# ll
ok        ¦foo/bar/baz/l10n/ll/image.png¦ ea9d6...563ad  30544
...

In each non-comment line, the first field is the state of the localized image, the second the path, third the checksum of the original image, and fourth the revision ID of the original image. When the original image has been modified, the corresponding localized image's state will change to fuzzy:

# ll
fuzzy     ¦foo/bar/baz/l10n/ll/image.png¦ ea9d6...563ad  30544

If the original image is removed or renamed, the localized one will be marked as obsolete:

# ll
obsolete  ¦foo/bar/baz/l10n/ll/image.png¦ ea9d6...563ad  30544

Translators should regularly check the l10n-track file, making the needed modifications to fuzzied images and submitting new versions (obsolete state will probably never be seen, as translation coordination team will see to it that localized images are moved and removed following the original). If a localized image is fuzzy when the release is made, it will be omitted from the source package, so that users will see the original image -- just like with fuzzy messages in PO files.

The technicalities are thus rather simple, the main challenge instead is how to create the localized out of the original images in the first place. This depends on the type of the image: from trivial screenshots, to the more complex Wesnoth logo. Most of the rest of this article will deal with this.

Overlay Images

A special kind of localized image is an overlay image -- one which does not simply replace the original, but is combined with it at runtime, overlaying the original content. Of course, the overlay image should have some transparent regions, through which the original content will show up. The overlay image is indicated by adding --ovr suffix to its original name:

foo/bar/baz/l10n/ll/image--ovr.png

Overlay images are used purely to avoid needlesly growing the size of Wesnoth packages, in cases when the full image is rather large and only small parts of it need localization. This is typical of maps.

List of Images for Localization

An up-to-date list of images possibly needing localization is given here, and updated as people spot any new such image. Here, "possible" means judged such by at least one translator. Those are typically images containing some English text, but depending on the particular text, many languages may also like to keep it as in English (e.g. "Weldyn").

• In-game images:

images/misc/logo.png
data/core/images/misc/logo.png
  -- The BfW logo, visible in the main menu, loading screens,
     and elsewhere (both files are same)

data/core/images/maps/wesnoth.png
  -- Wesnoth's main map, in the background of the main menu
     and as the main map in some campaigns

data/core/images/help/hpxp.png
data/core/images/help/recruit.png
data/core/images/help/tooltip.png
  -- screenshots in the help sections

data/campaigns/An_Orcish_Incursion/images/an-orcish-incursion-map.png
data/campaigns/Eastern_Invasion/images/eastern-invasion-map.png
data/campaigns/Legend_of_Wesmere/images/legend-of-wesmere-map.png
data/campaigns/Liberty/images/maps/liberty-map.png
data/campaigns/Son_Of_The_Black_Eye/images/farnorth.png
  -- main maps of respective campaigns

data/campaigns/The_Rise_Of_Wesnoth/images/story/trow-logo.png
data/campaigns/The_Rise_Of_Wesnoth/images/story/east.png
data/campaigns/The_Rise_Of_Wesnoth/images/story/west.png
data/campaigns/The_Rise_Of_Wesnoth/images/story/tgi-blackmore.png
data/campaigns/The_Rise_Of_Wesnoth/images/story/tgi-clearwater.png
data/campaigns/The_Rise_Of_Wesnoth/images/story/tgi-jevyan.png
data/campaigns/The_Rise_Of_Wesnoth/images/story/tgi-southbay.png
data/campaigns/The_Rise_Of_Wesnoth/images/story/tgi-stormvale.png
data/campaigns/The_Rise_Of_Wesnoth/images/story/tgi-thegreenisle.png
  -- text overlays in the TRoW campaign

• Images in the manual:

doc/manual/images/game-screen.jpg
doc/manual/images/main-menu.jpg
doc/manual/images/multiplayer.jpg
doc/manual/images/recruit.jpg
doc/manual/images/right_pane.jpg
doc/manual/images/top_pane.jpg

If you come across an image eligible for localization and not listed here, please add it.

Creating Localized Images

This section gives brief, but hopefully sufficient instructions on how to produce localized images, by each distinct type. Note that there is a balance between simplicity of instructions and quality of final images -- whenever you can do better than describe here, do not hesitate.

Most of the time it will be necessary to edit an image template using a general image manipulation app, and the instructions here will be presented with Gimp, a popular and free tool for this purpose. There is also a section of this article describing some of the Gimp's features frequently used in present context.

((to be done: place the illustrations linked in this article in some less volatile place; place any external template images into main repository))

Screenshots

Screenshots in the game are found on the help pages. Instead of full game screens, they are usually only smaller portions of screens. Making localized versions of these images is naturally easy, one just needs to grab some screenshots from the localized version of the game. Just a few points:

• Screenshots should be captured from the game running at 1024×768 resolution.

• To grab a screenshot, it's probably easiest to run the game in window instead of full screen, and use whatever screenshot capture utility available. (Gimp too can be used, menu File→Create→Screenshot.)

• The screenshot should be saved in PNG format (the capture utility will probably provide various formats).

• If the capture utility didn't provide option to select part of the screen to capture, to reduce the screenshot to the required small portion of the screen Gimp's cropping tool can be used (Tools→Transform Tools→Crop).

• It is not necessary for the dimensions of localized screenshot to be exactly the same as the original screenshot, but should be near.

((to be done: screenshots in the manual; describe the explicit image-x.y.z.jpg versioning system))

BfW Logo

The sworded shield logo with "(The) Battle for Wesnoth" text is shown on loading screens and at the head of the main menu, thus being the foremost target for localization (into languages which translated the game's name in the first place, of course). Here are the steps to create the localized logo with Gimp.

Fetch the template logo from here:

http://caslav.gmxhome.de/image/weswiki/bfw-logo.xcf

There is just one layer in the file, shield, with the sworded shield on transparent background and without any text. Rename the file to e.g. bfw-logo-LANG.xcf, to work on it and keep it as "source" of your localized logo.

Pick a font in which you would like to write the logo text. The English logo uses "Celtic Garamond the 2nd" font, easily found by Google for free download, as the starting point. This font, however, contains only English letters (not even Western European), so some creativity may be needed to make use it. One could, for example, manually add any diacritics (copied over from the respective letters another font). Another option is to simply use another font, which both has the glyphs of required characters, and is somewhat fantasy-looking.

The first goal is to produce black version of the text of translated game's name, on a separate layer. Create a layer named text-base with transparent background (menu Layer→New Layer..., type the name, and make sure Transparency is selected as Layer Fill Type). On this layer, use the text tool (Tools→Text) to write out pieces of text. When adding text, make sure options Hinting, Force auto-hinter, and Antialiasing are all selected. The text you type will appear as another, special layer, which can be converted to ordinary layer by Layer→Discard Text Information.

However, just writing out the text like this will probably not cut it. The letters will not be spaced nicely, or won't be exactly the right size. Especially in case you choose non-horizontal disposition of words, the vertical spacing will probably be too great. Therefore the idea is to write out separate words, perhaps even separate characters, and to arrange them with some cut-and-paste.

To create one word with Celtic Garamond font and in size very nearly to the original, do the following. Tools→Text, in tool view pick font size 42 and check the mentioned options, and write out the word. Convert the new layer to ordinary (Layer→Discard Text Information), then resize it (Layer→Scale Layer...) to 100% horizontal, 120% vertical. Finally, make sure the layers are positioned such that the new layer is just above text-base (layout order is shown in layer view, and can be changed with up/down arrows at the bottom), that the new layer is selected, and execute Layer→Merge Down. The new layer will disappear, and the word will have become a part of text-base layer.

For example, the translated name "Boj za Vesnot" was arranged vertically like this:

The words "Boj", "za", and "Vesnot" were all created separately, as described above. The final "j" and "t" were a bit too much separated after this, so they were copy-pasted to be nearer to "o". The word "za" was created with smaller font size, since as conjunction it is not as important as the two nouns. All of them were then tightly stacked vertically with some more copy-pasting, and the whole text-base layer was positioned suitably across the shield below it.

Some remarks:

• While positioning the text arround, it is good to have the shield in the background dimmed somewhat, or else the black text is going to be poorly visible over its outer regions. The shield layer can be dimmed as in the above screenshot by making its opacity 50%, using the slider at the top of layour view. Once the text is complete, the shield layer should be returned to 100% opacity.

• text-base layer will by default have the size of the full image, and to be able to move it around, it should be made smaller. The yellow-black dotted rectangle in the screenshot above shows the size of text-base layer. Once the text is ready on it, the size can be reduced using the Layer→Layer Boundary Size... dialog. There is a preview and positioning section at the bottom of the dialog, which can be used to roughly center the newly set extents around the text.

Creating blank text was the harder part of the job, the following steps to create final text are rather automatic.

Duplicate the text-base layer three times (Layer→Duplicate Layer), and name copies as follows, going upwards from text-base: text-map, text-outline, text-final (this one should now be on top). Now we'll play a bit with these three layers; note that for the following steps it is easier to always have only the currently selected text layer visible, while other text layers should be hidden (the visibility of layers is controlled through the leftmost column in layer view).

Switch to text-map layer and start Gaussian blur filter (Filters→Blur→Gaussian Blur...). In there, set both horizontal and vertical blur radius to 2 pixels. The preview pane should show how the text got somewhat blurry; click Ok to apply blur. Repeat this exact same procedure for text-outline layer.

Some text layers should now get color different from black. Change to text-final (the topmost new layer, which didn't get blurred), and start Colors→Colorize.... In the dialog, set hue to 50, saturation to 40, and lightness to 60. As you do this, the text in the image should reflect the modifications, and in the end it should be pale sand-like color. Click Ok to apply colorization. Change to text-map layer (one of the two blurred), also use Colors→Colorize..., but this time only set lightness to 100. This should make the text white.

Switch to text-final and activate Filters→Map→Bump Map.... From the Bump map: dropdown list in top right corner of the dialog, select the text-map layer (the layer name may be somewhat strange and possibly shrinked, so look the small icon to the left for the whitey pattern produced by white text on that layer). Check Compensate for darkening (should be so by default), and then set the sliders: azimuth 135, elevation 40, depth 10 (rest should be all zero). In the preview pane to the left you should now see the final bevelled text:

To complete the composition, make sure only the following layers are visible: shield, text-outline, text-final. The text-outline layer provides some dark shade behind the letters, to make them stand out better on the shield. The final result should look like this (not the ordering and visibility of layers):

The logo should now be exported as PNG image, named logo.png, using File→Save a Copy.... But do keep around the original Gimp XCF image, in case some changes are to be made in the future.

Maps

Each campaign comes with a map, where locations of events are highlighted as the scenarios progress. Since these locations are frequently mentioned in narration and character conversations, it may be more than merely a "nice touch" to match the map labels to in-game texts. In particular, the main map of Wesnoth, which is used by several campaigns, also figures as the background of the main menu.

Luckily, most maps derive from the single source within the main repository:

http://svn.gna.org/viewcvs/*checkout*/wesnoth/branches/resources/cartography-tools/great-continent.xcf

This Gimp source contains all topography features, as well as, most importantly, textual labels as separate layers. The procedure of localizing a map is thus this: export a PNG image with all the topography of required map, but without any text label, and then add translated labels to it. Here we'll work on the main menu map (data/core/images/maps/wesnoth.png) as the example.

The main menu map is assembled out of the following layers, not taking labels into account: Wesnoth topography, Wesnoth Marsh, Wesnoth Forests, Wesnoth Roads, Wesnoth Towns, Border, Border BG. Make only these layers visible, then export them as PNG using File→Save a Copy... (choose Merge Visible Layers when asked, default PNG export options will do); name this PNG file wesnoth-topo.png. Then, make the topography layer invisible, and make only the label layers visible: Wesnoth Human Names, Wesnoth early labels, Wesnoth late labels, and export them too as wesnoth-labels.png.

Open the previously exported wesnoth-topo.png, and immediately save it as (File→Save As...) wesnoth-LANG.xcf, where LANG is your language code. Note the .xcf extension, which means this is now no longer a plain PNG bitmap, but a Gimp image. This will be the source of your localized map, to which you will be able to return to at any later moment (e.g. if a label needs to be changed to reflect updated translation). Change the name of the only layer, Background, to topography.

Open the previously exported PNG of original labes as a layer with the current image (File→Open As Layers...). Tha labels will appear over the topography, visually resulting in composition just like the full map in the game. Change the name of the new layer to original-labels. This layer serves only as guide to position the translated labels, so set its opacity to 25%-50% (slider at the top of layer view), such that it becomes unobtrusive, yet discernable enough to indicate label positions.

The result so far should look like this:

Now we are ready to start placing translated labels. For all labels, keep in mind to place them such that they are approximately covering the original label, as indicated by the dimmed >original-labels layer.

As for the font, original labels are written using Monotype Corsiva, which is easy to find for free download. If it does not contain all the glyphs needed for your language, another similar font to try is URW Chancery, which may already be installed by your distribution. If neither works, as usual try to find one that does and has a fantasy look to it.

There are three distinct types of labels on the main map, so let's cover them from easiest to hardest to make.

Plain Labels

Plain text labels are the most numerous. They are merely properly colored horizontal text, written down directly on the map. Therefore, to make one such label, just use text tool (Tools→Text), choose font size (13pt is the size for most of the original labels), check all of Hinting, Force auto-hinter, and Antialiasing, click on the place on the map where the label should be, and write out the translated name.

You don't have to hit the desired position for the label exactly at the moment of writing. The label will become a special text layer, named by the text itself, which you can move around using the move tool ('Tools→Transform Tools→Move). Note that you should not merge this text layer to any other layer, after you have finished positioning it. That way you will always be able to change the text at a later point (by double-clicking on the layer icon in layer view), rather than recreating it anew.

The only slightly tricky bit here is choosing the color for the text. Original labels are not all of same color, but depend on the darkness and tone of the map below it (e.g. whether it is sea or land). To pick a proper color for each label, the easiest is to load the original PNG image (data/core/images/maps/wesnoth.png) and use color picker (Tools→Color Picker) to collect colors from each original label in turn. Since letters are antialiased, always pick the darkest color in the label.

Here's a view of one label made like this:

Note the special text layer "Glinova šuma" ("Glyn's Forest") on the right, and how the transparent original label from the original-labels layer is showing below the translated one. To have a clear view of the new text, you can switch original-labels on and off by cliking on in the left column in layer list.

Rotated Plain Labels

Some of the plain labels are rotated to match the topographical feature, e.g. a river direction. To make such a label, first make the plain horizontal label as usual. This label now needs to be rotated.

Unfortunately, Gimp cannot currently rotate text layers, so you first need to convert the text to ordinary layer (Layer→Discard Text Information). Then, to rotate the layer, open Layer→Transform→Arbitrary Rotation... dialog. In it, move the slider around and observe the image, until the rotation is approximately the same as that of the transparent original label beneath, and click Rotate. To finally properly position the label, just move its layer to match the original label.

The image above shows the translated "Bay of Pearls" ("Biserni zaliv") label, where the rotated label layer is seen to be an ordinary layer, instead of special text layer (with editable text) such as the one for plain labels.

Parchment Labels

Labels covering forests, mountains, and other features with uneven background, are put on what appears to be a rectangular piece of parchment. Fortunatelly, the source Gimp image for original maps (the one you used to export initial topography), also contains assortment of various labeling parchments, on the Label Workshop layer:

The idea then is to copy the appropriate parchment from this layer to the localized image, and then put a plain label above it. The difficulty is that copied parchments cannot be used as-is, but should be cut to the length of text.

First create one layer (Layer→New Layer...) which will contain all the parchments, named label-parchments. Place this layer just above the original-labels layer, below all text label layers. You will then always copy parchments from the Label Workshop layer of the original image, to this layer in the localized image.

To produce a parchment label, first write out a plain label over the map feature which should get the parchment background. This will serve to know how to position the parchment, and, more importantly, how to cut the parchment to the appropriate length. A parchment may need to be either extended or shrinked by cutting.

To extend a parchment, cut away right portion of it, and paste it such as to nicely fit around the right end of the text. Then cut the remaining left portion and paste it to fit around left end of the text. There will now be a gap in the parchment, which you should fill out by copying and pasting a mid-portion of the same parchment from the Label Workshop layer of the original image. To shrink a parchment, do the similar, only there will be no gap to fill after parts are cut and pasted. To decide where exactly to cut the parchment, check that when image is zoomed to 100%, there are no obvious joining artifacts (no repeating patterns, which brain easily notices).

Here is the translated version of "Grey Woods" label ("Sivošumlje"), with one text layer like for a plain label, and the length-cut parchment on the newly created label-parchments layer:

Overlay Cuts

The original image may have quite a heavy file size, while only small portions of it need to be translated. The main menu map is the prime example, with its 1.800 kB file size; if, say, ten languages would localize it and submit as full image, this map alone would make the distributed package grow by 18 megabytes. On the other hand, an image consisting of only the translated labels (with some portion of the map below them), and otherwise mostly transparent, would have about 180 kB. As mentioned earlier, the game can overlay such transparent cuts over the original image at runtime, to produce the final localized image.

We'll use the main menu map as the example for producing an overlay cut. Open the localized XCF image of the map, and add one more layer to it, overlay-mask, also transparent. Place this layer on the top, and reduce its opacity to 50%. On it, we will draw a plain white rectangle over each translated label, such that it encompasses both the translated label and the original label (which is visible through semi-transparent original-labels layer). To draw a rectangle, use rectangle selection tool (Tools→Selection Tools→Rectangle Selection), just like when about to copy-paste stuff. But, instead of copying/cutting anything, fill the selection with foreground color (which you should have set to white), using Edit→Fill with FG Color. This is the result:

Note that the selection rectangle has enveloped both the original label, "The Great Ocean", and the translated label, Veliki okean. This is necessary in order that when the translated label is smaller than the original, such as in this case, outer sections of the original label do not show through when the localized overlay is composed with the original image.

You can of course use any of the Gimp's drawing tools to create white areas above labels. E.g. rectangle will cover more space than necessary for rotated labels, so there you may want to draw properly aligned lines using the pencil (Tools→Paint Tools→Pencil) with a very thick round brush.

Once you create masks over all translated labels, load the previously exported PNG of the localized map. Copy the overlay-mask layer from the XCF to the PNG image, by dragging it from the layer view of the XCF to the image area of the PNG. Do not save the PNG image at that point, nor during any of the following steps; it should remain the ordinary, full localized image.

Select the overlay-mask layer just copied into the PNG (in fact, it will be named overlay-mask copy, and the only other layer should be Background) and execute Layer→Transparency→Alpha to Selection. This will create a selection out of the overlay layer:

What remains to be done is straightforward. Without removing the mask, switch to the Background layer, and hit Copy. Execute Edit→Paste as→New Image, and voila, the overlay cut is complete:

Save it as wesnoth--ovr.png, where --ovr ending is needed for the game to recognize that the image is not standalone, but an overlay. Close the PNG image of the full map without saving it. Save only the XCF image, such that, if necessary at a later point, you can modify its overlay-mask layer and repeat the few steps above to create the overlay cut.

Gimp For Translators

((to be done))