Defining clickable styles
Welcome to the Styles documentation page, where we dive into setting up various clickable styles in Unreal using the Emperia 3D Kit.
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 Quickstitch 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.
The AR model allows you to visualize 3D models within the experience.
To create a new AR model, follow these steps:
- Right-click in the Content Browser.
- Go to Miscellaneous → Data Asset.
- Search for "ARModel" and select the corresponding type.
- Click "Create" to generate the asset.
- The AR Data Asset contains all necessary configurations for the AR Viewer.
Key | Description |
MeshURL | The URL or references for the 3D Mesh to display in the AR model. |
iFrame Model
The iFrame model allows you to embed websites or iframes within the experience.
To create a new iFrame model, follow these steps:
- Right-click in the Content Browser.
- Navigate to Miscellaneous → Data Asset.
- Search for "iFrame" and select the appropriate type.
- Click "Create" to generate the asset.
- The iFrame Data Asset contains all necessary configurations for the iFrame Viewer.
Key | Description |
URL | The URL or references for the web page to display in the iFrame model. |
Media Model
The Media model allows you to embed videos and images within the experience.
To create a new Media model, follow these steps:
- Right-click in the Content Browser.
- Navigate to Miscellaneous → Data Asset.
- Search for "Media" and select the appropriate type.
- Click "Create" to generate the asset.
- The Media Data Asset contains all necessary configurations for the Media Viewer.
Key | Description |
URLs | The URL or references for the Videos, Images to display in the Media model. |
Automated Action Model Creation Process
To streamline the process of creating action models, assets, and attaching them to interactables, we now support direct editing within the Details Panel of interactables placed in the scene.
Using the Action Type dropdown, you can specify the type of interactable action. Once selected, the relevant properties will appear below the dropdown for configuration. This automatically creates and attaches the corresponding action models and action type assets to the interactable, significantly reducing the number of steps required.
If you forget to save your action models or action type assets, you can simply clear the action models array on the interactable and make a slight modification to any Action Type property. This will automatically regenerate the entire asset.
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.