Component:Canvas: Difference between revisions

From Resonite Wiki
Automated: update Fields, Categories
Added a warning note.
 
(3 intermediate revisions by the same user not shown)
Line 2: Line 2:
<translate>
<translate>
<!--T:1-->
<!--T:1-->
{{stub}}
{{Infobox Component
{{Infobox Component
|Image=CanvasComponent.png
|Image=CanvasComponent.png
Line 9: Line 8:


<!--T:2-->
<!--T:2-->
== Introduction ==
The '''Canvas''' component is the starting point for anything based on [[UIX]]. It provides the bounds of the UI and controls how users can interact with it.


A Canvas is the starting point for anything based on [[UIX]]. It provides the bounds of the UI and controls how users can interact with it.
{{Note|When updating certain things on the canvas, you may need to duplicate the entire [[Slot]] to get the canvas (and any other UIX elements and slots under that canvas) to work again. The specifics for this canvas component that may need to force recalculation are as follows:
 
* DefaultCulling: Especially for rendering the back side of the canvas.|warning}}


<!--T:3-->
<!--T:3-->
== Usage ==
{{Table ComponentFields
{{Table ComponentFields
|Size|Float2|The dimensions of the canvas. At normal scale, this is equivalent to meters.
|Size|Float2|The dimensions of the canvas. At normal scale, this is equivalent to meters
|EditModeOnly|Bool|FIXME
|EditModeOnly|Bool|This makes this component only editable in [[Edit Mode]]
|AcceptRemoteTouch|Bool|Makes the canvas accepts laser touches
|AcceptRemoteTouch|Bool|Makes the canvas accepts laser touches
|AcceptPhysicalTouch|Bool|Makes the canvas accepts direct touches
|AcceptPhysicalTouch|Bool|Makes the canvas accepts direct touches
|AcceptExistingTouch|Bool|FIXME
|AcceptExistingTouch|Bool|If this canvas is already being touched (physically or remotely), accept the input
|HighPriorityIntegration|Bool|FIXME
|HighPriorityIntegration|Bool|Prioritizes the procedural meshes in the queue for this component
|IgnoreTouchesFromBehind|Bool|Makes the canvas ignore all touches from behind
|IgnoreTouchesFromBehind|Bool|Makes the canvas ignore all touches from behind
|BlockAllInteractions|Bool|Prevents any interaction if enabled
|BlockAllInteractions|Bool|Prevents any interaction if enabled
|LaserPassThrough|Bool|Allows the laser to go through the canvas
|LaserPassThrough|Bool|Allows the laser to go through the canvas
|PixelScale|Float|FIXME
|PixelScale|Float|Sets the pixel scale for this canvas and its contents
|UnitScale|Float|
|UnitScale|Float|Scales the contents of this canvas, higher number makes the contents smaller
|_rootRect|'''[[Component:RectTransform|RectTransform]]'''|TypeAdv11=true|Internal
|_rootRect|'''[[Component:RectTransform|RectTransform]]'''|TypeAdv11=true|Internal - The root rect of this canvas
|Collider|'''[[Component:BoxCollider|BoxCollider]]'''|TypeAdv12=true|The collider that receives touches
|Collider|'''[[Component:BoxCollider|BoxCollider]]'''|TypeAdv12=true|The collider that receives touches from this canvas
|DefaultCulling|Culling|
|DefaultCulling|Culling| Culling for this canvas
|_colliderSize|{{RootFieldType|FieldDrive`1|[[Type:Float3|Float3]]}}|TypeAdv14=true|Internal
|_colliderSize|{{RootFieldType|FieldDrive`1|[[Type:Float3|Float3]]}}|TypeAdv14=true|Internal - Takes in a box collider and uses it for the canvas
|_colliderOffset|{{RootFieldType|FieldDrive`1|[[Type:Float3|Float3]]}}|TypeAdv15=true|Internal
|_colliderOffset|{{RootFieldType|FieldDrive`1|[[Type:Float3|Float3]]}}|TypeAdv15=true|Internal - Offsets this box collider for this canvas
|StartingOffset|Int|FIXME
|StartingOffset|Int|The visibility order of rendering this canvas (lower number gets drawn over higher numbers)
|StartingMaskDepth|Int|FIXME
|StartingMaskDepth|Int|Masking layer for the canvas
}}
}}


<!--T:4-->
<!--T:4-->
== Behavior ==
== Usage ==
This component is needed for [[UIX]], without it, your other components that relay on UIX, canvas, elements, and [[Type:Rect|rects]] will not work as expected. Using a canvas not only organizes your other components, it renders them and makes them usable and intractable.


<!--T:5-->
<!--T:5-->
== Examples ==
== Examples ==
Here is a video from [[User:ProbablePrime|ProbablePrime]]'s tutorial on canvases:
<youtube>cLtD7uWrduI</youtube>


<!--T:6-->
<!--T:6-->
== Related Components ==
== Related Components ==
When a child slot is created when under a [[Slot]] that has a canvas component, the new child slot will automatically create a [[Component:RectTransform|RectTransform]] component.
</translate>
</translate>
[[Category:Components{{#translation:}}|Canvas]]
[[Category:Components{{#translation:}}|Canvas]]
[[Category:ComponentStubs]]
[[Category:Components:UIX{{#translation:}}|Canvas]]
[[Category:Components:UIX{{#translation:}}|Canvas]]

Latest revision as of 03:50, 28 July 2024

Component image 
Canvas component as seen in the Scene Inspector


The Canvas component is the starting point for anything based on UIX. It provides the bounds of the UI and controls how users can interact with it.

When updating certain things on the canvas, you may need to duplicate the entire Slot to get the canvas (and any other UIX elements and slots under that canvas) to work again. The specifics for this canvas component that may need to force recalculation are as follows:
  • DefaultCulling: Especially for rendering the back side of the canvas.
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.
Size Float2 The dimensions of the canvas. At normal scale, this is equivalent to meters
EditModeOnly Bool This makes this component only editable in Edit Mode
AcceptRemoteTouch Bool Makes the canvas accepts laser touches
AcceptPhysicalTouch Bool Makes the canvas accepts direct touches
AcceptExistingTouch Bool If this canvas is already being touched (physically or remotely), accept the input
HighPriorityIntegration Bool Prioritizes the procedural meshes in the queue for this component
IgnoreTouchesFromBehind Bool Makes the canvas ignore all touches from behind
BlockAllInteractions Bool Prevents any interaction if enabled
LaserPassThrough Bool Allows the laser to go through the canvas
PixelScale Float Sets the pixel scale for this canvas and its contents
UnitScale Float Scales the contents of this canvas, higher number makes the contents smaller
_rootRect RectTransform Internal - The root rect of this canvas
Collider BoxCollider The collider that receives touches from this canvas
DefaultCulling Culling Culling for this canvas
_colliderSize field drive of Float3 Internal - Takes in a box collider and uses it for the canvas
_colliderOffset field drive of Float3 Internal - Offsets this box collider for this canvas
StartingOffset Int The visibility order of rendering this canvas (lower number gets drawn over higher numbers)
StartingMaskDepth Int Masking layer for the canvas

Usage

This component is needed for UIX, without it, your other components that relay on UIX, canvas, elements, and rects will not work as expected. Using a canvas not only organizes your other components, it renders them and makes them usable and intractable.

Examples

Here is a video from ProbablePrime's tutorial on canvases:

Related Components

When a child slot is created when under a Slot that has a canvas component, the new child slot will automatically create a RectTransform component.