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: about 1 month 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 (4 months ago)
- Default Branch: master
- Last Pushed: 2024-11-20T10:55:32.000Z (about 2 months ago)
- Last Synced: 2024-11-20T12:01:32.838Z (about 2 months ago)
- Topics: bevy-engine, bevy-plugin, html, parser, ui, xml
- Language: Rust
- Homepage:
- Size: 369 KB
- Stars: 28
- Watchers: 4
- Forks: 3
- Open Issues: 0
-
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.
**starting with bevy 0.15!**
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"));
}
```
## Hot reload and advanced examples
Hot reload requires bevy `file_watcher` feature to be enabled.
Checkout the examples for advanced interactions, play with the assets. Keep in mind these are
very crude proof of concepts.
```bash
# basic menu demo
cargo run -p example --bin ui
# simple text inputs with a submit form
cargo run -p example --bin input
# simple sliders
cargo run -p example --bin slider
```
## 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 merge them into a
### 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.