Ore UI

Ore UI
Developer(s)	Paulo Ragonha, Fernando Vía Canel, Marlon Huber-Smith, Anna Päärni, Oleg Kozitsyn, Danila Dergachev, Omar ElGaml, James Nicholls
Publisher(s)	Mojang Studios
Platform(s)	Same as in Bedrock Edition and Minecraft Education
Engine	Coherent Gameface
Written in	TypeScript and JavaScript
Latest version	React Facet: v18.5.0
Release date	First commit on October 11, 2021
Size	1.57MB
License	MIT License
Source available	Yes
Links	Website;

This feature is exclusive to Bedrock Edition and Minecraft Education.

This article would benefit from the addition of more sounds.

Please remove this notice once you have added suitable sounds to the article.
The specific instructions are: Add a sound table with all sounds played in Ore UI menus (not music), such as button click, progressive button, toast, hardcore mode on/off, social drawer

Ore UI is a collection of open source packages designed for building interactive video game user interfaces using web technology, written in the TypeScript programming language and utilizing the React library. It provides reusable building blocks for video game development and general-purpose web applications.^[2] Ore UI is currently used in Minecraft games such as Minecraft: Bedrock Edition, Bedrock Editor, Minecraft Education, and Minecraft Legends.

In Bedrock Edition, a new UI design system is being developed using the Gameface engine (formerly Hummingbird^[5]) by Coherent Labs,^[6]^[7]^[8] which made it possible to run modern web technology such as JavaScript, HTML and CSS.^[9]

Development

Bedrock Edition's UI redesign tech preview

On November 9, 2018, Tobias Ahlin, the lead experience designer at Mojang Studios, announced a UI overhaul coming to Bedrock Edition built on Hummingbird engine, which runs a subset of HTML and CSS, and a design system built with React.^[7] A tech preview for the title screen redesign featuring a user-friendly input for touch, controller, and keyboard was shown at the dotJS 2018 developer conference.

The new title screen from the tech preview features two pages. The top page shows the player's last played world, with the background UI that changes to match the world's thumbnail. The bottom page shows five interactable buttons and their actions possibly:

"Play" which lets the player navigate to the Select World screen.
"Store" which lets the player navigate to the store (similar to the modern Marketplace).
"Skins" which lets the player change their skin (similar to the modern Character Creator).
"Achievements" and "Settings" which let the player view their achievements and settings.

There is also a profile button (with the player's profile picture) on the top right corner, which likely lets the player navigate to their profile screen.

The website for Minecraft JavaScript API documentation was once available through a link which can be seen near the end of the talk; the documentation provides the page to the tech preview where users could freely interact with the redesigned user interface.^[7] The original link for the documentation now redirects to a completely different website, making the documentation inaccessible; it is now considered lost media as it has not been archived elsewhere.

In beta 1.16.100.50, released on July 31, 2020, the new achievements screen was added. It was rolled out initially for 5 percent of the player base.^[10] For the next 9 weeks, the number of players who could access the new achievement UI gradually increased from 5% to 75%.^[11]

In the following years, more JSON UI menu screens were gradually refreshed with Ore UI, with design previews available in Minecraft Preview before full release in usually a few months. The internal resources for Ore UI include a texture atlas containing revamped textures for in-game GUIs, such as the inventory. These have been teased to be in early development.

React Facet

On October 18, 2021, the React Facet source code was published on Ore UI GitHub repository under the MIT License.^[12]

On October 25, 2021,^[13] Paulo Ragonha, a tech lead at Mojang Studios, introduced React Facet, an observable-based state management for video game user interface built in React.^[6] This was announced at the React Advanced 2021 developer conference. In the talk, Ragonha showcases how React Facet bridges game data by introducing a system that connects the backend C++ game engine (where the game's states reside) with the frontend JavaScript UI. This connection relies on a concept called "facets", which are lightweight observable objects representing slices of the game's state. These facets allow the UI to subscribe to specific pieces of data from the game engine, such as player health, inventory, or environmental changes, and receive real-time updates as the state changes in the game.

Design system

The Ore UI design system can be found inside the Ore UI Developer Page section in the Minecraft Bedrock Developer Mode. For all texture elements, see Bedrock Edition GUI and UI textures § Ore UI.

Ore UI Developer Pages section
Hero button states
Primary button states
Secondary button states
Destructive button states
Modal with placeholder content
A dummy modal
Checkboxes in action
Checkbox states
Dropdown button states
Radio button states
Slider states
Toggle states
Text field states
Toggle button states
Tab button states
All tag variants

Usage

The menu screens updated with Ore UI implemented new features using the design system, such as informative (and sometimes humorous) descriptions, smaller fonts for readability, clearer and modern layouts, more responsive sliders, more different types of elements, and tags. The buttons are styled similarly to JSON UI, with updated looks, pressing animations, and exclusive sounds for progressive buttons. Certain menus have received additional animations and images, and all UI textures have been updated, including controller hints.

Unlike JSON UI, Ore UI menus are separated into sections containing the elements. Depending on the UI scaling, each section is individually scaled, leaving gaps for the panorama in smaller scales, while some elements like the top navigation bar remain responsive. Dropdown buttons, which open an options pop-up, are replaced with always visible toggle buttons on smaller UI scales. Ore UI supports an additional accessibility scaling option to increase the scaling.

Ore UI is currently used in the following menu screens (including sub-menus):

Bedrock Edition

Release

Additionally, the toast that appears after 15 minutes of inactivity, along with the overlay, is based on Ore UI.

Preview

All settings tabs & main settings UI except for Creator, Global Resources, Party, Storage, Resource Packs, and Behavior Packs. Realms uses the old UI for all settings.
Edit World Realms (toggleable)
Create Party screen
World and Realm selection for local uploading to Realms.

Bedrock Editor

Release

Minecraft Education

Release

Differences with JSON UI

Features	JSON UI (Legacy)	Ore UI (Modern)
Creator customization	Can be modified by resource packs to change layout and behavior. Allows creating complex UI by directly modifying or defining UI controls and other elements through the JSON files.	Hard-coded and cannot be modified by resource packs^[14]^[15]^[16]. Creation of custom form UIs is possible on server side using `@minecraft/server-ui` scripting module, though it does not directly interface with the HTML UI, and allowing few basic UI elements.
Color codes and emojis	Supports specific layout properties, color codes, and emojis.	Does not support color codes^[17]^[18]^[19] on various screens, however, on the death screen in the name of the player or item or mob that killed them, and on the new forms screen in the label it is supported, not understanding emojis^[20]^[21] they are not supported natively in text fields.
Status	Planned to be removed on future updates.^{[citation needed]}	Currently in active development.
Performance	Can be unoptimized, leading to lower FPS, long loading times, and general poor user experience, especially with a lot of custom UI.^{[citation needed]}	Aims for better performance, though some users have reported micro-freezes and lag issues, particularly on consoles.
Availability	Available by default on screens that are not yet migrated to Ore UI.	Available on few select screens (Play, Settings, Create World, and Achievements). Though it may fallback to legacy JSON UI on specific cases.^{[more information needed]}
Accessibility	Limited built-in scaling.	Better support for different screen sizes.
Visuals	Pixel-perfect scaling; classic layout.	Modern visuals, but cited for blurry text and clunky button spacing.
Technology	Data-driven using JSON files.	Developed using modern web technology (JavaScript, HTML, CSS) and the Gameface engine by Coherent Labs.
Technical details	UI elements are defined in resource packs, specifically under `<resource pack>/ui` directory.	UI elements are defined internally in the game's installation files, specifically under `Content/data/gui/dist/hbui`.

Control icons

Keyboard and mouse controls

Key A
Key B
Key C
Key D
Key E
Key F
Key G
Key H
Key I
Key J
Key K
Key L
Key M
Key N
Key O
Key P
Key Q
Key R
Key S
Key T
Key U
Key V
Key W
Key X
Key Y
Key Z
Key F2
Key arrow up
Key arrow right
Key arrow down
Key arrow left
Key bracket close
Key bracket close small
Key bracket open
Key bracket open small
Key /
Key alt
Key ctrl
Key ctrl small
Key enter
Key esc
Key shift
Key space
Key tab
Mouse
Mouse left click
Mouse right click
Mouse scroll click
Mouse scroll wheel
Touch selection

Controller controls

X button
A button
B button
Y button
Up button
Right button
Down button
Left button
Menu button, d-pad
Select button
Right stick
Right bumper
Right trigger
Right stick click
Left stick
Left bumper
Left trigger
Left stick click

Triangle button
O button
X button
Square button
Up, d-pad
Right, d-pad
Down, d-pad
Left, d-pad
Menu / select buttons
Touch pad
Right stick
Right bumper
Right trigger
Right stick click
Left stick
Left bumper
Left trigger
Left stick click

Triangle button
O button
X button
Square button
Up, d-pad
Right, d-pad
Down, d-pad
Left, d-pad
Menu buttons
Touch pad
Right stick
Right bumper
Right trigger
Right stick click
Left stick
Left bumper
Left trigger
Left stick click

Y button
B button
A button
X button
Up, d-pad
Right, d-pad
Down, d-pad
Left, d-pad
Menu button
Select button
Right stick
Right bumper
Right trigger
Right stick click
Left stick
Left bumper
Left trigger
Left stick click