<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="../images/favicon.svg" />
<link rel="icon" href="../images/favicon.ico" />
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1">
<meta property="og:type" content="website">
<meta http-equiv="content-security-policy" content="">
<link href="../_app/immutable/assets/_layout.21aea584.css" rel="stylesheet">
<link href="../_app/immutable/assets/_layout.0154a58a.css" rel="stylesheet">
<title>Constraints</title><!-- HEAD_svelte-i5aht6_START --><meta property="og:title" content="Constraints"><meta name="description" property="og:description" content="Flexalon lets Unity developers arrange objects in 3D layouts that are precise and easy to adjust. Use built-in interactions and animations to create powerful experiences."><meta name="image" property="og:image" content="../images/flexalon-1200x630.png"><meta name="twitter:card" content="summary_large_image"><meta name="twitter:title" content="Constraints"><meta name="twitter:site" content="@alon_farchy"><meta name="twitter:description" content="Flexalon lets Unity developers arrange objects in 3D layouts that are precise and easy to adjust. Use built-in interactions and animations to create powerful experiences."><meta name="twitter:image" content="../images/flexalon-1200x630.png"><!-- HEAD_svelte-i5aht6_END -->
</head>
<body>
<div>
<div class="text-white font-body p-4 sticky top-0 bg-black flex gap-5 w-full text-gray-200 z-20 border-b-2 border-[#21a6f0]"><button class="lg:hidden"><svg width="24" height="24"><path d="M5 6h14M5 12h14M5 18h14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path></svg></button>
<a href="https://www.flexalon.com/" class="font-logo upper text-lg text-[#21a6f0] lg:pl-5 svelte-194nj6y">Flexalon Layouts</a></div>
<div class="w-full max-w-[1600px] lg:pl-10"><div class="flex w-full min-h-full text-zinc-400 relative"><div class="h-full fixed bg-black z-10 max-lg:hidden"><div class="flex flex-col w-[300px] gap-2 border-[#21a6f0] border-r-2 bg-black min-h-0 h-full pt-10 pb-36 overflow-auto max-lg:pl-10"><b class="text-zinc-200">Getting Started</b>
<a href="../docs.html" class="svelte-194nj6y">Installation</a>
<a href="../docs/coreConcepts.html" class="svelte-194nj6y">Core Concepts</a>
<a href="../docs/ui.html" class="svelte-194nj6y">Flexalon UI <span class="ml-2 text-xs font-bold text-pink-300">(New in v4.0!)</span></a>
<a href="../docs/templates.html" class="svelte-194nj6y">Template Pack</a>
<a href="../docs/challenges.html" class="svelte-194nj6y">Challenges!</a>
<a class="text-zinc-200 mt-5 font-bold svelte-194nj6y" href="../docs/flexalonObject.html">Flexalon Objects</a>
<a href="../docs/flexalonObject.html#size" class="svelte-194nj6y">Width, Height, and Depth</a>
<a href="../docs/flexalonObject.html#minmax" class="svelte-194nj6y">Min / Max Size<span class="ml-2 text-xs font-bold text-purple-400">(v4.1)</span></a>
<a href="../docs/flexalonObject.html#margins" class="svelte-194nj6y">Margins and Padding</a>
<a href="../docs/flexalonObject.html#offset" class="svelte-194nj6y">Offset, Scale, and Rotation</a>
<b class="text-zinc-200 mt-5">Layouts</b>
<a href="../docs/flexibleLayout.html" class="svelte-194nj6y">Flexible Layout</a>
<a href="../docs/gridLayout.html" class="svelte-194nj6y">Grid Layout</a>
<a href="../docs/circleLayout.html" class="svelte-194nj6y">Circle / Spiral Layout</a>
<a href="../docs/curveLayout.html" class="svelte-194nj6y">Curve Layout</a>
<a href="../docs/randomLayout.html" class="svelte-194nj6y">Random Layout</a>
<a href="../docs/alignLayout.html" class="svelte-194nj6y">Align Layout</a>
<a href="../docs/shapeLayout.html" class="svelte-194nj6y">Shape Layout</a>
<a href="../docs/constraints.html" class="svelte-194nj6y">Constraints</a>
<a href="../docs/randomModifier.html" class="svelte-194nj6y">Random Modifier</a>
<a class="text-zinc-200 mt-5 font-bold svelte-194nj6y" href="../docs/animators.html">Animators</a>
<a href="../docs/animators.html#curve" class="svelte-194nj6y">Curve Animator</a>
<a href="../docs/animators.html#lerp" class="svelte-194nj6y">Lerp Animator</a>
<a href="../docs/animators.html#rb" class="svelte-194nj6y">Rigid Body Animator</a>
<a href="../docs/animators.html#layouts" class="svelte-194nj6y">Animating Layouts</a>
<b class="text-zinc-200 mt-5">Click & Drag</b>
<a href="../docs/interactable.html" class="svelte-194nj6y">Interactable</a>
<a href="../docs/interactable.html#dragTarget" class="svelte-194nj6y">Drag Target</a>
<a href="../docs/xr.html" class="svelte-194nj6y">XR Interactions <span class="ml-2 text-xs font-bold text-blue-300">(v3.2)</span></a>
<a href="../docs/interactable.html#customInputProvider" class="svelte-194nj6y">Custom Input Provider</a>
<b class="text-zinc-200 mt-5">Data Binding</b>
<a href="../docs/cloner.html" class="svelte-194nj6y">Cloner</a>
<a href="../docs/cloner.html#databinding" class="svelte-194nj6y">Data Binding</a>
<b class="text-zinc-200 mt-5">Advanced</b>
<a href="../docs/pipeline.html" class="svelte-194nj6y">Flexalon Pipeline</a>
<a href="../docs/customLayout.html" class="svelte-194nj6y">Custom Layouts</a>
<a href="../docs/customAnimators.html" class="svelte-194nj6y">Custom Animators</a>
<a href="../docs/adapters.html" class="svelte-194nj6y">Adapters</a>
<a class="text-zinc-200 mt-5 font-bold svelte-194nj6y" href="../docs/api/Flexalon.html">Scripting API</a>
<div class="mb-20"></div></div></div>
<div class="flex flex-col w-full p-10 lg:ml-[300px]"><div class="doc svelte-194nj6y">
<div class="text-white text-2xl mb-10">Constraints</div>
<p>The Flexalon Constraint component positions its gameObject relative to a target, which can be any
other gameObject. The constrained object or the target can also have layout components,
which provides a powerful way to combine layouts together.
</p>
<p>In this example, we have a circle layout of blue spheres and three other meshes. The circle layout
is constrained to the position and size of the mesh that is clicked on.
</p>
<div class="flex m-5 mb-10"><video muted autoplay loop playsinline><source src="https://www.flexalon.com/videos/doc-constraint2.mp4"></video></div>
<p>Let's break it down. First, the circle layout is configured to set its diameter to its width using the 'Use Width' property.
Then, the Flexalon Object on the circle layout sets its width to fill 120% of the available space. What is the available
space? When an object is constrained, the available space is the size of the constraint target.
</p>
<p>Finally, the circle has a <b>Flexalon Constraint</b> component. A simple script simply changes the constraint target
when the user clicks. Flexalon moves the circle to the new constraint target, and its width and diameter get
bigger to match 120% of the target.
</p>
<p class="text-xl mt-10">Constraint Options</p>
<div class="flex ml-10 m-5 mb-10"><img src="../images/doc-constraint-options.png" alt="Constraint options"></div>
<table><tr><td>Target</td>
<td>Which gameObject to constrain to.
<br><br>The position depends on the Align and Pivot options (see below).
<br><br>The rotation is set to match the target's rotation.
<br><br>The available space is set to match the target's size.
Set the width, height, and depth properties on the Flexalon Object Component to Parent to match the target's size. </td></tr>
<tr><td>Align</td>
<td>Determines how each axis aligns to the target's box.</td></tr>
<tr><td>Pivot</td>
<td>Determines how each axis aligns to this object's box.</td></tr></table></div></div></div>
</div>
</div>
</body>
</html>