If you’re like me, trying to create user interfaces in general is a challenge. So when it comes to working in tools that you’re less familiar with, that challenge basically grows to a level where it’s a roadblock. For me, trying to create user interfaces in Unity3D is basically the perfect example of hitting this roadblock! That’s not to say the UI tools that are available in Unity3D are bad, but my skill level is essentially reset to zero when working with these tools. Fortunately I came across this little gem called NoesisGUI that enables WPF inside of Unity3D!

I plan to do a few updates on this either via YouTube or short blog posts, but NoesisGUI has essentially unlocked my ability to create user interfaces inside of Unity3D. You can find my intro video here, or watch it directly below:

Now I’m still not a UI expert by any means, but at least I get my familiar environment back. NoesisGUI has two primary benefits for me as a software developer:

  • I have access to all the WPF controls, XAML syntax, and styling capabilities that I know and love.
  • I can use tools/IDEs I’m familiar with, not sacrificing years of experience using these tools.

On the first point, for me I find it very tedious to create UI elements in Unity3D. For some good examples, I consider trying to do two pretty common things: control layout and lists of items. On control layout, I find the anchoring system and transforms a total pain to work with in Unity3D. It’s a personal preference sort of thing, but I find it difficult to navigate and get things to work as I expect. However, I know thanks to NoesisGUI I can leverage things like grids and flowing panels so I can use what I know and not try to design a layout system from scratch. Same thing goes with lists! I can use a ListView control thanks to NoesisGUI and then style/template all the controls inside of it leveraging XAML. Effectively, being able to leverage NoesisGUI to enable my experience with WPF means I can struggle with UI design instead of struggling with UI design AND how to make the UI framework work! It doesn’t fix my poor UX abilities, but NoesisGUI does allow me to do my best work at least.

The second point is around tooling. The Unity3D editor is powerful and if you watch any amount of tutorials from YouTube you’ll know that there’s no shortage of people showing how to drag and drop objects into the scene to get the result you’re after. But this doesn’t work well for my design approach because I don’t want my game to be coupled to the Unity3D engine (which I’ll need to write more about later). In fact, the more things I place concretely in the scene, the more it couples my game to Unity3D and it’s just not something I want to commit to. As a result, to decouple my UI code I found myself trying to programmatically make Unity3D UI elements and started to dream up some templating language.

Nonsense. NoesisGUI puts me back in my comfort zone and allows me to use familiar tools like Blend where I get my visual editor for my WPF controls as well as the split view with the XAML editor. Aside from a couple of minor quirks, I was able to get Blend to show things exactly as Unity3D shows them. That means I can rapidly develop my game UI inside of Blend. Along with with a bunch of other design philosophies (i.e. decoupling from Unity3D engine), this means we could literally write a couple-of-line game entry point with a WPF UI overtop of it directly in Blend and have it map to expected behavior in Unity3D. Again, more on some of those design philosophies later, but NoesisGUI really took it to the next level by allowing us to decouple the UI completely from Unity3D restrictions.

I plan to create more writeups and videos on how we’re using NoesisGUI in our RPG project, so stay tuned!