bevy-inspector-egui

repository·main·Indexed 23 days ago

https://github.com/jakobhellermann/bevy-inspector-egui

An inspector plugin for the Bevy game engine using the egui library. It provides tools for inspecting Bevy worlds, resources, entities, and assets through high-level 'quick' plugins (such as WorldInspectorPlugin and ResourceInspectorPlugin) or low-level APIs for building custom editor interfaces. Features include the InspectorOptions derive macro for UI tweaking, the InspectorPrimitive trait for custom type representations, and support for entity hierarchy visualization.

Tokens
13.8K
Snippets
26
Records
68
Agent score
81%

What's inside bevy-inspector-egui

  1. How to customize type display and entity names

    main

    Changing Entity Names

    To change the names of entities displayed in the world inspector, insert the Name component onto the entity.

    Displaying Single Values

    To display a single value without passing the entire &mut World, use reflect_inspector::ui_for_value. Note that handles (e.g., Handle<StandardMaterial>) will not be able to display the underlying asset's value using this method.

    Customizing Type UI

    To change how a specific type is displayed, implement the InspectorPrimitive trait and register it using: app.register_type_data::<T, InspectorEguiImpl>().

  2. Use WorldInspectorPlugin for quick debugging

    main

    The quick::WorldInspectorPlugin provides a ready-to-use UI that displays the Bevy world's entities, resources, and assets. This is ideal for simple use cases where you don't need to customize the presentation.

    Note: You must also include EguiPlugin from bevy_egui for the inspector to render.

    use bevy::prelude::*;
    use bevy_inspector_egui::{bevy_egui::EguiPlugin, quick::WorldInspectorPlugin};
    
    fn main() {
        App::new()
            .add_plugins(DefaultPlugins)
            .add_plugins(EguiPlugin::default())
            .add_plugins(WorldInspectorPlugin::new())
            .run();
    }
  3. Use ResourceInspectorPlugin to inspect a single resource

    main

    The quick::ResourceInspectorPlugin displays a specific Bevy resource in its own window.

    To use it:

    1. Derive Reflect and Resource for your type.
    2. Optionally use InspectorOptions to add constraints (like min or max) to fields.
    3. Register the type using app.register_type::<T>().
    4. Add the plugin specifying the resource type: ResourceInspectorPlugin::<T>::default().

    Note: The plugin does not initialize the resource itself; you must use app.init_resource::<T>() or similar.

    use bevy::prelude::*;
    use bevy_inspector_egui::prelude::*;
    use bevy_inspector_egui::quick::ResourceInspectorPlugin;
    
    // `InspectorOptions` are completely optional
    #[derive(Reflect, Resource, Default, InspectorOptions)]
    #[reflect(Resource, InspectorOptions)]
    struct Configuration {
        name: String,
        #[inspector(min = 0.0, max = 1.0)]
        option: f32,
    }
    
    fn main() {
        App::new()
            .add_plugins(DefaultPlugins)
            .init_resource::<Configuration>() // `ResourceInspectorPlugin` won't initialize the resource
            .register_type::<Configuration>() // you need to register your type to display it
            .add_plugins(EguiPlugin::default())
            .add_plugins(ResourceInspectorPlugin::<Configuration>::default())
            // also works with built-in resources, as long as they are `Reflect`
            .add_plugins(ResourceInspectorPlugin::<Time>::default())
            .run();
    }
  4. Build a manual custom UI with bevy_inspector

    main

    If the quick plugins are too restrictive, you can build a custom UI by calling low-level inspector functions within your own egui windows.

    To do this:

    1. Add bevy_inspector_egui::DefaultInspectorConfigPlugin to your app to register default options and implementations.
    2. Create a system that runs during the EguiPrimaryContextPass.
    3. Access the EguiContext from the world.
    4. Use functions from bevy_inspector_egui::bevy_inspector such as:
      • ui_for_world(world, ui): Displays entities, resources, and assets.
      • ui_for_assets::<T>(world, ui): Displays assets of type T.
      • ui_for_world_entities(world, ui): Displays only entities.
    use bevy::prelude::*;
    use bevy_egui::EguiPlugin;
    use bevy_inspector_egui::prelude::*;
    use std::any::TypeId;
    
    fn main() {
        App::new()
            .add_plugins(DefaultPlugins)
            .add_plugins(EguiPlugin::default())
            .add_plugins(bevy_inspector_egui::DefaultInspectorConfigPlugin) // adds default options and `InspectorEguiImpl`s
            .add_systems(EguiPrimaryContextPass, inspector_ui)
            .run();
    }
    
    fn inspector_ui(world: &mut World) {
        let Ok(egui_context) = world
            .query_filtered::<&mut EguiContext, With<PrimaryEguiContext>>()
            .get_single(world)
        else {
            return;
        };
        let mut egui_context = egui_context.clone();
    
        egui::Window::new("UI").show(egui_context.get_mut(), |ui| {
            egui::ScrollArea::vertical().show(ui, |ui| {
                // equivalent to `WorldInspectorPlugin`
                bevy_inspector_egui::bevy_inspector::ui_for_world(world, ui);
    
                egui::CollapsingHeader::new("Materials").show(ui, |ui| {
                    bevy_inspector_egui::bevy_inspector::ui_for_assets::<StandardMaterial>(world, ui);
                });
    
                ui.heading("Entities");
                bevy_inspector_egui::bevy_inspector::ui_for_world_entities(world, ui);
            });
        });
    }
  5. Integrate bevy-inspector-egui into custom layouts

    main

    You can integrate the inspector into complex UI architectures:

    • Docking Systems: Use the egui_dock integration pattern to build a multi-window editor environment (e.g., combining bevy-inspector-egui with egui_gizmo).
    • Custom Layouts: Use the side_panel.rs pattern to embed inspector elements into specific parts of your application's UI layout, such as a side panel.