How to make a GUI like Doom3 menu options?

Jumes · 24 Jun 2017, 15:05

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:)

26 Jun 2017, 18:26

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.

Jumes · 27 Jun 2017, 03:30

Hello,
I mean the option menu self in the main menu. The option menu looks like vertext animation(change path's vertex).

: cap1.PNG (81.6 KiB) Viewed 1196 times

: cap2.PNG (78.47 KiB) Viewed 1196 times

29 Jun 2017, 22:29

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.

How to make a GUI like Doom3 menu options?

How to make a GUI like Doom3 menu options?

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

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

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

Who is online