Git Product home page Git Product logo

bevy-inspector-egui's Introduction

bevy-inspector-egui


This crate provides a debug interface using egui where you can visually edit the values of your components live.

demonstration with a running bevy app

Usage

You can either inspect a single resource using the InspectorPlugin, or use the WorldInspectorPlugin to inspect all entities.

InspectorPlugin

The InspectorPlugin<T> will insert a resource of type T and display UI for editing that resource.

use bevy::prelude::*;
use bevy_inspector_egui::{InspectorPlugin, Inspectable};

#[derive(Inspectable, Default)]
struct Data {
    should_render: bool,
    text: String,
    #[inspectable(min = 42.0, max = 100.0)]
    size: f32,
}

fn main() {
    App::new()
        .add_plugins(DefaultPlugins)
        .add_plugin(InspectorPlugin::<Data>::new())
        .run();
}

World inspector

use bevy::prelude::*;
use bevy_inspector_egui::WorldInspectorPlugin;

fn main() {
    App::new()
        .add_plugins(DefaultPlugins)
        .add_plugin(WorldInspectorPlugin::new())
        .run();
}

world inspector ui

You can configure the WorldInspectorPlugin by inserting the WorldInspectorParams resource. If you want to only display some components, you may want to use the InspectorQuery instead.

Custom components in the world inspector

By default, types implementing Inspectable will not be displayed in the WorldInspector, because the there is no way to know of the trait implementation at runtime. You can call world.register_inspectable::<T>() to tell bevy-inspector-egui how that type should be displayed, and it will show up correctly in the world inspector.

Alternatively, you can #[derive(Reflect)] and call world.register_type::<T>(). This will enable bevy's reflection feature for the type, and it will show up in the world inspector.

use bevy::prelude::*;
use bevy_inspector_egui::{WorldInspectorPlugin, Inspectable, RegisterInspectable};

#[derive(Inspectable, Component)]
struct InspectableType;

#[derive(Reflect, Component, Default)]
#[reflect(Component)]
struct ReflectedType;

fn main() {
  App::new()
    .add_plugins(DefaultPlugins)
    .add_plugin(WorldInspectorPlugin::new())
    .register_inspectable::<InspectableType>() // tells bevy-inspector-egui how to display the struct in the world inspector
    .register_type::<ReflectedType>() // registers the type in the `bevy_reflect` machinery, so that even without implementing `Inspectable` we can display the struct fields
    .run();
}

More examples (with pictures) can be found in the examples folder.

Common issues

CJK characters aren't rendered correctly

This is because the default egui font does not support rendering these characters, but you can add your own font with support for it by configuring the EguiContext:

fn configure_visuals(mut egui_ctx: ResMut<EguiContext>) {
  let mut fonts = egui::FontDefinitions::default();
  // install your own font (.ttf and .otf supported)
  fonts.font_data.insert("cjk_font".to_string(), egui::FontData::from_static(include_bytes!("../assets/fonts/SourceHanSansCN-Normal.otf")));
  // insert it at the beginning for highest priority
  fonts.families.get_mut(&egui::FontFamily::Proportional).unwrap().insert(0, "cjk_font".to_owned());
  egui_ctx.ctx_mut().set_fonts(fonts);
}

Bevy support table

bevy bevy-inspector-egui
0.7 0.11
0.7 0.10
0.6 0.9
0.6 0.8
0.6 0.7
0.5 0.5-0.6
0.5 0.4
0.4 0.1-0.3

bevy-inspector-egui's People

Contributors

ariofrio avatar danilamihailov avatar gilescope avatar haihala avatar icesentry avatar jakobhellermann avatar jamesbeilby avatar mvlabat avatar nia-e avatar paul-hansen avatar rezural avatar rparrett avatar sephy42 avatar tversteeg avatar wendivoid avatar willcrichton avatar yoshierahuang3456 avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.