Spritesheet在Silverlight [英] Spritesheet in Silverlight

问题描述

有没有人有使用在Silverlight spritesheet的例子吗？我想裁剪图像，当一​​个按钮为pressed，跳转到下一帧。 （如果用户保持轻点按钮，它会看起来像一个动画）。我环顾四周，但没有发现正是我要找的。感谢您的帮助。

Does anyone have an example of using a spritesheet in Silverlight? I'd like to clip the image and, when a button is pressed, jump to the next frame. (If the user keeps tapping the button, it'll look like an animation). I've looked around but haven't found exactly what I'm looking for. Thanks for any help.

推荐答案

下面将做的正是你要寻找的。您可以使用向上<大骨节病>↑和向下<大骨节病>↓键盘通过动画向前和向后导航键上。

The following will do exactly what you're looking for. You can use the Up ↑ and Down ↓ keys on your keyboard to navigate forwards and backwards through the animation.

XAML

<Rectangle x:Name="imgRect">
    <Rectangle.Fill>
        <ImageBrush x:Name="imgBrush" ImageSource="walking_spritesheet.png" Stretch="None" AlignmentX="Left" AlignmentY="Top" />                    
    </Rectangle.Fill>
</Rectangle>

C＃

        imgRect.Width = 240; //Set the width of an individual sprite
        imgRect.Height = 296; //Set the height of an individual sprite
        const int ximages = 6; //The number of sprites in each row
        const int yimages = 5; //The number of sprites in each column
        int currentRow = 0;
        int currentColumn = 0;

        TranslateTransform offsetTransform = new TranslateTransform();

        KeyDown += delegate(object sender, KeyEventArgs e)
        {
            switch (e.Key)
            {
                case Key.Up:
                    currentColumn--;
                    if (currentColumn < 0)
                    {
                        currentColumn = ximages -1;
                        if (currentRow == 0)
                        {
                            currentRow = yimages - 1;
                        }
                        else
                        {
                            currentRow--;
                        }
                    }                        
                    break;
                case Key.Down:
                    currentColumn++;
                    if (currentColumn == ximages)
                    {
                        currentColumn = 0;
                        if (currentRow == yimages - 1)
                        {
                            currentRow = 0;
                        }
                        else
                        {
                            currentRow++;
                        }
                    }
                    break;
                default:
                    break;
            }

            offsetTransform.X = -imgRect.Width * currentColumn;
            offsetTransform.Y = -imgRect.Height * currentRow;
            imgBrush.Transform = offsetTransform;

有关测试，请尝试使用下面的图片（1440x1480）：

For testing, try using the following image (1440x1480):

这篇关于Spritesheet在Silverlight的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！