PivotTransform

About
PivotTransform is the component in charge of position and scale off all UI objects. It does a bit more than just that though. UI in the game was originally designed to be pixel based for several reasons. We also decided early on that because there isn't a lot of UI in the game, we would rely on serialization for UI rather than a UI editor.

A problem for example is, "What if you want a UI object to be 10 pixels from the bottom of the screen, and 10 pixels from the right of the screen at all times even if the window size and aspect ratio changes?" PivotTransform is a tool to easily solve that problem. I will refer to this question throughout this page.

It's important to keep these things in mind when using PivotTransform or most of the UI components.

Coordinate Systems
By default everything is in pixel coordinates. The top left of the window is (0, 0) and the bottom right is (window width, window height). This is a fairly common practice.

There is also percentage modes. The top left of the window is (0, 0) and the bottom right is (1, 1). You can describe any object as being a percentage across the screen, or the size of an object as a percentage of the screen.

Pivots
Pivots are the working position on the model. Currently there are nine pivots you can work with. Position of the object are affected by the pivot. These pivots are similar to ones in Photoshop when using the transform tool (ctrl + t).

Pretty much when you set a position it moves the top left corner of the object to that position. Then it shifts it according to the pivot you selected. This is great for things like when you want the bottom right corner of the object to be away from the corner of the screen

TopLeft (default pivot)
When top left is selected, the top left corner is is what touches the position you set.

.

.

CenterTop


.

.

.

TopRight


.

.

.

CenterLeft
.

.

.

Center
One of the more common ones used. If you want to fill a full screen, use center.

.

.

CenterRight


This is what the main menu form uses.

.

.

BottomLeft


.

.

.

CenterBottom


.

.

.

BottomRight
This is the pivot you would use to when moving the object to the bottom right of the window from the example problem presented at the beginning of this page.

.

Bounding Areas
Up until this point, I've been saying window size and screen size in examples. However, there is more to it. PivotTransform supports using custom bounding areas to align objects to. Forms and panels in particular are UI components that make use of these custom bounding areas.

So, by default the window is the bounding area for pivot transform. The position (0,0) is at the top left of the window, and the bottom right of the window is (window width, window height). These two points make a rectangle around the entire window.

This rectangle can be redefined. So in truth (0, 0) is always the top left point of that rectangle by default, and the bottom right is always the width and height of that bounding rectangle by default.

You can not directly change this bounding rectangle though PivotTransform, but other UI objects will, and you need to be aware that this exists.

We will see how useful this is in the next section.

Alignments
Alignments are how objects are attached to specific parts of a bounding area.

Going back to the question, "What if you want a UI object to be 10 pixels from the bottom of the screen, and 10 pixels from the right of the screen at all times even if the window size and aspect ratio changes?" Alignments are the answer for how to bound it to the bottom and right part of the screen.

Alignments are broken into two steps, the X alignment and the Y alignment. You can use any combination of the two for matching your pivot.

For the example problem you would set AllignmentX to Right, and AllignmentY to Bottom. What did that do? It set 0 for the X postion to be at the right side of the bounding area and set 0 of the Y coordinate to be at the bottom of the screen. The left side of the bounding area would be the bounding area width and the top would be the bounding area height.

So it flips the coordinate system to fit your needs.

To wrap up, if your pivot is bottom right, the position will treat the bottom right corner of the object as the point that gets placed directly on the position you specify. You set the alignments to bind the object to the right and bottom of the screen. All you need to do to make the object 10 pixels away from the bottom and right side of the screen, is to simply set the position to (10, 10).

Serialization Options
a