Customizing your launcher’s interface is a great way to engage users and add personal touches. One common feature is adding a button that links users to your Discord community. However, if not properly managed, this button could appear at inappropriate times, cluttering your UI.
In this tutorial, you’ll learn how to:
- Create a stylish Discord link button.
- Control its visibility across different launcher states for a polished user experience.
Why Managing Element Visibility Matters
A well-designed interface should adapt to user actions. A Discord button that’s always visible can obstruct important information, especially during sensitive tasks like updates or repairs. By controlling element visibility, you ensure that UI components appear only when relevant, keeping the interface clean and user-friendly.
Step 1: Creating the Discord Link Button
1. Add UI Elements
Start by adding the core components for your button:
- Button: Acts as the main container.
- Text: Displays the call-to-action (e.g., “Join Us on Discord”).
- Image: Holds the Discord logo.
How to do it:
- Use the Toolbar to create a Button, Text, and Image.
- In the Element Tree, hold Ctrl and drag the Text and Image into the Button.
2. Customize the Image
- Replace the placeholder image with a Discord icon (upload it if necessary).
- Set the Image Height to 100% to make it scale with the button.
- Leave the X, Y, and Width fields empty for responsiveness.
3. Style the Button
- Remove the Width and set the Height to a fixed size (e.g., 40px) for responsiveness.
- Adjust the Background Color and apply a Corner Radius for a sleek look.
4. Add Functionality
- In the Button’s Properties Panel, change the Command to Link - Open External.
- Paste your Discord invitation link into the URL field.
5. Style the Text
- Customize the button text (e.g., “Join Us on Discord”).
- Add Padding and adjust the Font Weight to make it stand out.
Tip: Use Simulation Mode to test the button and ensure it opens the Discord link.
Step 2: Managing Default Visibility
The Problem
By default, the button is visible in all launcher states, which can interfere with other UI elements.
Setting Default Visibility
To make the button appear only when the game is installed:
- Select the Button and find the Visibility setting in the properties panel.
- Set the Default Visibility to Invisible.
Result:
- The button becomes translucent in the Element Tree.
- All launcher states turn red, indicating the button is hidden by default.
Making the Button Visible in Specific States
To show the button only when the game is Installed:
- Locate the ‘Installed’ state in the states list.
- Click the eye icon next to it to make the button visible.
Step 3: Understanding Visibility Inheritance
How Visibility Inheritance Works
Visibility settings inherit from parent states. If the button is visible in the Installed state, it might also appear in related states like Update or Repair.
Solution:
- Manually toggle visibility for specific states like Uninstallation Failed or Moving Failed to keep the button hidden where necessary.
Icon Frames Explained
- Framed Eye Icon: Visibility is manually set (either visible or invisible).
- No Frame: Visibility is inherited from the parent state.
Tip: Right-click the eye icon to reset it to inherit visibility.
Step 4: Using ‘Current’ and ‘Any Task’ States
In the properties panel, you’ll notice options for Current and Any Task visibility:
- Current: Adjusts visibility for the currently active state.
- Any Task: Applies visibility settings during any active launcher task (like Installing or Updating).
Use these options for dynamic visibility control during ongoing tasks.
Conclusion
By following this tutorial, you’ve created a functional and stylish Discord link button and learned how to manage its visibility across different launcher states. This ensures your launcher remains clean, intuitive, and engaging for users.
Ready to take it further?
- Customize more buttons for different platforms.
- Experiment with visibility settings for other UI components.
Start enhancing your launcher today!
