What's the best way to do sprite sheet animation?
Hi,
I need to do much sprite sheet animation in NoesisGUI, so I'd like to find some way to do this more efficient.
From the official tutorial, I can use following code snippet to achieve this animation:
But the method would draw bunch of Rectangles for each frame, maybe just draw one rectangle and animate its Fill property would be better?
I need to do much sprite sheet animation in NoesisGUI, so I'd like to find some way to do this more efficient.
From the official tutorial, I can use following code snippet to achieve this animation:
Code: Select all
<Storyboard RepeatBehavior="Forever">
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="aladin_sprite_01"
Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0:0:0.00">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
<DiscreteObjectKeyFrame KeyTime="0:0:0.05">
<DiscreteObjectKeyFrame.Value>
<Visibility>Hidden</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
...
</Storyboard>
...
<Grid>
<Rectangle x:Name="aladin_sprite_01" Fill="{StaticResource aladin01}" Width="33" Height="54"
HorizontalAlignment="Center" VerticalAlignment="Center" Visibility="Visible"/>
<Rectangle x:Name="aladin_sprite_02" Fill="{StaticResource aladin02}" Width="33" Height="54"
HorizontalAlignment="Center" VerticalAlignment="Center" Visibility="Hidden"/>
...
</Grid>
Code: Select all
<Storyboard RepeatBehavior="Forever">
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="aladin"
Storyboard.TargetProperty="Fill">
<DiscreteObjectKeyFrame KeyTime="0:0:0.00" Value="{Binding Source={StaticResource aladin01}}" />
<DiscreteObjectKeyFrame KeyTime="0:0:0.10" Value="{Binding Source={StaticResource aladin02}}" />
<DiscreteObjectKeyFrame KeyTime="0:0:0.20" Value="{Binding Source={StaticResource aladin03}}" />
<DiscreteObjectKeyFrame KeyTime="0:0:0.30" Value="{Binding Source={StaticResource aladin04}}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
...
<Grid>
<Rectangle x:Name="aladin" Width="33" Height="54" />
</Grid>
-
-
sfernandez
Site Admin
- Posts: 3264
- Joined:
Re: What's the best way to do sprite sheet animation?
I think your approach will probably be more efficient, just a couple of suggestions:
Instead of using bindings in the discrete key frame, use the StaticResource directly:
And make sure that rectangle's Width and Height correspond to the size of the sprite so image is not distorted. You can set these properties in the animation too.
Instead of using bindings in the discrete key frame, use the StaticResource directly:
Code: Select all
<Storyboard RepeatBehavior="Forever">
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="aladin" Storyboard.TargetProperty="Fill">
<DiscreteObjectKeyFrame KeyTime="0:0:0.00" Value="{StaticResource aladin01}" />
<DiscreteObjectKeyFrame KeyTime="0:0:0.10" Value="{StaticResource aladin02}" />
<DiscreteObjectKeyFrame KeyTime="0:0:0.20" Value="{StaticResource aladin03}" />
<DiscreteObjectKeyFrame KeyTime="0:0:0.30" Value="{StaticResource aladin04}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
Re: What's the best way to do sprite sheet animation?
Thanks @sfernandez,
Another thing related to sprite sheet animation. Does it possible to combine Viewbox and Viewport in ImageBrush? I'd like to use "trim" function to remove the transparency around sprite inside TexturePacker to reduce texture size.
My sheet file just like this:
But not only the right sprite, but also the texture around being shown.
So does it possible to achieve this? My sample files is attached.
Another thing related to sprite sheet animation. Does it possible to combine Viewbox and Viewport in ImageBrush? I'd like to use "trim" function to remove the transparency around sprite inside TexturePacker to reduce texture size.
My sheet file just like this:
Code: Select all
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<ImageBrush x:Key="Burn_01" ImageSource="Burn.png" Viewbox="269,153,133,82" ViewboxUnits="Absolute" Viewport="10,118,133,82" ViewportUnits="Absolute" TileMode="None" Stretch="None"/>
<ImageBrush x:Key="Burn_02" ImageSource="Burn.png" Viewbox="265,237,131,121" ViewboxUnits="Absolute" Viewport="8,79,131,121" ViewportUnits="Absolute" TileMode="None" Stretch="None"/>
<ImageBrush x:Key="Burn_03" ImageSource="Burn.png" Viewbox="1,367,128,142" ViewboxUnits="Absolute" Viewport="11,58,128,142" ViewportUnits="Absolute" TileMode="None" Stretch="None"/>
<ImageBrush x:Key="Burn_04" ImageSource="Burn.png" Viewbox="133,186,130,144" ViewboxUnits="Absolute" Viewport="11,56,130,144" ViewportUnits="Absolute" TileMode="None" Stretch="None"/>
</ResourceDictionary>
So does it possible to achieve this? My sample files is attached.
-
-
sfernandez
Site Admin
- Posts: 3264
- Joined:
Re: What's the best way to do sprite sheet animation?
It is something we are aware of, it isn't correctly implemented in our renderer yet. Please create a ticket in our bugtracker and add this sample data.But not only the right sprite, but also the texture around being shown.
Yes, it is possible by modifying the target surface size (the Rectangle) to the sprite size, as I suggested in the previous post. You have to do it in the animation as follows:So does it possible to achieve this? My sample files is attached.
Code: Select all
<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300">
<UserControl.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="./BurnSheet.xaml" />
</ResourceDictionary.MergedDictionaries>
<Storyboard x:Key="Run" RepeatBehavior="Forever">
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Burn" Storyboard.TargetProperty="Fill">
<DiscreteObjectKeyFrame KeyTime="0:0:0.0" Value="{StaticResource Burn_01}" />
<DiscreteObjectKeyFrame KeyTime="0:0:0.1" Value="{StaticResource Burn_02}" />
<DiscreteObjectKeyFrame KeyTime="0:0:0.2" Value="{StaticResource Burn_03}" />
<DiscreteObjectKeyFrame KeyTime="0:0:0.3" Value="{StaticResource Burn_04}" />
<DiscreteObjectKeyFrame KeyTime="0:0:0.4" Value="{StaticResource Burn_05}" />
<DiscreteObjectKeyFrame KeyTime="0:0:0.5" Value="{StaticResource Burn_06}" />
<DiscreteObjectKeyFrame KeyTime="0:0:0.6" Value="{StaticResource Burn_07}" />
<DiscreteObjectKeyFrame KeyTime="0:0:0.7" Value="{StaticResource Burn_08}" />
<DiscreteObjectKeyFrame KeyTime="0:0:0.8" Value="{StaticResource Burn_09}" />
<DiscreteObjectKeyFrame KeyTime="0:0:0.9" Value="{StaticResource Burn_10}" />
<DiscreteObjectKeyFrame KeyTime="0:0:1.0" Value="{StaticResource Burn_11}" />
<DiscreteObjectKeyFrame KeyTime="0:0:1.1" Value="{StaticResource Burn_12}" />
</ObjectAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="Burn" Storyboard.TargetProperty="Width">
<DiscreteDoubleKeyFrame KeyTime="0:0:0.0" Value="133" />
<DiscreteDoubleKeyFrame KeyTime="0:0:0.1" Value="131" />
<DiscreteDoubleKeyFrame KeyTime="0:0:0.2" Value="128" />
<DiscreteDoubleKeyFrame KeyTime="0:0:0.3" Value="130" />
<DiscreteDoubleKeyFrame KeyTime="0:0:0.4" Value="133" />
<DiscreteDoubleKeyFrame KeyTime="0:0:0.5" Value="131" />
<DiscreteDoubleKeyFrame KeyTime="0:0:0.6" Value="130" />
<DiscreteDoubleKeyFrame KeyTime="0:0:0.7" Value="128" />
<DiscreteDoubleKeyFrame KeyTime="0:0:0.8" Value="120" />
<DiscreteDoubleKeyFrame KeyTime="0:0:0.9" Value="103" />
<DiscreteDoubleKeyFrame KeyTime="0:0:1.0" Value="93" />
<DiscreteDoubleKeyFrame KeyTime="0:0:1.1" Value="83" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="Burn" Storyboard.TargetProperty="Height">
<DiscreteDoubleKeyFrame KeyTime="0:0:0.0" Value="82" />
<DiscreteDoubleKeyFrame KeyTime="0:0:0.1" Value="121" />
<DiscreteDoubleKeyFrame KeyTime="0:0:0.2" Value="142" />
<DiscreteDoubleKeyFrame KeyTime="0:0:0.3" Value="144" />
<DiscreteDoubleKeyFrame KeyTime="0:0:0.4" Value="170" />
<DiscreteDoubleKeyFrame KeyTime="0:0:0.5" Value="183" />
<DiscreteDoubleKeyFrame KeyTime="0:0:0.6" Value="179" />
<DiscreteDoubleKeyFrame KeyTime="0:0:0.7" Value="150" />
<DiscreteDoubleKeyFrame KeyTime="0:0:0.8" Value="142" />
<DiscreteDoubleKeyFrame KeyTime="0:0:0.9" Value="112" />
<DiscreteDoubleKeyFrame KeyTime="0:0:1.0" Value="95" />
<DiscreteDoubleKeyFrame KeyTime="0:0:1.1" Value="38" />
</DoubleAnimationUsingKeyFrames>
<ThicknessAnimationUsingKeyFrames Storyboard.TargetName="Burn" Storyboard.TargetProperty="Margin">
<DiscreteThicknessKeyFrame KeyTime="0:0:0.0" Value="10,118,0,0" />
<DiscreteThicknessKeyFrame KeyTime="0:0:0.1" Value="8,79,0,0" />
<DiscreteThicknessKeyFrame KeyTime="0:0:0.2" Value="11,58,0,0" />
<DiscreteThicknessKeyFrame KeyTime="0:0:0.3" Value="11,56,0,0" />
<DiscreteThicknessKeyFrame KeyTime="0:0:0.4" Value="9,30,0,0" />
<DiscreteThicknessKeyFrame KeyTime="0:0:0.5" Value="10,17,0,0" />
<DiscreteThicknessKeyFrame KeyTime="0:0:0.6" Value="11,21,0,0" />
<DiscreteThicknessKeyFrame KeyTime="0:0:0.7" Value="12,35,0,0" />
<DiscreteThicknessKeyFrame KeyTime="0:0:0.8" Value="13,31,0,0" />
<DiscreteThicknessKeyFrame KeyTime="0:0:0.9" Value="24,30,0,0" />
<DiscreteThicknessKeyFrame KeyTime="0:0:1.0" Value="34,39,0,0" />
<DiscreteThicknessKeyFrame KeyTime="0:0:1.1" Value="42,80,0,0" />
</ThicknessAnimationUsingKeyFrames>
</Storyboard>
</ResourceDictionary>
</UserControl.Resources>
<UserControl.Triggers>
<EventTrigger RoutedEvent="FrameworkElement.Loaded">
<BeginStoryboard Storyboard="{StaticResource Run}" />
</EventTrigger>
</UserControl.Triggers>
<Viewbox>
<Grid Width="150" Height="200">
<Rectangle x:Name="Burn"/>
</Grid>
</Viewbox>
</UserControl>
Code: Select all
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<ImageBrush x:Key="Burn_01" ImageSource="Burn.png" Viewbox="269,153,133,82" ViewboxUnits="Absolute" TileMode="None" Stretch="None"/>
<ImageBrush x:Key="Burn_02" ImageSource="Burn.png" Viewbox="265,237,131,121" ViewboxUnits="Absolute" TileMode="None" Stretch="None"/>
<ImageBrush x:Key="Burn_03" ImageSource="Burn.png" Viewbox="1,367,128,142" ViewboxUnits="Absolute" TileMode="None" Stretch="None"/>
<ImageBrush x:Key="Burn_04" ImageSource="Burn.png" Viewbox="133,186,130,144" ViewboxUnits="Absolute" TileMode="None" Stretch="None"/>
<ImageBrush x:Key="Burn_05" ImageSource="Burn.png" Viewbox="134,1,133,170" ViewboxUnits="Absolute" TileMode="None" Stretch="None"/>
<ImageBrush x:Key="Burn_06" ImageSource="Burn.png" Viewbox="1,1,131,183" ViewboxUnits="Absolute" TileMode="None" Stretch="None"/>
<ImageBrush x:Key="Burn_07" ImageSource="Burn.png" Viewbox="1,186,130,179" ViewboxUnits="Absolute" TileMode="None" Stretch="None"/>
<ImageBrush x:Key="Burn_08" ImageSource="Burn.png" Viewbox="269,1,128,150" ViewboxUnits="Absolute" TileMode="None" Stretch="None"/>
<ImageBrush x:Key="Burn_09" ImageSource="Burn.png" Viewbox="131,367,120,142" ViewboxUnits="Absolute" TileMode="None" Stretch="None"/>
<ImageBrush x:Key="Burn_10" ImageSource="Burn.png" Viewbox="253,360,103,112" ViewboxUnits="Absolute" TileMode="None" Stretch="None"/>
<ImageBrush x:Key="Burn_11" ImageSource="Burn.png" Viewbox="358,360,93,95" ViewboxUnits="Absolute" TileMode="None" Stretch="None"/>
<ImageBrush x:Key="Burn_12" ImageSource="Burn.png" Viewbox="358,457,83,38" ViewboxUnits="Absolute" TileMode="None" Stretch="None"/>
</ResourceDictionary>
Re: What's the best way to do sprite sheet animation?
Thanks, I have submitted a bug here(https://bugs.noesisengine.com/view.php?id=1130). Hope this bug can be fixed then we can make TexturePacker to produce resource xaml more efficient.
-
-
sfernandez
Site Admin
- Posts: 3264
- Joined:
Re: What's the best way to do sprite sheet animation?
It is a bit complex due to shader complexity but it is something we have in mind.
Who is online
Users browsing this forum: No registered users and 0 guests