Después de estar un rato con el Community Technical Preview (CTP) de las herramientas de Windows Phone 7, Microsoft lanza la beta libre para todos los desarrolladores.

Como game developers, nos interesa la parte de XNA para el desarrollo de juegos y ahora tenemos la oportunidad de usar nuestras habilidades en XNA para desarrollar juegos para plataformas Windows Phone 7.

Ya puedes descargar la beta en: WP7DT  BETA

Espero darme una escapada de mis actividades cotidianas y subir algún pequeño ejemplo apuntando al Windows Phone 7.

Si alguien ya hizo algo con este nuevo set de herramientas que nos platique cómo le va.

En los tutoriales se tratan temas como:

-¿Cómo mostrar video en 2D?

-Animación básica.

-Efectos en 2D para gráficas.

-Colisiones con sprites inclinados.

Si les gustan los tutoriales en video, visiten su blog: http://www.bfxstudio.net/pages/Tutoriales.aspx

Gracias Agustín

Abordaremos conceptos básicos como colisiones, sonido, animación, estados de juego, control con el mouse, etc.

Para que se vayan dando una idea de qué vamos a hacer, les dejo un video con el juego terminado.

Estoy trabajando en arreglar el código para mejorar su comprensión y en escribir el tutorial.

Comentarios, bienvenidos.

Primero creamos un nuevo proyecto en XNA, si no recuerdas como, dale click aquí.
Una vez que tengamos nuestro proyecto nuevo, vamos al Solution Explorer y en el nodo de Content, damos click derecho > Add > New Item.
En las opciones que nos aparecen, seleccionamos Sprite Font y le ponemos un nombre, en mi caso le puse MiFont.spritefont. Damos Add.

Lo que nos generó Visual Studio es un nuevo archivo XML, el cual tiene la función de definir cómo se debe de ver nuestro texto al momento de dibujarlo. Si quieres saber más sobre XML, visita la entrada en Wikipedia
Entre las etiquetas que encontramos ahí, hay dos que son muy fáciles de entender: y . La primera regula el tamaño de la fuente y la segunda el estilo de la misma (Bold, Italic, etc.). Vamos a dejar estos valores aunque si quieres modificarlos eres libre de hacerlo, sólo recuerda cerrar siempre las etiquetas.
Ahora vamos a nuestro archivo Game1.cs y justo después de la declaración del SpriteBatch y agregamos :

     SpriteFont spriteFont;

En este objeto vamos a cargar nuestra fuente y también vamos a poder dibujar el texto.
Ahora vamos a nuesto método LoadContent y escribimos:
spriteFont = Content.Load("MiFont");
Ahora nuestra variable SpriteFont ya está cargada con la descripción de la fuente que creamos. El “MiFont” que le mandamos al método Load() es el nombre sin extensión de la fuente que creamos.

	spriteBatch.Begin();
        spriteBatch.DrawString(spriteFont, "Hola XNA Mexico!!!!",
                new Vector2(400, 300), Color.Red);
     	spriteBatch.End();

Como recordamos en de tutoriales pasados, siempre que dibujemos con SpriteBatch, debemos hacer la llamada Begin() antes de usarlo y End() una vez que terminamos de dibujar, para dibujar texto esto no es excepción, lo que cambia aquí es que ahora usamos un método llamado DrawString() que recibe como parámetros un SpriteFont (el que creamos) un String, un Vector2D para la posición y un Color.
Damos F5 para compilar y ejecutar nuestro proyecto y listo!!! Tenemos texto dibujado en pantalla.

Listo, en unos pocos momentos ya tenemos texto en pantalla, ahora puedes ir de nuevo al archivo MiFont.spritefont y jugar con los valores de las etiquetas y ver qué pasa si los modificas.

Espero que te haya servido este artículo, si tienes dudas, comentarios o sugerencias, con gusto las atenderemos.

El pasado 7 de abril, tuve la oportunidad de impartir un taller sobre XNA dentro del marco del Día ISC en el Instituto Tecnológico y de Estudios Superiores de Monterrey Campus Estado de México.

El curso duró dos horas y consistió en mostrar los fundamentos básicos de XNA en 2D a alumnos de esa institución, como era mi primera vez impartiendo un taller, el tiempo me traicionó y no terminamos el objetivo que teníamos: terminar un juego completo.

Esto dio paso a que el juego que tenía programado para hacer en el taller, lo convierta en un  tutorial extensivo que abarque la mayor cantidad de conceptos básicos para el desarrollo de juegos en 2D con XNA.

Esperen pronto los tutoriales.

En la clase de Sprite es donde capturaremos el input del control, para esto es necesario que en la parte de arriba de la clase Sprite, agreguemos el namespace:

using Microsoft.Xna.Framework.Input;

Esto sirve para traer todas las clases auxiliares que tiene XNA para el manejo del input, con teclado, mouse o gamepad.
Ahora, para controlar la velocidad de nuestro personaje, vamos a agregar una nueva variable a la clase Sprite, esta se llamará velocidad y es float, la inicializamos en 0.5f.

float velocidad = 0.5f;

Una vez hecho esto, nos vamos a nuestro método Update() y al principio agregamos estas simples líneas de código:

GamePadState control = GamePad.GetState(PlayerIndex.One);
if (control.ThumbSticks.Left.X < 0) 

      posicion.X -= velocidad * gameTime.ElapsedGameTime.Milliseconds; 

else if (control.ThumbSticks.Left.X > 0)
     posicion.X += velocidad * gameTime.ElapsedGameTime.Milliseconds;

¿Qué está pasando aquí?
La primer linea la utilizamos para crear una instancia de la clase GamePadState, la cual representa el estado del control del XBOX360 en un instante en el tiempo, es decir, contiene información sobre qué botones están apretados, si los sticks están desplazados etc. PlayerIndex.One, lo usamos para indicar de qué control queremos obtener el estado.
Las clausulas if-elseif sirven para saber hacia dónde se movió el ThumbStick izquierdo. Su posición va de -1 siendo totalmente a la izquierda, 0 estando en medio y 1 estando hasta la derecha.
Una vez que sabemos hacia qué lado está moviéndose el stick, simplemente modificamos la posición de nuestro sprite:

posicion.X -= velocidad * gameTime.ElapsedGameTime.Milliseconds;

posicion.X += velocidad * gameTime.ElapsedGameTime.Milliseconds;

Basándonos en Xf = X0 + V*T,donde V es la velocidad y T es el tiempo, que en nuestro caso expresamos en milisegundos.

*Como ejercicio, ahora programa el movimiento vertical del personaje.

Espero que te haya servido el tutorial, si tienes dudas,  o sugerencias, escribelas en la sección de comentarios.

Primero, descarga esta imagen a tu computadora. Puedes guardarla en cualquier directorio e incluso cambiarle el nombre si quieres. La imagen es editada y pertenece originalmente a George Clingerman de http://xnadevelopment.com.
Pues comencemos:
En la barra de herramientas selecciona View > Solution Explorer. Esta nueva ventana es la que se encarga de mostrarnos los documentos y referencias de nuestro proyecto, ahí hay un nodo llamado content, ahí van todas nuestras imágenes sonidos, modelos, etc. Da click derecho a Content > Add > Existing Item. Se abrirá una nueva ventana, busca la imagen que descargaste anteriormente y dale Add.

Saquen sus cuadernos que viene un poco de teoría.
Como pueden ver en la hoja de sprites, el personaje se “repite” cinco veces. ¿Encuentras las diferencias? Claro, los pies son los que cambian, pero ¿cómo paso de eso a un personaje animado? Imagina que sólo puedes dibujar en pantalla una parte de la imagen original, en nuestro caso, esa pequeña parte es precisamente la quinta parte de la imagen, por lo que sólo puedes dibujar algo como esto:

Ahora simplemente tendríamos que cambiar de cuadro cada cierto tiempo, esto es lo que le daría el efecto de que se está animando nuestro personaje.
Perfecto, ahora pasemos a codificar nuestra animación, como queremos ser un poco ordenados y aprovechar el paradigma orientado a objetos de C#, vamos a crear una nueva clase para nuestro personaje. En el Solution Explorer, damos click derecho en el nombre de nuestro proyecto, Add > Class y le ponemos de nombre Sprite.
Nuestra nueva clase es genérica así que tenemos que agregar los namespaces necesarios para convertirla a una clase de XNA. En la parte de arriba agrega las siguientes líneas:

using Microsoft.Xna.Framework;
using Microsoft.Xna.Framework.Graphics;

Ahora proseguiremos a definir cuáles son los atributos de nuestro sprite, necesitamos que quede así:

class Sprite
{
    Texture2D hojaSprites; //La imagen con los sprites
    Vector2 posicion; //La posicion en pantalla donde queremos dibujar
    int cuadrosAnimacion;//Cuantos cuadros tiene la animacion
    int milisegundosPorCuadro; //Cuando debe durar cada cuadro
    int tiempoDesdeUltimoCuadro = 0; //Tiempo desde la ultima   actualizacion
    int indiceAnimacion = 0; //En que cuadro de la animacion vamos
}

Debajo de int indiceAnimacion = 0; vamos a escribir nuestro constructor, el cual nos servirá para crear nuevos sprites:

public Sprite(Texture2D hojaSprites, Vector2 posicion, int cuadrosAnimacion, int milisegundosPorCuadro,
            Point tamanoCuadro)
        {
            this.hojaSprites = hojaSprites;
            this.posicion = posicion;
            this.cuadrosAnimacion = cuadrosAnimacion;
            this.milisegundosPorCuadro = milisegundosPorCuadro;
            this.tamanoCuadro = tamanoCuadro;
        }

Lo que hace el constructor, es el de asignar los valores que se le mandan como parámetros y de esta forma inicializar los atributos de nuestro objeto sprite.
Debajo de nuestro constructor vamos a escribir nuestro método Update(), este método será en encargado de actualizar el índice del cuadro que vamos a dibujar, el código queda así:

public void Update(GameTime gameTime)
{
            tiempoDesdeUltimoCuadro += gameTime.ElapsedGameTime.Milliseconds;
            if (tiempoDesdeUltimoCuadro >= milisegundosPorCuadro)
            {
                tiempoDesdeUltimoCuadro = 0;

                if (indiceAnimacion < cuadrosAnimacion-1)
                    indiceAnimacion++;
                else
                    indiceAnimacion = 0;
            }
}

Cada milisegundo vamos a ir aumentando la variable tiempoDesdeUltimoCuadro,si esa variable es mayor que el tiempo que habíamos definido para cada cuadro de animación, entonces es momento de actualizar el índice.
Para actualizar el índice, simplemente checamos si estamos 2 números antes de cuadrosAnimacion, si es así, podemos a vanzar la animación, en caso contrario, la reseteamos volviéndola cero.
Ahora que ya sabemos qué cuadro debemos dibujar, procedemos a dibujarlo:

public void Draw(SpriteBatch spriteBatch)
        {
            spriteBatch.Begin();

            spriteBatch.Draw(hojaSprites, posicion,
                new Rectangle(indiceAnimacion * tamanoCuadro.X, 0, tamanoCuadro.X, tamanoCuadro.Y),
                Color.White, 0.0f, Vector2.Zero, 1.0f, SpriteEffects.None, 0);

            spriteBatch.End();
        }

Nuestro método Draw() recibe como parámetro un objeto tipo SpriteBatch, el cual podemos ver como si fuera un lienzo para pintar. Siempre que queremos dibujar algo con el SpriteBatch debemos encerrar nuestro “dibujo” entre spritebatch.begin() y spritebatch.end().
El método spriteBatch.Draw(…) puede ser utilizado de varias formas, nosotros estamos utilizando una sobrecarga que recibe 8 parámetros:

• 1)La Texture2D a dibujar, en nuestro caso la hoja de sprites.
• 2)Un Vector2 con la posición donde queremos dibujar.
• 3) El SourceRectangle, que representa un rectángulo formado por una parte de nuestra imagen (la quinta parte para nosotros).
• 4)El color que queremos darle.
• 5)La rotación que en este caso no necesitamos.
• 6) El origen que tomaría la rotación.
• 7)La escala, que se queda como 1.0f para conservar el tamaño original.
• 8)Un SpriteEffect que puede en esta ocasión no usaremos.
• 9)La capa en la que lo queremos dibujar, por ahora dejémoslo en cero.

En este punto, ya tenemos a nuestro personaje animado, pero nos falta meterlo al juego…
Dentro de la clase Game1.cs hay que hacer lo siguiente:
Debajo de SpriteBatch spriteBatch; define un nuevo Sprite y nombralo personaje.

GraphicsDeviceManager graphics;
SpriteBatch spriteBatch;
Sprite personaje;

Modifica el método LoadContent() para que quede así:

        protected override void LoadContent()
        {
            spriteBatch = new SpriteBatch(GraphicsDevice);

            Texture2D imagen = Content.Load(@"walkingSquareSheet");
            personaje = new Sprite(imagen, new Vector2(400, 300), 5, 50, new Point(70, 80));
        }

personaje = new Sprite(imagen, new Vector2(400, 300), 5, 50, new Point(70, 80));
Es la inicialización del constructor, le pasamos la imagen, la posición, el número de cuadros de la animación, los milisegundos por cuadro y el tamaño.
Texture2D imagen = Content.Load(@"walkingSquareSheet");
Se encarga de cargar una textura a memoria (asignada a la variable imagen) para después pasarla al constructor.
Ahora simplemente falta que modifiques los métodos Update() y Draw() de modo que se llamen los métodos correspondientes de nuestro Sprite.

        protected override void Update(GameTime gameTime)
        {
            personaje.Update(gameTime);//Llamando al método Update de Sprite

            base.Update(gameTime);
        }

        protected override void Draw(GameTime gameTime)
        {
            GraphicsDevice.Clear(Color.CornflowerBlue);

            personaje.Draw(spriteBatch); );//Llamando al método Draw de Sprite

            base.Draw(gameTime);
        }

Ahora sólo queda darle F5 al proyecto y ver a nuestro personaje cobrar vida.
Te recomiendo que trates de jugar con los valores de inicialización de Sprite para que veas diferentes resultados.
Espero que te haya servido el tutorial, si tienes dudas, quejas o sugerencias, deja tu cometario.

Lo primero que hay que hacer es un nuevo proyecto así que abre Visual Studio y crea un nuevo proyecto de XNA 3.1: File > New Project  > Visual C# > XNA Game Studio 3.1. Selecciona un nombre y dale Ok. Visual Studio generará un flamante proyecto nuevo para empezar a desarrollar.

Da click en la imagen para agrandarla.

En este punto, ya podríamos ejecutar nuestro juego: presiona F5 y observa lo que pasa… sí claro no es bonito ni mucho menos interactivo, de hecho ni siquiera le llamaría juego, pero lo importante es que a pesar de que no percibimos nada, detrás  de cámaras se está dibujando y actualizando nuestro juego.

¿Qué es todo esto?

C# (se pronuncia “si sharp”) es el lenguaje utilizado para programar juegos en XNA, es muy sencillo de aprender, de hecho, no necesitas saber C# para empezar a programar con XNA. Aunque sí deberías saber programar en algún otro lenguaje orientado a objetos como C++ o Java(se pueden sustituir por ganas de aprender).

Visual C# 2008 Express Edition es el entorno de desarrollo que usaremos para varias cosas, entre ellas están el escribir y compilar nuestro código en C# , manejar los recursos de nuestro proyecto (imágenes, audio, archivos, modelos, texutras, etc.) y conectar nuestros dispositivos(Xbox 360, Zune HD).

XNA Game Studio 3.1 es la carnita de todo esto, es el Framework que nos brinda todas las facilidades para desarrollar nuestros juegos. Gracias a XNA, tenemos a nuestra disposición diferentes librerías que nos permiten dibujar imágenes en pantalla, reproducir sonidos, mostrar modelos en 3-D, hacer juegos con modalidad multijugador, utilizar controles de Xbox 360 y muchas cosas más.

Descargas e instalación:

Visual C# 2008 Express Edition: http://www.microsoft.com/express/Downloads/#2008-Visual-CS

Descárgalo y ejecutalo, sigue las instrucciones en pantalla para la instalación. Es necesario que lo tengas instalado antes de seguir.

XNA Game Studio 3.1: http://www.microsoft.com/downloads/details.aspx?FamilyID=80782277-d584-42d2-8024-893fcd9d3e82&displaylang=en

Descárgalo y ejecutalo, sigue las instrucciones en pantalla para la instalación. Es necesario que lo tengas instalado antes de seguir.

Para comprobar la instalación, simplemente ve a: Inicio > Todos los Programas > Microsoft XNA Game Studio 3.1 > Microsoft Visual C# 2008 Express Edition

La primera vez que lo ejecutes, te pedirá que registres el Visual C#, sigue los pasos y regístra tu Visual C#

Listo, ¿no fue tan difícil o sí? Así son las cosas con XNA.

Hola!

Este post es para darle la bienvenida a todas aquellas personas que quieren desarrollar videojuegos pero no saben por dónde comenzar. Ya sea porque saben muy poco o nada de programación, o porque se ven abatidos por la complejidad de ciertos lenguajes o tecnologías que terminan por frustrarlos y hacerlos desertar.

Para saber sobre el sitio los invito a visitar: Acerca de XNA Mexico

El chiste de este blog es acercar a desarrolladores mexicanos (y de todo el mundo) al maravilloso mundo del desarrollo de videojuegos.

Si no tiene experiencia, usa el sitio para aprender, si tienes experiencia, usa el sitio para ayudar a otros. Seas desarrollador de XNA o no, puedes aportar positivamente.

Bienvenidos y siéntanse libres de opinar y formar parte de la comunidad.