Jumes
Topic Author
Posts: 16
Joined: 31 May 2017, 12:57

How to make a GUI like Doom3 menu options?

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:)
 
User avatar
sfernandez
Site Admin
Posts: 1918
Joined: 22 Dec 2011, 19:20

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

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
Topic Author
Posts: 16
Joined: 31 May 2017, 12:57

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

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
cap1.PNG (81.6 KiB) Viewed 1196 times
cap2.PNG
cap2.PNG (78.47 KiB) Viewed 1196 times
cap3.PNG
 
User avatar
sfernandez
Site Admin
Posts: 1918
Joined: 22 Dec 2011, 19:20

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

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.

Who is online

Users browsing this forum: No registered users and 1 guest