.: Creating a Rotating 2D Texture
|
|
| |
In this tutorial we will create a 2D texture in the shape of an arrow that will show the launch trajectory of the game balls. This texture can be rotated on the screen using the left and right arrow keys, the rotation will be restricted to 180 degrees from -90 degrees to 90 degrees, keeping the arrow pointing inside the game area. So, copy the project folder from tutorial 4, rename it to Rotating2DTexture and start the project.
Once open right-click on the images folder in the solution explorer and add existing item, select the 2 new images from the source code at the bottom of the page:
|
|
Your solution explorer should look as you see above. The picture BallLauncher.png will not be rotated and is configured as shown on the previous tutorials, for this reason i will not explain the code here, if you want to see it, you will find it in the source code at the bottom of this page. As for the Arrow texture, the process is similar except for adding the ability to rotate the texture. So, first of all, we will create the texture objects using the following code, placed with the other object declarations:
'Arrow Texture Objects
Private ArrowTex As Texture2D = Nothing
Private ArrowSB As SpriteBatch = Nothing
Private ArrowSBRotate As Single = 0
Private ArrowTexCreationParams As TextureCreationParameters = TextureCreationParameters.Default
Below this we need the Sub that defines the parameters of the texture:
'Define Arrow Details
Private Sub DefineArrow()
ArrowSB = New SpriteBatch(Device)
ArrowTex = Texture2D.FromFile(Device, "../../images/Arrow.png", ArrowTexCreationParams)
End Sub
Then we will add the function call for the above function to the InitializeGraphics() function:
DefineArrow()
The Render component is slightly different for a texture that can rotate:
'Draw Arrow Texture
ArrowSB.Begin(SpriteBlendMode.AlphaBlend)
ArrowSB.Draw(ArrowTex, New Vector2(405, 480), Nothing, Color.White, ArrowSBRotate, _
New Vector2((ArrowTex.Width / 2), (ArrowTex.Height / 2)), 1.0F, SpriteEffects.None, 0.0F)
ArrowSB.End()
This function does not use a predefined rectangle but declares a New Vector2 which tells the function where to draw the texture. The ArrowSBRotate holds the rotation angle in radians that the function will use to rotate the texture. The next New Vector2 tells the function which point to rotate the texture round, because we have made this point the centre of the texture, it will rotate the way we want it to.
In the Form1_KeyDown function we change the code that is already there to:
Select Case e.KeyCode
Case Is = Windows.Forms.Keys.Escape
Application.Exit()
Exit Sub
Case Is = Windows.Forms.Keys.Right
If ArrowSBRotate > 1.570796 Then
ArrowSBRotate = 1.570796
Exit Sub
End If
ArrowSBRotate = ArrowSBRotate + MathHelper.ToRadians(5)
Case Is = Windows.Forms.Keys.Left
If ArrowSBRotate < -1.570796 Then
ArrowSBRotate = -1.570796
Exit Sub
End If
ArrowSBRotate = ArrowSBRotate - MathHelper.ToRadians(5)
End Select
Here the value of ArrowSBRotate is changed when the user presses the left or right arrow keys and hence the render function rotates the texture. The value inside the ToRadians() function decides how fast the arrow will rotate. Also, if the rotation angle gets more than 1.570796 or less than -1.570796 then the sub exits and the arrow stops rotating.
So, now that we have written the code, run the app and you should have something that looks like this:
As you can see my photoshop skills could use a little work, but i'll work on that later. Now that you have a rotating Arrow you can return to the tutorials page for the next tutorial.
Web site contents © Copyright Alan Phipps 2006, All rights reserved.
Website templates |
