jakobhellermann / bevy-inspector-egui

Inspector plugin for the bevy game engine
Apache License 2.0
1.12k stars 166 forks source link

`egui_dock` example draws over UI elements #134

Open Alorel opened 1 year ago

Alorel commented 1 year ago

I tried adding some UI to the dock example

Patch ```patch Index: crates/bevy-inspector-egui/Cargo.toml IDEA additional info: Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP <+>UTF-8 =================================================================== diff --git a/crates/bevy-inspector-egui/Cargo.toml b/crates/bevy-inspector-egui/Cargo.toml --- a/crates/bevy-inspector-egui/Cargo.toml (revision d84db46c7d46a7eee312dd7468cc86e66825aaec) +++ b/crates/bevy-inspector-egui/Cargo.toml (date 1683415406572) @@ -40,7 +40,7 @@ smallvec = "1.10" [dev-dependencies] -bevy = { version = "0.10", default-features = false, features = ["x11", "bevy_winit", "bevy_pbr", "bevy_sprite", "bevy_core_pipeline", "animation", "png"] } +bevy = { version = "0.10", default-features = false, features = ["x11", "bevy_winit", "bevy_pbr", "bevy_sprite", "bevy_core_pipeline", "animation", "png", "bevy_ui", "bevy_text", "bevy_sprite"] } egui_dock = "0.4" egui-gizmo = "0.10" # bevy_mod_picking = { git = "https://github.com/aevyrie/bevy_mod_picking", rev = "554649a951689dce66d0d759839b326874e8826f", default-features = false, features = ["backend_raycast", "backend_egui", "backend_sprite"] } Index: crates/bevy-inspector-egui/examples/integrations/egui_dock.rs IDEA additional info: Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP <+>UTF-8 =================================================================== diff --git a/crates/bevy-inspector-egui/examples/integrations/egui_dock.rs b/crates/bevy-inspector-egui/examples/integrations/egui_dock.rs --- a/crates/bevy-inspector-egui/examples/integrations/egui_dock.rs (revision d84db46c7d46a7eee312dd7468cc86e66825aaec) +++ b/crates/bevy-inspector-egui/examples/integrations/egui_dock.rs (date 1683415525436) @@ -2,6 +2,7 @@ use bevy::prelude::*; use bevy_asset::{HandleId, ReflectAsset}; +use bevy_core_pipeline::prelude::Camera3dBundle; use bevy_egui::EguiContext; use bevy_inspector_egui::bevy_inspector::hierarchy::{hierarchy_ui, SelectedEntities}; use bevy_inspector_egui::bevy_inspector::{ @@ -26,6 +27,7 @@ // .add_plugins(bevy_mod_picking::plugins::DefaultPickingPlugins) .insert_resource(UiState::new()) .add_startup_system(setup) + .add_startup_system(setup_ui) .add_system( show_ui_system .in_base_set(CoreSet::PostUpdate) @@ -499,3 +501,38 @@ // PickRaycastSource, )); } + +fn setup_ui(mut commands: Commands) { + commands + .spawn(NodeBundle { + style: Style { + size: Size::all(Val::Percent(100.0)), + align_items: AlignItems::FlexStart, + justify_content: JustifyContent::FlexEnd, + ..default() + }, + ..default() + }) + .with_children(|ui| { + ui + .spawn(ButtonBundle { + style: Style { + size: Size::new(Val::Px(150.0), Val::Px(65.0)), + // size: Size::AUTO, + // horizontally center child text + justify_content: JustifyContent::Center, + // vertically center child text + align_items: AlignItems::Center, + ..default() + }, + ..default() + }) + .with_children(|btn| { + let text = TextBundle::from_section("Hello", TextStyle { + color: Color::RED, + ..default() + }); + btn.spawn((text, Name::new("btn text")/*, AutosizeParent*/)); + }); + }); +} ```

And while the viewport updates as expected for the cube, the dock draws over the button I added: https://imgur.com/b47nMXy

Is there any way to make the UI element contained within the game view?

bardt commented 1 year ago

Encountered the same symptoms. Since Bevy 0.8 UI is supposed to "just work", meaning you don't have a direct access to the UI camera. I wonder how one would be able to make it render into a specific viewport only.