About Me
May Popup System Documentation

by MayStudios Company

Table of contents
Introduction
The May Popup System is a comprehensive, Blueprint-based tool designed to create and manage popups and notifications within Unreal Engine. It offers a simple yet powerful way to integrate dynamic and interactive notifications into your projects. This system is fully customizable, making it suitable for both beginners and experienced developers. With the May Popup System, you can create engaging user interfaces that keep your audience informed and engaged.
Overview
Key Features:
1
Fully Customizable Popups and Notifications
Create tailored popups and notifications with various themes, colors, and sound effects.
2
Simple Settings Configuration
Use the built-in settings menu to configure default widgets, themes, and sounds.
3
Interactive Notifications
Enable clickability on notifications and respond to user actions.
4
Progress Bar
Add a progress bar for timed notifications.
5
Example Project
Utilize the included example project to test system features and quickly integrate them into your own project.
Installation
Installing the May Popup System is a straightforward process. Begin by downloading the plugin from the Unreal Engine Marketplace or the official May Popup System website. Once downloaded, follow these steps to integrate it into your project:
Step 1: Installation
  1. Download the May Popup System from the Unreal Engine Marketplace and add it to your project.
  1. Open your project in Unreal Engine.
  1. Navigate to the folder where the May Popup System is stored within the Content Browser.
Step 2: Setup where the Notifaction Spawns
  1. Add the WB_MayNotifaction_Panel to your Main HUD or Main Widget.
  1. Deside where the Notifactions should show up.
  1. Set it so Size to Content so it dynamicly changes the size to the number of Notifactions.
  1. Also set the Aligment to 1×1 so it points left up.
Step 3: Basic Configuration
  1. Open the MayPopUp_DefaultSettings file (DataAsset) located in the MayPopUp/MayPopUp_Settings Folder of the project.
Adjust the following parameters:
  • Default Type
  • Set the Default Type to either "General" or any other available option based on your project's requirements.
  • Default Theme
  • Choose between "Dark" and "White" for the Default Theme. You can also create and select custom themes if needed.
  • Notification Duration
  • Define the Default Duration for how long a popup notification will be displayed.
  • Note: Setting the duration to -1 will make the popup display indefinitely until manually dismissed.
  • Color Types and Color Themes
  • Color Types: Define color schemes for different types of notifications. The available types include:
  • Error: Set the color for error messages.
  • Warning: Define the color for warnings.
  • System: Choose a color for system-related messages.
  • Friend System: Assign a color for notifications related to friends or social features.
  • General: Set the default color for general notifications.
  • [Your Own]: Add your own standard types
  • Color Themes: Customize the overall color themes of the popups:
  • White: Set the color scheme for the light theme.
  • Dark: Define the color scheme for the dark theme.
  • [Your Own]: Add your own standard themes
  • Sound Settings
  • Default Sound Notification on Popup: Select the default sound that plays when a popup appears.
  • Default Sound on Clicked: Choose the sound that plays when the popup is clicked.
  • Default Sound on Closed: Assign a sound for when the popup is closed.
  • Font
  • Font: The basic font used is Roboto. If you wish to use the font shown in the showcase, it is Fjalla One. Unfortunately, I was unable to include it in the project on the marketplace due to licensing restrictions under the Open Font License. However, you are welcome to use it for your own projects. You can download Fjalla One here.
New Themes and Types
Open the Enum Files
Navigate to the MayPopUp folder in the Content Browser, then open the Enum subfolder within the Classes folder. You'll find two Enum files: E_MayPopUp_Type (for Types) and E_MayPopUp_Theme (for Themes).
Add a New Type or Theme
Open the relevant Enum file, and then click the + Add Enumerator button at the top to create a new entry. Give this new entry a name that clearly represents the Type or Theme you're adding. For instance, you might name it "Achievement" if you're adding a new Type, or "LightBlue" if you're creating a new Theme. This name will be used to identify your custom Type or Theme within the system.
Link the New Type or Theme to a Color
Open the MayPopUp_DefaultSettings Data Asset located in the Settings folder. In the Colors section, expand either Color Types or Color Themes, depending on what you added. Click the + button to add a new map element. Then, select your newly created Type or Theme from the Enum in the dropdown menu, and assign it to a specific color by choosing the desired color from the color picker. This links your custom Type or Theme to the chosen color.
Save Your Changes
After linking the Type or Theme to a color, save the Data Asset. Your new Type or Theme is now ready to be used with the assigned color in the May Popup System.
  • notification
Detailed Overview of Public Nodes in the MayPopUp System
The MayPopUp System includes several public nodes designed to provide flexibility and ease of use for integrating dynamic popups and notifications into Unreal Engine projects. Below is a detailed breakdown of each node, including their sub-features and potential use cases.

1. Send Notification (custom)

This node allows you to create and display notifications with various customizable options: Title: Define the main title of the notification. Description: Provide additional details within the notification. Icon: Attach an icon to visually represent the notification's content. Duration and Closable: Similar to the Send Notification node, you can set the duration and determine if the notification can be closed. Colorize by Type Color: Automatically apply a color to the given Icon based on the notification Type. Type & Theme: Select a visual theme or type from the E_MayPopUp_Theme & E_MayPopUp_Type Enum to style the popup. Override Type & Theme: Optionally override the default theme settings. (If you enable the override, the color underneath) Sounds: With the Sound option you can override the default sound, if you dont select one default sound from MayPopUp_DefaultSettings. Font: Which Font is used in Title and Description.

2. Send PopUp (custom)

This node triggers a popup with extensive customization options, ideal for drawing attention to important messages: Title: Define the main title of the popup. Description: Provide additional details within the popup. Icon: Attach an icon to visually represent the popup's content. Duration and Closable: Similar to the Send Notification node, you can set the duration and determine if the popup can be closed. Colorize by Type Color: Automatically apply a color to the given Icon based on the notification Type. Type & Theme: Select a visual theme or type from the E_MayPopUp_Theme & E_MayPopUp_Type Enum to style the popup. Override Type & Theme: Optionally override the default theme settings. (If you enable the override, the color underneath) Actions: Define interactive elements or buttons within the popup. More About Sounds: With the Sound option you can override the default sound, if you dont select one default sound from MayPopUp_DefaultSettings.

3. Send Notifaction

This node triggers a notifaction with given Values by a Data Asset, to maintain the same style in the whole project: Title: Define the main title of the popup. Description: Provide additional details within the popup. Icon: Attach an icon to visually represent the popup's content. Data Asset: All Values which controll the type of Notifiaction are given by a one time created Data Asset, to maintain the same style in the whole project. If you wanna know more about how to create such Data Assets, just take a small look in "Using Data Assets" Area.

4. Send Pop Up

This node triggers a pop up with given Values by a Data Asset, to maintain the same style in the whole project: Title: Define the main title of the popup. Description: Provide additional details within the popup. Icon: Attach an icon to visually represent the popup's content. Actions: Define interactive elements or buttons within the popup. More About Data Asset: All Values which controll the type of Notifiaction are given by a one time created Data Asset, to maintain the same style in the whole project. If you wanna know more about how to create such Data Assets, just take a small look in "Using Data Assets" Area.

5. Get Theme Color

This node retrieves the color associated with a specific theme, which is defined in the MayPopUp_DefaultSettings, facilitating dynamic theming: Use Case: Useful for dynamically adapting UI elements to match the selected theme, ensuring visual consistency. Theme Selection: Choose from the E_MayPopUp_Theme Enum to get the corresponding color. Color Output: Outputs a Linear Color that can be used to style widgets, backgrounds, or text.

6. Get Type Color

This node retrieves the color associated with a specific type, which is defined in the MayPopUp_DefaultSettings, facilitating dynamic typing: Use Case: Ideal for maintaining color schemes across notifications or UI elements based on the Type. Type Selection: Choose from the E_MayPopUp_Type Enum to get the corresponding color. Color Output: Outputs a Linear Color that can be used to style widgets, backgrounds, or text.

7. Linear Color Scale

This utility node adjusts the intensity of a given color by applying a scaling factor: Practical Usage: Perfect for creating visual feedback effects, like hover states or alerts, by adjusting color brightness. Input Color: Provide a Linear Color to be scaled. Scale Factor: Define a float value to increase or decrease the color's intensity. Output Color: Returns the scaled color, ready to be used in UI or effects.

How to use?
The May Popup System is intuitive, utilizing a simple, node-based approach. Nodes represent various actions or data sources, linked together to create popup workflows.
Each node offers a specific function, allowing you to customize popup behavior and appearance. Understanding the roles of different nodes is crucial for effective system use.
How to create a Pop Up with two Buttons?
How to create a Notifiaction with two Buttons?
Using Data Assets
In the May Popup System, Data Assets are essential for creating consistent and reusable notifications and popups. There are two primary Data Asset types you will work with:
  1. PDA_May_Notification: This is used to create Data Assets specifically for notifications.
  1. PDA_May_Popup: This is used to create Data Assets tailored for popups.
These assets allow you to predefine various elements such as icons, durations, sounds, and colors, making it easy to implement uniform notifications and popups throughout your project.
Step-by-Step: Creating a Notification Data Asset
  1. Create the Data Asset:
  • Navigate to your project and create a new Data Asset using the PDA_May_Notification class. This will serve as the template for your notifications.
  1. Configure Closeable Option:
  • Purpose: Decide whether the notification can be closed manually by the user.
  • Usage: Set the Closeable option to true to enable a close button.
  1. Set the Default Icon:
  • Purpose: Define the icon that appears with the notification by default.
  • Usage: Choose an appropriate icon for the notification type, such as an exclamation mark for warnings. This can be overridden during method calls if needed.
  1. Colorize by Type Color:
  • Purpose: Automatically colorize the icon based on the notification type.
  • Usage: Enable this option to match the icon color with predefined type colors (e.g., red for errors).
  1. Define Duration:
  • Purpose: Set how long the notification should stay visible.
  • Usage: Enter -1 for an infinite duration or specify a duration in seconds. You can also check "Use Default Duration" to apply a system-wide default.
  1. Configure Sounds:
  • Sound on Notification: Play a sound when the notification appears.
  • Sound on Clicked: Play a sound when the notification is clicked.
  • Sound on Closed Clicked: Play a sound when the notification is closed.
  1. Set Colors and Themes:
  • Type Color: Choose a color that represents the type of notification.
  • Override Type: Enable this to set a custom type color, overriding the default.
  • Theme Color: Set the overall theme, affecting background and general color scheme (dark/light mode).
  • Override Theme: Allows overriding the default theme color with a custom one.
Step-by-Step: Creating a Popup Data Asset
  1. Create the Data Asset:
  • Similar to notifications, create a Data Asset using the PDA_May_Popup class.
  1. Configure Closeable Option:
  • Purpose: Allows the popup to be closed by the user.
  • Usage: Enable Closeable to add a close button to the popup.
  1. Set the Default Icon:
  • Purpose: Define the default icon for the popup.
  • Usage: Select an icon that suits the purpose of the popup, like an info icon for informational popups.
  1. Colorize by Type Color:
  • Purpose: Apply type-based colorization to the popup icon.
  • Usage: Enable this to ensure the icon reflects the popup's category through color.
  1. Set Duration:
  • Purpose: Determine how long the popup remains on screen.
  • Usage: You can choose a specific duration or opt for the default system duration.
  1. Configure Sounds:
  • Sound on Popup: A sound played when the popup is shown.
  • Sound on Clicked: Sound for when any popup button is clicked.
  • Sound on Closed Clicked: Sound that plays when the popup is closed.
  1. Set Colors and Themes:
  • Type Color: Defines the popup’s type color.
  • Override Type: Overrides the default type color for a custom choice.
  • Theme Color: Select a theme color for the popup.
  • Override Theme: Customizes the theme beyond the preset options.
Using Data Assets in Your Methods
To utilize these Data Assets, you will typically call methods like SendNotificationDataAsset or SendPopupDataAsset. These methods can take parameters such as Title, Description, Icon, and the Data Asset itself. If an icon is specified during the method call, it will override the icon set in the Data Asset. If no icon is specified, the system will use the icon defined in the Data Asset, or if that is also absent, it will fall back on the system default.
This flexible structure allows for a streamlined approach to managing both notifications and popups across your project, ensuring consistency while also providing the ability to customize when necessary. By understanding and leveraging these Data Assets, you can create a highly responsive and user-friendly interface.
Example Project and Demo
The May Popup System includes a detailed example project that demonstrates various use cases, including:
1
Quest Notifications
How to display a completed quest and reward through a notification.
2
Friend Requests
Display a new friend request as a popup.
3
Error Warnings
Demonstrates the use of the system to show error messages and warnings.
Accessing the Example Project
  1. Navigate to the Example folder within the May Popup directory.
  1. Open the sample maps, such as L_Example_MayPopUp, and explore the predefined scenarios.
  1. Experiment with the Data Assets to gain a better understanding of the system's customization options.
Troubleshooting
Common Issues and Solutions
1
Notification Not Displaying
Ensure the MayPopup widget is correctly anchored in the UI widget, and the CreateNotification function is called properly.
2
Missing Sound Effects
Verify that the sound files are correctly assigned and that the volume in the sound cue is not set to zero.
3
Icons Not Appearing
Ensure the icon is in the correct format (e.g., PNG) and that the path in the Data Asset is accurate.
Get Support
  • If you have any questions or need assistance, feel free to ask on the Marketplace. The community is always happy to help.
  • You can also contact me directly by email at [email protected]. I'll be glad to address your concerns and provide guidance.
  • For more real-time help, consider joining the Discord server to chat with other users and get quick responses from me.
  • If you prefer a more personal touch, you're welcome to reach out to me directly on Discord (username: svenni_). I'll do my best to assist you or point you in the right direction.
  • Before reaching out, be sure to check the documentation for troubleshooting tips and helpful information. Many common issues are covered there.
  • If you're still experiencing problems after trying the above options, please don't hesitate to contact me. I'll investigate the issue and work to resolve it as quickly as possible.
Updates
  • I will update the Asset in the Future. As a single user, I am responsible for maintaining and improving this asset over time.
  • In the coming months, I plan to add new features and functionality to enhance the user experience. This may include updates to the core code, additional configuration options, or improvements to the documentation.
  • I am committed to keeping this asset up-to-date and relevant. If you have any feedback or suggestions, please don't hesitate to reach out. I'm always eager to hear from the community and incorporate their ideas.
  • Together, we can work to make this asset even better. I look forward to collaborating with you and continuing to develop this project in the future.
Made with