How to make a GUI like Doom3 menu options?
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:)
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:)
-
-
sfernandez
Site Admin
- Posts: 2097
- Joined:
Re: How to make a GUI like Doom3 menu options?
Hello Jumes,
Is this what you mean?
I used the 9-slice approach so I can stretch the center part of the dialog borders.
Is this what you mean?
Code: Select all
<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>
Re: How to make a GUI like Doom3 menu options?
Hello,
I mean the option menu self in the main menu. The option menu looks like vertext animation(change path's vertex).
I mean the option menu self in the main menu. The option menu looks like vertext animation(change path's vertex).
-
-
sfernandez
Site Admin
- Posts: 2097
- Joined:
Re: How to make a GUI like Doom3 menu options?
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.
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: Bing [Bot] and 2 guests