Component:Mask: Difference between revisions

From Resonite Wiki
Fix and add info, no longer stub
Added a video.
 
(2 intermediate revisions by 2 users not shown)
Line 2: Line 2:
<translate>
<translate>
<!--T:1-->
<!--T:1-->
{{stub}}
{{Infobox Component
{{Infobox Component
|Image=MaskComponent.png
|Image=MaskComponent.png
Line 9: Line 8:


<!--T:2-->
<!--T:2-->
== Intoduction ==
The '''Mask''' component restricts the rendering of anything beneath it. It requires an [[Component:Image|Image]] component, [[Component:Text|text]], [[Component:OutlinedArc|arc]], [[Component:RectMesh|rectmesh]], or anything that displays a graphic on the same [[Slot|slot]]. Only opaque areas of the graphic on the same slot will render the [[UIX]] below. This is also utilized in [[Component:ScrollRect|ScrollRect]] since it can mask anything outside of the scrolling viewport when using the component.


The Mask component restricts the rendering of anything beneath it. It requires an [[Image (Component)|Image]] component, text, arc, rectmesh, or anything that displays a graphic on the same slot. Only opaque areas of the graphic on the same slot will render the UIX below. This is also utilized in [[Component:ScrollRect|ScrollRect]] since it can mask anything outside of the scrolling viewport when using the component.
{{Note|This can have issues with UIX's behind, since there are some rendering bugs with Unity.|warning}}


This can have issues with UIX's behind, since there are some rendering bugs with Unity.
There is a [[UIX Tutorial]] that use masking and [[Component:ScrollRect|ScrollRects]] to help you understand how masks work.


<!--T:3-->
<!--T:3-->
== Usage ==
{{Table ComponentFields
{{Table ComponentFields
|ShowMaskGraphic|Bool|Shows the graphic being used to do the masking for debug purposes
|ShowMaskGraphic|Bool|Shows the graphic being used to do the masking for debug purposes.
}}
}}


<!--T:4-->
<!--T:4-->
== Behavior ==
== Usage ==
This can be used for fancy cutout effects.


<!--T:5-->
<!--T:5-->
== Examples ==
== Examples ==
The [[Component:ScrollRect|ScrollRect]] section which is part of the UIX Canvas object created by the create new menu.
The [[Component:ScrollRect|ScrollRect]] section which is part of the [[UIX]] Canvas object created by the [[Create New Wizard|create new menu]].
 
Here is [[User:ProbablePrime|ProbablePrime]]'s tutorial on masking:
<youtube>WPL776reVFw</youtube>


<!--T:6-->
<!--T:6-->
== Related Components ==
== Related Components ==
</translate>
</translate>
[[Category:Components{{#translation:}}|Mask (Component){{#translation:}}]]
[[Category:Components{{#translation:}}|Mask]]
[[Category:Components:UIX:Graphics{{#translation:}}|Mask (Component){{#translation:}}]]
[[Category:Components:UIX:Graphics{{#translation:}}|Mask]]

Latest revision as of 05:29, 22 July 2024

Component image 
Mask component as seen in the Scene Inspector


The Mask component restricts the rendering of anything beneath it. It requires an Image component, text, arc, rectmesh, or anything that displays a graphic on the same slot. Only opaque areas of the graphic on the same slot will render the UIX below. This is also utilized in ScrollRect since it can mask anything outside of the scrolling viewport when using the component.

This can have issues with UIX's behind, since there are some rendering bugs with Unity.

There is a UIX Tutorial that use masking and ScrollRects to help you understand how masks work.

Fields
Name Type Description
persistent Bool Determines whether or not this item will be saved to the server.
UpdateOrder Int Controls the order in which this component is updated.
Enabled Bool Controls whether or not this component is enabled.
ShowMaskGraphic Bool Shows the graphic being used to do the masking for debug purposes.

Usage

This can be used for fancy cutout effects.

Examples

The ScrollRect section which is part of the UIX Canvas object created by the create new menu.

Here is ProbablePrime's tutorial on masking:

Related Components