This is a documentation for Board Game Arena: play board games online !

Game art: img directory: Difference between revisions

From Board Game Arena
Jump to navigation Jump to search
(Correcting the english. J'ai le droit, je suis british :))
 
(41 intermediate revisions by 17 users not shown)
Line 1: Line 1:
== Requested images ==
{{Studio_Framework_Navigation}}


The following images are requested by BGA:
__TOC__


;game_box.png
== Metadata images ==
* It is displayed on the main site on the game description page and when creating a table (280x280 px).
* It should be an 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.


;game_icon.png
Game metadata images are images of game box, banner, title, etc. These images are no longer stored in project directory.


* It is the icon displayed in the lists of games and tables (50x50 px).
Metadata images are managed through the [[Game_metadata_manager|Game Metadata Manager]]. After you go there select the link to the game you want to upload images for.
* 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
== Game art ==
* 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)
You must upload in img directory all images of your game interface.
* 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).


== Game art ==
=== Images naming constraints ===


You must upload in img directory all images of your game interface.
To be correctly deployed your images file names should not contain spaces or parentheses.


=== Images loading ===
=== 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.
'''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 publish images that are not useful in your img, or it will slow down the game load.


Note that you can tune the way images are loaded with Javascript methods "dontPreloadImage" and "ensureSpecificImageLoading" (see [[Game_interface_logic:_yourgamename.js|Game Interface Logic]]).
Note that you can tune the way images are loaded with Javascript method "dontPreloadImage" (see [[Game_interface_logic:_yourgamename.js|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 ===
=== Images format ===


You can use 3 image format while building your game interface:
You can use these image formats while building your game interface:
;jpg images
;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.
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
;png images


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


;gif 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.
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.
;svg images
svg images can be really efficient for icons or abstract images. Note: consider also using font awesome for icons instead of separate asset file.
=== Webp ===
png and jpg images are automatically converted to webp during deployment. Webp's are lighter weight.
When requesting a png/jpg file, many modern browsers will specify a preference for webp in their Accept header, and our CDN will comply with this request serving the converted webp image instead of the original png you uploaded. You can confirm which format your browser requests by checking request and response headers for the image in the network tab of your browser's developer tools.
In rare cases, this can cause a problem because the conversion is lossy.
If and only if this does cause a problem, then you can capitalise the first letter of your image's extension, <code>.Png</code> or <code>.Jpg</code>, and reference <code>image.Png</code> instead of <code>image.png</code> in the CSS. This will bypass the webp conversion and ensure you use the original image. This should not be done unless it is required.
=== Use background-size ===
In order to allow for players to use the browser zoom without your images becoming pixelated, it's recommended to use higher resolution images than needed for the normal display of your interface, and to use the css property '''background-size''' to fit the image to the size you need for your interface.


=== Use CSS Sprites ===
=== 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 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 [http://webglreport.com/ WebGL Report]).


To learn more on CSS Sprites:
To learn more on CSS Sprites:
* [http://www.w3schools.com/css/css_image_sprites.asp CSS sprites (W3C documentation)].
* [http://www.w3schools.com/css/css_image_sprites.asp CSS sprites (W3C documentation)].
* [[Game interface stylesheet: yourgamename.css]]
* [[Game interface stylesheet: yourgamename.css]]
'''Important:''' the maximum image size should be 4096x4096 (otherwise, some devices may not display parts of the image, see https://stackoverflow.com/questions/34682482/what-is-the-maximum-sprite-sheet-size-i-can-use-for-android-devices)
Tools:
* Sprite Generator https://www.toptal.com/developers/css/sprite-generator/
* Another Sprite Generator https://www.finalparsec.com/tools/sprite_sheet_maker
=== 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 size without visible loss of quality
** Offline tool for PNG: https://pngquant.org/
** Online tools for PNG/JPG: https://tinypng.com/ or http://www.iloveimg.com/ or https://squoosh.app/
** Online tool for SVG: https://jakearchibald.github.io/svgomg/
== 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 (all platforms) - 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
=== Examples ===
PDF to png convertion (linux)
gs -sDEVICE=pngalpha  -o output.png -r600 -dDownScaleFactor=3 input.pdf
PDF to jpg using image magic and cropping page
montage -colorspace sRGB -density 300 -geometry 452x+0+0 -tile 5 -crop 82x87%+130+126 input.pdf  output.jpg
PSD Extraction (image magic - CMYK to sRBG - one layer per file)
for i in *.psd; do  convert  $i -profile /usr/share/color/icc/colord/sRGB.icc  `basename $i .psd`.png; done;
Tiling - The order of the images will match the 'ls' order. If needed change the filenames if you need a specific order.
montage -colorspace sRGB -density 300 *.png -tile 6 -background transparent ../tokens.png
PDF scrabber (linux) - extract all graphics file from pdf
pdfimages my.pdf prefix-
=== Online tools ===
PSD extraction (adobe file format)
https://www.photopea.com/
Seamless background (for tiled background wallpaper)
https://www.imgonline.com.ua/eng/make-seamless-texture.php
Download game assets from tabletop simulator
https://www.npmjs.com/package/ttsbackup
[[Category:Studio]]

Latest revision as of 13:48, 21 June 2024


Game File Reference


Useful Components

Official

  • Deck: a PHP component to manage cards (deck, hands, picking cards, moving cards, shuffle deck, ...).
  • Draggable: a JS component to manage drag'n'drop actions.
  • Counter: a JS component to manage a counter that can increase/decrease (ex: player's score).
  • ExpandableSection: a JS component to manage a rectangular block of HTML than can be displayed/hidden.
  • Scrollmap: a JS component to manage a scrollable game area (useful when the game area can be infinite. Examples: Saboteur or Takenoko games).
  • Stock: a JS component to manage and display a set of game elements displayed at a position.
  • Zone: a JS component to manage a zone of the board where several game elements can come and leave, but should be well displayed together (See for example: token's places at Can't Stop).

Undocumented component (if somebody knows please help with docs)

  • Wrapper: a JS component to wrap a <div> element around its child, even if these elements are absolute positioned.

Unofficial


Game Development Process


Guides for Common Topics


Miscellaneous Resources

Metadata images

Game metadata images are images of game box, banner, title, etc. These images are no longer stored in project directory.

Metadata images are managed through the Game Metadata Manager. After you go there select the link to the game you want to upload images for.

Game art

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

Images naming constraints

To be correctly deployed your images file names should not contain spaces or parentheses.

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 publish images that are not useful in your img, or it will slow down 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 these image formats 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.

svg images

svg images can be really efficient for icons or abstract images. Note: consider also using font awesome for icons instead of separate asset file.

Webp

png and jpg images are automatically converted to webp during deployment. Webp's are lighter weight.

When requesting a png/jpg file, many modern browsers will specify a preference for webp in their Accept header, and our CDN will comply with this request serving the converted webp image instead of the original png you uploaded. You can confirm which format your browser requests by checking request and response headers for the image in the network tab of your browser's developer tools.

In rare cases, this can cause a problem because the conversion is lossy.

If and only if this does cause a problem, then you can capitalise the first letter of your image's extension, .Png or .Jpg, and reference image.Png instead of image.png in the CSS. This will bypass the webp conversion and ensure you use the original image. This should not be done unless it is required.

Use background-size

In order to allow for players to use the browser zoom without your images becoming pixelated, it's recommended to use higher resolution images than needed for the normal display of your interface, and to use the css property background-size to fit the image to the size you need for your interface.

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:

Important: the maximum image size should be 4096x4096 (otherwise, some devices may not display parts of the image, see https://stackoverflow.com/questions/34682482/what-is-the-maximum-sprite-sheet-size-i-can-use-for-android-devices)

Tools:

Shrink images

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

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 (all platforms) - 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


Examples

PDF to png convertion (linux) 

gs -sDEVICE=pngalpha   -o output.png -r600 -dDownScaleFactor=3 input.pdf

PDF to jpg using image magic and cropping page 

montage -colorspace sRGB -density 300 -geometry 452x+0+0 -tile 5 -crop 82x87%+130+126 input.pdf  output.jpg

PSD Extraction (image magic - CMYK to sRBG - one layer per file) 

for i in *.psd; do  convert  $i -profile /usr/share/color/icc/colord/sRGB.icc   `basename $i .psd`.png; done;


Tiling - The order of the images will match the 'ls' order. If needed change the filenames if you need a specific order. 

montage -colorspace sRGB -density 300 *.png -tile 6 -background transparent ../tokens.png


PDF scrabber (linux) - extract all graphics file from pdf 

pdfimages my.pdf prefix-

Online tools

PSD extraction (adobe file format) 

https://www.photopea.com/


Seamless background (for tiled background wallpaper) 

https://www.imgonline.com.ua/eng/make-seamless-texture.php

Download game assets from tabletop simulator 

https://www.npmjs.com/package/ttsbackup
Retrieved from "http:///index.php?title=Game_art:_img_directory&oldid=21588"