Working with Images as the GM
- Derek Batting
- Doug Davison
Fantasy Grounds VTT Images
Note: Fantasy Grounds VTT is still in active development and new features are being added and improved all the time. Some screenshots below may not yet be updated to match the current tool sets available, but the functionality should be the same or similar.
We are working to update this and our entire wiki to match current features and visuals.
Image Sizes, Types, and Specifications
Fantasy Grounds VTT supports any JPG and PNG images, as well as Google’s next-generation media-rich WEBP and WEBM formats, and Universal VTT file formats – DD2VTT, DF2VTT and UVTT used by such applications as Dungeondraft, Dungeon Fog, Dungeon Alchemist, Hero Forge, and others.
For GMs, we recommend using the same images types, sizes and specs that we give to asset and module developers to keep images loading quickly without unnecessarily large files.
You can read all image recommendations in the Developer’s Guide at the link below:
Link: https://fantasygroundsunity.atlassian.net/wiki/x/AYByeQ
NOTE: Currently, WEBM files are only supported when compressed with VP8.
VP9 will be supported in a future release. Please make sure any WEBM files are in VP8 or convert them from VP9 if necessary.
Importing Images into Fantasy Grounds
These will appear in the Assets window under Images when you add them to your campaign. From there, you can copy them into your campaign, set a grid, define line of sight and use them in your campaign.
Follow either of these two methods to include new images in your campaign from outside of Fantasy Grounds. If the image is online, you should first save it to your local disk.
Method 1 - Import File (Recommended)
The example is using the 5E ruleset and the built-in Leather theme. Your screen may look slightly different depending on the ruleset you chose.
Open the Images window using the sidebar button for the ruleset you are using.
(Optional) Click on the Group dropdown and choose which group to place the image or create a new group and choose that.
Click the Import button (the blue and white “up arrow” button next to the All button).
Browse for the file. You can filter file types by selecting any of the individual file types from the dropdown, or leave the default “All Files” to see all files eligible for import.
Method 2- Import Assets (Bulk Import)
If you have a large number of files you want to import into your campaign all at once, you can use this method to do it in fewer steps.
Open your Assets window
Click on the Folder button to open your Data folder
Navigate to your campaign’s image folder.
Default paths to campaigns:
Windows:C:\Users\[YourUsername]\AppData\Roaming\SmiteWorks\Fantasy Grounds\campaigns\[YourCampaign]\images
macOS:/Users/[YourUsername]/SmiteWorks/Fantasy Grounds/campaigns/[YourCampaign]/images
Linux:/home/[username]/.smiteworks/campaigns/[YourCampaign]/images
Note: the.smiteworksfolder may be hidden by default. Enable "Show Hidden Files” in the file manager settings.Place any images you want to use there. This will add a folder called Campaign to your Assets window under Images.
Open the Images screen from the Sidebar buttons
(Optional) Click on the Group Dropdown and choose which group to place the image or create a new group and choose that.
Click on the Create From Campaign Assets button at the top and answer Yes at the Prompt.
Note: Possible duplication may occur if the images have already been imported into your campaign. Just manually delete any unneeded records using the Edit List menu.
Method 3 - Manual Import from Assets
See Using the Assets Window for Tokens, Portraits and Images for more information.
For images created outside of Fantasy Grounds, follow these steps to add it to your Assets and then to your campaign.
Open your Assets window
Click on the Folder button to open your Data folder
Navigate to your campaign’s image folder
Place any images you want to use there.
Return to the Assets window and change to the Images Mode
Locate and open the Campaign folder
Drag the images from there to your Images window
Image Windows and Icons
Once an image is opened and ready for use, there are several options available before you even get into altering the image, adding PCs/NPCs, etc. Here is what each section of the Image Window means:
Record Link - You can drag and drop a direct link to the open image almost anywhere; on the Hot Bar at the bottom for quick reopening, onto the chat window for all to see and use, into other open documents or notes, etc.
Image Name icon - Denotes the Image Name field.
Duplicate Record icon - Shows what module the image was loaded from.
Revert Changes To Module Record - Allows you to easily revert the image to the one contained in the module.
Image Name field - Where the name of the image is. This can be the name of the corresponding file, or can be edited to be whatever you like.
Unidentified Name icon - Denotes the Unidentified Name field
Unidentified Name field - You can edit this field to name the image what you would like your players to see if the image is unidentified.
Identified / Unidentified toggle icon:
Highlighted with Checkmark - Identified
Unhighlighted with X - UnidentifiedLocked / Unlocked toggle icon:
When unlocked, you can fully edit or alter the image with the complete Image Controls explained below. When locked, editing is no longer possible.
Highlighted with Lock Closed - Locked
Unhighlighted with Lock Open - UnlockedPublic / Not Shared toggle icon:
Public - Can be shared with players and reopened by them if shared.
Not Shared - Has not been shared and cannot be opened by Players if previously shared.Open Help icon - Will take you to the corresponding area of the wiki for this particular window. In this case, the page you are reading right now.
Minimize Window - Will reduce the window to a single round icon on the FGVTT desktop that you can move around and click to reopen.
Increase Size - Will increase the size of the window to fill the desktop between the chat box on the left and the Sidebar on the right. If clicked again after the size is increased, the image will fill the desktop, going behind the chat box and filling all other available space, but will not cover the Sidebar. If clicked a third time, the window will increase to fill all available space including covering the chat box and Sidebar.
When the Increase Size icon is used, a Decrease Size icon will become available to reduce the size of the window incrementally. This icon is included in the Toggleable Toolbar section below.
Close icon - This will close the window completely and without warning.
Toggle Toolbar icon - This will open a bar directly above the Image Controls below. These icons and how they can change depending on what a window is used are explained in the Toggleable Toolbar section below.
Toggleable Toolbar
The Toggleable Toolbar will show or hide different icons depending on the use case of the image.
For example, if an image is open, but the image isn’t being used as an active map with PCs and NPCs added from the Combat Tracker, the toolbar will look like this:
If an image is being used as a map with players and NPCs on the map, additional icons will be available:
To illustrate each icon’s function in a visual manner without overloading this page, please click over to the Toggleable Toolbar Functions page.
Link:Toggleable Toolbar Functions
Using the Image Control
You can unlock the image to access the Image Control. Within the Image control, you have a main mode, sub-mode and then additional controls dependent upon the submode.
Modes
Icons & Descriptions | |
|---|---|
| |
 | Play SubmodeThis is the default mode that allows the mouse to pan the window. |
 | Token SelectionSingle click to choose a token or draw a rectangle around a group of tokens that you want to select for movement. |
 | Token TargetingUse this mode to select targets for an action. In most rulesets you can simply CTRL+Click on a target |
 | Drawing Mode This mode allows simple drawing in your chosen dice color. For more advanced drawing, refer to the Paint mode. |
 | Erase Drawing This mode changes the cursor to an eraser. The eraser removes parts of a drawing you have made. |
 | Ping Mode This mode allows GMs and players to display radial pings on the map. |
 | Additional Play ControlsView Type - Changes between 2D (Top Down) mode, Free Camera 3D mode and Token View 3D mode Zoom Extents - resizes the image to fit inside the Image window Show/Hide Shortcuts - toggle pin visibility for the GM Enable/Disable Player Vision Preview - toggles GM and Player view of the map Enable/Disable Line-of-Sight - turns on or off Dynamic Line of Sight. Toggle Token Lock - turns on or off token locking for movement planning and approval. Toggle Grid Snap - turns on or off snapping to grid centers, corners and edges of grids. Enable/Disable Line-of-Sight requires that you have Line of Sight walls, doors and terrain defined. |
| |
 | Layers-Transform SubmodeHere you can manipulate a layer (see Layers below) to rotate it, scale it, flip it, or change the color. |
 | Layers-Tile SubmodeUsed to add tile images onto the map. You can rotate, scale, flip or color the tile before it is placed. Each time you click on the map, a new tile layer will be added to the Layers section. To place a tile:
Tiles can be manipulated after placement. |
| Layers-Object SubmodeUsed to add object images onto the map. You can rotate, scale, flip or color the tile before it is placed. Each time you click on the map, a new tile layer will be added to the Layers section. Swatches can be swapped out in the Front window. Objects can also be made to face the viewer, have a static orientation, or face the viewer on all axes. Tiles can be manipulated after placement. |
| |
 | Duplicate Selection As Walls - copy and paste selection as a wall piece. Duplicate Paint Layer As Walls - copy and paste paint layer as a wall piece. Remove Selected Points - Select multiple points to delete from the line. Simplify Selected Strokes - Reworks selection to be less complicated Reverse Selected Strokes - Inverts the stroke selection direction. |
 | Drawing LinesYou can adjust the default brush size, color tint, size, angle, shadow and fade strength, how it overlaps other parts, end cap type and corner type of your line. Rotating, flipping, snapping to grid and magnetic snapping are also available options. Any drawing will add a new Paint layer if you don’t already have one selected. Free-form Drawing: left-click and hold to draw a line using the mouse. Straight-lines: single click on each point where you want it to draw a straight line. Double-click or press Enter to end the line. Draw with ImageSwitch from Brush Mode (default) to Image Mode in the Image Control. Drag an image from the Assets window to the Graphic Asset area. Adjust the size, color and rotation and then draw free-form or straight lines. This is a super powerful tool that will allow you to make beautiful and functional maps when using an Image Brush. Paint cave walls, rivers, etc. *See the Line of Sight section for more on how to make your drawings block vision. |
 | Draw RectangleClick and drag from the starting corner of your rectangle to the opposite corner of your rectangle. Hold SHIFT to make a perfect square |
 | Draw Circle or EllipseClick and drag from the starting boundary of the ellipse to the ending boundary of the ellipse. Hold SHIFT to make a perfect circle |
 | Adding Image StampsImage Stamps switch from Brush Mode to Image Mode automatically. To place a stamp:
Stamps are graphic images that you can use to decorate the map without creating extra layers for each stamp. It is great for painting forests, roadways, lava, cliff edges or adding debris to a map.
|
 | Erasing Drawings
Erasing works well when using the Image Brush to paint walls. You can draw a series of rectangles, circles and lines and then erase where you want doors and windows. Look for the Line of Sight section for an easy way to define walls that line up perfectly with your drawings. |
 | Edit Filled Strokes - Provides several keyboard and mouse combinations to achieve different fill effects. |
| |
 Layers list  FX Type  | The FX Type dropdown will be blank by default. You must first add a new FX layer by using the layer controls at the bottom of the image control. To add a new Fx layer:
Available FX Layers:
Each FX Type will have it’s own specific adjustment. For example:    |
| |
 | LOS Drawing ModeThe 2nd toolbar allow Selection, Draw Line, Draw Rectangle and Draw Ellipse. They function just like drawing in Paint Mode. Hold SHIFT to draw a perfect square or circle |
 | LOS - Wall ModeWalls block line of sight and movement for players. Walls are shown in Red. Tip: Avoiding Gaps To avoid gaps in walls, it is better to slightly overlap. This will automatically add an intersection point where two walls meet (or where it meets a door, secret door or terrain). You can then select and delete any extra points you don’t need. |
 | LOS - Terrain ModePlayers can see into the first terrain in their vision. The back edge of the terrain blocks line of sight much like a wall. Players inside of terrain can see out of it in all directions. Terrain is shown in Green. Tip: Terrain usage Terrain is good for allowing the players to see the entire contents of an area but nothing behind it. Large statues that block line of sight unless you are standing on top of it, pillars, stairs, etc. are all good uses for terrain. |
 | LOS - Door ModePlayers can see the contents of a door, but not beyond it. Hovering over a door will allow the option to Open or Close the door. * The GM can shift+click on the door to lock or unlock it. Doors are shown in Blue. |
 | LOS - Secret ModeSecret areas will act just like a wall to players. The GM, however, will have the option to open the secret door. This will allow players to see through the area and move through it. * The GM can shift+click on the door to lock or unlock it Secret doors are shown in Blue with a dashed line. |
 | LOS - Window Mode Windows allow players to see through the window but not move through it unless it is opened first. Windows can be locked * The GM can shift+click on the door to lock or unlock it Windows are shown in Yellow. |
 | LOS - Illusionary Wall Illusionary Walls are lines that block line of sight just like a wall, but which do not restrict player movement. Players can move straight through the wall without GM intervention. Illusionary Walls are shown in yellow dashed lines. |
 | LOS - Pits (Experimental) Open pits block movement and vision out of the pit when the token is inside the pit. Closed pits have no effect on movement or vision. * The GM can open or close the pit |
 | LOS - Shadow Caster (Experimental) Add shadowed sections to a map regardless of terrain or occlusions. Shadows are shown in a light green dashed line. |
 | Grid Snap toggle - Turns snapping to the predefined grid on or off. Point Snap toggle - Turns snapping to points in occluder splines on and off. Peek: This is the amount users can see past where the occluder is drawn. The amount of peek-thru is relative to the grid size. For example, 0.1 is 10% of a grid square while 1.0 is a full grid square. This can be useful to show that the occluder is drawn on a wall, for example, by letting the players see that there is a wall being hidden by the occluder, but not see completely into the room on the other side. |
| |
 | Select Light Select Light - allows you to select lights already added to a map. Light Range and Color can be adjusted here as well as turning individual lights on and off. You can also change them into “darkness” instead of the default “light”. Several preset behaviors, speeds and presets are available in the dropdown menus. |
 | Add Light Has the same capabilities as Select Light above. |
 | Token Light Player tokens and NPC tokens can carry around their own light sources. This is where you can create and configure those lights. As the token moves, so will the light. Tokens can have multiple light sources attached, although remember that light sources are additive. |
 | Token Vision Similar to Token Light, you can configure and assign a token’s vision from this menu. |
 | Ambient Light This menu allows you to configure the ambient lighting that is drawn over the entire map. |
| |
 | Enable or Disable Global LOS MaskClick the + icon to turn on Global Mask. It will add a dark gray layer over the map. Click the - icon to disable the Global LOS Mask. |
 | Reveal AreaRemove Rectangle from Global LOS Mask Click and drag from one corner of a rectangle to the opposite corner. Hold ALT when drawing to make a freeform selection. |
 | Hide AreaFill Rectangle on Global LOS Mask Click and drag from one corner of a rectangle to the opposite corner. Hold ALT when drawing to make a freeform selection. |
| |
 | GridThis is the edit mode for the grid that overlays a map. Settings can be changed here or in the Set Grid With Mouse mode seen below. |
 | Set Grid With MouseSwitch from Edit Mode to Mouse Assignment and then drag from the upper left corner of a map square to the bottom right to set the grid size and location. Edit it further using the edit controls. |
 | Set the Grid TypeYou can choose
|
  | Adjust GridYou can adjust the width and height of the grid in pixels. You can use decimal points. Unlink width and height if they are not the same using the link button in between width and height. Use the arrow keys to nudge the grid placement. Warning - Isometric grid maps Many Isometric maps available online are not truly iso maps. An Isometric map should have the points of the diamond be in line with each other horizontally and vertically and each diamond should be consistently sized. |
| |
| Edit TextHere you can edit any text areas that have already been added to the map. Choose a font, change the tint, or the size of the area. You can also toggle whether to use the text area as a light. Different outline and shadow effects can be configured as desired with the sliders and color blocks for each. |
 | Add TextHere you can add a new text area to the map or image. Choose a font, change the tint, or the size of the area. You can also toggle whether to use the text area as a light. Different outline and shadow effects can be configured as desired with the sliders and color blocks for each. |
Keyboard Shortcuts
Keyboard shortcuts change depending on which mode is selected.
Mode | Keyboard | Action |
|---|---|---|
Play Mode w/ Token Selected | Arrow Keys, Num Pad or ASDW navigation | Arrow Keys and Num Pad: ASDW: ASDW keys navigate smoothly without snapping to a grid, while Arrow Keys and Num Pad snap to grid and move one square at a time. |
Drawing Mode or Line of Sight Mode (no points selected) | Arrow Keys | Pan the map by 1 grid square in the direction of the arrows Hold CTRL to pan by a smaller amount. |
Spacebar | Add a new point at the current cursor position and continue editing this drawing. | |
Enter | Add a new point at the current position and complete the current drawing. | |
Esc | Cancel the current drawing and complete it at the previous point | |
Ctrl+Z | Undo last action | |
Ctrl+Y | Redo last action from Undo | |
CTRL | Temporarily toggle grid snapping mode for next point (while held) | |
Layers Transform w/ Tile Selected | Arrow keys | Move currently selected tile by 1 grid square in the direction of the arrow. Hold CTRL to move by a smaller amount. |
Layers Transform w/ Tile Selected
| Shift+Left Arrow | Spin current tile clockwise or counter-clockwise by 45 degrees. Hold CTRL to rotate by 1 single degree. |
Shift + Up Arrow Shift + Down Arrow | Increase or decrease scale of current tile by 1 grid square Hold CTRL to scale by 1 pixel. |
Right-Click Menus
Menu | Description |
|---|---|
| Main MenuClockwork order from the top. Close Window - Closes the current window Minimize - Minimizes the window to a button View - Shows different view modes Layers - Grid, Pins, Mask visibility Drawing - freehand drawing on the map Lock/Unlock Tokens - Allows tokens to move freely without GM approval Sharing - shows the image on the players' screens Pointers - Draw cones, squares, circles and arrows using the grid coordinates. |
| Pointers MenuArrow - useful for pointing out features Square - useful for defining areas Circle - useful for defining areas Cone - useful for spell area of effects Players can draw pointers |
| Drawing MenuUnlock Drawing Mode - toggle locked and unlocked state Enter Drawing Mode - this does not have the same level of features as the Image Control options explained earlier, but it allows for simple drawings with the default drawing brush. Players can use this to draw on maps |
 | Layers MenuToggle Shortcuts - this changes visibility for shortcuts (GM Only) Toggle Grid - hides or shows the grid Snap to Grid - on or off (hold CTRL to override) Grid Type - select Hex Row, Hex Column, Square or Isometric Enable Mask - this turns on or off the Global mask |
 | Grid TypeHex Row Grid - creates a hex grid in rows Hex Column Grid - creates a hex grid in columns Square Grid - created a square grid Isometric Grid - creates an isometric grid |
 | View MenuReset Zoom - sets image back to default zoom level Zoom To Fit - Zooms to fit within maximum window size Zoom To Fill - Zooms to fill the space it occupies Sync Client View - Sets the zoom level on all players' desktops to the same level |
 | Sharing MenuShare Record - Shared the current item with all players Stop Sharing Record - Stops sharing the item with players |
Using Dynamic Line of Sight for Maps
Some maps may be preloaded with line of sight (LOS) data. For other maps, you can create your own LOS data. Refer to the Map Line of Sight Style Guide for more info on creating your own LOS data.
Open your Map and unlock it to reveal the Image Control
Verify that the layer with the map has an indicator showing that LOS has been defined (see image)
Turn on Enable LOS. It is off by default
Drag a player token onto the map from the Combat Tracker (or add an NPC from an encounter or Combat Tracker)
If you want to build your own version of LOS that differs from any built-in definitions, you can unlock the layer and then disable that layer’s LOS definition. Next, you can add a new LOS layer (available at the bottom of the Image Control) and then start drawing your new version. Refer to the Style Guide.
Videos