-
Hola!, siguiendo con los tutoriales de HLSL, esta vez le mostrare como pasarle una textura a algun modelo. Primero, bajense este rar, que contiene un modelo y una textura:
http://cid-8c78479ee4ee3399.skydrive.live.com/self.aspx/Ejemplos%20XNA/ContentHLSLTextura.rar
En el anterior tutorial, nuestro modelo tenia estaba todo de color rojo, eso es por que nosotros le dijimos que le retornaba un color. Pero ahora nosotro le vamos a decir que le retorne una textura. Primero crearemos un nuevo FX, y borramos todo lo de adentro:
float4x4 World;
float4x4 View;
float4x4 Projection;
Texture text;
sampler TextureSampler = sampler_state
{
texture = ;
magfilter = LINEAR;
minfilter = LINEAR;
mipfilter = LINEAR;
};
Primero, creamos las matrices que nos guardaran la projeccion, la vista y la tranformaciones del mundo. Luego, creamos una variable Texture que es la que nos guardara la textura que le ingresamos desde el proyecto de XNA. Luego, sampler se ocupa de como mostrar nuestra textura. Ahora, escribiremos esto:
struct VS_Input
{
float4 Position : POSITION0;
float2 Textura : TEXCOORD0;
};
struct VS_Output
{
float4 Position : POSITION0;
float2 Textura : TEXCOORD0;
};
VS_Output VS_Function(VS_Input input)
{
VS_Output output;
float4 worldPosition = mul(input.Position, World);
float4 viewPosition = mul(worldPosition, View);
output.Position = mul(viewPosition, Projection);
output.Textura = input.Textura;
return output;
}
Primero en VS_Input y VS_Output le creamos los parametros Position y Textura. En Textura nos guardara la informacion de la textura. Luego, en VS_Function, hacemos todos los calculos para nuestros cambio en el mundo. Despues, de decnimos que la entrada de textura es igual a la salida.
float4 PS_Input(VS_Output input) : COLOR0
{
float4 outTextura = outTextura = tex2D(TextureSampler, input.Textura);
return outTextura;
}
technique Technique1
{
pass Pass1
{
VertexShader = compile vs_2_0 VS_Function();
PixelShader = compile ps_2_0 PS_Input();
}
}
Por ultimo el PS_Function le retornamos la textura. Luego, lo inicialisamos en el technique.
Bien!. ya esta el shader echo, ahora hay que cargar el modelo, y le damos el efecto:
casa = Content.Load<Model>("casa");
Efecto = Content.Load<Effect>("Efecto");
Textura = Content.Load<Texture2D>("textura");
foreach (ModelMesh mesh in casa.Meshes)
foreach (ModelMeshPart part in mesh.MeshParts)
part.Effect = Efecto;
Ahora, en el metodo draw, le pasamos los parametro al shader y dibujamos el modelo:
Efecto.Parameters["World"].SetValue(Matrix.Identity);
Efecto.Parameters["Projection"].SetValue(Projection);
Efecto.Parameters["View"].SetValue(View);
Efecto.Parameters["text"].SetValue(Textura);
foreach (ModelMesh mesh in casa.Meshes)
mesh.Draw();
Bien, ya esta listo, antepongo que ya las funciones Projection y View las crearan ustedes. El resultado final es:
Espero que les sirva.
Hasta Luego!.
HawthDown, hawthdown@hotmail.com
-
Hola!, hace tiempo que no subo un tutorial, se debe a que estoy trabajando en un juego una buena cantidad de tiempo, y cuando termino no me da ganas de hacer nada. Pero subire algo para no perder la constumbre. Hoy veremos un tutorial que tenia hacer rato para subir.
Tiro oblicuo, cuando nosotros pateamos una pelota, el camino que recorre es una parabola, hoy les enseñare como formar esa parabola:
Primero, debemos partir de la formula base, esta formula es la que nos cambia en el eje Y en nuesto juego:
Y = Y0 + vY0 * time - 0.5*g*t*t
Esta formula nos asegurara de que cuando este vaya para arriba, luego baje. Los parametros que se le deben pasasr es la pocision inicial del eje Y, la velocidad que afecta al eje Y, el tiempo, menos 0.5 por la masa y multiplicado por tiempo al cuadrado. Pero hay un problema ahi, eso es aplicado cuando el eje Y es normal, pero en cambio aca lo tenemos invertido, entonces debemos reemplazar esa formula por esta:
Y = Y0 - vY0 * time + 0.5*g*t*t
Puede parecer confuso, pero veran que es simple. Ahora, tambien debe haber un cambio en el eje X, este sera:
X = X0 + vX0 * time
Eso nos hara que nuestro objeto valla hacia delante, se le pasan los parametro de la pocision inicial del eje X, mas la velocidad del eje X por el tiempo.
Bien, los dejare de aburrir con eso y empesaremos a poner codigo:
Vector2 posInicial;
Vector2 vel_xy;
Vector2 pos;
bool cae = false;
float masa;
float tiemposuelto;
Ahora las iniciamos:
pos = new Vector2(250,250);
posInicial = pos;
masa = 8f;
vel_xy = new Vector2(20f, 50f);
tiemposuelto = 0;
Ahora en el metodo update:
float timeup = 0.05f;
if (Keyboard.GetState().IsKeyDown(Keys.T))
{
cae = true;
}
if (cae == true)
{
tiemposuelto += timeup;
pos.X = posInicial.X + vel_xy.X * tiemposuelto;
pos.Y = posInicial.Y - vel_xy.Y *
tiemposuelto + masa * tiemposuelto * tiemposuelto;
}
Ahi podran ver los uqe les explicaba arriba. Bueno, si prueban esto, veran como su textura hacer el movimiento de una parabola:
<iframe scrolling="no" marginheight="0" marginwidth="0" frameborder="0" style="width:240px;height:66px;margin:3px;padding:0;border:1px solid #dde5e9;background-color:#ffffff;" src="http://cid-8c78479ee4ee3399.skydrive.live.com/embedrowdetail.aspx/Ejemplos%20XNA/XNATiroOblicuo.rar"></iframe>
Espero que les sirvan.
Hasta Luego!.
HawthDown, hawthdown@hotmail.com
-
Hola!, hoy le dejo un tutorial introductivo a HLSLHLSL es un lenguaje que se utiliza en los shaders para agregar efectos en nuestros juegos, los shaders, se ejecutan en la GPU de nuestra placa de video, y se ocupa de hacer todos los calculos necesarios para devolvernos el efecto, obviamente, si nosotros somos buenos programadores de HLSL podremos sacarle todo el jugo posible a las placas de videos de ahora y asi lograr exelentes efectos. Por suerte con XNA es facil utilizar los shaders, primero, crearemos un nuevo proyecto, e iremos a la carpeta Contemnt y agregaremos un nuevo item, y elejimos Effect File, le damos un nombre y enter. Luego, borramos todo el codigo de ahi dentro, lo volveremos a reinscribir.Primero, todo shader que utilicemos en nuestros juegos 3D necesitara estos 3 parametros:float4x4 World;float4x4 View;float4x4 Projection;Con la funcion float4x4 crearemos una matriz que dentro tendra numeros flotantes(con decimales) luego le damos un nombre. Asi como cuando utilizamos un el efecto BasicEffect en el XNA, este nos pide que le pasemos los parametros World, View y Projection, nuestro shader tambien lo necesita, por esa razon creamos esas tres variables, luego de eso, escribimos estas lineas:
struct VS_In{ float4 Position : POSITION0;};struct VS_Ou{ float4 Position : POSITION0;};El VS_In le indicamos los valores que tomara de entrada, en este caso tomara la Posicion. El VS_Ou es parecido al VS_In solo que en este, es la pocision que nos va a devolver despues de todos los calculos. VS_Ou VertexShaderFunction(VS_In input){ VS_Ou output; float4 worldPosition = mul(input.Position, World); float4 viewPosition = mul(worldPosition, View); output.Position = mul(viewPosition, Projection); return output;}Bien, aca nosotros lo que hacemos es crear una funcion que tenga le devolvera los calores de VS_Ou, esos valores los tomara de VS_in. Primero creamos una variable de la estructura VS_Ou, alli haremos todos los cambios, y luego al final, le retornamos esa estructura a la funcion en la que estamos trabajando.Luego creamos una variable float4, lo que hacemos es crear una vector de 4 valores, luego viene la funcion mul hace la multiplicacion de los dos valores de adentro. Primero, worldPosition nos almacenara la posicion de nuestro mudno, luego el viewPosition nos almacenara la vista dependiendo de nuestro pocision, luego en ouput.Postiion le daremos la multiplicacion de viewPositio y la proyeccion. Y al final le retornamos output. Antes de que apliquemos los efectos, primero, siempre debemos calcular valores y demas, esto siempre se hace en esta funcion. Ahora escribimos lo siguiente float4 PixelShaderFunction(VS_Ou output) : COLOR0{ return float4(1, 0, 0, 1);}En esta funcion, se retorna todos los cambios en graficos, osea, el color, luces, los efectos en general. En este simple ejemplo, creamos un efecto simple, que nos retornara un color, con float4 ademas de declarar vectores de 4 valores, podemos declarar colores, siendo, R, G, B, A. Todos los colores y efectos que debamos devolver, se haran en esta funcion. Y ahora, por ultimo, lo que hara que arranque los efectos:
technique Technique1{ pass Pass1 { VertexShader = compile vs_1_1 VertexShaderFunction(); PixelShader = compile ps_1_1 PixelShaderFunction(); }}Y por ultimo, arrancamos las dos funciones que hicimos arriba, en donde dice compile vs_1_1, se declara la version, podemos cambiar por dos _2_0 y lo cambiamos a Vertex shader 2.0, a pixel shader 2.0, etc. Bueno, una vez que tenemos esto, ya podemos utilizar el shader. Primero cargaremos algun modelo 3d que tengamos, en otros tutoriales he dejado un modelo de una pantera rosa, asi que puede utilizar ese. Primeros asignaremos la siguiente variable://VariablesEffect efecto;Luego en el Initialize():efecto = Content.Load<Effect>("miefecto");foreach (ModelMesh mesh in this mimodelo.Meshes) foreach (ModelMeshPart part in mesh.MeshParts) part.Effect = efecto;Primero lo cargamos, despues, recorremos cada poligono en nuestro modelo, y le asignamos el efecto que cargamos. y por ultimo en el Draw:
efecto.Parameters["World"].SetValue(Matrix.Identity);efecto.Parameters["Projection"].SetValue(Projection);efecto.Parameters["View"].SetValue(View);foreach (ModelMesh mesh in this. mimodelo.Meshes) mesh.Draw(); Primero, le pasamos los valores a las variables World, Projection y View al efecto. Y despues, dibujamos el modelo. Bueno, despues de todo esto, deberia quedar algo si, exptuando del terreno del piso.
El codigo de fuente: http://h7zq0g.bay.livefilestore.com/y1pC7VfHRig6qMkMIvPkJhTJWih5BKaZwjWi6UpI273DNcN4BwWSO5SBd-GqJwQ2DhCFICIdpXQag8/HLSLIntroduccionXNA.rar?download
Hasta Luego!.
-
Buenas!. como estan?, hoy les dejo un tutorial para agregar Friccion a nuestro juego en XNA.
Cuando nosotros hacemos rodar hacia delante una canica, este, a medida que avanza, va parando, esto es por que su velocidad va decendiedo por la fuerza que hace el aire, etc,etc, ademas, tambien influye en que terreno esta, no es lo mismo una canica rodando en una superficie de metal que una canica rodando sobre un superficie de hielo, ese cambio en la velocidad se llama friccion.
Bueno, veamos el codigo, para calcular la friccion, debemos usar una variable que tendra la reduccion de tiempo, mientras la posicion de nuestro sprite va aumentando. Veamos, primero asignaremos las siguiente variables:
//Variables
Vector2 posInicial;
Vector2 pos;
bool cae = false;
float masa;
float vel;
float friccion;
float time;
Las inicialisamos:
pos = new Vector2(50,150);
posInicial = pos;
masa = 8f;
friccion = 0.1f;
time = 0;
Ahora en el metodo update:
vel = 20 - friccion * masa * time;
if (Keyboard.GetState().IsKeyDown(Keys.T))
{
cae = true;
}
if (cae == true)
{
time += 0.05f;
pos.X = 20 * time - 0.5f*friccion * masa * time * time;
}
if (vel <= 0.0f && cae)
{
pos = posInicial;
time = 0;
cae = false;
time = 0;
}
Bueno, esto funciona asi, primero, a la varaible vel, calculara la velocidad, este ira deismunuyendo, cuando vel menor o igual a 0, se reiniciara todo. Mientras vel disminuye, la posicion va aumentando. El numero 20 es la velocidad con que se lanza el objeto, este debe ser igual tanto en la variable vel como en la posicion.
Bueno, aca termina, como ven, agregar algo de fisica a nuestro juegos no es tan dificil. Le dejo el codigo de ejemplo:
Hasta Luego!.
HawthDown, hawthdown@hotmail.com
-
Hola a todos, viendo que LaBloguera ya vuelve a estar activo, dejare un tutorial que habia echo hace un tiempo. Fuerza Gravitacional.
Ustedes diras, "fisica?", "pero esto es re complejo", "esto solo lo hace un super-cientifico", etc, etc. Pero veran que que no es tan complejo como ustedes creian que es, si puede aprender yo, podran aprender ustedes.
Esta vez les enseñare como usar en nuestro juego la "Fuerza Gravitacional". Ustedes sabran que cuando nuestro cuerpo cae, no cae siempre con la misma velocidad, a menos que estemos es una bomba de vacio, por la gravedad, nosotros caeremos cada vez mas rapido, en una definicion rapida y simple, esto seria Fuerza Gravitacional.
Pero vamos a lo que verdad queremos, el codigo.
La clave esta en dos variables, necesitamos saber la maza que tiene nuestro objeto y el tiempo que paso desde que el objeto empezo a caer, primero, creen un sprite simple, una caja, un cirluco, una linea, lo que sea. Luego, cargen la imagen y asignen estas variables:
//Variables
Vector2 posInicial;
Vector2 pos;
bool cae = false;
float masa;
float tiemposuelto;
float timeup;
Ahora las iniciamos:
pos = new Vector2(50,20);
posInicial = pos;
masa = 8f;
tiemposuelto = 0;
timeup = 0.05;
Bien, primero necesitamos la posicion inicial que sera igual a la posicion al principio de nuestro sprite, luego tenemos un boleano que nos dira si el sprite esta cayendo o no y la masa es el peso que tiene nuestro sprite. Las otras las usaremos despues Ahora vamos a lo que importa, a nuestro Update:
if (Keyboard.GetState().IsKeyDown(Keys.T))
{
cae = true;
}
if (cae == true)
{
tiemposuelto += timeup;
pos.Y = posInicial.Y * masa * tiemposuelto * tiemposuelto;
}
Bueno, aqui esta lo que hace que nuestro sprite se mueva, cuando nosotros apretemos la T, cae se cambiara a true y la posicion se empesara a cambiar. Primero, vemos que el tiemposuelto ira aumentando mientras nuestro sprite cae, provocado por las multiplicaciones matematicas que hacemos en pos.Y, la funcion original es:
poscicion = posicionOriginal * masa * tiempopasado al cuadrado;
Bueno, como ven, imitar la caida no es nada del otro mundo, con una simple funciones matematicas podemos añadir a nuestro juego un toque de realidad, que siempre queda bien. Les dejo el codigo de fuente:
Espero que les sirva, en el proximo tutorial veremos la Friccion.
Hasta Luego!.
HawthDown, hawthdown@hotmail.com
-
Hola a todos. Esta vez veremos como hacer una camara en tercera persona en XNA. Veamos.
Bueno, hacer una camara en tercera persona, si bien al principio parece dificilisimo, despues te das cuenta que es algo relativamente facil, empesemos:
Primero, debemos cargar dos modelos 3D, usameros uno que seria nuestro personaje y otro objeto cualquiera solo para que se note que nuestro modelo se mueve y la camara sigue al modelo. Para nuestro modelo personaje necesitaremos esta variables, ademas de la variableModel :
//Variables
Quaternion panterarot; //Quaternion: Quaternion lo qeu hace es almacenarnos todas las rotaciones que tenga nuestro modelo, luego veran que podemos usarla mediante Matrix
Vector3 posicionpantera;
Vector3 velpantera;
Vector3 cameraposition;
Vector3 cameratarget;
float camerayaw;
MouseState mouse1;
Matrix lokatcamara;
Matrix Projection;
Bien, ahora en el metodo Initialize:
posicionpantera = new Vector3(20, 0, 0);
Mouse.SetPosition(graphics.GraphicsDevice.Viewport.Width / 2, graphics.GraphicsDevice.Viewport.Height / 2);
mStateCashe = Mouse.GetState();
velpantera = new Vector3(0, 0, 0);
Projection = Matrix.CreatePerspectiveFieldOfView(MathHelper.
ToRadians(45f), graphics.GraphicsDevice.Viewport.AspectRatio, 1f, 10000f);
Lo que hacemos basicamente alli es arranca toda las variables y setear el mouse al medio.
KeyboardState kState = Keyboard.GetState();
MouseState mState = Mouse.GetState();
Mouse.SetPosition(graphics.GraphicsDevice.Viewport.Width / 2, graphics.GraphicsDevice.Viewport.Height / 2);
float deltaTime = (float)gameTime.ElapsedGameTime.TotalSeconds;
if (kState.IsKeyDown(Keys.W))
velpantera.Z += 1.0f * deltaTime;
else if (kState.IsKeyDown(Keys.S))
velpantera.Z -= 1.0f * deltaTime;
else
velpantera = Vector3.Zero;
posicionpantera += Vector3.Transform(velpantera,Matrix.CreateFromQuaternion(panterarot));
panterarot = Quaternion.CreateFromAxisAngle(Vector3.Up,MathHelper.ToRadians(cameraYaw));
cameraposition = Vector3.Transform(new Vector3(0,10,-10),Matrix.CreateFromQuaternion(panterarot));
cameratarget = Vector3.Transform(new Vector3(0, 10, 10),Matrix.CreateFromQuaternion(panterarot));
float mouseX = mState.X - mStateCashe.X;
cameraYaw -= (mouseX * 5f) * deltaTime;
lokatcamara = Matrix.CreateFromQuaternion(panterarot) * Matrix.CreateScale(1f, 1f, 1f) *
Matrix.CreateTranslation(posicionpantera);
Bien, aca esta la logica de nuestra camara, en las primeras tres lineas asignamor el teclado, otro mouse, y lo seteamos en el centro, esto da como resultado un mouse centrado, fijense que si borran un Mouse.SetPosition, y mueven el mouse, este no para nunca de rotar. En deltatime le asignamos el tiempo de juego.
Luego viene una sentencia if, que la usamos para aumentar la velocidad de nuestro modelo, y asi moverlo. Las siguientes variables que usamos son:
panterarot = Quaternion.CreateFromAxisAngle(Vector3.Up, MathHelper.ToRadians(cameraYaw));
Aqui arrancamos la variable Quaternion, lo que hacemos aqui es asignar a Quaternion todas las rotaciones, que, en este caso, solo tendra las rotaciones de leje X. Como primer parametro recibe Vector3.Up, esto siempre es asi, y lo siguiente son las rotaciones convertidas en radianes, y recibe como parametro adentro el movimiento del mouse.
posicionpantera += Vector3.Transform(velpantera, Matrix.CreateFromQuaternion(panterarot));
Aqui lo que hacemos es calcular que la posicion de nuestro modelo, sera igual dependiendo a la rotacion de nuestro modelo, osea, el modelo se movera hacia delante dependiendo de la rotacion de nuestro modelo y velocidad del mismo.
cameraposition = Vector3.Transform(new Vector3(0,10,-10), Matrix.CreateFromQuaternion(panterarot));
cameratarget = Vector3.Transform(new Vector3(0, 10, 10), Matrix.CreateFromQuaternion(panterarot));
Aqui calculamos la posision de nuestro modelo y hacia que punta esta mirando, segun mi experiemtos, el punto Y del de cameratarget debe ser igual a punto Y de camera position, y el punto Z debe ser el opuesto al del punto Z de cameraposition.
Bien, con esto ya echo, ya solo nos falta implementarlo en nuestor View, que debe ser asi:
Matrix.CreateLookAt(posicionpantera+ cameraposition,
posicionpantera + cameratarget, Vector3.Up);
Eso es todo, y asi la camara andara de diez. Espero que les alla servido, les dejo el link de codigo de muestra:
http://www.zshare.net/download/194777086f1acd4f/
Hasta Luego!
HawthDown, hawthdown@hotmail.com
-
Hola a todos, esta vez colgare un tutorial que ya habia echo y que estaba en mi blog. Enseñare como crear una camara en primera persona.
Primero, asignamos las siguientes variables
//Variables
Vector3 cameraPosition;
Vector3 cameraTarget;
float cameraYaw;
float cameraPitch;
MouseState mStateCashe;
Matrix Projection;
Luego en el metodo initialize:
//En ininitalize
Mouse.SetPosition(graphics.GraphicsDevice.Viewport.Width / 2, graphics.GraphicsDevice.Viewport.Height / 2);
mStateCashe = Mouse.GetState();
Projection = Matrix.CreatePerspectiveFieldOfView(MathHelper.
ToRadians(45f), graphics.GraphicsDevice.Viewport.AspectRatio, 1f, 1000f);
Despues en el Update:
//Update
KeyboardState kState = Keyboard.GetState();
MouseState mState = Mouse.GetState();
float deltaTime = (float)gameTime.ElapsedGameTime.TotalSeconds;
Vector3 moveVector = Vector3.Zero;
if (kState.IsKeyDown(Keys.W))
moveVector.Z += 3.0f * deltaTime;
if (kState.IsKeyDown(Keys.S))
moveVector.Z -= 3.0f * deltaTime;
if (kState.IsKeyDown(Keys.A))
moveVector.X += 3.0f * deltaTime;
if (kState.IsKeyDown(Keys.D))
moveVector.X -= 3.0f * deltaTime;
float mouseX = mState.X - mStateCashe.X;
float mouseY = mState.Y - mStateCashe.Y;
cameraPitch += (mouseY * 0.4f) * deltaTime;
cameraYaw -= (mouseX * 0.4f) * deltaTime;
cameraPitch = MathHelper.Clamp(cameraPitch, MathHelper.ToRadians(-60.9f),MathHelper.ToRadians(60.9f));
Mouse.SetPosition(graphics.GraphicsDevice.Viewport.Width / 2, graphics.GraphicsDevice.Viewport.Height / 2);
Matrix cameraViewRotationMatrix = Matrix.CreateRotationX(cameraPitch) *Matrix.CreateRotationY(cameraYaw);
Matrix cameraMoveRotationMatrix = Matrix.CreateRotationY(cameraYaw);
Vector3 transformedCameraReference = Vector3.Transform(Vector3.UnitZ, cameraViewRotationMatrix);
cameraPosition += Vector3.Transform(moveVector, cameraMoveRotationMatrix);
cameraTarget = transformedCameraReference + cameraPosition;
Bueno, mucho codigo, basicamente, lo que hacemos alli arriba es configurar las pocisiones del mouse y las rotaciones. No hay mucho que explicar.
Luego en el draw, en el modelo 3D que esten dibujando, dentro de effect.view deben colocar esto:
effect.View = Matrix.CreateLookAt(cameraPosition,
cameraTarget, Vector3.Up);
Bueno, aca termina este tutorial. Espero que les sirva, les dejo el link del codigo:
-
Hola a todos, hoy les enseñare como cargar una animacion por texturas, me refiero al Sprite Sheet. Ademas, usaremos canales alpha para que no tenga ningun fondo negro ni nada.
Bueno, primero deben descargarse esto:
Aca dentro tenemos nuestra textura, la textura convertida en alpha y el cargador de texturas.
Bien, una vez que se hallan descargado eso, inicien un nuevo proyecto y creen estas variables:
Texture2D spriteSheet;
float timer = 0f;
int cantinadFrames = 7;
int frameAhora = 0;
int spriteAncho = 24;
int spriteAlto = 24;
Rectangle sourceRect;
Vector2 posisionSprite;
La primera variable la utilizamos para cargar nuestra textura. Timer la ultilizamos para almacenar el tiempo de nuestro juego, mas adelante lo explico.
Luego tenemos la dos variables int, en cantidadframes, debemos indicarle cuantas cantidad de frames tiene nuestro Sprite Sheet, luego en el frameAhora le decimos en que frame tiene que empezar.
Luego el spriteAncho y spriteAlto tenemos que poner el tamaño de cada frame, si esto es mas grande de lo que debe ser, no anda bien el SpriteSheet. Luego tenemos SourceRect que lo usamos como un rectangulo donde esta en que frame esta. Luego la posicion.
Bueno, les explico como trabaja esto. Nosotros tenemos una tira de textura que tiene los cambio de la texura, los frames. Nosotros, cargamos esa textura pero solo mostramos una parte de el, para eso usamos spriteAncho y spriteAlto. Luego mas adelante usamos un forque aumentara frameAhora por uno en cada vuelta, luego eso lo multiplicamos con spriteAncho. Esto nos cambiara la posicion de nuestro frame.
Bien, explicado esto, seguimos, en el metodo initialize:
spriteSheet = Content.Load<Texture2D>("Explode1");
posisionSprite = new Vector2(150, 150);
Solo cargamos la textura, y le damos una posicion. Ahora en el metodo Update:
timer += (float)gameTime.ElapsedGameTime.TotalSeconds;
if (timer >0.1f)
{
frameAhora ++;
if (frameAhora > cantinadFrames)
{
frameAhora = 0;
}
timer = 0f;
}
sourceRect = new Rectangle(frameAhora * spriteAncho , 0,
spriteAncho , spriteAlto );
Bueno, aca viene lo que hace que funciones el SpriteSheet. Primero, asignamos timer el tiempo total en segundo de nuestro juego, desde que comenzo. Acuerdense que el metodo Update es como un for global. Les digo esto por que para que entienda como funciona.
Empieza el metodo update, seguimos para abajo:
timer = 0 + el tiempo en segundo pasado desde que empezo el juego
Si timer es mayor a 0.1 entonces hara lo que sigue, con esto nosotros podemos controlar la velocidad de nuestro spritesheet, si nosotros le ponemos 2, el sprite cambiara cada dos segundos.
Luego aumentamos en uno frameahora.
Si frameAhora es mayor a la catidadframes, entonces frameAhora vale 0, esto sirve para que el sprite se vuelva repetir y no se pase de la textura.
Luego timer = 0, esto es para que se vuelva a contar desde cero, ya que si sacamos esto, siempre timer va a ser mayor a 0.1 y nunca habra un tiempo en cada cambio de frame.
Y por ultimo, en sourceRect, tenemos el cambio de nuestro frame, cuando frameAhora vale 1, eso lo multiplica con el ancho del sprite, y se pocisiona en el sprite numero 1, cuando vale dos, se posiciona en el dos y asi hasta que vale 7.
Ese es el proceso que hace que cambie de frame, ahora solo falta dibujarlo:
spriteBatch.Draw(spriteSheet, posisionSprite , sourceRect, Color.White,
0f,Vector2.Zero,10,SpriteEffects.None,0);
Esto tambien se podria hacer mas chico:
spriteBatch.Draw(spriteSheet, posisionSprite , sourceRect, Color.White);
Pero como en el Sprite Sheet que estamos usando es muy chiquito, necesitamos agrandarlo, por eso tenemos que hacerlos mas grande, por pide algunos otro parametro para la rotacion, pero lo seteamos todo en 0 para que todo se conserve, y ponemos 10 para que agrande el modelo.
Explicare rapidamente lo que hace el prosesador de texturas y alpha. El procesador pide dos texturas, la textura normal, y la textura comvertida el Alpha, normalmente cualquier programa de diseño de texturas com photoshop y fireworks tienen esta funcion.
Luego el procesador junta esas dos texturas, la zona que esta en negro, es zona que no debe estar, lo borra y lo blanco es zona que se queda.
Cuando cargamos la textura el prosesador nos pide la una textura con el mismo nombre de la textura que cargamos mas _alpha.
Si ustedes quisieran cargar un SpriteSheet ademas de agregar al proyecto la textura pero en alpha, tiene que ir a las propiedades de la textura original(la que tiene color) e ir a la opcion de ContentProcecessor y cambiarlo por TexturePlusAlphaProcessor, asi nosotros usamos el procesador de textura que tenemos nosotros para cargar la textura. Ademas, tenemos que referenciar en el content nuestro proyecto de AlphaProcesor.
Bueno aca termina el tutorial, intente hacerlo lo mas entendible posible, espero no haberlo echo demaciado largo y confuso. Antes de saludar primero les dejo unos links.
El codigo de fuente:
Eso es todo.
Hasta Luego!
HawthDown, hawthdown@hotmail.com
-
Hola a todos, me presento, mi nombre es Carlos, tengo 16 años y soy de Argentina. Como por ahi vi que uno hiso un tutorial para hacer un menu para XNA, decidi subir un tutorial que ya habia echo sobre como hacer un menu, solo que esta vez en vez de cargarle un tipo de letra, le cargamos una Imagen.
Para esto, haremos por paint cuatro botones, uno de jugar cuando esta y no seleccionado, y uno salir cuando esta y no seleccionado.
Primero, haremos la clase MenuItem con este codigo:
private class MenuItem
{
public Texture2D _tex;
public string _name;
public Vector2 _vec;
int _num;
public MenuItem(Texture2D tex, string name, int num, Vector2 vec)
{
_tex = tex;
_name = name;
_num = num;
_vec = vec;
}
public void Draw(SpriteBatch spritebatch)
{
spritebatch.Draw(_tex, _vec, Color.White);
}
}
Ahora, haremos una variable, haciendo referiencia a esta clase:
MenuItem[] menu = new MenuItem[2];
KeyboardState oldState;
int menuseleccionado = 0;
public enum EstadoJuego
{
Jugar,
Main,
Salir
}
EstadoJuego estadojuego = EstadoJuego.Main;
//Textura
Texture2D salirseleccionado;
Texture2D salirnoseleccionado;
Texture2D jugarseleccionado;
Texture2D jugarnoseleccionado;
Bien, las textura, las usaremos para el menu con imagenes, no se olviden de cargarle las imagenes que hicieron, el oldstate para saber cual fue la ultima teclas que fue apretada. Y menuseleccionado para saber que menu esta seleccionado.
Bueno. Luego en el metodo Initialize deben arrancar las variables de las textura y la del menu:
menu[0] = new MenuItem(jugarnoseleccionado,"Jugar",0, new Vector2(150,150));
menu[1] = new MenuItem(salirnoseleccionado, "Salir",1, new Vector2(150,200));
En el menu, cuando lo contruimos, colocamos, la textura cuando no esta seleccionado, el nombre del menu, el numero del menu y la pocision.
Ahora en el metodo update debemos colocar las movimientos:
KeyboardState kb = Keyboard.GetState();
switch(estadojuego)
{
case EstadodelJuego.Main:
{
if ((kb.IsKeyDown(Keys.Up)) && (oldState.IsKeyUp(Keys.Up)))
{
menuseleccionado -= 1;
if (menuseleccionado == -1)
{
menuseleccionado = menu.Length - 1;
}
}
if ((kb.IsKeyDown(Keys.Down)) && (oldState.IsKeyUp(Keys.Down)))
{
menuseleccionado += 1;
if (menuseleccionado == m_main.Length)
{
menuseleccionado = 0;
}
}
if ((kb.IsKeyDown(Keys.Enter)) && (oldState.IsKeyUp(Keys.Enter)))
{
if (menu[menuseleccionado]._name == "Salir")
{
this.Exit();
}
}
if ((kb.IsKeyDown(Keys.Enter)) && (oldState.IsKeyUp(Keys.Enter)))
{
if (menu[menuseleccionado]._name == "Jugar")
{
estadojuego = EstadoJuego.Jugar;
}
}
break;
}
case MenuEstado.Jugar:
{
if ((kb.IsKeyDown(Keys.Escape)) && (oldState.IsKeyUp(Keys.Escape)))
{
estadojuego = EstadoJuego.Main;
}
break;
}
}
//Con esto, nosotro verificamos que si la posicion del menu es igual a 0, entonces que me cambie la imagen a otra, de lo contrario, me lo regrese al original
if (menuseleccionado == 0)
menu[0]._tex = jugarseleccionado;
else
menu[0]._tex = jugarnoseleccionado;
if (menuseleccionado == 1)
menu[1]._tex = salirseleccionado;
else
menu[1]._tex = salirnoseleccionado;
oldState = kb;
Y por ultimo. en el draw:
spriteBatch.Begin();
switch (estadojuego)
{
case EstadodelJuego.Main:
{
menu[0].Draw(spriteBatch);
menu[1].Draw(spriteBatch);
break;
}
}
spriteBatch.End();
Bueno, con esto termina este tutorial, espero que le sirva, si tienen alguna duda, pregunten sin miedo por los comentarios o agruegenme al MSN.
El del ejemplo queda asi:
Les dejo el codigo de fuente:
http://www.zshare.net/download/181342500a0b4b01/
Hasta Luego!.
HawthDown, hawthdown@hotmail.com