Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/lommix/bevy_hui
Component based UI crate using Xml/Html with focus on hot reload for the bevy engine.
https://github.com/lommix/bevy_hui
bevy-engine bevy-plugin html parser ui xml
Last synced: 3 days ago
JSON representation
Component based UI crate using Xml/Html with focus on hot reload for the bevy engine.
- Host: GitHub
- URL: https://github.com/lommix/bevy_hui
- Owner: Lommix
- License: apache-2.0
- Created: 2024-09-15T18:02:29.000Z (5 months ago)
- Default Branch: master
- Last Pushed: 2025-01-26T12:14:46.000Z (15 days ago)
- Last Synced: 2025-01-31T09:08:10.619Z (10 days ago)
- Topics: bevy-engine, bevy-plugin, html, parser, ui, xml
- Language: Rust
- Homepage:
- Size: 390 KB
- Stars: 71
- Watchers: 5
- Forks: 8
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE-APACHE
Awesome Lists containing this project
README
# Bevy_hui
[](./LICENSE)
[](https://crates.io/crates/bevy_hui)
Build `bevy_ui` design in pseudo Html. Keep your logic in bevy, while iterating fast on design
with hot reloading. Create reusable templates in the style of Web Components.
https://github.com/user-attachments/assets/4eb22305-7762-404e-9093-806b6a155ede
## Features
- In build support for conditional styles and transitions. Hover animations by default!
- Any value can be a dynamic property and injected into a template at runtime. (recursive!)
- Simple but effective event system. Register any bevy system via function binding and use it
in your templates `on_press="start_game"`.
- No widgets, no themes. Just bevy UI serialized with all the tools necessary to build anything
in a reusable manor.
## Example
Like most crates, don't forget to register the plugin!
```rust
app.add_plugins((
HuiPlugin,
// Optional auto loading. Any template this folder will register as custom component
// using the file name.
HuiAutoLoadPlugin::new(&["components"]),
));
```
## Getting Started ([Bevy html syntax Cheatsheet](docs/cheatsheet.md))
Create your first component template with external properties!
```html
greet
Press me
#123
#503
{text}
```
## Register your component and make a custom binding
To use your new component in any other templates, we have to register it first.
You can either use the `HuiAutoLoadPlugin` feature (experimental), which
is great for simple components or register the component yourself in a startup system.
This also allows for custom spawning functions. With is great if you need to add custom components as well!
```rust
fn startup(
server: Res,
mut html_comps: HtmlComponents,
mut html_funcs: HtmlFunctions,
) {
// simple register
html_comps.register("my_button", server.load("my_button.html"));
// advanced register, with spawn functions
html_comps.register_with_spawn_fn("my_button", server.load("my_button.html"), |mut entity_commands| {
entity_commands.insert(MyCustomComponent);
})
// create a system binding that will change the game state.
// any (one-shot) system with `In` is valid!
// the entity represents the node, the function is called on
html_funcs.register("start_game", |In(entity): In, mut state : ResMut> |{
state.set(GameState::Play);
});
```
## Putting it all together
Time to be creative. Include your component in the next template.
```html
My Game
...
...
```
## Spawning your Template
Required components make it super simple.
```rust
fn setup(
mut cmd: Commands,
server: Res,
) {
cmd.spawn(Camera2dBundle::default());
cmd.spawn(HtmlNode(server.load("menu.html"));
}
```
## Examples and Widgets
Experimental widget crate:
[](https://crates.io/crates/bevy_hui_widgets)
In addition to the base crate there is also the `bevy_hui_widgets` crate. It offers some basic
widgets functionality without providing a template. Each Widget requires some kind of setup/hierarchy
to work, but the user is in full control over the Template and can style and extend it however they see
fit.
Imagine html ``, but you provide the template and style of the underlying buttons and containers.
Checkout the widget example.
```bash
# basic menu demo
cargo run -p example --bin ui
# using the widget helper crate to make some basic widgets like sliders, inputs, selections
cargo run -p example --bin widgets
```
## Help wanted
I do not plan to offer any widgets on the templating side, but I would like
to have common components and system for a general reusable widget toolkit like
sliders, drop downs, draggable and so on.
Checkout the examples, if you come up with some really cool widgets, I would be happy
to include them into the upcoming `bevy_hui_widgets` crate.
### More examples
I am not the greatest designer. I am actively looking for some really fancy and cool examples, using
this crate to include in the example crate.
## Known limitations and Pitfalls
- Any manual changes to bevy's styling components will be overwritten
- Do not recursive import. [mem stonks, bug]
- One root node per component.
- Reloading a component template sometimes breaks logic on a higher level template. Simply reloading
the higher level template fixes this for now. Needs further investigation.