Game art: img directory - Revision history

Thoun: /* Webp */

2026-06-29T13:57:48Z

Webp

← Older revision		Revision as of 15:57, 29 June 2026
Line 64:		Line 64:
	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.		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.		In rare cases, this can cause a problem because the conversion is lossy. The best solution is to create webp manually from your png/jpg file, to make sure your web pfile is valid, and use it instead of the png/jpg file.

	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.~~
	~~You can also try~~ to create webp manually from your png/jpg file, to make sure your web ~~file~~ is valid, and use it instead of the png/jpg file.

	=== Use background-size ===		=== Use background-size ===

Thoun: /* Webp */

2026-06-23T15:25:29Z

Webp

← Older revision		Revision as of 17:25, 23 June 2026
Line 67:		Line 67:

	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.		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.
			You can also try to create webp manually from your png/jpg file, to make sure your web file is valid, and use it instead of the png/jpg file.

	=== Use background-size ===		=== Use background-size ===

Thoun: /* Images format */

2026-06-23T15:24:31Z

Images format

← Older revision		Revision as of 17:24, 23 June 2026
Line 39:		Line 39:

	You can use these image formats while building your game interface:		You can use these image formats while building your game interface:
			;webp images

			should be used whenever possible. It's lightweight and handles transparency.

	;jpg images		;jpg images

Thoun at 11:28, 18 March 2026

2026-03-18T11:28:53Z

← Older revision		Revision as of 13:28, 18 March 2026
Line 30:		Line 30:
	=== Images loading ===		=== Images loading ===

	'''Be careful''': by default, ALL images of your img root 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. You can put them in a subdirectory of img, that won't be preloaded by default.		'''Be careful''': by default, ALL images of your img root 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. You can put them in a subdirectory of img, that won't be preloaded by default, for example images used only if an expansion is activated..

	Note that you can tune the way images are loaded with Javascript method "~~dontPreloadImage~~" (see [[Game_interface_logic:~~_yourgamename~~.js~~\|Game Interface Logic]]~~).		Note that you can tune the way images are loaded with Javascript method "preloadImages"/"dontPreloadImages" (see https://en.doc.boardgamearena.com/Game_interface_logic:_Game.js#Image_loading). You can for example preloadImages in a sub-folder if an expansion is activated and use it.

	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.		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.

Victoria La: /* What assets to request from publisher */

2026-03-05T00:42:06Z

What assets to request from publisher

← Older revision		Revision as of 02:42, 5 March 2026
Line 8:		Line 8:

	Ask for the following:		Ask for the following:
	- Graphic assets of printed SQUARE materials (cards, boards) in common formats (pdf, jpg, png). PDF cannot have watermarks, cut or bleed marks.		* Graphic assets of printed SQUARE materials (cards, boards) in common formats (pdf, jpg, png). PDF cannot have watermarks, cut or bleed marks.
	- Graphic assets non NON-SQUARE tokens (i.e hex) in PNG (because it needs transparent bg)		* Graphic assets non NON-SQUARE tokens (i.e hex) in PNG (because it needs transparent bg)
	- Graphic assets of game non-flat resources (minis, dice, etc) as were used in rulebook in "contents of the game" in PNG (best one per file)		* Graphic assets of game non-flat resources (minis, dice, etc) as were used in rulebook in "contents of the game" in PNG (best one per file)
	- For all assets that have text on them (numbers don't count): We need ENGLISH or NO TEXT version. We can overlay translated text on graphics if no text version is provided.		* For all assets that have text on them (numbers don't count): We need ENGLISH or NO TEXT version. We can overlay translated text on graphics if no text version is provided.
	- You can also ask game meta data images such as box and banners, but this can be done later (see below for meta data images)		* You can also ask game meta data images such as box and banners, but this can be done later (see below for meta data images)


	== Metadata images ==		== Metadata images ==

Victoria La: added graphics request from publisher

2026-02-21T22:33:15Z

added graphics request from publisher

← Older revision		Revision as of 00:33, 22 February 2026
Line 2:		Line 2:

	__TOC__		__TOC__

			== What assets to request from publisher ==

			Requesting graphics assets is a 2nd thing you should do after getting the game license.

			Ask for the following:
			- Graphic assets of printed SQUARE materials (cards, boards) in common formats (pdf, jpg, png). PDF cannot have watermarks, cut or bleed marks.
			- Graphic assets non NON-SQUARE tokens (i.e hex) in PNG (because it needs transparent bg)
			- Graphic assets of game non-flat resources (minis, dice, etc) as were used in rulebook in "contents of the game" in PNG (best one per file)
			- For all assets that have text on them (numbers don't count): We need ENGLISH or NO TEXT version. We can overlay translated text on graphics if no text version is provided.
			- You can also ask game meta data images such as box and banners, but this can be done later (see below for meta data images)


	== Metadata images ==		== Metadata images ==

Thoun: /* Images loading */

2025-12-12T15:53:51Z

Images loading

← Older revision		Revision as of 17:53, 12 December 2025
Line 19:		Line 19:
	=== 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 publish images that are not useful in your img, or it will slow down the game load.		'''Be careful''': by default, ALL images of your img root 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. You can put them in a subdirectory of img, that won't be preloaded by default.

	Note that you can tune the way images are loaded with Javascript method "dontPreloadImage" (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]]).

Sumpfork: /* Image Manipulation Tools */ - add 'community provided' section with link to card sprite generation python script

2025-10-21T16:57:33Z

Image Manipulation Tools: - add 'community provided' section with link to card sprite generation python script

← Older revision		Revision as of 18:57, 21 October 2025
Line 133:		Line 133:
	https://www.npmjs.com/package/ttsbackup		https://www.npmjs.com/package/ttsbackup

			=== Community Provided ===

			* [https://github.com/sumpfork/seas_of_havoc_boardgamearena/tree/main/misc/tools/extract_cards This python script] shows how to make card sprite images for BGA from a one-card-per-page pdf:
			** reads the pages from a pdf document
			** crops each pages to exclude bleed etc.
			** removes duplicate images based on a difference in histograms
			** converts to a target resolution
			** assembles the resulting images into a single one given a number of rows and columns
			** saves as any format that Pillow supports (e.g. jpg or png)

	[[Category:Studio]]		[[Category:Studio]]

ShaPhi7: /* Image Manipulation Tools */

2025-06-05T20:39:58Z

Image Manipulation Tools

← Older revision		Revision as of 22:39, 5 June 2025
Line 95:		Line 95:
	* ImageMagic (All platforms) - https://www.imagemagick.org/script/download.php - command line image editor, great for mass manipulations and scripting		* ImageMagic (All platforms) - https://www.imagemagick.org/script/download.php - command line image editor, great for mass manipulations and scripting

			AI tools are very good at editing photos with minimal prompting too.
	=== Examples ===		=== Examples ===

MikeTN: Correcting the english. J'ai le droit, je suis british :)

2024-06-21T12:48:15Z

Correcting the english. J'ai le droit, je suis british :)

← Older revision		Revision as of 14:48, 21 June 2024
Line 19:		Line 19:
	=== 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 method "dontPreloadImage" (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]]).