locked
Player animation RRS feed

  • Question

  • Hi all,

    Im new to Silverlight and i must say i'm really impressed with its capabilities.
    For a project i'm doing i need to let a player (animated gif image) move to an
    x/y coordinate on the screen. The animation timespan is x seconds and should
    move fluidly. I'm getting the coordinates by an UDP listener that all works fine
    but i cannot get the player to move on screen.

    What would you guys suggest is the best solution for this. Note that i want
    to do it all in c# code and not so much xaml.

    Thanks for reading!

    kind regards,

    Mark

    Wednesday, August 12, 2009 11:20 AM

Answers

  • Silverlight does not support GIF. So convert it to JPG or PNG. I recommend PNG. PNG and JPG cannot be animated like GIF, so you need to position each frame. My personal favorite is to position it vertically, like a filmstrip. So if your image is 100x100, you position each frame vertically with 100 pixels space between them. So with 4 frames and height=100, the endproduct has a height of 400.

    Then you need the following XAML:

    <Canvas x:Name="pos">
    <Canvas.Clip>
    <RectangleGeometry Rect="0,0, 100, 100"/>
    </Canvas.Clip>
    <Image x:Name="img" Source="player.png"/>
    </Canvas>

    Use pos to animate the position, use img to animate the image.

    Animate pos:
    pos.SetValue(Canvas.TopProperty, (double)yPos);
    pos.SetValue(Canvas.LeftProperty, (double)xPos);

    Animate image with:
    <Storyboard x:Name="anim" Storyboard.TargetName="img" Storyboard.TargetProperty="(Canvas.Top)">
    <DoubleAnimationUsingKeyFrames>
    <DiscreteDoubleKeyFrame KeyTime="0:00:00.00" Value="00.00"/>
                            <DiscreteDoubleKeyFrame KeyTime="0:00:00.10" Value="-100.00"/>
                            <DiscreteDoubleKeyFrame KeyTime="0:00:00.20" Value="-200.00"/>
                            <DiscreteDoubleKeyFrame KeyTime="0:00:00.30" Value="-300.00"/>
                            <DiscreteDoubleKeyFrame KeyTime="0:00:00.40" Value="-400.00"/>
    (and so on)
    </DoubleAnimationUsingKeyFrames>
    </Storyboard>

    You can also animate img from code, with the same idea, but that is much more work.

    Good luck.

     

    Wednesday, August 12, 2009 11:35 AM

All replies

  • Silverlight does not support GIF. So convert it to JPG or PNG. I recommend PNG. PNG and JPG cannot be animated like GIF, so you need to position each frame. My personal favorite is to position it vertically, like a filmstrip. So if your image is 100x100, you position each frame vertically with 100 pixels space between them. So with 4 frames and height=100, the endproduct has a height of 400.

    Then you need the following XAML:

    <Canvas x:Name="pos">
    <Canvas.Clip>
    <RectangleGeometry Rect="0,0, 100, 100"/>
    </Canvas.Clip>
    <Image x:Name="img" Source="player.png"/>
    </Canvas>

    Use pos to animate the position, use img to animate the image.

    Animate pos:
    pos.SetValue(Canvas.TopProperty, (double)yPos);
    pos.SetValue(Canvas.LeftProperty, (double)xPos);

    Animate image with:
    <Storyboard x:Name="anim" Storyboard.TargetName="img" Storyboard.TargetProperty="(Canvas.Top)">
    <DoubleAnimationUsingKeyFrames>
    <DiscreteDoubleKeyFrame KeyTime="0:00:00.00" Value="00.00"/>
                            <DiscreteDoubleKeyFrame KeyTime="0:00:00.10" Value="-100.00"/>
                            <DiscreteDoubleKeyFrame KeyTime="0:00:00.20" Value="-200.00"/>
                            <DiscreteDoubleKeyFrame KeyTime="0:00:00.30" Value="-300.00"/>
                            <DiscreteDoubleKeyFrame KeyTime="0:00:00.40" Value="-400.00"/>
    (and so on)
    </DoubleAnimationUsingKeyFrames>
    </Storyboard>

    You can also animate img from code, with the same idea, but that is much more work.

    Good luck.

     

    Wednesday, August 12, 2009 11:35 AM
  • I cover animating a PNG sprite strip here:

    http://www.bluerosegames.com/silverlight-games-101/post/Frame-Based-Sprite-Animation-in-Silverlight.aspx

    This was with Silverlight 2, I think I'll be creating a Behavior to do this in Silverlight 3.

    Wednesday, August 12, 2009 1:41 PM