Styles
Welcome to the Styles documentation page, where we dive into setting up various clickable styles in Unreal using the Emperia 3D Kit.
Getting Started
ClickableStyles are used to define the style of a clickable element in your application. They provide visual enhancements and additional capabilities to the existing Emperia 3D Kit Clickable Interaction types. This documentation explains the three supported ClickableStyle types- ImageStyle, AnimatedImageStyle and AnimatedVideoStyle.
Creating a Clickable Style Model Data Asset
To create a Clickable Style Model Data Asset in Unreal Engine, follow these steps:
- Right-click in the Content Browser.
- Go to Miscellaneous -> Data Asset.
- Search for "ClickableStyleModel" and select the type.
- Click "Create" to create the asset.
- The ClickableStyleModel Data Asset contains various configurations based on the ClickableStyle type. By default, it is set to AnimatedVideoType, but you can change that using the ClickableType dropdown.
Defining Clickable Styles
Animated Video Style Configuration
The style of animated video configuration is used to specify the types of clickable transparent videos. This type of style has following options:
Video Source | This field takes a reference to a UMediaSource asset that defines the video source. |
Renderer | Using this dropdown, you can set the default renderer for the video. It is set to "Auto" by default but can be changed to use "css3D" or "webGL". |
Scale | This field defines the uniform scale of the video. |
Capture | Toggle to enable or disable capture. |
Distorted | Toggle to enable or disable distortion. |
Animated Image Style Configuration
The style of animated image configuration is used to specify the types of clickable Sprite sheet animations. This type of style has following options:
Sprite Sheet | This field takes a reference to a Texture2D asset for the sprite sheet.. |
Speed | This field defines the frames per second (FPS) at which the sprite sheet is rendered |
Alpha | This field defines the alpha value of the image. |
Width of frame | This field defines how much width each frame occupies in the total image. |
Height of frame | This field defines how much height each frame occupies in the total image. |
Edge | Using this dropdown, you can define where the hotspot's start position is considered. It is set to "Center" by default but can be changed using the drop down. |
Scale | This field defines the uniform scale of the video. |
Capture | Toggle to enable or disable capture. |
Distorted | Toggle to enable or disable distortion. |
Image Style Configuration
The style of image configuration is used to specify the types of clickable images. This type of style has following options:
Image | This field takes a reference to a Texture2D asset for the Image. |
Alpha | This field defines the alpha value of the image. |
Edge | Using this drop down, you can define where the hotspot's start position is considered. It is set to "Center" by default but can be changed using the drop down. |
Scale | This field defines the uniform scale of the video. |
Capture | Toggle to enable or disable capture. |
Distorted | Toggle to enable or disable distortion. |
In Unreal, it's essential to configure the images with specific settings. The MipMap configuration should be set to "NoMipmaps," Compression should be set to "VectoreDisplacementRGBA8" / “UserInterface2DRGBA” and SRGB should be turned off. We configure the image in this manner to prevent any additional metadata from being added to the original Texture2D file.
To apply these settings to multiple textures simultaneously, you can utilize Scripted action features. To access this, simply select the textures to which you want to apply these changes, and then right click→ scripted actions→Set Emperia Texture Properties.
Note: The URL part of the Data Asset is not editable. Once you change the reference to the Media Source, Sprite Sheet, or Image fields in the Data Asset, they are uploaded to the server, and the URLs are generated automatically.
Applying Styles To Clickable Element
Once you have defined a clickable style, the next step is to apply it to a clickable element. To do this, you should select the Interactable Component, set the type to clickable, and then choose the desired style from the clickable style dropdown menu for application.
Visualizing Styles In Unreal
We now have the capability to visually assess styles within Unreal Engine using the style visualizer feature, which is accessible alongside navigation and clickable items. To enable this feature, you need to activate the "HasStyleVisualizerEnabled" option.
When you modify a clickable style asset, it is automatically updated. However, any changes made to previously assigned clickable styles cannot be instantly reflected. To address this, you can refresh or hide the Style Visualizer using the options provided in QSIC.
Additionally, if you want to refresh or hide all styles in the scene simultaneously, you can utilize the "RefreshAllVisualStyles" and "RemoveAllVisualStyles" options found in the BPCapture tool.
Help & Support
If you have questions, suggestions, or feature requests, please join the Official Emperia Discord channel!
You can find support here through private support tickets or general conversation. You will also have the opportunity to showcase your work and chat with like-minded individuals across industries using Creator Tools, Unreal Engine, those creating immersive experiences, and more!
If you prefer, you can also reach out to us via email.