GUI performances

[vfrz]

Hello again, I've created a sample project based on one of your samples for testing the UI engine and I think the performance are not that great.

With a simple screen like this one:

<?xml version="1.0" encoding="utf-8" ?>
<UIPanelDefinition>
  <View ViewModelType="Sample12_UPF.UI.Screens.ExampleViewModel, UltravioletSampleTest">
    <Image Source="#Global:Textures:DefaultUIBackground 0 0 1161 685" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"/>
  </View>
</UIPanelDefinition>

I go from 13000+ FPS (without the Image) to ~10800 FPS (with the Image).

And with a more complete screen like this I get about ~5800 FPS:

<?xml version="1.0" encoding="utf-8" ?>
<UIPanelDefinition>
  <View ViewModelType="Sample12_UPF.UI.Screens.ExampleViewModel, UltravioletSampleTest">

    <Image Source="#Global:Textures:DefaultUIBackground 0 0 1161 685" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"/>

    <Grid VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
      <Grid.ColumnDefinitions>
        <ColumnDefinition Width="128"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="128"/>
      </Grid.ColumnDefinitions>
      <Grid.RowDefinitions>
        <RowDefinition Height="128"/>
        <RowDefinition Height="*"/>
        <RowDefinition Height="128"/>
      </Grid.RowDefinitions>

      <Button Grid.Column="0" Grid.Row="0" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Click="ButtonClick">A</Button>
      <Button Grid.Column="2" Grid.Row="0" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Click="ButtonClick">B</Button>
      <Button Grid.Column="0" Grid.Row="2" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Click="ButtonClick">C</Button>
      <Button Grid.Column="2" Grid.Row="2" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Click="ButtonClick">D</Button>

      <StackPanel Grid.Column="1" Grid.Row="0" Grid.RowSpan="3" VerticalAlignment="Center" HorizontalAlignment="Center">
        <TextBlock HorizontalAlignment="Center" HorizontalContentAlignment="Center">{{Message}}</TextBlock>
        <ProgressBar Value="72"></ProgressBar>
        <Button HorizontalAlignment="Center" Click="Reset" Width="256">Reset Message</Button>
        <Button HorizontalAlignment="Center" Click="Exit" Visibility="{{IsExitButtonVisible ? Visibility.Visible : Visibility.Collapsed}}">Exit Sample</Button>
      </StackPanel>

    </Grid>
  </View>
</UIPanelDefinition>

A game with an intensive GUI will suffer from this problem. From what I've read in another issue on the project, the whole layout is recalculated and drawn each frame. Is it still the case? If yes maybe it could be improved.

I know it's hard to develop a perfomant and full-featured GUI engine, I've tried to write one myself with similar features (styling, data binding and xml based layout). I am willing to help.

Actually I don't know a lot about GUI engine programming so I don't have much ideas. One that is coming my mind right now would be to implement a dirty tracking pattern and update/draw only if needed, but it's pretty hard to implement at this state of the project. Maybe optimizations in the spritebatch are possible too?

What are your though?

[Donaut]

It's totally fine:D. You're overthinking it. As long as the performance is not an issue you really shouldn't bother with it. Instead of optimizing spend the time making better gameplay or more content. And you probably making a 2D game so performance really shouldn't be a problem at all;)

[vfrz]

It's totally fine:D. You're overthinking it. As long as the performance is not an issue you really shouldn't bother with it. Instead of optimizing spend the time making better gameplay or more content. And you probably making a 2D game so performance really shouldn't be a problem at all;)

You're actually right. I had hesitated close the issue few days after posting it but then I kinda forgot about it.