Points

Introduction

Points are an ordered set of X,Y values defining the shape of the polygon. All points are relative to the Polygon's position. Typically the last point is the same as the first point creating a closed polygon.

By default polygons have four sides. Since the first and last point is repeated, a four-sided polygon has five points.

A default four-sided polygon

Each point is relative to the polygon's X and Y (position). Points use pixel coordinates. The following image shows a polygon with the following points:

• -32, -32

• 32, -32

• 32, 32

• 32, -32

• -32, -32 (repeat of first point)

Polygon with points 32 units from the origin on both X and Y

Notice that the image above has points which appear above and to the left of the polygon's origin.

Adding Points in the Editor

The easiest way to add points is by selecting a Polygon, then clicking on the + icon that appears in the center of the line where you would like to add a point. The following animation shows how to add points to a square to create an octagon:

Points can be added by clicking in the center of lines

Moving Points

Points can be moved by clicking on them and dragging them in the editor. Note that points can be positioned anywhere, even if lines cross or if a polygon is concave.

Polygons can be concave and even have crossing lines.

Removing Points

A point can be removed by clicking on it and pressing the delete key.

Press the delete key to remove points

Advanced Point Editing

Points can also be edited manually in the Screen or Component which contains the Polygon instance. You can open the file in a text editor to see a list of points.

For example, consider the following polygon:

PolygonInstance in MainMenu

The points for this polygon defined in the MainMenu XML file might look like this:

<VariableList xsi:type="VariableListSaveOfVector2">
  <Type>Vector2</Type>
  <Name>PolygonInstance.Points</Name>
  <IsFile>false</IsFile>
  <IsHiddenInPropertyGrid>false</IsHiddenInPropertyGrid>
  <Value>
    <Vector2>
      <X>0</X>
      <Y>46</Y>
    </Vector2>
    <Vector2>
      <X>32</X>
      <Y>32</Y>
    </Vector2>
    <Vector2>
      <X>10</X>
      <Y>0</Y>
    </Vector2>
    <Vector2>
      <X>0</X>
      <Y>46</Y>
    </Vector2>
  </Value>
</VariableList>

These points can be changed in the XML file. If the file is changed then Gum automatically reloads this file.

Remember that the first and last points should have the same values if you want your polygon to be closed. You can make edits in the XML file to separate the start and end if you would like to draw a segmented line rather than a closed polygon.