sábado, 30 de julio de 2011

XNA – Vector y Rotacion


En el anterior tutorial, vimos como darle movimiento a nuestra imagen. En el método spriteBatch.Draw, nosotros pasábamos un parámetro del tipo Rectangle, donde colocábamos la posición de la imagen y su tamaño, sin embargo tenemos otra forma de ingresar esos valores, usando el Vector2.

En este tutorial usaremos el proyecto del tutorial de movimiento

Vector2
Es una clase que nos permite almacenar dos valores, normalmente X e Y. La ventaja que tiene contra el Rectangle es que posee muchas funciones matemáticas ya implementada con solo usar su Clase sin declararla.

Existe también Vector3, la diferencia es que acá tenemos 3 valores para guardar, X, Y y Z

Para utilizar Vector2, reemplazaremos las variables x e y por esto.
Vector2 posicion;

Luego en el metodo Initialize.
protected override void Initialize()
{posicion = Vector2.Zero;
base.Initialize();
}

Vector2.Zero: Pasa como valores X e Y, 0 y 0

Ahora en el método Update debemos cambiar los valores que manejan la posicion de la imagen, las propiedades donde se almacena los valores es posicion.X y posicion.Y.
protected override void Update(GameTime gameTime)
{
KeyboardState key = Keyboard.GetState();
if (key.IsKeyDown(Keys.Right) == true)posicion.X += 3;
if (key.IsKeyDown(Keys.Left) == true)posicion.X -= 3;
if (key.IsKeyDown(Keys.Down) == true)posicion.Y += 3;
if (key.IsKeyDown(Keys.Up) == true)posicion.Y -= 3;
base.Update(gameTime);}

Y por ultimo, en el método Draw debemos cambiar el parámetro Rectagle por el Vector2
protected override void Draw(GameTime gameTime)
{
GraphicsDevice.Clear(Color.CornflowerBlue);
 
spriteBatch.Begin();
spriteBatch.Draw(imagen, posicion, Color.White);
spriteBatch.End();
 
base.Draw(gameTime);}

Es mucho mas cómodo y ordenado usar Vector2 para la asignación de variables que marquen posiciones, es conveniente acostumbrarse a usarlas.

Rotacion
Si nosotros ponemos una coma delante del Color.White de nuestro Draw, nos aparecerá una ventana amarilla, debemos apretar la tecla de abajo hasta llegar a esto.

Esos son los parámetros que debemos poner cuando vamos a hacer una rotacion, cambien su spriteBatch.Draw por este.
spriteBatch.Draw(imagen, posicion, null, Color.White, MathHelper.ToRadians(10), new Vector2(imagen.Width/2, imagen.Height/2), 1, SpriteEffects.None, 0);

Rectangle? sourceRectangle: No es momento de ver que es esto.
float rotation: Se pone la rotación que tendrá la imagen. El valor que se introduce acá es en Radianes, por esa razón usamos MathHelper.ToDegrees, ponemos el valor en grados como parámetro y nos los convierte en Radianes.
Vector2 origin: Es el punto donde se va a rotar nuestra imagen, nosotros queremos que su rotación sea sobre su eje, entonces ponemos el ancho de la textura dividido dos, y el largo de la textura dividido 2.
float Scale: La escala de la textura.
SpriteEffects effects: El efecto de la textura, podemos poner que este alrevez horizontalmente o verticalmente.
float layerDepth: En una simple explicacion, es su “turno de dibujado”. Mas adelante lo veremos.

Pueden practicar hacer que la rotación cambien mientras yo aprete la tecla + o -, y si quieren cambien el origen y la rotacion para que vean que sucede.
Aca termina el tutorial de rotacion, en el proximo tutorial veremos como dibujar palabras en nuestra pantalla.

Codigo completo
using System;
using System.Collections.Generic;
using System.Linq;
using Microsoft.Xna.Framework;
using Microsoft.Xna.Framework.Audio;
using Microsoft.Xna.Framework.Content;
using Microsoft.Xna.Framework.GamerServices;
using Microsoft.Xna.Framework.Graphics;
using Microsoft.Xna.Framework.Input;
using Microsoft.Xna.Framework.Media;
using Microsoft.Xna.Framework.Net;
using Microsoft.Xna.Framework.Storage;
 
namespace MiJuego_Tutorial_4
{
public class Game1 : Microsoft.Xna.Framework.Game
{
GraphicsDeviceManager graphics;
SpriteBatch spriteBatch;
Texture2D imagen;
 
Vector2 posicion;
 
public Game1()
{
graphics = new GraphicsDeviceManager(this);
Content.RootDirectory = "Content";
}
 
protected override void Initialize()
{
posicion = Vector2.Zero;base.Initialize();
}
 
protected override void LoadContent()
{
spriteBatch = new SpriteBatch(GraphicsDevice);
imagen = Content.Load< Texture2D >("caja");
}
 
protected override void UnloadContent(){
 
}
 
protected override void Update(GameTime gameTime)
{
KeyboardState key = Keyboard.GetState();
if (key.IsKeyDown(Keys.Right) == true)posicion.X += 3;
if (key.IsKeyDown(Keys.Left) == true)posicion.X -= 3;
if (key.IsKeyDown(Keys.Down) == true)posicion.Y += 3;
if (key.IsKeyDown(Keys.Up) == true)posicion.Y -= 3;
base.Update(gameTime);
}
 
protected override void Draw(GameTime gameTime)
{
GraphicsDevice.Clear(Color.CornflowerBlue);
 
spriteBatch.Begin();
spriteBatch.Draw(imagen, posicion, null, Color.White, MathHelper.ToRadians(60), new Vector2(imagen.Width/2, imagen.Height/2), 1, SpriteEffects.None, 0);
spriteBatch.End();
 
base.Draw(gameTime);}}}