Tilt Effect Using XNA SpriteBatch

Question

Windows Phone has a nice tilt effect for buttons, as shown in the image below:

Is it possible to reimplement this behavior in XNA using SpriteBatch ? I can detect the location of the touch and calculate the points where the corners of the rectangle should be, but I do not know how to make the image using this distortion.

Answer 1

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

You can pass BasicEffect to the SpriteBatch.Begin method. This allows you to use a custom shader using spritebatch, and more interesting in your case, allows you to control the camera and convert an ATV that supports SpriteBatch. The above value is standard and should behave like a standard SpriteBatch, you cannot change the points specifically, but the rotation should achieve the effect that you are after.

To change the three-dimensional location of a square, simply change the basicEffect.World matrix.

Example:

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

Answer 2

Well, of course, it is possible, but there is enough mathematics.

The TouchPanel.GetState () method will return all the screen touches and their status is almost the same as using TouchLocations in Silverlight. The main thing is that you are already working at the pixel level, so you do not need to view XAML trees.

Basically this would be like this: * Get the current collection of touchpads using GetState () * Change the updates for your user interface elements and experience a touch point collision. * Calculate how much of your user interface element has been affected (depending on how accurate you are, or in 4 corners or more precisely) * Animate the user interface element in the direction you want to tilt * Record what the user interface element was affected or tracks the animation * when the touch is lost, make sure the user interface element recognizes it and animates it back (or the animation in the other direction if the touch is moved.

For some interesting animations and transitions that you can use, the Reach demo (for the phone) shows some great effects and ways to implement them. Most of them are full-text effects, but you have to tear out the necessary bits to get the tile animation effect you're looking for: http://xbox.create.msdn.com/en-US/education/catalog/sample/reach_graphics_demo

Let me know if this helps.