Skip to content

Add OutlineGizmoPlugin and integrate outline gizmo functionality #195

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 16 commits into from
Jun 12, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,15 @@ Want to see what we have planned? Check out [design-book/vision] for a high-leve
Want to help? See [design-book/roadmap] for an up-to-date summary of the work that has been done and needs to be done to advance the project to the next phase.
To avoid ballooning scope and ensure we can ship something useful and reasonably polished, please try your best to focus efforts on the next milestone that has yet to be completed, or standalone proof-of-concepts or design work for important open questions.

*IMPORTANT*:

When you open a folder with the launcher it will simply copy the template to the target location which references the editor's github repository and not your locally compiled editor.

Instead, for local editor dev use the below example for compiling/running changes:

`cargo run --example simple_editor`


## Figma Designs

While laying out the foundations for an editor prototype in this repository, we are also experimenting with various UI designs in a public [Figma document]. If you are interested in collaborating and sharing your own designs, head over to the document and request write permissions to join the effort.
Expand Down
24 changes: 24 additions & 0 deletions assets/example/scene.scn.ron
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
(
entities: [
(
components: [
(bevy_transform::components::Transform, (
translation: (1.0, 0.0, 0.0),
rotation: (0.0, 0.0, 0.0, 1.0),
scale: (1.0, 1.0, 1.0),
)),
(bevy_render::color::Color, (r: 0.8, g: 0.2, b: 0.2, a: 1.0)),
],
),
(
components: [
(bevy_transform::components::Transform, (
translation: (0.0, 2.0, 0.0),
rotation: (0.0, 0.0, 0.0, 1.0),
scale: (1.0, 1.0, 1.0),
)),
(bevy_render::color::Color, (r: 0.2, g: 0.8, b: 0.2, a: 1.0)),
],
),
],
)
1 change: 1 addition & 0 deletions bevy_editor_panes/bevy_3d_viewport/Cargo.toml
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ bevy_pane_layout.workspace = true
bevy_editor_cam.workspace = true
bevy_editor_styles.workspace = true
bevy_infinite_grid.workspace = true
bevy_editor_core.workspace = true

[lints]
workspace = true
5 changes: 4 additions & 1 deletion bevy_editor_panes/bevy_3d_viewport/src/lib.rs
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,9 @@ use bevy_infinite_grid::{InfiniteGrid, InfiniteGridPlugin, InfiniteGridSettings}
use bevy_pane_layout::prelude::*;
use view_gizmo::{spawn_view_gizmo_target_texture, ViewGizmoPlugin};

use crate::outline_gizmo::OutlineGizmoPlugin;

mod outline_gizmo;
mod view_gizmo;

/// The identifier for the 3D Viewport.
Expand All @@ -44,7 +47,7 @@ impl Plugin for Viewport3dPanePlugin {
app.add_plugins(InfiniteGridPlugin);
}

app.add_plugins((DefaultEditorCamPlugins, ViewGizmoPlugin))
app.add_plugins((DefaultEditorCamPlugins, ViewGizmoPlugin, OutlineGizmoPlugin))
.add_systems(Startup, setup)
.add_systems(
PreUpdate,
Expand Down
81 changes: 81 additions & 0 deletions bevy_editor_panes/bevy_3d_viewport/src/outline_gizmo.rs
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
use bevy::prelude::*;
use bevy_editor_core::SelectedEntity;

pub struct OutlineGizmoPlugin;
impl Plugin for OutlineGizmoPlugin {
fn build(&self, app: &mut App) {
app.init_resource::<ShowOutlines>()
.add_systems(Startup, spawn_gizmo_toggle_ui)
.add_systems(Update, outline_gizmo_system)
.add_systems(Update, update_gizmo_toggle_text);
}
}

#[derive(Resource, Default)]
pub struct ShowOutlines(pub bool);

// Marker for the toggle button text
#[derive(Component)]
struct GizmoToggleText;

pub fn outline_gizmo_system(
show: Res<ShowOutlines>,
query: Query<&Transform>,
selected_entity: Res<SelectedEntity>,
mut gizmos: Gizmos,
) {
if !show.0 {
return;
}
if let Some(entity) = selected_entity.0 {
if let Ok(transform) = query.get(entity) {
gizmos.cuboid(*transform, Color::srgb(1.0, 0.0, 0.0));
}
}
}

pub fn spawn_gizmo_toggle_ui(mut commands: Commands) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This should be only a temporary solution, it would be better to have a menu to manage which gizmo types are visible just like other game engines.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i agree with this - but beyond the scope of this PR. I just wanted to add something quick and dirty to show that we can add the outlines

info!("Spawning Gizmo Toggle UI");
commands
.spawn((
Node {
position_type: PositionType::Absolute,
top: Val::Px(20.0),
right: Val::Px(20.0),
width: Val::Px(100.0),
height: Val::Px(15.0),
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The height of this button is smaller than the text inside which is not very pleasing to look at.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yes, i've fixed thisi by making the font smaller for now

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

image

align_items: AlignItems::Center,
justify_content: JustifyContent::Center,
..default()
},
BackgroundColor(Color::srgb(0.2, 0.2, 0.2)),
))
.with_children(|parent| {
parent.spawn((
Text::new("Show Outlines"),
TextFont::from_font_size(10.0),
GizmoToggleText,
));
})
.observe(
|_trigger: Trigger<Pointer<Click>>, mut show_outlines: ResMut<ShowOutlines>| {
show_outlines.0 = !show_outlines.0;
},
);
}

// System to update the button text when ShowOutlines changes
fn update_gizmo_toggle_text(
show_outlines: Res<ShowOutlines>,
mut query: Query<&mut Text, With<GizmoToggleText>>,
) {
if show_outlines.is_changed() {
for mut text in &mut query {
text.0 = if show_outlines.0 {
"Hide Outlines".into()
} else {
"Show Outlines".into()
};
}
}
}
1 change: 1 addition & 0 deletions bevy_editor_panes/bevy_3d_viewport/src/view_gizmo.rs
Original file line number Diff line number Diff line change
Expand Up @@ -80,6 +80,7 @@ fn setup_view_gizmo(
mut materials: ResMut<Assets<StandardMaterial>>,
mut gizmo_assets: ResMut<Assets<GizmoAsset>>,
) {
info!("Spawning View Gizmo");
let view_gizmo_pass_layer = RenderLayers::layer(VIEW_GIZMO_LAYER);
let sphere = meshes.add(Sphere::new(0.2).mesh().uv(32, 18));

Expand Down
2 changes: 1 addition & 1 deletion crates/bevy_editor/src/lib.rs
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ impl Plugin for EditorPlugin {
fn build(&self, bevy_app: &mut BevyApp) {
// Update/register this project to the editor project list
project::update_project_info();

info!("Loading Bevy Editor");
bevy_app
.add_plugins((
EditorCorePlugin,
Expand Down
24 changes: 24 additions & 0 deletions crates/bevy_editor_launcher/assets/example/scene.scn.ron
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
(
entities: [
(
components: [
(bevy_transform::components::Transform, (
translation: (1.0, 0.0, 0.0),
rotation: (0.0, 0.0, 0.0, 1.0),
scale: (1.0, 1.0, 1.0),
)),
(bevy_render::color::Color, (r: 0.8, g: 0.2, b: 0.2, a: 1.0)),
],
),
(
components: [
(bevy_transform::components::Transform, (
translation: (0.0, 2.0, 0.0),
rotation: (0.0, 0.0, 0.0, 1.0),
scale: (1.0, 1.0, 1.0),
)),
(bevy_render::color::Color, (r: 0.2, g: 0.8, b: 0.2, a: 1.0)),
],
),
],
)