Quick Start
Create a menu in Studio, show it in Unreal, and connect its first button.
Use this guide after installing Studio and the plugin. It is the recommended first route. Complete it before adding Store data, translations, custom assets, or advanced layers.
1. Open or create the project
In Unreal, choose Tools → CalmUI Studio. If Studio shows Welcome, choose Connect running Editor and select your Unreal project. For an existing CalmUI folder, use Open Project….
If this is your first CalmUI project and Studio does not prepare one from the connection, choose New Project → Game UI Starter, select its parent folder, and then link the open project from Unreal → Connection.
See Connect Unreal if the project is not listed or does not reach Connected.
2. Create a View
Choose a package, click + beside Views, and create MainMenu.
A package is a group of Views loaded together. A View is a complete interface;
Unreal's Blueprint nodes call it a Screen.
3. Add a button
Use Create a component to add a reusable
MenuButton, or add a <button> directly in the View source. Edit its CSS to set
spacing, color, and size. Inspector links to the source and shows measured values.
Double-click the View or use Show … in Preview to display it. Opening another source file with one click leaves the Preview target unchanged.
4. Save and send to Unreal
Press Ctrl+S. If Problems reports an error, correct it and save again. Wait for the connected package to show Up to date. A local-only build is a Studio project state, not an imported Unreal package, until that sync completes; check Tasks if synchronization fails.
5. Open it from Blueprint
Follow Show your first screen. The core sequence is:
Connect the Player Controller, choose the imported package, and select MainMenu from Screen. Compile and play the level. The menu should appear.
6. Make the button do something
Follow Make a button run Blueprint to connect Exit to Quit Game. That guide creates the action in Studio, binds the button, and sets up the exact Blueprint event.
Start the listener from Completed, after the package is loaded. Opening the View alone does not make its buttons execute game logic.
Continue toward a production screen
Keep the same View and package while you add one concern at a time:
- Define Store fields for values owned by the game and Action Contracts for requests sent back to it.
- Add images, fonts, and project SVGs, or use the searchable built-in icon catalog.
- Declare player-facing text with
$loc, then prepare and check the Unreal translations. - Test focus and gamepad navigation, including disabled controls and the first focus target of every modal.
- Choose the correct View layer and input policy. Follow the overlay and tooltip guide, and use backdrop blur only where its GPU cost is justified.
- Run responsive and UI tests, record the real target in Profiler, follow the packaging checklist, and finish with the Shipping checklist.
Studio Preview is the fastest authoring check. Unreal Play and a packaged build remain the final evidence for gameplay input, host assets, localization, rendering, and platform performance.
Advanced: initialize before the View opens
Use Load CalmUI Package when the first frame must already contain game values or action listeners. From Completed, set the initial Store values, start listeners, and then call Open CalmUI Screen with the same Player Controller and package. The shorter Open node remains the recommended route for an ordinary first menu.
If the result differs between Studio and Unreal
First confirm the package is Up to date and that Blueprint continues from Completed. Then check the exact asset mapping, packaged culture, Store field reference, and active input policy. Use Common Problems for symptom-based checks; do not replace authored CSS or bypass the package to hide a runtime error.