Character Vault
Any Concept / Any System
Compendium
Your System Come To Life
Roll20 for Android
Streamlined for your Tablet
Roll20 for iPad
Streamlined for your Tablet

Personal tools

Difference between revisions of "Manipulating Graphics"

From Roll20 Wiki

Jump to: navigation, search
(Added the new rotation and movement keyboard shortcuts)
m
 
(21 intermediate revisions by 9 users not shown)
Line 1: Line 1:
There are three ways you can manipulate your images on Roll20's Tabletop: Move, Rotate and Scale. These transformations are handled by different gizmos that appear over a selected image.
+
{{revdate}}{{HCbox| {{hc|articles/360039178654-Importing-and-Manipulating-Images Here}} }}
 +
{{cleanup-msg|This have some overlap with [[Select/Move Tool]], [[Art Library]], and other pages|March 2022}}
 +
{{notebox| See Also: '''{{Select}}''' }}
  
'''Snap To Grid'''
+
There are three ways you can manipulate your images on the [[Tabletop Overview|Tabletop]]: '''Move''', '''Rotate''' and '''Scale'''. These transformations are handled by different gizmos that appear over a selected image.
  
Anytime the grid is enabled in [[page-toolbar-page-settings|Page Settings]], Snap To Grid is enforced on The Tabletop. Snapping affects all transformations that can be made on your Background Images as well as Tokens. Hold down the ALT Key while moving, rotating or scaling to ignore snapping.
+
[[File:Art-library-drag-graphics.gif|thumbnail|500px|drag-n-drop images from your {{Art Library}} to the map.]]
  
'''Undo'''
+
==Placing Graphics onto the Tabletop==
  
If you don't like how you transformed your images, using the keyboard shortcut Ctrl/Cmd Key + Z will undo the last action.
+
Once you’ve found, purchased, or uploaded the art assets you’d like to use to your {{Art Library}}, simply drag and drop it from either the folder view, the Recent Upload list, or from a sub folder onto the Tabletop/map.
  
'''Movement'''
+
If you want to use to images for your [[Journal#Bio_.26_Info_Tab|Character Portrait]], or {{Journal}} Handout, you need to have their menu open instead.
 +
 
 +
__TOC__
 +
== Snap To Grid ==
 +
 
 +
Anytime the grid is enabled in [[Page_Settings|Page Settings]], Snap To Grid is enforced on The Tabletop. Snapping affects all transformations that can be made on your Background Images as well as [[Tokens]]. Hold down the ALT Key while moving, rotating or scaling to ignore snapping.
 +
 
 +
== Undo ==
 +
 
 +
If you don't like how you transformed your images, using the [[Keyboard Shortcuts|keyboard shortcuts]] {{button|Ctrl}}/{{button|Cmd}}+ {{button|Z}} will undo the last action.
 +
 
 +
== Movement ==
  
 
Movement is achieved by clicking and dragging anywhere inside the selected image. It's best to avoid clicking the outer edges of an image for movement. Doing this might trigger the scaling transformation instead. When Snap to Grid is enabled, an image snaps to the bottom right corner of a grid square and snaps to the center of a grid hex.
 
Movement is achieved by clicking and dragging anywhere inside the selected image. It's best to avoid clicking the outer edges of an image for movement. Doing this might trigger the scaling transformation instead. When Snap to Grid is enabled, an image snaps to the bottom right corner of a grid square and snaps to the center of a grid hex.
  
Tapping ←, →, ↑ or ↓ arrow keys will move a selected token one grid unit in the specified direction. Holding down the Alt key while using the arrow keys will move a selected token in one pixel increments.
+
Tapping {{button|←}}, {{button|→}}, {{button|↑}} or {{button|↓}} arrow keys will move a selected token one grid unit in the specified direction. Holding down the {{button|Alt}} key while using the arrow keys will move a selected token in one pixel increments.
 +
=== Waypoints ===
 +
{{main|Waypoint}}
 +
{{:Waypoint}}
  
''' Rotation '''
+
== Rotation ==
  
When selected, a handle will stick out from the top of the image. This is the rotation gizmo. Click the end of the handle for rotation. While Snap To Grid is enabled, an image rotates in increments of 45° for square grids and 30° for hex grids.
+
When selected, a handle will stick out from the top of the image. This is the rotation gizmo. Click the end of the handle for rotation. While '''Snap To Grid''' is enabled, an image rotates in increments of 45° for square grids and 30° for hex grids.
  
You can also rotate a selected token by holding down the E key while scrolling your mouse wheel. This will rotate snap it to 45° or 30° increments. If you also hold down the Alt key, the token will rotate one degree at a time.
+
You can also rotate a selected token by holding down the E key while scrolling your mouse wheel. This will rotate snap it to 45° or 30° increments. If you also hold down the Alt key, the token will rotate in much finer increments.
  
'''Scale (GM Exclusive)'''
+
== Scale ([[GM]] Exclusive) ==
  
 
The Scale gizmo is the bounding box that surrounds a selected image. If you click and drag the nodes on either the top or bottom of the bounding box, you will vertically scale the image. The nodes on either side of the image will horizontally scale it. Clicking and dragging any of the corner nodes will universally scale both horizontally and vertically simultaneously. Images scale from the center of the image. While Snap To Grid is enabled, an image will scale to the nearest grid line in either direction.
 
The Scale gizmo is the bounding box that surrounds a selected image. If you click and drag the nodes on either the top or bottom of the bounding box, you will vertically scale the image. The nodes on either side of the image will horizontally scale it. Clicking and dragging any of the corner nodes will universally scale both horizontally and vertically simultaneously. Images scale from the center of the image. While Snap To Grid is enabled, an image will scale to the nearest grid line in either direction.
Line 29: Line 45:
 
You can access more advanced features by right clicking on a graphic to bring up a graphics menu and selecting '''Advanced'''.
 
You can access more advanced features by right clicking on a graphic to bring up a graphics menu and selecting '''Advanced'''.
  
'''Grouping and Ungrouping'''
+
=== Grouping and Ungrouping ===
  
 
While a group of graphics is selected, clicking on the '''Group''' option from the Advanced menu will bind the graphics together into a singular moveable block. You can remove grouping by selecting '''Ungroup'''.
 
While a group of graphics is selected, clicking on the '''Group''' option from the Advanced menu will bind the graphics together into a singular moveable block. You can remove grouping by selecting '''Ungroup'''.
  
'''Flip Horizontal/Vertical'''
+
If you wish to move the group as a whole, click once to select the group and then click and drag. If you wish to move a single graphic independently of the group, click on it and drag it normally. The group will remain highlighted, but that token will move without moving any other members of the group.
 +
 
 +
=== Flip Horizontal/Vertical ===
  
 
These two menu options will flip the graphic horizontally or vertically.
 
These two menu options will flip the graphic horizontally or vertically.
  
'''As Drawing'''
+
=== As Drawing ===
  
The '''As Drawing''' menu option changes a graphic on the Token & Objects and GM layers by removing the suite of Token features normally attributed to it. It will ignore grid snapping in this mode and can also be selected along with other hand drawings by holding down the Alt key while selecting items on the Tabletop.
+
The '''As Drawing''' menu option changes a graphic on the Token & Objects and GM [[layers]] by removing the suite of Token features normally attributed to it. It will ignore grid snapping in this mode and can also be selected along with other hand drawings by holding down the Alt key while selecting items on the Tabletop.
  
'''Set Dimensions'''
+
=== Set Dimensions ===
  
 
If there's a specific pixel/unit height and width you want to force a particular graphic to conform, selecting '''Set Dimensions''' brings up a new window where you can input the desired dimensions.
 
If there's a specific pixel/unit height and width you want to force a particular graphic to conform, selecting '''Set Dimensions''' brings up a new window where you can input the desired dimensions.
  
 +
=Other Pages=
 +
* [[Tabletop]]
 +
* [[Page Toolbar]]
 +
* [[Tokens]]
 +
 +
[[Category:Guides]]
 +
[[Category:Tokens]]
 +
[[Category:VTT Interface]]
 +
[[Category:Maps]]
 +
[[Category:Get Started]]
 
[[Category:Docs]]
 
[[Category:Docs]]

Latest revision as of 14:12, 9 March 2022

Attention: This page is community-maintained. For the official Roll20 version of this article, see the Help Center for assistance: Here .


There are three ways you can manipulate your images on the Tabletop: Move, Rotate and Scale. These transformations are handled by different gizmos that appear over a selected image.

drag-n-drop images from your P Art Library to the map.

[edit] Placing Graphics onto the Tabletop

Once you’ve found, purchased, or uploaded the art assets you’d like to use to your P Art Library, simply drag and drop it from either the folder view, the Recent Upload list, or from a sub folder onto the Tabletop/map.

If you want to use to images for your Character Portrait, or N Journal Handout, you need to have their menu open instead.

Contents

[edit] Snap To Grid

Anytime the grid is enabled in Page Settings, Snap To Grid is enforced on The Tabletop. Snapping affects all transformations that can be made on your Background Images as well as Tokens. Hold down the ALT Key while moving, rotating or scaling to ignore snapping.

[edit] Undo

If you don't like how you transformed your images, using the keyboard shortcuts Ctrl/Cmd+ Z will undo the last action.

[edit] Movement

Movement is achieved by clicking and dragging anywhere inside the selected image. It's best to avoid clicking the outer edges of an image for movement. Doing this might trigger the scaling transformation instead. When Snap to Grid is enabled, an image snaps to the bottom right corner of a grid square and snaps to the center of a grid hex.

Tapping , , or arrow keys will move a selected token one grid unit in the specified direction. Holding down the Alt key while using the arrow keys will move a selected token in one pixel increments.

[edit] Waypoints

Main Page: Waypoint

Waypoints allow you to designate exactly how a token moves on the tabletop

The Waypoint system allows you to indicate where you're moving to everyone in the game. Sometimes while moving a token you may want to indicate how the token moves around corners, or exactly where the token has "stepped" to avoid traps.

To use it, just press the Q-key while you are moving a token. A ruler will appear showing you how far you have moved from your current location. If you want to place a waypoint, press the Q again while you are on top of the space you want to move through. A waypoint will appear. You can add as many waypoints as you want showing the path of your token. When you're finished, just release the token like normal at its final destination.

[edit] Reviewing Token Movements

You can select any token and press the X key to view the last movement of that token, including waypoints if applicable. All tokens will save their last movement indefinitely, so even if it's been a few weeks since the last time you played, or you're participating in a play-by-post game, you can still see the last movement of any piece on the tabletop.


[edit] Rotation

When selected, a handle will stick out from the top of the image. This is the rotation gizmo. Click the end of the handle for rotation. While Snap To Grid is enabled, an image rotates in increments of 45° for square grids and 30° for hex grids.

You can also rotate a selected token by holding down the E key while scrolling your mouse wheel. This will rotate snap it to 45° or 30° increments. If you also hold down the Alt key, the token will rotate in much finer increments.

[edit] Scale (GM Exclusive)

The Scale gizmo is the bounding box that surrounds a selected image. If you click and drag the nodes on either the top or bottom of the bounding box, you will vertically scale the image. The nodes on either side of the image will horizontally scale it. Clicking and dragging any of the corner nodes will universally scale both horizontally and vertically simultaneously. Images scale from the center of the image. While Snap To Grid is enabled, an image will scale to the nearest grid line in either direction.

[edit] Advanced Features

You can access more advanced features by right clicking on a graphic to bring up a graphics menu and selecting Advanced.

[edit] Grouping and Ungrouping

While a group of graphics is selected, clicking on the Group option from the Advanced menu will bind the graphics together into a singular moveable block. You can remove grouping by selecting Ungroup.

If you wish to move the group as a whole, click once to select the group and then click and drag. If you wish to move a single graphic independently of the group, click on it and drag it normally. The group will remain highlighted, but that token will move without moving any other members of the group.

[edit] Flip Horizontal/Vertical

These two menu options will flip the graphic horizontally or vertically.

[edit] As Drawing

The As Drawing menu option changes a graphic on the Token & Objects and GM layers by removing the suite of Token features normally attributed to it. It will ignore grid snapping in this mode and can also be selected along with other hand drawings by holding down the Alt key while selecting items on the Tabletop.

[edit] Set Dimensions

If there's a specific pixel/unit height and width you want to force a particular graphic to conform, selecting Set Dimensions brings up a new window where you can input the desired dimensions.

[edit] Other Pages