85 lines
2.5 KiB
Markdown
85 lines
2.5 KiB
Markdown
# Unreal Outliner Control
|
|
|
|
A Vite + React + TypeScript web app that mirrors the Unreal Editor Outliner for the currently open world.
|
|
|
|
The app prefers Unreal Remote Control's WebSocket server, then falls back to HTTP when the socket is unavailable.
|
|
|
|
By default it connects to:
|
|
|
|
```text
|
|
ws://127.0.0.1:30020
|
|
```
|
|
|
|
When WebSocket is available, the app sends Unreal's Remote Control `http` WebSocket message type and tunnels the same HTTP route:
|
|
|
|
```http
|
|
PUT /remote/object/call
|
|
```
|
|
|
|
The HTTP fallback request goes through Vite's dev proxy and targets `http://127.0.0.1:30010/remote/object/call` by default. Both transports call:
|
|
|
|
```json
|
|
{
|
|
"objectPath": "/Script/UnrealEd.Default__EditorActorSubsystem",
|
|
"functionName": "GetAllLevelActors",
|
|
"parameters": {},
|
|
"generateTransaction": false
|
|
}
|
|
```
|
|
|
|
Selecting an actor also loads a Details pane using:
|
|
|
|
```http
|
|
PUT /remote/object/describe
|
|
PUT /remote/object/property
|
|
```
|
|
|
|
The property request uses `READ_ACCESS` and omits `propertyName`, which asks Unreal for all readable properties exposed on that UObject.
|
|
|
|
Details payloads are cached in browser `localStorage` for five minutes per object path. When you reselect an object, cached properties render immediately and the app refreshes them from Unreal in the background.
|
|
|
|
Asset-looking property values also request `/remote/object/thumbnail` and cache thumbnail data in `localStorage`, so mesh/material fields can render closer to Unreal's Details panel.
|
|
|
|
## Run
|
|
|
|
Start Unreal Editor, enable the Remote Control API, and make sure it is listening on `127.0.0.1:30010`.
|
|
|
|
Then run:
|
|
|
|
```bash
|
|
npm install
|
|
npm run dev
|
|
```
|
|
|
|
Open:
|
|
|
|
```text
|
|
http://127.0.0.1:5173/
|
|
```
|
|
|
|
If your Unreal Remote Control HTTP server is on another URL:
|
|
|
|
```bash
|
|
set UNREAL_REMOTE_URL=http://127.0.0.1:30010
|
|
npm run dev
|
|
```
|
|
|
|
If your Unreal Remote Control WebSocket server is on another URL:
|
|
|
|
```bash
|
|
set VITE_UNREAL_WS_URL=ws://127.0.0.1:30020
|
|
npm run dev
|
|
```
|
|
|
|
## Useful UI Libraries
|
|
|
|
For an Unreal-like outliner, a custom tree/table gives the closest visual match because Unreal's Slate UI is not available as a web component.
|
|
|
|
Good libraries if the app grows:
|
|
|
|
- `react-arborist` for a performant tree with drag/drop and renaming.
|
|
- `@tanstack/react-table` plus `@tanstack/react-virtual` for a large outliner with resizable columns and virtualization.
|
|
- `ag-grid-community` if you want a full data-grid with tree data, sorting, filtering, and column tooling.
|
|
|
|
This first version keeps the UI custom so it can look closer to the Unreal Outliner screenshot.
|