Mask Component
#Content Editor #Template Content Creation #Blank Canvas
Last updated
#Content Editor #Template Content Creation #Blank Canvas
Last updated
✨Entrance of Template Content Creation：Work Preview Area>>>Mask Component button / Layer Area>>>Mask Component
✨Entrance of Blank Canvas：Gameplay Template>>>Component>>>Mask Component
Related case tutorial can refer to Mask Component - Blank Canvas Tutorial
Underlying logic: The "Mask Shape" controls the visible portion of the "Masking Group," which means that the image inside the "Masking Group" will be visible within the covered area of the "Mask Shape" and hidden outside the covered area.
The Mask Component can be used in both "Blank Canvas" and "Template Content Creation." With Content Creation, you can adjust the components based on the gameplay of the original template. With Blank Canvas or adding a new component, you need to complete the settings for parameters such as "Exterior," "Mask Shape," and "Masking Group."
Note: Only one component can be added per scene, but component can be added across scenes or copied.
It is suitable for gameplay where the mask layer can be adjusted by clicking, dragging, or other interactive methods to reveal the target image.
The parameters that can be adjusted for the "Mask Component" are divided into four parts: Exterior, Animation, Mask Settings, and Event.
Enable Component: You can enable or disable the Mask Component by adjusting the toggle switch under the "Exterior" parameters (enabled by default).
The usage of other parameters is the same as regular layers and will not be further explained here. Please note that when adjusting the exterior parameters of the Mask Component (such as position and size), all layers within the component will change accordingly.
The animation set here applies to the entire Mask Component.
The specific usage is the same as regular layers and will not be further explained here.
A "Mask Component" should include at least one "Masking Group."
The "Mask Group" (Mask Settings) consists of three parts: Mask Shape, Masking Group, and Custom Group (optional).
Please Note: "Mask Settings" are the core parameters of the Mask Component, so please make sure to complete the settings for each part.
Add New: Support adding a new Mask Group by entering a new Mask Group name.
Add Animation: You can add animations to the Mask Group, and the animation will affect all elements within the group once added.
Show/Hide: You can adjust the visibility of the Mask Group, which applies to all elements within the group (default is visible).
Shape：The range covered by the Mask Shape, the images within the Masking Group are displayed, and the parts not covered by the mask are not shown.
The Mask Shape can choose 'Rectangle' or 'Circle', and can adjust its 'Exterior', 'Animation', and 'Event' parameters.
Exterior：Adjust the position&size, scale, and rotation of the shape.
Animation：You can set animations for the shape.
Event：You can set events for the shape. (You can set a 'Drag' event, making the material movable in the actual trial play.)
You can click "Preview Mask Effect" to preview the position and size of the current Mask Shape within the canvas.
Follow Element (optional): After setting a Follow Element, you need to add a "Drag" event to the shape. Once set up, the Follow Element will move synchronously with the dragging of the shape.
You can add multiple images as the 'Follow Element' of the shape. By clicking the "+" button on the right side and selecting from the asset library.
You can click to adjust its "Exterior," "Animation," and "Event" parameters, just like with regular layers.
The images within the "Masking Group" will be displayed only within the coverage area defined by the "Mask Shape," while the portions outside the coverage area will be hidden.
You can add multiple masking elements by clicking the "+" button on the right side and selecting from the asset library.
You can click to adjust its "Exterior," "Animation," and "Event" parameters, just like with regular layers.
The "Custom Group" as part of the Mask Component, can scale and adjust position along with the Mask Component, but is not affected by the mask and will not be masked. (For example, you can add a black-and-white base image corresponding to the "Masking Group" into the custom group. When the "Mask Shape" covers the "Masking Group," it displays the colored image of the "Masking Group," while other parts display the black-and-white base image.)
Users can decide whether to add the "Custom Group" based on their creativity and needs.
The unique response events for the Mask Component include：Enable/Disable Mask Component, Enable/Disable Mask Groups, Show/Hide Mask Groups, Show/Hide Groups, Show/Hide Mask Effect.
You need to choose to enable/disable.
If disabled, it is equivalent to disabling all Mask Groups, and the events of all mask layers and masked layers under the mask group will not take effect.
You need to choose to enable/disable.
If disabled, the events of all mask layers and masked layers under the Mask Group will not take effect.
You need to choose to show/hide a specific Mask Group.
Upon selection, all elements within the chosen Mask Group will be shown or hidden.
You need to choose to show/hide a specific Group.
Upon selection, all elements within the chosen group will be shown or hidden.
You need to choose to show/hide a specific Mask Group.
If the mask effect is enabled, the Masking Group will be affected by the Mask Shape and displayed. If disabled, the Masking Group is not affected by the Mask Shape and is displayed directly.
Sample1 -
Sample2 -
Sample3 -
Sample4 -
