17cupsofcoffee / tetra

🎮 A simple 2D game framework written in Rust
MIT License
909 stars 63 forks source link

egui integration #243

Closed Elinvynia closed 3 years ago

Elinvynia commented 3 years ago

Summary: The egui UI framework is an extremely ergonomic one, allowing to easily build complex UIs for almost any purpose. I've been trying to integrate it myself into our game, unfortunately seems like it is a tad above my skill level. You can look at my current attempt here: https://github.com/Elinvynia/Enfaria/blob/tetra/enfaria-game/src/egui.rs which produces results looking like this: image

Why is this needed? This change doesn't necessarily need to happen in tetra, but could be a separate crate in case users wanted to use something different for handling the UI. I'm happy with any of my code being used for that purpose. But it would certainly make building slightly more complex 2D games much easier and more fun.

17cupsofcoffee commented 3 years ago

I don't think I'd want to have third-party UI crates integrated into Tetra directly (there's a lot of them, and everyone has a different favourite one 😄), but making it possible to use them together is definitely something I care about. This was one of the main reasons I added the Mesh API (and why some of the changes to that API were made in 0.6).

Specifically with regards to egui, I've been meaning to play around with that library for a while! If I get it working with Tetra, I will definitely publish an example at the very least - not sure yet if I want to maintain a full crate for it myself, we'll see 😅 I also have some imgui code I need to revisit.

I think for your example, the main bit you're missing is uploading the egui texture data and then binding that to your Tetra mesh - that's where it gets all the fonts and stuff from. egui gives you a Vec of the alpha values for each pixel of the texture, which you'd need to turn into a Vec of RGBA data. You can then upload that via Tetra's Texture::from_rgba constructor/Texture::replace_data method.

In the web backend, they call this function on every paint, if you need an example of the logic. It seems to basically boil down to:

Elinvynia commented 3 years ago

Wow, I can't even begin to describe how helpful that was! I've managed to fix it now (though extremely inefficiently, just to get it running 😅 ) but it works regardless!

I guess something like a semi-official example would be nice to save time for people looking to do this in the future?

Elinvynia commented 3 years ago

Example integration here: https://github.com/Elinvynia/tetra-egui

17cupsofcoffee commented 3 years ago

Thank you! I will take a look at the code when I get a sec and see if there's any pain points/missing stuff in Tetra :)