-
Notifications
You must be signed in to change notification settings - Fork 5
UI UV Layout Constraint System
Working implementation: https://github.com/Glidias/trosink/tree/master/haxe/src/troshx/util/layout
Draft of a very basic layout constraint system. It doesn't do everything for layout except for basic anchoring/pinning in relation to borders/points. It's meant to work with an Image Slice Map workflow.
What you get is a very lightweight layout system that only consist of 3 types of constraint classes.
How is this achieved? It approaches the matter under the given convention/paradigm: Every layout region must already be visually prepped and pre-arranged relative to a reference parent screen's canvas dimensions. The system only works in preserving the existing layout as it is prepped (which can be a limitation). 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). You modify this default behaviour by assign any combination of the following UV constraints which are applied in the below mentioned order.
(Up to 2. One for defining 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.
For the latter point scale case, you may opt to dynamically use a sibling layout region's local UV coordinate as reference for determining the matching parent screen's UV coordinate, assuming the sibling layout is set to resolve it's constraints earlier beforehand)
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
Mapping positions from point scaling constraints:
- mapped pivot uv = origin uv + ( pivot uv - origin uv) * ratioUV // given origin uv point scaling constraint (that defines pivot uv)
- mapped point uv = mapped pivot uv + (point uv - pivot uv) * ratioUV // given shape-scaling pivot uv point scaling constraint
As can be seen, without any minD/maxD constraints applied (ratioD/ratioUV remains as 1), the prepped UV coordinates of a layout region will remain the same when the screen resizes.
Other aspects of Point Scaling Constraints: (Additional feature...possibly yagni but easy to implement): Scaling ratio constraint along x/y that can be used to scale things up by a higher/lower rate. This can be used to determine weighted scales between elements.
(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 clamp against 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 under certain circumstances until you provide enough space on both dimensions to accomodate that aspect ratio).
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 scale-transform positioning of that local origin pivot for the shape to be scaled, is transformed within the aspect given constraints. 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 location taking into account the given aspect ratio constraints. (eg. a 1/1 Aspect constraint being set on pre-flight will also enforce a uniform scaling transform on the positioning of the shape's pivot relative to the parent's initial reference screen's aspect ratio)
Use a min/max of 1/1 respectively to enforce the current aspect ratio found in the prepped dimensions of the layout region (scale uniformly at all times). 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.