Skip to content

this.bga.images

Image loading

See also Game art: img directory.

Preloading

By default, ALL images at the root of your img directory are loaded in a player's browser when they load the game. Avoid keeping unused images in your img directory, as they will slow down game loading. Images in a subfolder of img are NOT preloaded by default.

this.bga.images.dontPreloadImage(image_file_name: string)

this.bga.images.dontPreloadImages(image_file_names: string[])

Using dontPreloadImage, you tell the interface to not preload a specific image in your img directory. dontPreloadImages is the same for multiple images at once.

Examples of use:

// don't preload a particular image
this.bga.images.dontPreloadImage( 'cards.png' );

// don't preload a list of unused images (gamedatas.clans contains the numbers of the clans used in this game).
this.bga.images.dontPreloadImages([1,2,3,4,5,6].filter(clan => !gamedatas.clans.include(clan)).map(clan => `clan${clan}.png`));

this.bga.images.preloadImage(image_file_name: string)

this.bga.images.preloadImages(image_file_names: string[])

Opposite of dontPreloadImage, useful only for images that are not in the root img folder

Example of use: 

// preload a particular image
if (gamedatas.expansionActive) {
  this.bga.images.preloadImages(['expansion/board.jpg', 'expansion/new-cards.jpg']);
}

this.bga.images.getImgUrl(filename?: string): string

Returns the URL of an image, if you need to set it in JS (usually they will be referenced in the CSS file and don't need JS). Example of use:

  const boardImgUrl = this.bga.images.getImgUrl('board.jpg');
  const expansionBoardImgUrl = this.bga.images.getImgUrl('expansion/board.jpg'); // you can use subfolders
  const imgUrl = this.bga.images.getImgUrl(); // you can omit the argument and append the image file name later: it will return the URL up to and including `img/`