User avatar
JordyKonpyuta
Topic Author
Posts: 2
Joined: 24 Dec 2024, 14:00
Contact:

Implement an UI created with studio in Unreal

19 Mar 2025, 16:48

Hello,

I'm a newbie with Noesis Studio, and I'm racking my brains trying to understand how can I make it works in Unreal.

Image

I have designed a dialogue and quest UI with Noesis Studio, and I want to do several things with it (in Unreal Blueprints) :
- Bind the text name with the name of the NPC
- Bind the text dialogue with the dialogue NPC (with a typewritting effect)
- Launch codes when clicking on the buttons
- etc...

I know that we can drag and drop the xaml file in Unreal and create a view that we can then add to viewport, but I don't know how to add code to it ^^' I noticed that there are data on Noesis Studio, but I don't understand how it works (I tried to read the documentation, but I don't understand anything).

Thanks in advance :)
 
User avatar
sfernandez
Site Admin
Posts: 3240
Joined: 22 Dec 2011, 19:20

Re: Implement an UI created with studio in Unreal

24 Mar 2025, 19:23

Hello, if you're familiar with MVVM development it is as easy as defining a view model and bind the UI to its properties.

In Studio you can go to the Data tab (Ctrl+6) and create a Structure that describes your view model (when the structure is created you can add all its properties on the Properties panel on the right side of Studio). Then you can click the (+) icon in the Structure to create a data set, which will be your design-time data values. If you click on the home+ icon it will set this data as DataContext for the current opened document. Now you can select any UI element, for example a TextBlock, go to its Text property, click in the 3-dot menu on the right of the property edit box, and select "Create Binding", allowing you to bind to whatever property is defined in your view model.

Now in Unreal you will have a bunch of Blueprints created. Some of them will reflect the same data you just created in Studio. In the Level blueprint you can create or use any precreated objects to set them as the DataContext of your Noesis View. If the data context follows the same name conventions for their properties than the one used in Studio, the UI will automatically bind to them.

Hope this clarifies a bit the process. If you need me to provide more details on anything please let me know.
 
User avatar
JordyKonpyuta
Topic Author
Posts: 2
Joined: 24 Dec 2024, 14:00
Contact:

Re: Implement an UI created with studio in Unreal

25 Mar 2025, 14:41

Hello, thanks for your answer !

So I created data assets in Noesis, but now I'm a little lost.
Image

I tried to drag and drop the xaml file in Unreal, but no blueprints appears. Are they supposed to create automatically, or do I have to create them manually ? I noticed that there is a Noesis node in blueprint called Set Data Asset, do I have to use this node in the view to connect the data asset to a blueprint ?
Image

Thanks in advance ^^
 
User avatar
sfernandez
Site Admin
Posts: 3240
Joined: 22 Dec 2011, 19:20

Re: Implement an UI created with studio in Unreal

26 Mar 2025, 15:56

Blueprints are not automatically created, you have to define them in Unreal with the same properties so UI bindings will resolve correctly.
Then you can create an instance of the Blueprint and assign it to the View as DataContext and the UI elements should get the values from there.

When you download our plugin for Unreal you will see there is a project with a bunch of examples. If you look at the DataBinding example, you can see there how we created the Blueprints and instances, and then everything was added to the View. In that example the View acted as the DataContext itself, but you can create a separate ViewModel blueprint if you want too.

Who is online

Users browsing this forum: No registered users and 1 guest