This is a documentation for Board Game Arena: play board games online !
Ero sivun ”Game art: img directory” versioiden välillä
(Created page with "== 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 (28...") |
|||
(6 välissä olevaa versiota samalta käyttäjältä ei näytetä) | |||
Rivi 5: | Rivi 5: | ||
;game_box.png | ;game_box.png | ||
* It is displayed on the main site on the game description page and when creating a table (280x280 px). | * It is displayed on the main site on the game description page and when creating a table (280x280 px). | ||
* It should be | * 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. | * 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. | * 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_icon.png | ;game_icon.png | ||
Rivi 18: | Rivi 19: | ||
* It is the logo of the publisher of the game, displayed on the game description page. | * 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. The image could be transparent. | * The width must be 150 px. The height can be anything. 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 characteristic than 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 == | == Game art == | ||
Rivi 27: | Rivi 35: | ||
'''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. | '''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 | Note that you can tune the way images are loaded with Javascript method "dontPreloadImage" (see [[Game_interface_logic:_yourgamename.js|Game Interface Logic]]). | ||
=== Images format === | === Images format === | ||
Rivi 44: | Rivi 52: | ||
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. | 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, ie you must gather several images in a single one. | |||
To learn more on CSS Sprites: | |||
* [http://www.w3schools.com/css/css_image_sprites.asp CSS sprites (W3C documentation)]. | |||
* [[Game interface stylesheet: yourgamename.css]] |
Nykyinen versio 20. lokakuuta 2013 kello 21.23
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_icon.png
- It is the icon displayed in the lists of games and tables (50x50 px).
- This one should not be transparent, and shouldn't have a border (a black border will be add by BGA).
- 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).
- 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. 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 characteristic than 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).
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.
- png images
should be used for transparent images.
- 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, ie you must gather several images in a single one.
To learn more on CSS Sprites: