This is a documentation for Board Game Arena: play board games online !
Game art: img directory: Difference between revisions
Victoria La (talk | contribs) No edit summary |
Leocaseiro (talk | contribs) (add SVG tool →Shrink images) |
||
| Line 68: | Line 68: | ||
** Offline tool for PNG: https://pngquant.org/ | ** 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 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 == | == Image Manipulation Tools == | ||
Revision as of 14:50, 30 May 2022
Metadata images
Game metadata images are images of game box, banner, tiltle, 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 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 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
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:
- Sprite Generator https://www.toptal.com/developers/css/sprite-generator/
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
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
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-result.php
Download game assets from tabletop simulator
https://www.npmjs.com/package/ttsbackup/v/0.0.3