Game art: img directory

Requested images

The following images are requested by BGA:

game_box.png

• It is displayed on the main site on the game description page and when creating a table (280x280 px).
• It should be a 3D image of a physical copy of the game box as it appears in an online shop.
• It is better to take the version of the game that is coherent with the game art used in the adaptation, and from the original publisher of the game.
• The background of the image must be transparent.
• If you don't have a 3D version of the game box, you can use the following website to create one: http://www.3d-pack.com/

game_box180.png

game_box75.png

• Don't modify these images, they are auto generated by "Reload game box image" action. If you have another copy of your source make sure you update you copy of these files after they have been generated and not override with old copied.

game_icon.png

• It is the icon displayed in the lists of games and tables (50x50 px).
• The objective of this icon is to make the game recognizable among the other games. A good idea is to take a part of the game cover that is distinctive (ex: the game title).
• This one does not have to be transparent. This image should not have a border

publisher.png

• It is the logo of the publisher of the game, displayed on the game description page.
• The width must be 150 px. The height can be anything (reasonable). The image could be transparent.

publisher2.png (optional)

• If the game has been co-published by 2 publishers, you should upload a second image named "publisher2.png" (same characteristics as the first one).

Important: when you modify these images, you MUST click on "Reload game box image" from the Control Panel in order your update can be taken into account.

Game art

You must upload in img directory all images of your game interface.

Images loading

Be careful: by default, ALL images of your img directory are loaded on a player's browser when he loads the game. For this reason, don't let in your img directory images that are not useful, otherwise it's going to slowdown the game load.

Note that you can tune the way images are loaded with Javascript method "dontPreloadImage" (see Game Interface Logic).

General recommendation it to have no more than dozen of image files, 2Mb max each. However if there is heavy game resources specific to a player (i.e. player board of specific color or set of cards) it is better to separate them and "don't pre-load" since in any given game only some of them will be used.

Images format

You can use 3 image format while building your game interface:

jpg images

should be used for non-transparent images. Jpg are usually lighter than Pngs, so please choose Jpg for big pictures (ex: game board, cards) when you don't need transparency to accelerate game load. You don't need transparency for rounded card corners, it can be done using css.

png images

should be used for images with transparency, such as non-square tokens, meeples, etc (combined into sprite).

gif images

can be used for animated images. This is not recommended to use gif animated images as they can upset players, but for some specific interface element this could be useful.

Use CSS Sprites

To limit the number of images load and make the game load faster, you must use CSS sprites, i.e. you must gather several images in a single one. However, there are limitations. Do not make any CSS image sprite with dimensions that exceed 4096x4096 pixels or it will not work on mobile devices (Android max texture size is 4096 pixels, test your own browser at WebGL Report).

To learn more on CSS Sprites:

• CSS sprites (W3C documentation).
• Game interface stylesheet: yourgamename.css

Shrink images

If you get high resolution images from publisher you need to shrink them since web display requires much lower resolution than printing.

• Shrink images without loss of quality https://tinypng.com/ or http://www.iloveimg.com/

Image Manipulation Tools

You have no choice but to use one of the image manipulating tools to create a successful game adaptation, you would have to deal with

• Converting to supported formats
• Adding transparency
• Stitching
• Shrinking with no quality loss
• Resizing

For that you need a good tools, recommended tools (if you know more add them here)

• Gimp (linux) - general GUI image editor
• Paint.net (Windows) - general GUI image editor
• ImageMagic (All platforms) - https://www.imagemagick.org/script/download.php - command line image editor, great for mass manipulations and scripting