Silverlight 中的 Spritesheet

Posted

技术标签:

【中文标题】Silverlight 中的 Spritesheet【英文标题】:Spritesheet in Silverlight 【发布时间】:2011-08-14 08:10:43 【问题描述】:

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

【问题讨论】:

你看过这篇文章吗?似乎是同一件事:***.com/questions/745541/… 【参考方案1】:

以下内容将完全符合您的要求。您可以使用键盘上的向上 和向下 键在动画中向前和向后导航。

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

【讨论】:

@Skoder:太好了。如果您还有其他问题,请告诉我。【参考方案2】:

这是另一个适用于您创建的任何精灵表的解决方案,只需添加关键代码。

如果您愿意使用 Sprite Vortex(实际上是特定版本),您可以使用以下类。您必须使用 Sprite Vortex 1.2.2,因为在较新的版本中 XML 格式发生了变化。确保您添加属性的 XML 文件更改为“不编译”。

如果您需要一个工作示例,我可以给您发送一个非常简单的示例。

附言Sprite Vortex 应该做与使用其他程序相同的事情,但是 v 1.2.2 有很多错误,但还不错。

课程在这里:http://pastebin.com/sNSa7xgQ

【讨论】:

以上是关于Silverlight 中的 Spritesheet的主要内容,如果未能解决你的问题,请参考以下文章

Silverlight & Blend动画设计系列十:Silverlight中的坐标系统(Coordinate System)与向量(Vector)运动

Silverlight 中的 Spritesheet

WPF 与 Silverlight - 资源中的数据绑定

Silverlight 2.0中的Vista玻璃效果

Silverlight,鼠标单击路径中的间隙

Silverlight 中的条件样式?