Page 1 of 1

How to make a GUI like Doom3 menu options?

Posted: 24 Jun 2017, 15:05
by Jumes
Hello,
I want to make a main menu like Doom3's menu options, I know how to make the basic animations, but I don't know how to transform the border outline from one polygon shape to another polygon shape like Doom3's does in this video https://www.youtube.com/watch?v=jpe3p8VRBvY
This effect is very cool:)

Re: How to make a GUI like Doom3 menu options?

Posted: 26 Jun 2017, 18:26
by sfernandez
Hello Jumes,

Is this what you mean?
<Grid
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <Grid.Resources>
        <ControlTemplate x:Key="dialogTemplate" TargetType="ContentControl">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>
                
                <Path Grid.Row="0" Grid.Column="0" Data="M10,40 L40,10 50,10 50,50 10,50z" Fill="DarkGray" Stretch="None"/>
                <Rectangle Grid.Row="0" Grid.Column="1" Fill="DarkGray" Stretch="Fill" Margin="0,10,0,0"/>
                <Path Grid.Row="0" Grid.Column="2" Data="M0,10 L10,10 40,40 40,50 0,50z" Fill="DarkGray" Stretch="None" Margin="0,0,10,0"/>

                <Rectangle Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="3" Fill="DarkGray" Stretch="Fill" Margin="10,0"/>

                <Path Grid.Row="2" Grid.Column="0" Data="M10,0 L50,0 50,140 40,140 0,100 0,10z" Fill="DarkGray" Stretch="None" Margin="0,0,0,10"/>
                <Rectangle Grid.Row="2" Grid.Column="1" Fill="DarkGray" Stretch="Fill" Margin="0,0,0,10"/>
                <Path Grid.Row="2" Grid.Column="2" Data="M0,0 40,0 40,110 10,140 0,140z" Fill="DarkGray" Stretch="None" Margin="0,0,10,10"/>
                
                <ContentPresenter Grid.Row="0" Grid.RowSpan="3" Grid.Column="0" Grid.ColumnSpan="3"/>
            </Grid>
        </ControlTemplate>
    </Grid.Resources>
    <ContentControl x:Name="dlg" Template="{StaticResource dialogTemplate}" Width="500" Height="300"
                    HorizontalAlignment="Left" VerticalAlignment="Bottom" Margin="100,0,0,100"/>
    <Button Content="Animate Dialog" HorizontalAlignment="Center" VerticalAlignment="Bottom">
        <Button.Triggers>
            <EventTrigger RoutedEvent="Button.Click">
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation From="500" To="300" Duration="0:0:0.3"
                                         Storyboard.TargetName="dlg" Storyboard.TargetProperty="Width"/>
                        <DoubleAnimation From="300" To="500" Duration="0:0:0.3"
                                         Storyboard.TargetName="dlg" Storyboard.TargetProperty="Height"/>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Button.Triggers>
    </Button>
</Grid>
I used the 9-slice approach so I can stretch the center part of the dialog borders.

Re: How to make a GUI like Doom3 menu options?

Posted: 27 Jun 2017, 03:30
by Jumes
Hello,
I mean the option menu self in the main menu. The option menu looks like vertext animation(change path's vertex).
cap1.PNG
cap1.PNG (81.6 KiB) Viewed 1354 times
cap2.PNG
cap2.PNG (78.47 KiB) Viewed 1354 times
cap3.PNG

Re: How to make a GUI like Doom3 menu options?

Posted: 29 Jun 2017, 22:29
by sfernandez
Path vertex/segment animation is not supported yet in NoesisGUI. All the related classes are not implemented.
But you can probably animate that button + menu using several paths as I did with the other panel.