# Frame A **Frame** is a **Scene2D Object** in **Incari** that acts as a 'container' to its *children* and has rigid boundaries. It is one of the only **Objects** in **Scene2Ds** which can be a *parent*, besides [**Groups**](https://docs.incari.com/incari-studio/objects-and-types/scene2d-objects/group2d) and [**Boolean Operations**](https://docs.incari.com/incari-studio/objects-and-types/scene2d-objects/figma/figmabooleanoperation). ## Create When a **Frame** is created, its boundaries are displayed in green, an example of which can be seen in the image below. It can then be populated with other **Objects**. The dimensions of the **Frame** are provided in its **Attributes**. Without any **Objects** as *children*, a **Frame** doesn't look like much: ![Frame Object Before.](https://1553081948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU990HLHWA30dTfELtDUK%2Fuploads%2Fgit-blob-30debf1cff036272ace9410e1d1239a292bbc016%2Fframeimage120241.png?alt=media) An **Ellipse** and **Rectangle** are now added as *children*. Notice the `Position` and `Size` describe these boundaries numerically. The top-left corner starts at `0,0` and it extends 100 units in both the X and Y-axes. **Objects**, however, will still appear in full outside the boundaries of the **Frame** if they happen to not be entirely encapsulated. ![Frame with Objects.](https://1553081948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU990HLHWA30dTfELtDUK%2Fuploads%2Fgit-blob-991fbf86c8a55837cab6d5180bdb5c4aa5da74bd%2Fframeimage220241.png?alt=media) ## Attributes ### Transformation ![Transformation Attributes.](https://1553081948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU990HLHWA30dTfELtDUK%2Fuploads%2Fgit-blob-de8a452df102fda78803aaefe7bb36cbb2b4cced%2Fframeatts20241.png?alt=media) The `Transformation` **Attributes** deal with placement, rotation, and size in *XY* space. More information can be found [here](https://docs.incari.com/incari-studio/objects-and-types/attributes/common-attributes/transformation). `Horizontal Resizing` and `Vertical Resizing` are only made functional when the `Layout` has been changed. They both can either be `Hug Content` or `Fixed Distance`. When `Hug Content` is selected, the size of the **Frame** is always automatically recalculated to perfectly fit all its elements. If a `Layout` is used on the **Frame** and then an **Object** is added while `Hug Content` is on, the size of the **Frame** will increase. The same happens when a `Gap` or `Padding` is added. `Fixed Distance` means that the **Frame's** boundaries are exactly as they are set with `Size`. ### Frame ![Frame Attributes.](https://1553081948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU990HLHWA30dTfELtDUK%2Fuploads%2Fgit-blob-38c3b76bbba1df0034f0b8a4f9711c6f36eacd20%2Fframeframeatts20241.png?alt=media) These **Attributes** are essential to formatting a **Frame**. The `Layout` of the **Frame** can be adjusted to display its *children* horizontally or vertically. Please note that changing the `Layout` causes **Objects** to be placed at their default positions in the **Frame**. `Alignment` determines where the **Frame's** *children* appear within its boundaries. For example, the `Alignment` for the two **Objects** shown below is set to `Bottom Right`. ![](https://1553081948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU990HLHWA30dTfELtDUK%2Fuploads%2Fgit-blob-d34d498c190198eeeb687f95854784640fd0eaef%2Fframealignmentexample20241.png?alt=media) `Crop` cuts off all content which is outside of the **Frame**. However, this only applies to its *children* and not any unrelated **Objects** in the **Scene2D**. If a *child* **Object** (or part of a *child* **Object**) is moved outside the boundary of the **Frame** and `Crop` is toggled on, the **Object** (or part of it) will no longer be visible. ### Events ![Events Attributes.](https://1553081948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU990HLHWA30dTfELtDUK%2Fuploads%2Fgit-blob-01fae0ac7f573b9a37b202b0c2c2124a641ee74b%2Fframeeventsatts.png?alt=media) This **Attribute** determines whether the **Frame** receives **Events** or not in the **Logic**. This is *true* when it is toggled on and *false* if not. ## Render to Texture ![](https://1553081948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU990HLHWA30dTfELtDUK%2Fuploads%2Fgit-blob-39e1c92c9050fa528b3139f19cbc5c2790c1f3f4%2Fcamera2drendertotexture2.png?alt=media) Enabling `Render to Texture` renders the **Scene2D** from the viewpoint of the **Frame** into a texture. When enabled, the resulting texture is added to the **Asset Database** and can be used for all **Objects** which allow for textures (such as **Images**). It is removed again when the **Attribute** is disabled. This **Attribute** can also be used to draw multiple **Scene2Ds**, combine them, or bring them into another **Scene2D**. `Anti-Aliasing` lets the user choose an anti-aliasing technique which can help improve the appearance of the texture. More information on anti-aliasing can be found [here](https://www.digitaltrends.com/computing/what-is-anti-aliasing/). ## Fill The `Fill` **Attributes** consist of different items called `Elements`. Each `Element` contains a `Type`. This can be either `Solid` or `Image` and changes some of the available **Attributes** under this category. If there is more than one `Fill Element`, the most recent one will take precedent over the others (unless some `Blend Mode` is applied). ### Solid ![Fill Attributes with Type Solid.](https://1553081948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU990HLHWA30dTfELtDUK%2Fuploads%2Fgit-blob-96e9d62d1fde4e9329373feee3afa1b122692832%2Fframefillatts20241.png?alt=media) When `Solid` is selected, `Color` is visible. * `Color` is a color selector that lets the user pick the `Fill's` color. * Similar to the base property described previously, `Blend Mode` here affects the `Fill Elements` only. These are established on common formulas, examples of each can be accessed [here](http://www.simplefilter.de/en/basics/mixmods.html). It can also be set with the [**Set Blend Mode Node**](https://docs.incari.com/incari-studio/toolbox/incari/object2d/setblendmode). * `Opacity` refers to how opaque or transparent the `Fill` appears. This is represented by an integer between 0 and 1. Please note that when a new `Fill` is added, it is added to the top of the *fill* list and the **Object** will be updated to display this `Fill`. ### Gradient ![Fill Attributes with Type Gradient.](https://1553081948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU990HLHWA30dTfELtDUK%2Fuploads%2Fgit-blob-4c8ad5ec89cb5ec0c947fe5968754c7edf7bb2e0%2Fframefillgradient20241.png?alt=media) When `Gradient` is selected, `Gradient` is visible. * `Gradient` decides the style of gradient, which can be either `Linear`, `Radial`, `Angular`, or `Diamond`. * The `Gradient` color selector has a row of squares going left to right as well as a column going top to bottom. These correspond 1:1 with each other, so in the image above the mustard yellow squares are the same color. The user can drag the squares in the row to change the order of the gradient's colors. Clicking anywhere in the bar will add a square in both the row and column of colors. The user can change the color of a square by clicking it, which opens the color picker. * Similar to the base property described previously, `Blend Mode` here affects the `Fill Elements` only. These are established on common formulas, examples of each can be accessed [here](http://www.simplefilter.de/en/basics/mixmods.html). It can also be set with the [**Set Blend Mode Node**](https://docs.incari.com/incari-studio/toolbox/incari/object2d/setblendmode). * `Opacity` refers to how opaque or transparent the `Fill` appears. This is represented by an integer between 0 and 1. ### Image ![Fill Attributes with Type Image.](https://1553081948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU990HLHWA30dTfELtDUK%2Fuploads%2Fgit-blob-df1172ce19cc5a904316a91e50b9600994da49e5%2Ffillimageatts20241.png?alt=media) When `Image` is selected, `Image` and `Fit Mode` are visible. * `Image` is the desired **Texture** file. * `Fit Mode` determines how the **Texture** is displayed. These can be `Fill`, `Fit`, `Crop`, and `Tile`. `Tile` has the additional **Attribute** of `Scale Factor`, which augments the tesselation. * Similar to the base property described previously, `Blend Mode` here affects the `Fill Elements` only. These are established on common formulas, examples of each can be accessed [here](http://www.simplefilter.de/en/basics/mixmods.html). It can also be set with the [**Set Blend Mode Node**](https://docs.incari.com/incari-studio/toolbox/incari/object2d/setblendmode). * `Opacity` refers to how opaque or transparent the `Fill` appears. This is represented by an integer between 0 and 1. ### Video ![Fill Attributes with Type Video.](https://1553081948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU990HLHWA30dTfELtDUK%2Fuploads%2Fgit-blob-9625594a5ebe24e0808917e4944f868a60bfb668%2Fframefillvideoatts20241.png?alt=media) When `Video` is selected, `Video` and `Fit Mode` are visible. * `Video` is the desired **Video** file. * `Fit Mode` determines how the **Video** is displayed. These can be `Fill`, `Fit`, `Crop`, and `Tile`. `Tile` has the additional **Attribute** of `Scale Factor`, which augments the tesselation. * Below `Fit Mode` are three options: `Play`, `Pause`, and `Stop`. `Play` starts the video in the **Scene2D**, `Pause` halts it at the frame it is currently on, and `Stop` halts it and resets it to the beginning. * `Loop` is a *Bool* that when toggled on, makes the video repeat itself once it finishes. This is continous. * Similar to the base property described previously, `Blend Mode` here affects the `Fill Elements` only. These are established on common formulas, examples of each can be accessed [here](http://www.simplefilter.de/en/basics/mixmods.html). It can also be set with the [**Set Blend Mode Node**](https://docs.incari.com/incari-studio/toolbox/incari/object2d/setblendmode). * `Opacity` refers to how opaque or transparent the `Fill` appears. This is represented by an integer between 0 and 1. ### Lottie ![Fill Attributes with Type Lottie.](https://1553081948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU990HLHWA30dTfELtDUK%2Fuploads%2Fgit-blob-ff5e38048f686070a7f82a2fb79ebb967e354af7%2Fframefilllottie20241.png?alt=media) When `Lottie` is selected, `Lottie` and `Fit Mode` are visible. * `Lottie` is the desired **Lottie** file. * `Fit Mode` determines how the **Lottie** file is displayed. These can be `Fill`, `Fit`, `Crop`, and `Tile`. `Tile` has the additional **Attribute** of `Scale Factor`, which augments the tesselation. * Below `Fit Mode` are three options: `Play`, `Pause`, and `Stop`. `Play` starts the **Lottie** in the **Scene2D**, `Pause` halts it at the frame it is currently on, and `Stop` halts it and resets it to the beginning. * `Loop` is a *Bool* that when toggled on, makes the **Lottie** repeat itself once it finishes. This is continous. * Similar to the base property described previously, `Blend Mode` here affects the `Fill Elements` only. These are established on common formulas, examples of each can be accessed [here](http://www.simplefilter.de/en/basics/mixmods.html). It can also be set with the [**Set Blend Mode Node**](https://docs.incari.com/incari-studio/toolbox/incari/object2d/setblendmode). * `Opacity` refers to how opaque or transparent the `Fill` appears. This is represented by an integer between 0 and 1. ## Stroke The `Stroke` **Attributes** consist of different items called `Elements`. Each `Element` contains a `Type`. This can be either `Solid` or `Image` and changes some of the available **Attributes** under this category. There are also two fixed **Attributes** outside of the `Elements`. These are: * `Width`, which is how wide (in pixels) each `Stroke` will appear. This applies to each `Stroke Element`. * `Position`, which determines what part of the outline identifies the outside of the **Object**. For example, if `Inner` is selected, then the outside of the `Stroke` is the outside of the **Object**. If `Center` is selected, then the `Stroke's` center is the outside of the **Object**. If `Outer` is selected, then the inside of the `Stroke` is the outside of the **Object**. ### Solid ![Stroke Attributes with Type Solid.](https://1553081948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU990HLHWA30dTfELtDUK%2Fuploads%2Fgit-blob-b20ddcf318594ae07477bebdd355f9f0f5c6c465%2Fframestrokesolid20241.png?alt=media) When `Solid` is selected, `Color` is visible. * `Color` is a color selector that lets the user pick the `Stroke's` color. * Similar to the base property described previously, `Blend Mode` here affects the `Stroke Elements` only. These are established on common formulas, examples of each can be accessed [here](http://www.simplefilter.de/en/basics/mixmods.html). It can also be set with the [**Set Blend Mode Node**](https://docs.incari.com/incari-studio/toolbox/incari/object2d/setblendmode). * `Opacity` refers to how opaque or transparent the `Stroke` appears. This is represented by an integer between 0 and 1. ### Gradient ![Stroke Attributes with Type Gradient.](https://1553081948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU990HLHWA30dTfELtDUK%2Fuploads%2Fgit-blob-eb3e71ae964c0a5ab08373e0cba29fffef1e4195%2Fframestrokegradient20241.png?alt=media) When `Gradient` is selected, `Gradient` is visible. * `Gradient` decides the style of gradient, which can be either `Linear`, `Radial`, `Angular`, or `Diamond`. * The `Gradient` color selector has a row of squares going left to right as well as a column going top to bottom. These correspond 1:1 with each other, so in the image above the mustard yellow squares are the same color. The user can drag the squares in the row to change the order of the gradient's colors. Clicking anywhere in the bar will add a square in both the row and column of colors. The user can change the color of a square by clicking it, which opens the color picker. * Similar to the base property described previously, `Blend Mode` here affects the `Stroke Elements` only. These are established on common formulas, examples of each can be accessed [here](http://www.simplefilter.de/en/basics/mixmods.html). It can also be set with the [**Set Blend Mode Node**](https://docs.incari.com/incari-studio/toolbox/incari/object2d/setblendmode). * `Opacity` refers to how opaque or transparent the `Stroke` appears. This is represented by an integer between 0 and 1. ### Image ![Stroke Attributes with Type Image.](https://1553081948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU990HLHWA30dTfELtDUK%2Fuploads%2Fgit-blob-a0e5c86add5e2b86659237de78b23e4fa356b82d%2Fframestrokeimage20241.png?alt=media) When `Image` is selected, `Image` and `Fit Mode` are visible. * `Image` is the desired **Texture** file. * `Fit Mode` determines how the **Texture** is displayed. These can be `Fill`, `Fit`, `Crop`, and `Tile`. `Tile` has the additional **Attribute** of `Scale Factor`, which augments the tesselation. * Similar to the base property described previously, `Blend Mode` here affects the `Stroke Elements` only. These are established on common formulas, examples of each can be accessed [here](http://www.simplefilter.de/en/basics/mixmods.html). It can also be set with the [**Set Blend Mode Node**](https://docs.incari.com/incari-studio/toolbox/incari/object2d/setblendmode). * `Opacity` refers to how opaque or transparent the `Fill` appears. This is represented by an integer between 0 and 1. ### Video ![Stroke Attributes with Type Video.](https://1553081948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU990HLHWA30dTfELtDUK%2Fuploads%2Fgit-blob-680733f1d46be6f6497a8447b2d3a0871c970a19%2Fframestrokevideo20241.png?alt=media) When `Video` is selected, `Video` and `Fit Mode` are visible. * `Video` is the desired **Video** file. * `Fit Mode` determines how the **Video** is displayed. These can be `Fill`, `Fit`, `Crop`, and `Tile`. `Tile` has the additional **Attribute** of `Scale Factor`, which augments the tesselation. * Below `Fit Mode` are three options: `Play`, `Pause`, and `Stop`. `Play` starts the video in the **Scene2D**, `Pause` halts it at the frame it is currently on, and `Stop` halts it and resets it to the beginning. * `Loop` is a *Bool* that when toggled on, makes the video repeat itself once it finishes. This is continous. * Similar to the base property described previously, `Blend Mode` here affects the `Stroke Elements` only. These are established on common formulas, examples of each can be accessed [here](http://www.simplefilter.de/en/basics/mixmods.html). It can also be set with the [**Set Blend Mode Node**](https://docs.incari.com/incari-studio/toolbox/incari/object2d/setblendmode). * `Opacity` refers to how opaque or transparent the `Stroke` appears. This is represented by an integer between 0 and 1. ### Lottie ![Stroke Attributes with Type Lottie.](https://1553081948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU990HLHWA30dTfELtDUK%2Fuploads%2Fgit-blob-565812090da361a2d491e74c56d3c36611e098d4%2Fframestrokelottie20241.png?alt=media) When `Lottie` is selected, `Lottie` and `Fit Mode` are visible. * `Lottie` is the desired **Lottie** file. * `Fit Mode` determines how the **Lottie** file is displayed. These can be `Fill`, `Fit`, `Crop`, and `Tile`. `Tile` has the additional **Attribute** of `Scale Factor`, which augments the tesselation. * Below `Fit Mode` are three options: `Play`, `Pause`, and `Stop`. `Play` starts the **Lottie** in the **Scene2D**, `Pause` halts it at the frame it is currently on, and `Stop` halts it and resets it to the beginning. * `Loop` is a *Bool* that when toggled on, makes the **Lottie** repeat itself once it finishes. This is continous. * Similar to the base property described previously, `Blend Mode` here affects the `Stroke Elements` only. These are established on common formulas, examples of each can be accessed [here](http://www.simplefilter.de/en/basics/mixmods.html). It can also be set with the [**Set Blend Mode Node**](https://docs.incari.com/incari-studio/toolbox/incari/object2d/setblendmode). * `Opacity` refers to how opaque or transparent the `Stroke` appears. This is represented by an integer between 0 and 1. ### Mask A **Mask** is an **Object** that shows a certain area of another **Object** while concealing the rest. Any **Object** (e.g., an **Ellipse**, **Rectangle**, **Frame**, **Group**, or **Text**) can be used as a **Mask**. For easier visualization, think of the **Mask** as a cookie cutter while the masked **Object** is the dough: the cookie cutter shows only a part and discards the rest. ![Mask Attributes.](https://1553081948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU990HLHWA30dTfELtDUK%2Fuploads%2Fgit-blob-d4ba48cbb5c9b535c462ae174f7ffa27f056e52f%2Fframemaskatts20241.png?alt=media) The `Type` **Attribute** has three options: * `None` - nothing is applied. * `Alpha` - the **Mask** has an opacity level (alpha channel) determining with which level of opacity (or transparency) the masked **Object** is revealed: 0% opacity reveals nothing, 100% opacity is equivalent to a **Mask** with `Vector` type. * `Vector` - only modifies the shape outline of the masked **Object** * `Luminance` - allows the user to utilize brightness to determine the effect of the **Mask**; the brighter the area of a **Mask**, the more that is revealed and the darker the area, the less that is revealed. `Object` allows the user to select what should be the masked **Object**. `Apply Mask` is a toggle that applies the **Mask** when set to on, and disables the **Mask** when set to off. ### Tag ![Tag Attributes.](https://1553081948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU990HLHWA30dTfELtDUK%2Fuploads%2Fgit-blob-dc4f375e34ce9bdd2bebc3e93ff34c8680ab55bb%2Fbuttonattstag.png?alt=media) This **Attribute** manages the *tags* for the **Button**. See more on *tags* [here.](https://docs.incari.com/incari-studio/objects-and-types/attributes/common-attributes/tag)