-
Notifications
You must be signed in to change notification settings - Fork 5
UI UV Layout Constraint System
A very basic layout constraint system. It doesn't do everything for layout except for basic anchoring/pinning in relation to borders/points.
It approaches the matter under a given convention: Every layout region must already be visually prepped and pre-arranged relative to a reference parent screen's canvas dimensions. By default, every layout region will always scale propotionally to that parent screen's dimensions. That means all points of the layout region (it's scaling origin point included) scales to the parent screen's dimensions like it's a UV map polygon itself in relation to the parent's screen's dimensions (or like a responsive image map). To make such a layout region keep certain dimensions/positions on the screen when it resizes, you assign any combination of the following UV constraints which are applied in the below mentioned order.
(Up to 2. One for definin the local origin pivot for scaling the current layout region shape itself using local UV cooordinate within layout region's box, the other for defining that origin pivot's position itself via another (parent/global screen UV coordinate by default).
Simply put, one constraints how a shape is scaled, the other constraints where a shape is scaled from.
A Point Scale Constraint consist of single Vector representing a pivot position used as the scaling origin, and an AABB constraint to specify minimum/maximum scales allowed relative to that pivot position from the prepped layout. When min/max scale values are included, it acts like a leash to determine how far or how close points can be translated in relation to the mapped origin's position when a resizing of the screen is applied, causing a scale to be applied from the original prepped reference screen size, but clamped within any given min/max limits.
Use a min/max of 1/1 respectively to enforced fixed scaling distance (along the respective x/y dimension) from current the pivot point. Use a range like 0.75/1.5, eg.to allow a a certain allowable range of scaling.
Formulas: (from current reference screen dimensions)
Applied ratio tranformation of position along given dimension:
- ratioD = 1/scaleD * max(scaleD, minD) // if (minD <= 1)
- ratioD = 1/scaleD * min(scaleD, maxD) // if (maxD >= 1)
- translatedUorV = currentUorV * ratioD
As can be seen, without any minD/maxD constraints applied, the prepped UV coordinates of a layout region will remain the same when the screen resizes.
(Up to 4. One for each cardinal side: top, right, bottom, left)
Each border constraint indicates the need to stretch or clamp a particular border of the layout region to it's repsective screen parent's border, using any margins currently found on the prepped layout. It consist of a min/max range numbers to indicate relatively how much of spacing can vary for a given border.
Border constraints may also be applied in relation to a sibling's edge as well (instead of the parent's matching border), but the constraints for such must be set up after the sibling has set up it's own layout constraints as well to ensure such border constraints resolve after it's sibling has done so.
Use a min/max of 1/1 respectively to enforced fixed dimension border spacing from current prepped margins. Use a range like 0.75/1.5, eg.to allow a a certain allowable range of border space from the current prepped border.
(Only 1) (or 2 or 3??)
Aspect constraint consist of a min/max range number indicating the allowed Width/Height aspect ratio relative to the current prepped aspect ratio of the layout region.
This will clamp (not match) the final layout region's shape to the allowed aspect ratio range, taking into consideration any existing Point Scale Constraint's local origin pivot used for re-scaling of the shape to match the Aspect ratio constraint. Thus, if you scale non-uniformly along one axis (or the resultant shape being sized to new dimensions) causes the shape to go out of bounds of that given constrain, it would only scale up to the maximum allowed as defined by the constraint (which might mean no visible scaling could occur at all).
At the same time, it contains a pre-flight flag to consider affecting any Point Scale Constraint (if any) being assigned for the local origin shape-scaling pivot itself, and will ensure the positioning of that local origin pivot for the shape to be scaled, follows that this given aspect ratio scaling constraint. In this case, if there is a Point Scale Constraint defined for the shape's local origin pivot itself beforehand, it'll checks whether such an Aspect constraint is available and ensure the local origin shape scaling pivot (where the layout region's shape should originate/scale from), is placed at the correct location taking into account the aspect ratio constraints.
Use a min/max of 1/1 respectively to enforce the current aspect ratio found in the prepped dimensions of the layout region. Use a range like 0.75/1.5, eg. to allow a a certain allowable range of aspect ratio that might occur when non-uniformly scaling the parent's size canvas.