Frame
Last updated
Last updated
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 and Boolean Operations.
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:
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.
The Transformation Attributes deal with placement, rotation, and size in XY space. More information can be found here.
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.
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.
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.
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.
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.
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).
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. It can also be set with the Set Blend Mode Node.
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.
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. It can also be set with the Set Blend Mode Node.
Opacity refers to how opaque or transparent the Fill appears. This is represented by an integer between 0 and 1.
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. It can also be set with the Set Blend Mode Node.
Opacity refers to how opaque or transparent the Fill appears. This is represented by an integer between 0 and 1.
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. It can also be set with the Set Blend Mode Node.
Opacity refers to how opaque or transparent the Fill appears. This is represented by an integer between 0 and 1.
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. It can also be set with the Set Blend Mode Node.
Opacity refers to how opaque or transparent the Fill appears. This is represented by an integer between 0 and 1.
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.
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. It can also be set with the Set Blend Mode Node.
Opacity refers to how opaque or transparent the Stroke appears. This is represented by an integer between 0 and 1.
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. It can also be set with the Set Blend Mode Node.
Opacity refers to how opaque or transparent the Stroke appears. This is represented by an integer between 0 and 1.
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. It can also be set with the Set Blend Mode Node.
Opacity refers to how opaque or transparent the Fill appears. This is represented by an integer between 0 and 1.
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. It can also be set with the Set Blend Mode Node.
Opacity refers to how opaque or transparent the Stroke appears. This is represented by an integer between 0 and 1.
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. It can also be set with the Set Blend Mode Node.
Opacity refers to how opaque or transparent the Stroke appears. This is represented by an integer between 0 and 1.
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.
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.
This Attribute manages the tags for the Button. See more on tags here.
