使用XNA SpriteBatch实现倾斜效果

Question

使用XNA SpriteBatch实现倾斜效果

xnawindows-phonespritebatch

4

Windows Phone有一个很好的按钮倾斜效果，就像下图所示：

Metro Tilt Effect

是否可能使用SpriteBatch在XNA中重新实现此行为？我可以检测触摸位置并计算矩形角应该在哪些点，但我不知道如何使用这种扭曲渲染图像。

- Impworks

2个回答

2

这是完全可能的，但需要涉及一定的数学知识。

TouchPanel.GetState() 方法将以与在 Silverlight 中使用 TouchLocations 相同的方式返回所有屏幕触摸及其状态，主要区别在于您已经在像素级别上工作，无需浏览 XAML 树。

基本上是这样的： * 使用 GetState() 获取当前触摸面板触摸集合 * 遍历 UI 元素的更新并测试与触摸点的碰撞。 * 计算被触摸的 UI 元素的哪个部分（根据所需的准确度，可以在 4 个角落或更精确的位置） * 将 UI 元素沿着您想要倾斜的方向进行动画处理 * 记录已触摸 UI 元素或跟踪动画 * 当触摸丢失时，请确保 UI 元素识别此情况并进行反向动画（或者如果触摸已移动，则进行另一个方向的动画）。

对于一些很酷的动画和过渡效果，您可以使用 Reach 演示（针对手机），它展示了一些很棒的效果以及如何实现它们。其中大部分都是整页效果，但您应该能够拆分必要的部分以获得所需的瓷砖动画效果： http://xbox.create.msdn.com/en-US/education/catalog/sample/reach_graphics_demo

如果有帮助，请告诉我。

- Darkside

我特别关注如何在绘制精灵时进行变换。我有一种感觉，可以通过向SpriteBatch.Begin传递正确的Matrix来实现。 - Impworks

你传递给精灵批处理的矩阵更多地涉及相机定位。如果你想看到它的实际效果，那么可以在xnaresources.com上查看Tiled教程。有关上述内容的更多细节，请查看reach演示。 - Darkside

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- ClassicThunder · Accepted Answer

Matrix projection = Matrix.CreateOrthographicOffCenter(0, viewport.Width, viewport.Height, 0, 0, 1);
Matrix halfPixelOffset = Matrix.CreateTranslation(-0.5f, -0.5f, 0);

basicEffect.World = Matrix.Identity;
basicEffect.View = Matrix.Identity;
basicEffect.Projection = halfPixelOffset * projection;

basicEffect.TextureEnabled = true;
basicEffect.VertexColorEnabled = true;

spriteBatch.Begin(0, null, null, null, null, basicEffect);

你可以将BasicEffect传递到SpriteBatch.Begin方法中。这样，你就可以使用自定义着色器来处理spritebatch，更有趣的是，在你的情况下，你可以控制相机并转换支持SpriteBatch的四边形。以上是默认设置，应该与标准的SpriteBatch行为一致，你不能特别改变点，但旋转可以达到你想要的效果。

要更改四边形的3D位置，只需修改basicEffect.World矩阵。

例如：

basicEffect.View = Matrix.Identity * Matrix.CreateRotationY(.002);