LogoLogo
API Status
  • 👋Welcome
  • 🌐What is Morpheus Platform?
    • Interoperability
  • â„šī¸Help
    • 📗Glossary
    • 🆘Support
    • Firewall problems
    • EULA
  • CREATION
    • 🎮Unreal Development
      • ⚡Get Started
        • âš’ī¸Download the Editor
        • âĢUpload Content
        • 🌎Creating your own map
        • 📝Morpheus Base Project
        • ❓Differences from Unreal
          • 🧍Character Configuration
        • 📡Morpheus Networking
          • Introduction to Morpheus Networking
          • Network Levels
          • Replicated Properties
          • RPCs
          • Morpheus Render Targets
          • Morpheus Array
          • Networking FAQ
          • Replicating Sublevels
      • 📚Features & Guides
        • 📒Example Plugin
          • Nameplates
          • In-game roles
          • Resizing
        • 🏊Actor Pooling
        • 🔊Audio
        • 🎭Avatars
          • Creating an Avatar
          • Attachments
            • MML Attachments
          • Custom Animation Variables
          • Importing an NFT collection
          • Capsules and Mesh Transforms
        • 🤖Bots
        • đŸŽ™ī¸Chat
          • Unreal Text Chat
        • đŸŽ›ī¸Control Panels
          • Control Panel Configuration
          • DJ booth mission control
          • Observer Controls
        • 🔉Crowd Audio
        • đŸ¤ŧCrowd Rendering
          • Legacy Animated Crowd
            • Animated Crowd Console Commands
            • Attaching static meshes to crowd members
          • Crowd Materials
          • Performance Parameters
          • Live Config Settings
          • Crowd Animation
            • Crowd Anim Blueprint
              • User Guide - Crowd Anim Blueprint
              • Reference Guide - ABP Nodes
                • Animation Playback
                • States and State Machines
                • Variables
                • Transitions
                • Special
                • Blends
                • Additional Notes
        • 🍱Helpers & Extras
          • "Instanced Objects" in Blueprints
          • Objects with "world context"
          • Making DataAsset classes
          • Duplicate Objects
          • The Bootflow Subsystem
          • The "Wait For Condition" System
          • Advanced Graphics settings
          • Listening to inputs on UObjects
          • Morpheus UserID
          • World Services
          • M2Extras: Skins System
        • đŸ–Ĩī¸Loading Screen
        • ⚡Live Config
          • Editing for a World
          • Editing Locally
          • Default Settings
          • Accessing via Blueprint
          • Adding New Settings
          • Overriding Defaults
          • Using Arrays
        • 🧊MML
        • đŸ•ēMotion Capture
        • 📡Networking
        • đŸ“ĸNotifications
        • Raycastable Crowd
        • 🌐Singletons
        • 📱Streaming & Multiplatform
          • GFN on mobile
        • đŸ–Ĩī¸UI
          • "UI Mode"
        • đŸ—ƒī¸User Collections
          • Creating a New Object Definition
          • Accessing from Unreal
            • Creating Objects Definitions
            • Transfer Objects
            • User Collection Views
            • Receiving Updates
        • đŸ“ēVideo Players
          • Embedded Video Player
          • Millicast video streaming
            • How to Setup an In-Game Video Stream
            • Picture-in-Picture mode
          • Streaming Video Player
            • How to Setup a URL Video Player
            • Picture-in-Picture mode
        • 🐞Visual Debugging
          • Inspector
        • đŸĒŸWeb UI
        • Online Services
          • KV Store Service
        • 💠Web Requests
          • Http Requests
            • Legacy HTTP Nodes
          • JSON Handling
          • WebSockets
          • Identity Validation
          • Allowed External URLs
          • Walkthrough Example
            • Example Counter Service
        • âœˆī¸World Travel
          • World Travel in the editor
        • Avatar Physics Assets
        • Action Gameplay Helper Components
      • 🔑Workflows
        • â†—ī¸Upgrade the Editor
          • đŸ–Ĩī¸Version History
        • âš™ī¸Editing Project Settings
        • 📈Profiling
        • đŸ§ēMarketplace Importing
        • đŸ› ī¸Extra Workflows
          • Setup Play-in-Editor
          • Setup Local Asset Validation
          • Adding Gameplay Tags
          • Validating Game Assets
          • Custom Connection Modes
          • Connect Editor to a World
          • Common Issues
      • 📚Useful Reading
        • ⭐Best Practices
    • 🌎Worlds
      • 📩Invite Players
        • Setting Role Groups
      • Persistent Worlds
      • Always on Worlds
    • 📅Running events
      • ✅Large scale events - Checklist
      • 👾Anti-Cheat (EAC)
      • 🎮Player Entry
        • 📱React Native
        • Steam
        • đŸ’ģHardware Reqs
      • đŸŽĨBroadcast
        • 📹OBS Integration
      • Failover
      • 🏁Capacity And Queue Management
  • ADMINS
    • đŸ‘ĒAccess Control
      • Adding metaverse contributors
      • Creating a new project
    • 💲Pricing
      • Development Support
      • Included Usage & Overages
      • Cloud Streaming
      • Access Modes
      • War Room Support
      • Platform SLA
    • âš™ī¸Settings
      • đŸ—ƒī¸Projects
  • APIs and Tooling
    • đŸ–Ĩī¸API Reference
      • Accounts
      • Events
      • Key/Value Store
      • Organizations
      • Realtime
      • User Profile
      • World Builder
      • Worlds
    • đŸ’ģTemplate Web App
      • đŸ’ĸModeration
    • Pixel Streaming
    • 🚀Launcher
  • Integrations
    • 📊Analytics
      • Sending events from web
      • 🎮Sending Events from Unreal
    • đŸ’ŦChat
      • 🎮Integrating Pubnub with your Unreal Project
      • Adding Moderation to Chat
Powered by GitBook
On this page
  • How to configure a skin
  • Searching the skin asset
  • How to use the skin
  • The Skin Manager
  • The Skin Function Library
  • An example in action (WBP_ExampleSkinnedWidget)

Was this helpful?

  1. CREATION
  2. Unreal Development
  3. Features & Guides
  4. Helpers & Extras

M2Extras: Skins System

Outlining a basic example system for how to make UI skins

PreviousWorld ServicesNextLoading Screen

Last updated 4 months ago

Was this helpful?

We have a M2Extra plugin (disabled by default) that provides an example of how to add a skins system to your project, that allows you to set some "skin data" that can be reacted to by your UI.

NOTE: This is just an example of how one could make a skins system entirely using Blueprints, and may not be fit for every purpose. Feel free to use this as reference, or modify it for your project as you see fit!

If you want to enable the plugin, you can find it in Plugins -> Installed -> MSquared -> M2 Extras: Skins System

How to configure a skin

Using Making DataAsset classes, we have made a BP_SkinDataAsset class, that extends M2_DataAsset.

In this, we can create instanced object properties (see "Instanced Objects" in Blueprints) that contain the various skin settings we want to be associated with the skin (in the example, we have made a single BP_ExampleSkinSetting which has 2 colours: one for the background, and one for the font)

With the data asset class made, we can make data assets from that base class, and modify the values for the settings we have created. These will be the different "skins".

Searching the skin asset

To search the skin asset for the right instanced object, we have added some helpers: GetSettingByClass and GetAllSkinSettings. With these, a user can search for e.g. our BP_ExampleSkinSetting from the asset.

How to use the skin

The Skin Manager

For the skins system to be used in your level, first you will need to place the skin manager into your level (BP_SkinManager).

This Skin Manager is the actor responsible for tracking the currently used SkinAsset.

The Skin Function Library

BPFL_Skins contains helper functions that enable a user (e.g. a widget) to e.g. get the current skin, or listen to updates:

  • GetSkinManager: Returns the skin manager.

    • NOTE: It must be manually added to the level for this to work.

  • GetCurrentSkinAsset: Returns the current skin asset being used.

    • If this is called in the editor (e.g. when previewing widgets), this will return the default value in the BP_SkinManager), using GetCDO

  • ListenToSkinUpdates: Will trigger a delegate when we have a skin, and any time the skin is updated. Can be used to initialize and also listen to updates.

An example in action (WBP_ExampleSkinnedWidget)

WBP_ExampleSkinnedWidget is the example widget packaged in M2Extras: Skins System. It shows how to listen to the skin asset correctly using the helper functions, both in Design time (where it will use the skin manager's default value), and at runtime, where it will use the latest value in the skin manager

🎮
📚
🍱
The example widget when the skin is set to the first example skin. The background color is black, and the font is white
The example widget when the skin is instead set to the second example skin. The background color has changed to white, and the font is now black (this can be previewed in the editor window)