Vatyx
Topic Author
Posts: 9
Joined: 15 May 2023, 22:41

Supporting both World Space and traditional UI

29 May 2023, 22:39

Hi, I'm very new to Noesis and Blend. I am trying to support having both normal UI and world space UI. So I want to have health bars about my enemy but then also a normal HUD. I would like to attach NoesisWorldUI scripts to the game objects that have health bars for example. I have a 2D game

It looks as if when I tick "World Space UI" on my Noesis View on my camera, anything associated with the view's XAML becomes HUGE and doesn't move with the camera. I saw that all WorldSpace does is set the ViewProjectionMatrix of the _uiview.

What am I doing wrong? Do I need to have 2 views for this? Two cameras? Should I make my own component that handles this and doesn't deal with Z order?

I found this thread viewtopic.php?t=2045 and see that user is doing their own logic to get elements to show up in the right place. Can I not render WorldSpaceUI and non-WorldSpaceUI elements out of the box with Noesis?
 
User avatar
jsantos
Site Admin
Posts: 3906
Joined: 20 Jan 2012, 17:18
Contact:

Re: Supporting both World Space and traditional UI

30 May 2023, 13:02

World Space UI is still quite new and we are still polishing details from the feedback we are getting.

Right now, in Unity, to have both World Space and traditional UI you have two options:
  • Have separate views (and separate cameras, rendering to the same render target)
  • Convert the traditional UI to World Space by adding in to a new GameObject set as child of the camera.
 
Vatyx
Topic Author
Posts: 9
Joined: 15 May 2023, 22:41

Re: Supporting both World Space and traditional UI

30 May 2023, 23:15

I see. How do I make the traditional UI fill up the screen correctly if I go with the second solution?

What do you think about faking World Space UI by moving elements in a traditional view to look as if they are in their world space positions? That seems to be the standard solution in other UI frameworks.
 
Vatyx
Topic Author
Posts: 9
Joined: 15 May 2023, 22:41

Re: Supporting both World Space and traditional UI

01 Jun 2023, 22:53

Aplogies for the bump, just wanting to figure the above out. Thanks!
 
User avatar
jsantos
Site Admin
Posts: 3906
Joined: 20 Jan 2012, 17:18
Contact:

Re: Supporting both World Space and traditional UI

02 Jun 2023, 12:34

Sorry for the late reply.
I see. How do I make the traditional UI fill up the screen correctly if I go with the second solution?
Right now, this needs to be manually adjusted (or by code on your side).
What do you think about faking World Space UI by moving elements in a traditional view to look as if they are in their world space positions? That seems to be the standard solution in other UI frameworks.
This is something we were thinking about in the past. Begin able to render a node in the "near plane" of the current projection matrix. There are also a few implications regarding the z-buffer, because right now checking against it is enabled globally for the view, and with this implementation this will be needed "by element". If you want to open a ticket about this, right now we can't give priority to this task, but we will find time in the future.

Have you tried the per view approach?
 
Vatyx
Topic Author
Posts: 9
Joined: 15 May 2023, 22:41

Re: Supporting both World Space and traditional UI

02 Jun 2023, 20:31

Cool, makes sense. Thanks for the answers! I won't create a ticket because it looks like you all are aware of the problems and will get to it when you get to it :)

Haven't tried the per view approach but that's mostly because I haven't looked into having two cameras rendering to the same screen render target. I also am not really a fan of this workaround code/structure wise so am going to try to go for the code moving approach on the same view.

Regarding this, in the other thread I saw it mentioned that I could use data bindings to easily support having the positions of the elements move. Could you go into a bit more detail about what that would look like.
 
User avatar
jsantos
Site Admin
Posts: 3906
Joined: 20 Jan 2012, 17:18
Contact:

Re: Supporting both World Space and traditional UI

07 Jun 2023, 00:01

Haven't tried the per view approach but that's mostly because I haven't looked into having two cameras rendering to the same screen render target. I also am not really a fan of this workaround code/structure wise so am going to try to go for the code moving approach on the same view.
Having more than one camera rendering to the same render target is pretty standard in Unity (search for camera stacking). But, yeah, I understand you.
Regarding this, in the other thread I saw it mentioned that I could use data bindings to easily support having the positions of the elements move. Could you go into a bit more detail about what that would look like.
Could you please elaborate? You mean 2D positions?
 
Vatyx
Topic Author
Posts: 9
Joined: 15 May 2023, 22:41

Re: Supporting both World Space and traditional UI

23 Jun 2023, 21:40

Yes I mean the 2D positions of the health bars so they are in the correct place over the enemy
 
User avatar
sfernandez
Site Admin
Posts: 2984
Joined: 22 Dec 2011, 19:20

Re: Supporting both World Space and traditional UI

27 Jun 2023, 15:05

For positioning the health bars you can expose in the element viewmodel a PosX and PosY properties that you can bind to a TranslateTransform:
class ElementVM: INotifyPropertyChanged
{
  public float PosX
  {
    get => _posX;
    set { if (_posX == value) return; _posX = value; OnPropertyChanged(nameof(PosX)); }
  }
  public float PosY
  {
    get => _posY;
    set { if (_posY == value) return; _posY = value; OnPropertyChanged(nameof(PosY)); }
  }
  ...
}
And assuming you have all your scene elements exposed in a collection, you can bind them using an ItemsControl:
<ItemsControl ItemsSource="{Binding Elements}">
  <ItemsControl.ItemsPanel>
    <ItemsPanelTemplate>
      <Grid/>
    </ItemsPanelTemplate>
  </ItemsControl.ItemsPanel>
  <ItemsControl.ItemTemplate>
    <DataTemplate>
      <Rectangle Width="100" Height="15" Fill="Lime" Stroke="Black" HorizontalAlignment="Left" VerticalAlignment="Top">
        <Rectangle.RenderTransform>
          <TranslateTransform X="{Binding PosX}" Y="{Binding PosY}"/>
        </Rectangle.RenderTransform>
      </Rectangle>
    </DataTemplate>
  </ItemsControl.ItemTemplate>
</ItemsControl>
Hope this helps.

Who is online

Users browsing this forum: Ahrefs [Bot] and 87 guests