Example for a panel side-by-side with bevy main camera

[masonk]

I would like to build an editor-style application with an egui-rendered panel next to a view of my in-game world. Right now, the closest example I could find to that is two_windows.rs which spawns a window on top of a bevy camera. I don't really want to use a window, I just a panel docked to one (ideally, both) sides of the screen with a bevy camera drawing the middle.

Is this even possible with egui? Do I need to install a Frame, maybe? If you can point me towards the right solution - and if I get it working - I'll contribute back an example.

[mvlabat]

Hi @masonk!

I don't have much experience in rendering and building editors, but I imagine the following two approaches possible:

1. Just rendering panels on top of the screen and playing around with camera transform to change its center if needed.
2. Rendering Bevy scene to a texture (example) and then using it as a texture for egui's image.

I'd say the latter is a less kludgy way of approaching it, but right now it's not very well supported by this library. The efficient way of doing it is blocked by #11. I'd love to see this approach as a working example, but at the moment I don't have enough time to implement the required feature. I'm more than happy to accept a PR if anyone wants to tackle it though.

And if your question is also about the relevant widgets for side panels, the widget you're looking for is this:
https://docs.rs/egui/0.12.0/egui/containers/struct.SidePanel.html

[nside]

I'd like to do something similar as well. Option 2 seems a bit involving.

What if the panels are rendered first in their own system and a way for subsequent (game/world/etc) systems to query panel entities is introduced? It makes the first option suggested less kludgy, if at all.

[ian-p-cooke]

I just started exploring bevy and egui so I can't really contribute much but what I really wanted to do was the same: A resizable SidePanel with the CentralPanel's space being rendered by Bevy such that when you resize the SidePanel then Bevy scales the CentralPanel-space accordingly.

It seems like Bevy should be responsible for the whole window while bevy_egui drew into a portion of the window (a 'frame'?). Is this the same as your option (1)? I looked at Bevy and couldn't even figure out how to do a splitter for a window with just Bevy. It seems like everything just draws on top of each other with transforms to position the drawing. so does that mean the system that accepts the egui context would need some sort of Transform query to pass along to ctx()?

If you make egui own the whole window then that's the other approach with rendering to a text and using egui-image. I think having Bevy own it would integrate with Bevy better. (like, add egui to Bevy rather than add Bevy to egui).

in any case, I can work with an egui-only window and a bevy-only window I think so I'm going to try that.

[mvlabat]

What if the panels are rendered first in their own system and a way for subsequent (game/world/etc) systems to query panel entities is introduced?

Afaik, egui doesn't provide a way to query whether a widget is rendered, and I don't quite imagine it getting implemented in egui. Though I'd be happy to be mistaken here. Implementing it on the bevy_egui level seems even more complicated. :(

But I believe that knowing whether a widget is rendered or not is actually the responsibility of an application. In my personal projects, I define my custom resources with boolean flags that indicate whether to render a certain widget or not. Those can also be read by other systems to perform the query you're describing.

It seems like Bevy should be responsible for the whole window while bevy_egui drew into a portion of the window (a 'frame'?). Is this the same as your option (1)?

@ian-p-cooke that sounds about right. Though, currently, we cannot restrict which portion of the window can be accessed by egui's context. Probably, that's something that will become possible when we get bevyengine/bevy#1389.

It seems like everything just draws on top of each other with transforms to position the drawing. so does that mean the system that accepts the egui context would need some sort of Transform query to pass along to ctx()?

I'm not sure I completely understood this bit, but if you want to render a sidepanel, yeah, my suggestion in approach 1 was to modify the camera's Transform when changing SidePanel width. Like, you'd probably want to offset the camera center a little and zoom it out. Or if you were suggesting something else, please correct me.

[pyweeker]

Hello !
look here !
https://github.com/pyweeker/bevy_egui_paneled_playground

[mvlabat]

Hey folks. Sorry I've been avoiding this request for such a long time. I've just implemented a draft of an example that updates a camera translation depending on the occupied screen space by such widgets as panels, etc: #73.

I assumed that most users will want a behaviour similar to this, which is why I chose such an approach of translating a camera. I don't aim to cover every case as I believe other examples will be quite specific to certain types of applications. But I'd love to hear your feedback, on whether I assumed the most popular use-case correctly and whether the example is helpful.

Screen.Recording.2022-02-21.at.01.50.51.mov

[mvlabat]

The example is now in the main branch, so I'll close the issue. But feel free to continue the discussion here or open a new one if you have any feedback on the example or you think we can add a new example demonstrating another use case.

[AThilenius]

@mvlabat Thank you! ❤️ For the library, and this example (exactly what I was looking for). First time using an IM gui alongside a clean ECS and I'm digging it!