animation improvements

This commit is contained in:
haven1433
2022-11-04 10:17:11 -05:00
parent 79018bd003
commit dbb18937db
6 changed files with 66 additions and 34 deletions

View File

@@ -77,14 +77,14 @@ namespace HavenSoft.HexManiac.Core.ViewModels.Map {
Tutorials.Add(new("UndoArrow", "Undo", "Use the Undo button in the toolbar to undo any mistakes."));
Tutorials.Add(new("FillBucket", "Paint Blocks", "Double-Click over the map to paint with the selected block."));
Tutorials.Add(new("EscapeKey", "Unselect Block", "Press the escape key to unselect a block."));
Tutorials.Add(new(LeftClick, "Select Blocks", "Left-Click and drag on the block panel to select multiple blocks. When multiple blocks are selected, you can draw, but not paint."));
Tutorials.Add(new(LeftClick, "Select Blocks", "Left-Click and drag on the Blocks panel to select multiple blocks. When multiple blocks are selected, you can draw, but not paint."));
}
// editing blocks
{
Tutorials.Add(new("RightAngleArrow", "Edit Block", "Blocks are made of Tiles in a 2x2 grid, with foreground and background layers. Select a block, then click 'Edit Block' in the block panel to show the tile panel."));
Tutorials.Add(new(LeftClick, "Select Tile", "Click a tile in the Tile panel to select it."));
Tutorials.Add(new(LeftClick, "Draw Tile", "Click on a block's foreground or background tile at the top of the block panel to replace it with your selected tile/palette."));
Tutorials.Add(new("RightAngleArrow", "Edit Block", "Blocks are made of Tiles in a 2x2 grid, with foreground and background layers. Select a block, then click 'Edit Block' in the Blocks panel to show the Tiles panel."));
Tutorials.Add(new(LeftClick, "Select Tile", "Click a tile in the Tiles panel to select it."));
Tutorials.Add(new(LeftClick, "Draw Tile", "Click on a block's foreground or background tile at the top of the Blocks panel to replace it with your selected tile/palette."));
Tutorials.Add(new("ArrowsLeftRight", "Flip Tile", "Click the arrows next to the selected block's foreground/background tile to flip that tile vertically or horizontally."));
}

View File

@@ -35,6 +35,9 @@
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Decorator IsHitTestVisible="False" Width="30" Height="30" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0,-60,0,0" Name="BackButtonWidget" />
<Decorator IsHitTestVisible="False" Width="30" Height="30" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="96,-60,0,0" Name="UndoButtonWidget" />
<!-- Block Panel -->
<DockPanel Grid.Column="0" Grid.RowSpan="2" Panel.ZIndex="1" Name="BlockPanel" Background="{DynamicResource Background}">
<local:AngleBorder DockPanel.Dock="Top" Content="Blocks" Direction="Out" Width="100" HorizontalContentAlignment="Center" Margin="0,0,0,4" />
@@ -61,7 +64,7 @@
ItemsSource="{Binding CollisionOptions}" SelectedIndex="{Binding CollisionIndex}" />
</StackPanel>
<Decorator Grid.Row="1" Height="20" VerticalAlignment="Bottom" HorizontalAlignment="Right" Margin="0,0,30,55" Visibility="{Binding BlockEditorVisible, Converter={StaticResource BoolToVisibility}}">
<local:AngleButton DataContext="{Binding PrimaryMap.BlockEditor}" Content="Edit Block"
<local:AngleButton DataContext="{Binding PrimaryMap.BlockEditor}" Content="Edit Block" x:Name="EditBlockButton"
Direction="Right" Padding="2,0" Command="{res:MethodCommand ToggleShowTiles}" />
</Decorator>
<Grid Grid.Row="1" Height="20" VerticalAlignment="Bottom" HorizontalAlignment="Left" Margin="0,0,0,55">
@@ -157,7 +160,7 @@
<local:PixelImage DataContext="{Binding MultiTileDrawRender}" />
</Decorator>
<Decorator Visibility="{Binding BlockEditorVisible, Converter={StaticResource BoolToVisibility}}" Margin="0,0,10,0">
<local:SelectedBlockEditor DataContext="{Binding PrimaryMap.BlockEditor}"/>
<local:SelectedBlockEditor x:Name="BlockEditor" DataContext="{Binding PrimaryMap.BlockEditor}"/>
</Decorator>
</Grid>
<ScrollViewer Name="BlockViewer">
@@ -920,7 +923,7 @@
</Border>
<!-- Tutorials Panel -->
<local:TutorialControl x:Name="TutorialsControl" Grid.Row="1" Grid.Column="1" HorizontalAlignment="Right" VerticalAlignment="Center" DataContext="{Binding Tutorials}" />
<local:TutorialControl x:Name="TutorialsControl" Grid.Row="1" Grid.Column="1" HorizontalAlignment="Right" VerticalAlignment="Center" DataContext="{Binding Tutorials}" EnterTutorial="OnEnterTutorial" />
<!-- Toolbar -->
<StackPanel Grid.Column="1" Orientation="Horizontal" Background="{DynamicResource Background}" Margin="1,0,1,5" Panel.ZIndex="2">
@@ -932,8 +935,8 @@
<Path Stretch="Uniform" Fill="{DynamicResource Secondary}" Data="{res:Icon ThinMinus}" />
</Button>
</StackPanel>
<local:AngleButton Direction="Left" Content="Edit Map Header" Command="{res:MethodCommand ToggleHeaderPanel}" Margin="5,0,0,0" />
<local:AngleButton Direction="Out" Command="{Binding PrimaryMap.GotoWildData}" Width="110">
<local:AngleButton Direction="Left" Content="Edit Map Header" Command="{res:MethodCommand ToggleHeaderPanel}" Margin="5,0,0,0" x:Name="MapHeaderButton" />
<local:AngleButton Direction="Out" Command="{Binding PrimaryMap.GotoWildData}" Width="110" x:Name="WildButton">
<local:AngleButton.Style>
<Style TargetType="local:AngleButton" BasedOn="{StaticResource {x:Type local:AngleButton}}">
<Style.Triggers>
@@ -962,8 +965,9 @@
</TextBlock.Style>
</TextBlock>
</local:AngleButton>
<local:AngleButton Direction="Right" Content="Edit Border Block" DataContext="{Binding PrimaryMap.BorderEditor}" Command="{res:MethodCommand ToggleBorderEditor}" Margin="0,0,5,0" />
<Border Width="24" Height="24" BorderThickness="1" BorderBrush="{DynamicResource Secondary}" Background="{DynamicResource Secondary}" MouseLeftButtonDown="EventTemplateDown" Margin="5,0,0,0" Tag="{x:Static map:EventCreationType.Object}" ToolTipService.InitialShowDelay="0" ToolTip="Drag to Create New Object">
<local:AngleButton Direction="Right" Content="Edit Border Block" DataContext="{Binding PrimaryMap.BorderEditor}" Command="{res:MethodCommand ToggleBorderEditor}" Margin="0,0,5,0" x:Name="EditBorderButton" />
<Border Width="24" Height="24" BorderThickness="1" BorderBrush="{DynamicResource Secondary}" Background="{DynamicResource Secondary}" Name="ObjectEventTemplate"
MouseLeftButtonDown="EventTemplateDown" Margin="5,0,0,0" Tag="{x:Static map:EventCreationType.Object}" ToolTipService.InitialShowDelay="0" ToolTip="Drag to Create New Object">
<local:PixelImage DataContext="{Binding Templates.ObjectTemplateImage}" VerticalAlignment="Center" HorizontalAlignment="Center" TransparentBrush="{DynamicResource Secondary}"/>
</Border>
<ToggleButton Padding="0" Width="12" Height="12" VerticalAlignment="Top" Name="ShowTemplateSettingsButton" IsChecked="{Binding ShowTemplateSettings}">
@@ -1098,21 +1102,23 @@
</Grid>
</Border>
</Popup>
<Border Width="24" Height="24" BorderThickness="1" BorderBrush="{DynamicResource Secondary}" Background="{DynamicResource Accent}"
MouseLeftButtonDown="EventTemplateDown" Margin="5,0" Tag="{x:Static map:EventCreationType.Warp}"
ToolTipService.InitialShowDelay="0" ToolTip="Drag to Create New Warp">
<TextBlock Text="W" HorizontalAlignment="Center" VerticalAlignment="Center" FontStyle="Italic" />
</Border>
<Border Width="24" Height="24" BorderThickness="1" BorderBrush="{DynamicResource Secondary}" Background="{DynamicResource Stream2}"
MouseLeftButtonDown="EventTemplateDown" Margin="5,0" Tag="{x:Static map:EventCreationType.Script}"
ToolTipService.InitialShowDelay="0" ToolTip="Drag to Create New Script">
<TextBlock Text="Sc" HorizontalAlignment="Center" VerticalAlignment="Center" FontStyle="Italic" />
</Border>
<Border Width="24" Height="24" BorderThickness="1" BorderBrush="{DynamicResource Secondary}" Background="{DynamicResource Error}"
MouseLeftButtonDown="EventTemplateDown" Margin="5,0" Tag="{x:Static map:EventCreationType.Signpost}"
ToolTipService.InitialShowDelay="0" ToolTip="Drag to Create New Signpost">
<TextBlock Text="Sp" HorizontalAlignment="Center" VerticalAlignment="Center" FontStyle="Italic" />
</Border>
<StackPanel Name="OtherEventTemplates" Orientation="Horizontal">
<Border Width="24" Height="24" BorderThickness="1" BorderBrush="{DynamicResource Secondary}" Background="{DynamicResource Accent}"
MouseLeftButtonDown="EventTemplateDown" Margin="5,0" Tag="{x:Static map:EventCreationType.Warp}"
ToolTipService.InitialShowDelay="0" ToolTip="Drag to Create New Warp">
<TextBlock Text="W" HorizontalAlignment="Center" VerticalAlignment="Center" FontStyle="Italic" />
</Border>
<Border Width="24" Height="24" BorderThickness="1" BorderBrush="{DynamicResource Secondary}" Background="{DynamicResource Stream2}"
MouseLeftButtonDown="EventTemplateDown" Margin="5,0" Tag="{x:Static map:EventCreationType.Script}"
ToolTipService.InitialShowDelay="0" ToolTip="Drag to Create New Script">
<TextBlock Text="Sc" HorizontalAlignment="Center" VerticalAlignment="Center" FontStyle="Italic" />
</Border>
<Border Width="24" Height="24" BorderThickness="1" BorderBrush="{DynamicResource Secondary}" Background="{DynamicResource Error}"
MouseLeftButtonDown="EventTemplateDown" Margin="5,0" Tag="{x:Static map:EventCreationType.Signpost}"
ToolTipService.InitialShowDelay="0" ToolTip="Drag to Create New Signpost">
<TextBlock Text="Sp" HorizontalAlignment="Center" VerticalAlignment="Center" FontStyle="Italic" />
</Border>
</StackPanel>
<Border Width="24" Height="24" BorderThickness="1" BorderBrush="{DynamicResource Secondary}" Background="{DynamicResource Text1}"
Visibility="{Binding PrimaryMap.CanCreateFlyEvent, Converter={StaticResource BoolToVisibility}}"
MouseLeftButtonDown="EventTemplateDown" Margin="5,0" Tag="{x:Static map:EventCreationType.Fly}"

View File

@@ -81,6 +81,23 @@ namespace HavenSoft.HexManiac.WPF.Controls {
}
}
private void OnEnterTutorial(object sender, MapTutorialViewModel tutorial) {
var index = (Tutorial)(tutorial.Index - 1);
if (index == Tutorial.LeftClickBlock_SelectBlock) FocusElement.Raise(BlockViewer);
if (index == Tutorial.BlockButton_EditBlocks) FocusElement.Raise(EditBlockButton);
if (index == Tutorial.ToolbarButton_GotoWildData) FocusElement.Raise(WildButton);
if (index == Tutorial.ToolbarButton_EditMapHeader) FocusElement.Raise(MapHeaderButton);
if (index == Tutorial.ClickBlock_DrawTile) FocusElement.Raise(BlockEditor);
if (index == Tutorial.BackButton_GoBack) FocusElement.Raise(BackButtonWidget);
if (index == Tutorial.ToolbarUndo_Undo) FocusElement.Raise(UndoButtonWidget);
if (index == Tutorial.ToolbarButton_EditBorderBlock) FocusElement.Raise(EditBorderButton);
if (index == Tutorial.ToolbarTemplate_ConfigureObject) FocusElement.Raise(ShowTemplateSettingsButton);
if (index == Tutorial.ToolbarTemplate_CreateObject) FocusElement.Raise(ObjectEventTemplate);
if (index == Tutorial.ToolbarTemplate_CreateEvent) FocusElement.Raise(OtherEventTemplates);
// TODO cycle events needs focus too
}
#region Map Interaction
private MouseButton withinMapInteraction = MouseButton.XButton1; // track which button is being used. Set to XButton1 when not in use.

View File

@@ -15,7 +15,7 @@
<ItemsControl.ItemTemplate>
<!-- Each card is 400x90, with 100x90 on the left for the icon/title and 300x90 for the description. -->
<DataTemplate>
<Border BorderThickness="1" BorderBrush="{DynamicResource Secondary}" Background="{DynamicResource Backlight}">
<Border BorderThickness="1" BorderBrush="{DynamicResource Secondary}" Background="{DynamicResource Backlight}" MouseEnter="OnEnterTutorial">
<Canvas Width="398" Height="88">
<Decorator Width="98" Height="78">
<Path Data="{Binding Icon, Converter={StaticResource IconConverter}}" Stretch="Uniform" Margin="5,20,5,5" Fill="{DynamicResource Secondary}" />

View File

@@ -1,4 +1,5 @@
using HavenSoft.HexManiac.Core.ViewModels.Map;
using HavenSoft.HexManiac.Core;
using HavenSoft.HexManiac.Core.ViewModels.Map;
using System;
using System.Windows;
using System.Windows.Controls;
@@ -13,6 +14,8 @@ namespace HavenSoft.HexManiac.WPF.Controls {
private const double ElementHeight = 90;
public event EventHandler<MapTutorialViewModel> EnterTutorial;
public MapTutorialsViewModel ViewModel => DataContext as MapTutorialsViewModel;
#region Constructor
@@ -49,6 +52,12 @@ namespace HavenSoft.HexManiac.WPF.Controls {
Tutorials.BeginAnimation(Canvas.LeftProperty, exitControlAnimaiton);
}
private void OnEnterTutorial(object sender, EventArgs e) {
var element = (FrameworkElement)sender;
if (element.DataContext is not MapTutorialViewModel tutorial) return;
EnterTutorial.Raise(this, tutorial);
}
private void HandleTutorialChanged(object sender, EventArgs e) {
var tut = (MapTutorialViewModel)sender;
var ui = (FrameworkElement)Tutorials.ItemContainerGenerator.ContainerFromItem(tut);

View File

@@ -484,10 +484,10 @@ namespace HavenSoft.HexManiac.WPF.Windows {
private void ExecuteAnimation(object sender, ExecutedRoutedEventArgs e) {
if (!IsActive) return;
var element = (FrameworkElement)e.Parameter;
Dispatcher.BeginInvoke((Action<FrameworkElement>)DispatchAnimation, DispatcherPriority.ApplicationIdle, element);
Dispatcher.BeginInvoke(DispatchAnimation, DispatcherPriority.ApplicationIdle, element);
}
private static readonly Duration fastTime = TimeSpan.FromSeconds(.3);
private static readonly Duration fastTime = TimeSpan.FromSeconds(.5);
private void DispatchAnimation(FrameworkElement element) {
if (element == GotoBox && !ViewModel.GotoViewModel.ShowAll) return;
var point = element.TranslatePoint(new System.Windows.Point(), ContentPanel);
@@ -495,10 +495,10 @@ namespace HavenSoft.HexManiac.WPF.Windows {
FocusAnimationElement.Visibility = Visibility.Visible;
FocusAnimationElement.RenderTransform = new TranslateTransform();
var xAnimation = new DoubleAnimation(-ContentPanel.ActualWidth + point.X + element.ActualWidth, fastTime);
var yAnimation = new DoubleAnimation(point.Y, fastTime);
var widthAnimation = new DoubleAnimation(ContentPanel.ActualWidth, element.ActualWidth, fastTime);
var heightAnimation = new DoubleAnimation(ContentPanel.ActualHeight, element.ActualHeight, fastTime);
var xAnimation = new DoubleAnimation((-ContentPanel.ActualWidth + point.X + element.ActualWidth) / 2, -ContentPanel.ActualWidth + point.X + element.ActualWidth, fastTime) { DecelerationRatio = 1 };
var yAnimation = new DoubleAnimation(point.Y / 2, point.Y, fastTime) { DecelerationRatio = 1 };
var widthAnimation = new DoubleAnimation(ContentPanel.ActualWidth / 2, element.ActualWidth, fastTime) { DecelerationRatio = 1 };
var heightAnimation = new DoubleAnimation(ContentPanel.ActualHeight / 2, element.ActualHeight, fastTime) { DecelerationRatio = 1 };
heightAnimation.Completed += (sender1, e1) => {
FocusAnimationElement.Visibility = Visibility.Collapsed;
FocusAnimationElement.RenderTransform = null;