User Tools

Site Tools


en:tutorials:useparentspace

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision
Previous revision
en:tutorials:useparentspace [2019/06/12 08:17 (10 months ago)]
sausage
en:tutorials:useparentspace [2019/06/13 06:03 (10 months ago)] (current)
Line 1: Line 1:
-====== UseParentSpace for Relative Object Positioning ======+====== UseParentSpace for Relative Object Positioning ​and Scaling ​======
  
-If an object is a child of a parent of object, ​it can be positioned relatively within that object's space. The property to use is ''​UseParentSpace''​.+If an object is a child of another ​object, ​the child can be positioned relatively within that parent's space. The property to use is ''​UseParentSpace''​.
  
-Setting that to ''​true''​ or ''​both''​ means that the object can be positioned ​within ​the parent'​s ​space using the range **(-0.5, -0.5)** to **(0.5, 0.5)**.+Setting that to ''​true''​ or ''​both''​ means that the object can be positioned ​using coordinates relative to the parent'​s ​size.
  
 {{page>::​init_new_project&​nofooter&​noeditbutton}} {{page>::​init_new_project&​nofooter&​noeditbutton}}
Line 33: Line 33:
 </​code>​ </​code>​
  
-[]+{{ :​tutorials:​parentposition01.png |}} 
 + 
 +//Note: I've added dimensions and relative position markers. These won't show up on your screen.//
  
 ''​Container''​ has a single child called ''​PanelA''​. We'll define this so that it gets created in the top left position of the Container: ''​Container''​ has a single child called ''​PanelA''​. We'll define this so that it gets created in the top left position of the Container:
Line 50: Line 52:
 </​code>​ </​code>​
  
-[]+{{ :​tutorials:​parentposition02.png |}}
  
-''​PanelA''​ is a brownish block and is placed centred on the top left corner of the Container. ​It is using UseParentSpace so that is uses the position and scale of the parent. The ''​Scale''​ is set to 0.5 so that the panel becomes half the size of the parent Container.+''​PanelA''​ is a brownish block and is placed centred on the top left corner of the Container. ​ 
 +''​PanelA'' ​is using ''​UseParentSpace'' ​so that it uses the position and scale of the parent. The ''​Scale''​ is set to 0.5 so that the panel becomes half the size of the parent Container.
  
 To emphasise the range of positions, define a number of //​TestPoints//:​ To emphasise the range of positions, define a number of //​TestPoints//:​
Line 120: Line 123:
  
 </​code>​ </​code>​
 +
 +{{ :​tutorials:​parentposition03.png |}}
 +
 +Again, note the scale on the ''​TestPoint''​ children. They are all set to 0.25 or a quarter of the size of ''​PanelA''​.
 +
 +Finally, to demonstrate the effect of using a different pivot on a child (and how it affects grandchildren),​ change the ''​Pivot''​ of  ''​PanelA''​ to ''​top left'':​
 +
 +<code ini>
 +[PanelA] ​
 +...
 +Pivot          = top left
 +...
 +</​code>​
 +
 +{{ :​tutorials:​parentposition04.png |}}
 +
 +Notice that the ''​TestPoint''​ children don't shift their position with the change of pivot on the ''​PanelA''​ parent. This is because ''​PanelA''​ is just being rendered from a different pivot, but the position space that the TestPoint children operate in is still the same.
 +
 +So for a parent whose Pivot is centered, the relative top/left and bottom right corners are at ''​(-0.5,​ -0.5)''​ and ''​(0.5,​ 0.5)'',​ which maps to ''​(-ParentSizeX/​2,​ -ParentSizeY/​2)''​ and ''​(ParentSizeX/​2,​ ParentSizeY/​2)''​
 +
 +Respectively if the parent has a ''​top left''​ Pivot, then the relative corners are at ''​(0,​ 0)''​ and ''​(1,​ 1)'',​ which maps to ''​(0,​ 0)''​ and ''​(ParentSizeX,​ ParentSizeY)''​.
 +
 +Relative co-ordinates are not limited to the ranges above. They can extend beyond this range to move relatively further away from their parent.
 +
 +There are lots of applications for relative positioning. Relative screen sizes are handy for simple UI, screen savers, and games where the screen size and scale will vary.
en/tutorials/useparentspace.1560327420.txt.gz · Last modified: 2019/06/12 11:17 (10 months ago) (external edit)