Microsoft Student Partners

Introducción a XNA Game Studio Express

XNA Game Studio Express

XNA Game Studio Express es una nueva oferta para estudiantes y apasionados por el desarrollo de

videojuegos. XNA Game Studio está basado en Visual C# Express 2005 y permite a los desarrolladores

poder crear videojuegos en ambas plataformas Windows y Xbox 360. XNA Game Studio contiene lo

siguiente:

XNA Framework Content Pipeline, lo cual es un conjunto de herramientas que permiten a los

programadores fácilmente incorporar contenido 3D en sus propios juegos.

XNA Framework, que es un conjunto de librerías o bibliotecas de desarrollo de código

administrado que hacen posible a los desarrolladores tener mejor productividad a la hora de crear sus

videojuegos para Windows y Xbox 360.

Game Studio Express que también contiene una completa documentación, como empezar y

starter kits que muestran la mejor manera de utilizar el content pipeline y XNA Framework

Instalación de XNA Game Studio Express

Para empezar con XNA Game Studio Express, tiene que asegurarse de que su PC con Windows cumpla

con los requisitos de hardware y software necesarios para su instalación. Después puede continuar

siguiendo estos sencillos pasos:

1. Descargar e instalar Microsoft Visual C# 2005 Express Edition. Esta versión gratuita de Microsoft

Visual C# es la que usará para crear el código de sus juegos de XNA Game Studio. Y es requerido

que se instale primero antes de instalar el Microsoft XNA Game Studio.

2. Descargar e instalar Microsoft Visual Studio 2005 Express Editions Service Pack 1

3. Si tiene Windows Vista instalado en su ordenador, se recomienda descargar e instalar Visual Studio

2005 Express Editions Service Pack 1.

4. Descargue e instale Microsoft XNA Game Studio Express. Una vez terminada la instalación, usted ya

puede comenzar a crear sus juegos para Windows.

5. Opcional: Si quiere desarrollar juegos para Xbox 360, necesitará unirse a XNA Creators Club y

empezar a desarrollar juegos para su Xbox 360. También puede seguir las instrucciones para

Conectar su Xbox 360 con XNA Game Studio Express.

Documentación sobre XNA Game Studio Express

Usted puede checar la documentación gratuita que viene en complemento con la instalación de forma local de esta manera:

Creación de un proyecto de videojuego para Windows

Menu File -> New Project -> Seleccionamos la plantilla de Windows Game.

Al momento de crear el proyecto, nos crea dos clases por default, una llamada Game1.cs y otra llamada Program.cs, además de algunos archivos de imágenes.

Se analizará con mas detalle la clase Game1.cs

//Librerias de XNA que se ocuparan posteriormente using System; using System.Collections.Generic; using Microsoft.Xna.Framework; using Microsoft.Xna.Framework.Audio; using Microsoft.Xna.Framework.Content; using Microsoft.Xna.Framework.Graphics; using Microsoft.Xna.Framework.Input; using Microsoft.Xna.Framework.Storage; namespace Demostracion { /// <summary> ///La clase Game proporciona la inicialización de dispositivos gráficos ///la lógica del juego y el código de procesamiento. /// </summary> public class Game1 : Microsoft.Xna.Framework.Game {

//GraphicsDeviceManager maneja la configuración del dispositivo gráfico. GraphicsDeviceManager graphics; //ContentManager, su objetivo es cargar los objetos desde archivos, //los cuales pueden ser texturas en 2D,3D,efectos,etc. ContentManager content; public Game1() { //Incializacion de variables graphics = new GraphicsDeviceManager(this); content = new ContentManager(Services); } /// <summary> /// Permite el juego realizar cualquier inicialización que se necesite antes de empezar a /// ejecutarse.Esto es donde puede consultar para cualquier servicio necesario y cargar /// cualquier contenido relacionado que no sea gráfico. /// La llamada a base.Initialize enumera todos los componentes y los inicializa. /// </summary> protected override void Initialize() { base.Initialize(); } //En este metodo se cargara las texturas, efectos. protected override void LoadGraphicsContent(bool loadAllContent) { if (loadAllContent) { } } //Metodo para destruir objetos creados en el juego. protected override void UnloadGraphicsContent(bool unloadAllContent) { if (unloadAllContent) { content.Unload(); } } //En este metodo es en donde se ejecuta la lógica del juego, ya sea que puede //ser colisiones,actualizaciones del mundo,audio, etc. protected override void Update(GameTime gameTime) { if (GamePad.GetState(PlayerIndex.One).Buttons.Back == ButtonState.Pressed) this.Exit(); base.Update(gameTime); } //En este metodo se dibuja todas las texturas mediante Sprites, que son

//figuras que tienen 3 metodos principales, como son el begin, draw y end, entre otros. protected override void Draw(GameTime gameTime) { graphics.GraphicsDevice.Clear(Color.CornflowerBlue); base.Draw(gameTime); } } }

Se creará un juego, en primer lugar será por pasos, declaración de primeras variables:

GraphicsDeviceManager graphics; ContentManager content; //Imagenes que se dibujara Texture2D goku; SpriteBatch misprite; //goku Vector2 posicionGoku; const int velocidadGoku = 5; Rectangle limites; //Porcentaje de la pantalla que estara en el limite const float porcentajeLimite = 0.05f;

Dentro del constructor de clase puede colocar o definir el tamaño de la ventana del juego: public Game1() { graphics = new GraphicsDeviceManager(this); content = new ContentManager(Services); //Calculando el tamaño de la ventana del juego graphics.PreferredBackBufferWidth = 853; graphics.PreferredBackBufferHeight = 480; }

En el metodo inicializate colocará la posición inicial de la textura.

protected override void Initialize() { base.Initialize(); // Limites de acuerdo a la resolución que se definió en el constructor de clase Viewport viewport = graphics.GraphicsDevice.Viewport; limites = new Rectangle( (int)(viewport.Width * porcentajeLimite), (int)(viewport.Height * porcentajeLimite), (int)(viewport.Width * (1 - 2 * porcentajeLimite)), (int)(viewport.Height * (1 - 2 * porcentajeLimite))); // Se colocara el jugador en un punto medio de la pantalla. posicionGoku.X = (limites.Width - goku.Width) / 2; posicionGoku.Y = limites.Height - goku.Height; }

Importará la textura desde archivo dentro de la carpeta del proyecto:

En el metodo LoadGraphics se cargará la textura que se importo al proyecto, cada textura tiene por default un Asset Name que es el mismo nombre del archivo:

protected override void LoadGraphicsContent(bool loadAllContent) { if (loadAllContent) { goku = content.Load<Texture2D>("goku"); misprite = new SpriteBatch(graphics.GraphicsDevice); } }

En el metodo Draw, se dibujará dicha textura, asignandole una posicion,color:

protected override void Draw(GameTime gameTime) { graphics.GraphicsDevice.Clear(Color.Black); base.Draw(gameTime); misprite.Begin(); misprite.Draw(goku, posicionGoku, Color.White); misprite.End(); }

Ejecute el proyecto y observe :

Ahora se le dará movimiento a la textura en el metodo update mediante entradas por teclado de esta forma:

protected override void Update(GameTime gameTime) { base.Update(gameTime); //Manejo de Teclado KeyboardState keyboard = Keyboard.GetState(); //Condiciones al presionar cada tecla. if (keyboard.IsKeyDown(Keys.Escape)) { this.Exit();} if (keyboard.IsKeyDown(Keys.Left)) { posicionGoku.X -= velocidadGoku;} if (keyboard.IsKeyDown(Keys.Right)) { posicionGoku.X += velocidadGoku; } //Elemento que no saldra de la pantalla posicionGoku.X = MathHelper.Clamp(posicionGoku.X, limites.Left, limites.Right - goku.Width); }

Añadará en la parte de declaración de variables ahora esta vez hara referecia a las esferas:

//Esferas Texture2D esferas; //Creación de lista para las posiciones de las esferas List<Vector2> posicionEsferas = new List<Vector2>(); float cantidad = 0.01f; const int velocidadEsferas = 2; Random aleatorio = new Random(); En el metodo LoadGraphics cargará la siguiente textura: esferas=content.Load<Texture2D>("esfera");

En el metodo update ingresamos el siguiente código:

//Generar esferas aleatoriamente y guardarlas en una lista if (aleatorio.NextDouble() < cantidad) { float x = (float)aleatorio.NextDouble() * (Window.ClientBounds.Width - esferas.Width); posicionEsferas.Add(new Vector2(x, -esferas.Height)); } for (int i = 0; i < posicionEsferas.Count; i++) { //Caidas de las esferas posicionEsferas[i] = new Vector2(posicionEsferas[i].X, posicionEsferas[i].Y + velocidadEsferas); // Eliminar todas las esferas que salen de la pantalla if (posicionEsferas[i].Y > Window.ClientBounds.Height) { posicionEsferas.RemoveAt(i); i--; } }

En el metodo Draw se dibujaran las esferas:

// Dibuja las esferas con un ciclo que recorre la lista foreach (Vector2 posiciones in posicionEsferas) misprite.Draw(esferas, posiciones, Color.White);

Ahora colocaremos las colisiones entre las esferas y el jugador, para eso se tiene que colocar en cada textura un rectangulo que se le conoce como Bounding para poder manipular dicho objeto.

En el medo Update sucederá todo esto:

//Rectangulo del jugador Rectangle rectanguloGoku = new Rectangle((int)posicionGoku.X, (int)posicionGoku.Y, goku.Width, goku.Height);

De igual forma para la lista de esferas, debera colocar dicho codigo dentro del ciclo for, para determinar cada rectangulo a cada esfera de la lista, cuando las esferas sobrepasen la ventana del juego se eliminarán cada esfera.

Rectangle rectanguloEsferas = new Rectangle((int)posicionEsferas[i].X, (int)posicionEsferas[i].Y, esferas.Width, esferas.Height); // Checa si chocan, si choca o sobrepasa el limite de la pantalla se elimina if (rectanguloGoku.Intersects(rectanguloEsferas)) { posicionEsferas.RemoveAt(i); i--; } else if (posicionEsferas[i].Y > Window.ClientBounds.Height) { posicionEsferas.RemoveAt(i); i--; } Se añadirá dos texturas más que haran el fondo y la parte de arriba: Estas texturas se importan al proyecto como tipo content pipelines, las cuales se llaman

Fondo.png y Shen.png Actualizaremos el código en la parte de declaraciones y en el metodo LoadGraphics. //Fondo y Shen Texture2D shen; Texture2D fondo; Metodo LoadGraphics:

shen = content.Load<Texture2D>("shen"); fondo = content.Load<Texture2D>("fondo"); Metodo Draw quedaría asi: misprite.Begin(); misprite.Draw(fondo, new Vector2(0, 70), Color.White); foreach (Vector2 posiciones in posicionEsferas) misprite.Draw(esferas, posiciones, Color.White); misprite.Draw(goku, posicionGoku, Color.White); misprite.Draw(shen, new Vector2(0, 0), Color.White); misprite.End();

Despues se añadirá texto al juego por medio de un Sprite Font, en agregar nuevo elemento del explorador de soluciones.

Checar que cuando se agrega un Sprite Font, se genera un XML en donde puede editar o modificar las propiedades de dicha fuente:

<?xml version="1.0" encoding="utf-8"?> <XnaContent xmlns:Graphics="Microsoft.Xna.Framework.Content.Pipeline.Graphics"> <Asset Type="Graphics:FontDescription"> <FontName>Matisse ITC</FontName> <Size>10</Size> <Spacing>2</Spacing> <Style>Regular</Style> <CharacterRegions> <CharacterRegion> <Start>&#32;</Start> <End>&#126;</End> </CharacterRegion> </CharacterRegions> </Asset> </XnaContent>

Declare una variable de tipo Sprite Font en la primera parte :

//Texto SpriteFont texto;

Metodo LoadGraphics:

texto = content.Load<SpriteFont>("texto");

Metodo Draw:

misprite.DrawString(marcador,"Atrapa las esferas del dragon",new Vector2(10,380),Color.White); misprite.DrawString(marcador, "MrEdison", new Vector2(10, 400), Color.White);

Ejecute la aplicación Final: