Graphics development

From opensettlers

Contents 1 Goal 2 Themes 3 Dependencies 4 GWT ClientBundle 4.1 Icon prerequisites 4.2 Wiki integration 5 Image sizes 5.1 Base resolution 5.2 Upscaling/downscaling 6 Todo icons/images 7 Add themes from other projects 8 Tools

Goal

The main idea behind the design of graphics for OpenSettlers, is that there's a big problem for players to recognize what's going on. There's limited screenspace (especially on small devices), and a lot of information needs to be presented. Even experienced players knowing the interface have somtimes trouble to get a clear picture of the gamestate. As such, graphics should be designed with usability and recognizability in mind. Currently, the default themeset uses bright and distinctive colors for the tiles and icons. This helps players a bit in seeing what's going on.

Themes

OpenSettlers has one location where graphics data is stored. This is at /src/java/soc/common/gwtClient/images/defaultTheme. DefaultTheme is, as it's name implie,s the default theme for every user. New themes can be created by adding a folder named after your new theme in the /src/java/soc/common/gwtClient/images/ package. In the theme folder, add subpackages with the following names: originals size100 size48 size32 size24 size16 Add square icons and images of the provided size to the packages.

Dependencies

OpenSettlers uses FamFamFam Silk iconset for icons. Also, silk icons are used to compose specialized icons for OpenSettlers. Old graphics art from SettleIn can be used also, which can be found here. SettleIn included a 3D viewer for pieces, which was used to create the Town , Template:City and Template:Road icons.

GWT ClientBundle

When OpenSettlers is compiled, GWT a ClientBundle for each theme set.

Icon prerequisites

Icons support many background colors. To do this, most icons have a white glow of a few pixels around th picture. This glow makes the icon stand out against the background, even if the primary color of the icon is equal to the background color.

Wiki integration

Most images used in the game are also used in the wiki. To prevent images from loading twice (in the game as well as in an html page), the MediaWiki markup compiler replaces URLs to images on this wiki to urls of images in the game. To achieve this, consistent names of images should be used across the wiki and the game. Generally, when a new image is added to the game repository, it "claims" a unique image name. When for some reason a renaming is required (this is discouraged), the renaming should take place on the wiki and in the source code repository.

Image sizes

To support multiple clients in the future, such as ultra high-resolution browsers, and low resolutions browser like the iPhone, all images and icons should be available for any size. Simply adding a new ClientBundle and then pointing to lower/higher resolution images will add support for other client resolutions. Also, adding bitmaps in subfolders of defaultTheme will improve support for the current themes. All CSS is coded using em sizing, so scaling should not be a problem here. As 1em equals 16px, the icons scale nicely using whole numbers.

Base resolution

the /original/ folder within the /images/ folder should hold the biggest original size of all icons and images. From here, other resolutions are created by downscaling the originals. When vector graphics are possible for a given icon, /svg/ should be used as original. Any resolution can then be supported (even upscaling), since SVG is a vector graphics format.

Upscaling/downscaling

Currently, no icon/image library is implemented in OpenSettlers. In the future, OpenSettlers will support compile-time scaling of images. The way this will work is this:

1. An algorithm creates a list of all unique filenames.
   1. /originals/ is checked first
   2. /size1024/ is checked second, if a new unique filename is found it is added to the list
   3. all lower sizes are checked the same way.
2. The algorithm creates a list of every sizeXX folder found
3. The algorithm iterates over all unique filenames.
   1. For every file it encounters, it determines if a version exists in every sizeXX folder.
   2. When the algorithm encounters a file in sizeXX folder, it continues to the next sizeXX folder
   3. When no file is found in the sizeXX folder, it creates a new file by up/downscaling the image with the highest resolution, choosing SVG as first.
   4. End state is a list of sizeXX folders filled with every unique filename found, so every icon/image has a version for every resolution.

A full resolution SVG image can be "safely" downscaled (without losing detail). However, for small icons, losing details may improve the clarity of the icon. As such, automatic downscaling does not work for some (most?) icons. Therefore, specific hand-built icons should be used instead of automatic downscaled images. The default therefore will be an automatic downscaled image until someone took the effort to create an optimized icon for that particular size.

Currently, scaling icons/images is done by hand using an image editor. Thus, there is only support for icons/images on a few resolutions.

Todo icons/images

• Replace User.png
• High resolution bank icon (svg or size48 or size128)
• Create resource cards (currently hexagon icon tiles are used)
  • 5 basic resources
  • Diamond
  • Gold
  • Commodity resources
    • Wool
    • Paper
    • Money
• Improve Development card icons
• Make hexagon textures truly hexagon (currently they produce glitches)
• Shrink hexagon filesize (better tradeoff size/compression)
• Resource card back icon (BlankCard.png suits but is ugly)
• OpenSettlers logo icon
• Make all icons square (some icons are not 16x16 or 32x32)
• Various icons
  • Chat
  • Game action history
  • Debug
  • Action queue
  • Bot
  • Icons for all game settings
  • Connected
  • Disconnected
  • Vote for
  • Vote against
  • Good reputation
  • Mediocre reputation
  • Bad reputation

Add themes from other projects

A lot of other Settlers implementations exist, some which are moderately playable. A list of these implementations are here: Other Settlers initiatives. Most have some graphics already made for them. OpenSettlers being a true open source project, we can integrate graphics from these projects as a theme.

Tools

• yUML for UML creation diagrams (place code in summary field when uploading pngs)
• FamFamFam Silk iconset for often used metaphors