Tile Sprites | Foundry Virtual Tabletop

Overview

Foundry Virtual Tabletop includes support for placing Tiles, which are individual pieces of artwork displayed above the background image of the scene to add decorations, props, or custom features to be interacted with or to change the aesthetics of the scene.

This article will familiarize you with the two methods of placing tiles into scenes, and how to manipulate and configure them once placed.

Tile Controls

The tile layer tools have the following options available:

Select Tiles: This tool allows you to select tiles to directly manipulate them. While a tile is selected you can hold down the shift or control keys and use your mouse wheel to rotate it. You can also click and drag it around the scene.
Place Tile: This tool allows you to draw out a rectangle then opens a dialog to let you select the specific artwork you want to place inside the confines of the rectangle.
Tile Browser: This tool opens a file browser for your instance of Foundry VTT which shows you all of the available images that foundry can use as map tiles. You can click and drag any image found in this browser to the current scene, placing it into the map. The tiles default to their full resolution, but can be resized after being placed.

Placing Tiles

To place or create Tiles, activate the Tiles Layer from the controls palette on the left hand side of the screen, and select one of the tile placement tools. Depending on which tool you select, the process is slightly different:

Place a custom tile: To do this use the second tool which looks like a cube and you can left-click drag a box which will form the basic shape for the tile. Once you release your left-mouse button you will be prompted to provide the configuration details for the Tile.
Use the File Browser: by clicking the folder icon in the tool palette you will be shown a File Picker where you can drag and drop image assets onto the Scene to create Tiles.

The Tile HUD

There are additional options for configuring the Tile in the HUD which is accessed on a single right-click.

The buttons in the Tile HUD are, from top-to-bottom:

Toggle Visibility: Toggle the visibility state of the Tile, turning it from hidden to visible (or vice-versa).
Toggle Locked State: Toggle the locked state of the Tile. While locked, the Tile cannot be moved and is non-interactive.
Bring to Front: Bring the Tile to the front of the rendered Layer, displaying it above other nearby Tiles.
Send to Back: Send the Tile to the back of the Tiles Layer, displaying it below other nearby Tiles.

The Tile Configuration Sheet

Once a Tile is created, you can configure all the details of the Tile by double-clicking on the Tile. Once any changes to the Tile have been made, click the "Update Tile" button to confirm your changes. The tile configuration options are described below:

Tile Sprite: The image or video file path of the displayed tile. Note that Tiles can be either static images or videos. If using Video tiles, the .webm format is recommended to support transparency (if needed).
X-Position: The x-coordinate location of the top-left corner of the Tile.
Y-Position: The y-coordinate location of the top-left corner of the Tile.
Width: The horizontal width of the desired Tile display.
Height: The vertical height of the desired Tile display.
Rotation: The rotation of the Tile, in degrees. You can directly edit this field, or quickly rotate a tile placed in a scene by holding down Shift or Control and using the W-A-S-D keys, the arrow keys, or the mousewheel. When used with the mousewheel, Control offers smaller increments of rotation than the Shift key, allowing for finer adjustments.

API References

To interact with Tiles programmatically, consider using the following API concepts:

The Tile Object
The TilesLayer Canvas Layer
The TileConfig Application