Silverlight 中的 Spritesheet [英] Spritesheet in Silverlight

问题描述

有人有在 Silverlight 中使用 spritesheet 的例子吗?我想剪辑图像，当按下按钮时，跳到下一帧.(如果用户一直点击按钮，它看起来像一个动画).我环顾四周，但没有找到我正在寻找的东西.感谢您的帮助.

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):

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