- UI, ingame + menu

[odecay]

This issue consists of two parts.

Ingame HUD/UI consisting of:
Floating health bars + player/character portraits, likely made using bevy's native UI features.

Reference:

Menus Using bevy_egui
A Main Menu with which to start the game.
A pause menu with which to exit the game.
Eventually this could include submenus to set options, controller bindings.

Character and level select screens will likely be needed as well.

• Main Menu Implement Main Menu With Egui #38
• Pause Menu Pause menu #41
• Ingame HUD/UI Implement Life Bars & Improve UI Code #50

[zicklag]

Hey there! This is something I could work on. I've been doing some work with Bevy and Egui recently:

I've found egui really nice to use.

Floating health bars + player/character portraits, likely made using bevy's native UI features.

Is there a reason we wouldn't use Egui for those as well, so that we don't have to worry about understanding and using two different UI systems?

Also, what kind of skin are you thinking for the UI? Would we borrow from the FishFight UI theme?

[odecay]

Is there a reason we wouldn't use Egui for those as well, so that we don't have to worry about understanding and using two different UI systems?

It seems to me that the HUD will require ninepatch + image backgrounds as well as absolute screen positioning. It seemed like it might be simpler to have the HUD in bevy native ui. HUD and menus dont have to interact at all so I was hoping it wouldnt be an issue.

I did however see someone patch egui to support ninepatch rendering the other day though so thats something to consider. https://discord.com/channels/691052431525675048/885021580353237032/989112997458874390
https://github.com/freiksenet/lands_of_mana/tree/main/src/gui/widgets relevant sections being window.rs and nine_patch.rs

Also, what kind of skin are you thinking for the UI? Would we borrow from the FishFight UI theme?

I think that is the idea for the egui side but afaik the theming has not actually been done in FishFight yet.

The menu in above looks really good btw! How did you go about theming it?

[zicklag]

I've got 9-patch versions of Egui frames and buttons working as shown in the screenshot above, so that shouldn't be an issue. And absolute positioning is simple, too.

The ninepatch frame of mine cost about 300 lines of code ( see here ), it's just a simple modification of the built-in egui frame code. Buttons are a similar story.

And using it super simple:

BorderedFrame::new(&ui_theme.panel_bg)
.margin(outer_margin)
.padding(Rect::all(8.0))
.show(ui, |ui| {
    // Make sure the frame ocupies the entire rect that we allocated for it.
    //
    // Without this it would only take up enough size to fit it's content.
    ui.set_min_size(ui.available_size());


    // Create a vertical list of items, centered horizontally
    ui.vertical_centered(|ui| {
        ui.retro_label("Bevy Retro + Egui = ♥", &ui_theme.font);


        ui.add_space(10.0);
        RetroLabel::new("Click a button to scale the background", &ui_theme.font)
            .color(egui::Color32::GREEN)
            .show(ui);


        // Now switch the layout to bottom_up so that we can start adding widgets
        // from the bottom of the frame.
        ui.with_layout(egui::Layout::bottom_up(egui::Align::Center), |ui| {
            ui.add_space(4.0);


            if RetroButton::new("Scale Down", &ui_theme.font)
                .padding(Rect::all(7.0))
                .border(&ui_theme.button_up_bg)
                .on_click_border(&ui_theme.button_down_bg)
                .show(ui)
                .clicked()
            {
                map_transform.scale -= Vec3::splat(0.2);
            }


            if RetroButton::new("Scale Up", &ui_theme.font)
                .padding(Rect::all(7.0))
                .border(&ui_theme.button_up_bg)
                .on_click_border(&ui_theme.button_down_bg)
                .show(ui)
                .clicked()
            {
                map_transform.scale += Vec3::splat(0.2);
            }
        });
    });
})

But I'm good using whatever you want to, just let me know. 👍

[odecay]

Those were my only concerns about egui so if you already know how to do ninepatch with it id say go for it.

[odecay]

@zicklag do you want to be assigned this as well? I am interested in learning egui but im sure there will be plenty of opportunity and I personally would appreciate the benefit of your experience here.

[zicklag]

Yep, I can take it. I enjoy writing nice UIs. :)

I'll start working on that, I just want to get basic character hot-reloading working first so that I don't have to come back to it later. ( It should take less than an hour )

[zicklag]

Oh, do we have any UI skin assets yet? Should I just copy them from FishFight?

[odecay]

I'll start working on that, I just want to get basic character hot-reloading working first so that I don't have to come back to it later. ( It should take less than an hour )

no pressure on when to start just making sure my assumption on this were in line with yours so I can prioritize 👍

Oh, do we have any UI skin assets yet? Should I just copy them from FishFight?

We definitely don't have anything specific to punchy UI skin wise, last I heard they hadn't gotten to skinning egui yet in FishFight either but I could be wrong on that.

[erlend-sh]

Yep, just copy from fishfight. If you have other requirements you can use any free thing in itch.io, as that’s all we’re using in fishfight for now anyway.

[zicklag]

Still a little bit of work to do, but I've got a lot of the UI system fleshed out!

It's totally themeable with YAML resources, including hot reload.

[zicklag]

About the in-game UI, who gets a portrait and health bar at the top of the screen? Just the players, and not the enemies right?

Is there any sort of life display for enemies. Like a thin, floating life bar above their head or something like that?

[erlend-sh]

Just players, yep. The Castle Crashers reference up top is very fitting.

Enemies don’t need any health bars. Maybe later we will occasionally show them when dealing critical dmg and that sort of thing.

[zicklag]

I've got the start to in-game HUD. Just need to get life-bars implemented now:

[odecay]

Looking good!

[zicklag]

Lifebars are working! #50

Now we just need a way to hurt the player so we can see the lifebar move. :)

[odecay]

Now we just need a way to hurt the player so we can see the lifebar move. :)

basic enemy ai and attacks are in, healthbar works as expected