Input and Password Boxes

The Input Box and Password Box objects are essential interactive elements that allow users to type text directly into your Custom Game Launcher interface.

While the Input Box is used for standard text entry (like usernames, server IPs, or search queries), the Password Box functions identically but visually masks the characters as they are typed to ensure privacy. Together, they are the backbone of any login screen, configuration panel, or custom data entry form.

Input & Password Box Overview

These objects create a single-line text field. When a user clicks inside the box, it gains focus, allowing them to type, paste, or delete text. You can fully customize the typography, colours, and borders to ensure the input fields blend seamlessly with your Custom Launcher's design.

Typical Uses

• Account login screens (Username and Password entry)
• Registration forms
• Custom server IP and port entry
• Redeeming license keys or promo codes
• Search bars for server browsers

Default Settings

When created, both objects start with sensible dark-theme defaults and placeholder text to guide the user. You can easily adjust these to match your specific layout.

Properties

You can fine-tune exactly how the input fields look and behave using the properties panel.

Content & Variables

• Placeholder Text: The hint text shown when the textbox is empty. This disappears as soon as the user starts typing.
• Store Input In Variable: This is a powerful feature. Entering a variable name here (e.g., input_username) will automatically store whatever the user types into that Global Variable. You can then use this variable in your action sequences or write it to a file.

Colors & Typography

Control the exact look of the text and the box itself:

• Text Color & Background Color: Defines the internal fill and the typed text.
• Font Family, Size, and Weight: Customize the typography to match your branding.
• Text Align: Choose whether the text aligns to the left, center, or right.

Border

• Corner Radius: Controls the roundness of the input box corners.
• Border Width & Color: Defines the thickness and color of the outline.

Input Events

Input and Password boxes feature specific events that trigger based on user focus and typing activity.

On Value Change

Fires whenever the text inside the box changes. This happens on every keystroke, when pasting text, or if the value is updated programmatically.

On Enter Pressed

Fires when the user presses the Enter/Return key while actively typing in the field. This is perfect for submitting a login form or triggering a search without forcing the user to click a separate button.

On Focus & On Blur

On Focus triggers when the user clicks into the field to start typing. On Blur triggers when the field loses focus (e.g., the user clicks away). These are useful for animating other UI elements when the user interacts with the form.

Input Box Actions

Because these are Developer Edition objects, you can manipulate Input and Password boxes dynamically using Advanced Actions.

Push to Variable

While the Store Input In Variable property handles real-time syncing, the Push to Variable action allows you to grab a specific property from the Input Box on demand (like when a "Save" button is clicked) and push it into a Global Variable.

Set Object Property from Variable

This action works in reverse. It allows you to take data stored in a Global Variable and inject it directly into the Input Box. For example, you can target the text property of your Input Box to auto-fill a user's name.

Visibility & Layout Actions

Like all visual objects, Input Boxes support standard layout actions. You can use Show Objects, Hide Objects, Move Object, and Resize Object to create dynamic forms that expand, collapse, or rearrange based on user choices.

Building Logic with Inputs

By combining Events and Actions, you can make your Custom Game Launcher highly intelligent and responsive. Here are a few ways to wire them up:

Creating a "Remember Me" Auto-Fill

If you want your launcher to remember a player's username, you can build a sequence that loads it automatically:

1. On the On Launcher Start global event, use the Set Variable from INI File action to read the saved username into a variable.
2. Next, use the Set Object Property from Variable action, targeting your Input Box's text property, using the variable you just loaded. The input box will now be pre-filled when the launcher opens.

Triggering a Login on "Enter"

Instead of making users click a "Login" button, you can streamline the process:

1. Select your Password Box object.
2. Go to the On Enter Pressed event.
3. Add the Launcher: Query Login action to this event. When the user types their password and hits Enter, the launcher will immediately attempt to log them in.

Custom CSS Example

You can use Custom CSS to create modern focus states, such as a glowing outline when the user clicks into the input field.

 transition: all 0.3s ease !important;
 border: 1px solid #374151 !important;
 border-radius: 8px !important;
 /* Target the wrapper when it is focused or hovered */
 :hover {
 border-color: #4b5563 !important;
 }
 :focus-within {
 border-color: #3b82f6 !important;
 box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25) !important;
 }
 

The :focus-within pseudo-class is incredibly useful here, as it applies the glowing border to the input's wrapper whenever the user is actively typing inside it.

Summary

Whether you are building a simple player name entry or a full-scale secure authentication system, the Input Box and Password Box objects provide the necessary interface elements. By utilizing their built-in variable mapping, powerful events, and dynamic actions, you can easily capture user data and feed it into the rest of your Custom Launcher's logic.