ImageLocalization

NOTE: This article is in support of a feature proposal, its content is not applicable at the moment.

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

((to be done))

Overlay Cuts

((to be done))

Gimp For Translators

((to be done))