Orion Station sample

A small offline space station: collect three energy cells, bring them to the terminal, and the mission is complete. The whole interface is made of web pages; the inventory, mission progress and settings belong to Blueprint.

On this page

Open the sample
What the interface shows
Controls
Main assets
Use it for your own interface
Frame rate settings

Open the sample

First download the dependencies.
In the Content Browser, turn on Show Plugin Content, open /OrionBrowser/Showcase/L_OrionBrowserOverview and click Play.

The separate sample project OrionBrowserTemplate just opens; its default map is /Game/OrionStation/L_OrionStation. To run the sample in another level, set the GameMode in World Settings to BP_OrionStationGameMode.

Figure 1The Overview page of the Orion Station sample. Captured in a browser, with the sample's own backdrop behind the page; in the game, the level shows through.

What the interface shows

Five pages and a mission HUD. Four themes (Obsidian, Nebula, Aurora, Paper) and three backdrops can be switched in Settings or in command search (Ctrl+K).

Obsidian (default) — Figure 2The same Overview page in the four themes. Captured in a browser, with the sample's own backdrop behind the page; in the game, the level shows through.

Page	Content
Overview	What the sample is, the mission state, and the way to every other page
Showcase	Ten rooms, each showing a group of plugin features or a web technique
Inventory	Items owned by Blueprint; select one to see its details
Settings	Change the values and click Apply; Blueprint saves them
Guide	The mission steps and the controls for the active device

Figure 3The Showcase (it opens on its first room, Motion), Inventory and Settings pages, and the command search opened with Ctrl+K. Captured in a browser, with the sample's own backdrop behind the page; in the game, the level shows through.

Figure 3The Showcase (it opens on its first room, Motion), Inventory and Settings pages, and the command search opened with Ctrl+K. Captured in a browser, with the sample's own backdrop behind the page; in the game, the level shows through.

Showcase room	Demonstrates
Motion	One surface turning into a button, a loader, a player, a slider, a chart and a command palette
Components	Buttons, switches, sliders, segmented controls and charts
Effects	Holographic foil, lens flare, flowing borders, sheen, neon and glass
Type	Live specimens of twelve fonts, with weight, size and tracking
Pavilion	A pavilion built with three.js, with day and night light, shadows and reflections
Cosmos	A solar system, a galaxy and a black hole on a transparent canvas, with the level behind them
Benchmark	An asteroid field with adjustable load, reading out frame rate and frame time
Media	Local video with sound, its own controls and a level meter
Input	Control sounds, input prompts, a key tester and IME text entry
Unreal	Native surfaces, a runtime image, WorldUI labels and a web browser

Components — Figure 4Six of the Showcase rooms. Captured in a browser, with the sample's own backdrop behind the page; in the game, the level shows through. The frame-rate readouts in the Pavilion and Cosmos pictures come from the software renderer used for the capture (no GPU); they say nothing about real performance.

Effects — Figure 4Six of the Showcase rooms. Captured in a browser, with the sample's own backdrop behind the page; in the game, the level shows through. The frame-rate readouts in the Pavilion and Cosmos pictures come from the software renderer used for the capture (no GPU); they say nothing about real performance.

Controls

Key	Action
WASD	Move in the level once the mission has started
E	Interact with the WorldUI card nearest the centre of the screen (collect, deposit)
I	Open or close the inventory
P	Open the menu or go back a page (use it instead of Escape in PIE)
Arrow keys	Move focus on menu pages
Ctrl+K	Open command search for pages, rooms, themes and common actions

Main assets

All in /OrionBrowser/Showcase:

Asset	Role
`L_OrionBrowserOverview`	The sample map
`BP_OrionStationGameMode`	The GameMode the sample uses
`BP_OrionStationController`	Owns the game state, validates the page's actions, publishes the state, saves, creates the interface
`WBP_OrionBrowserShowcase`	The widget that hosts the web interface and forwards its events to the controller
`DA_OrionBrowserShowcase`	The interface's App Definition
`BP_OrionEnergyCell`, `BP_OrionTerminal`	The energy cells and the terminal, with WorldUI interaction
`WBP_OrionWebsite`	A web browser that shows the website

Use it for your own interface

The page's source is in the plugin's Content/UI/WebUI/Showcase/src, to read alongside.
For your own interface, follow the wiring of WBP_OrionBrowserShowcase and create your own App Definition and widget. The quickest way is Tutorial 1: Build an interface with AI; the wiring step by step is in Tutorial 3.

Frame rate settings

The sample project caps the game at 60 FPS, leaving graphics time for both the web interface and the game, and turns on hardware-accelerated frame transfer (bUseAcceleratedPaint=True); see Tutorial 4. Both belong to the sample project only; installing the plugin does not change your project.

Do not leave your own game completely uncapped: when the game takes the whole graphics card, the web interface can stop updating. Set a limit with Get Game User Settings → Set Frame Rate Limit → Apply Non-Resolution Settings.