25.3.12

Aprender Windows Phone 7 (parte 53): Poner una textura de background en XNA

Vamos a ir aprendiendo a hacer más cosas con XNA. Hoy vamos a aprender a cargar una textura de fondo, y mostrarla en el fondo de la pantalla del videojuego.

La textura a cargar de fondo es la siguiente:


Creando el proyecto

Abrimos Visual Studio y creamos un nuevo proyecto, para ello hay que pulsar en el menú “File” -> opción “New Project”.
En la nueva ventana he seleccionado las opciones “Visual C#” -> “XNA Game Studio 4.0” -> “Windows Phone Game (4.0)”. Los demás datos son:



Name = BackgroundExample
Location = (la que queráis, yo lo puse en...) C:\A_warterrain_A\Ejemplos WP7\ BackgroundExample \
SolutionName = BackgroundExample

A continuación se pide la versión de la aplicación. Seleccionamos Windows Phone 7.1 y damos a Ok.



Vamos a agregar la imagen al proyecto BackgroundExampleContent que contiene todos los recursos del juego.

Para ello, hacemos click con el botón derecho en el proyecto en el Explorador de Soluciones y seleccionamos "Add" -> "Existing Items…". Buscamos la imagen de fondo y la agregamos.
Ahora vamos a ir a la clase principal de la aplicación Game1.cs y vamos a agregar un atributo a la clase para cargar en ella la textura del fondo de la aplicación:

Texture2D backgroundTexture;

Quedando así:



En el método LoadContent vamos a cargar la textura que subimos en la variable backgroundTexture:



Quedando así:



A continuación, vamos a añadir las instrucciones para que se pinte la textura en el fondo de la pantalla en el método Draw():



Quedando el método Draw así:



Si compilamos y ejecutamos el proyecto nos aparecerá mal la imagen del fondo:



Esto ocurre porque el modo por defecto en XNA es Landscape. Para solucionarlo basta con cambiar la altura y anchura del PreferredBackBuffer en el constructor de la clase Game1 con las siguientes instrucciones:

graphics.PreferredBackBufferHeight = 800;
graphics.PreferredBackBufferWidth = 480;

Quedando así el constructor:



Si ejecutamos ahora, ya pintaremos el fondo con nuestra textura de la forma correcta:



Sencillo, ¿verdad?

Este tutorial está basado en el artículo “XNA for Windows Phone Walkthrough–Creating the Bizzy Bees game” del blog de Tess Hernandez.


El código fuente del ejemplo podéis descargároslo de la siguiente dirección en nuestro repositorio de código:

Código fuente tutorial aprender Windows Phone 7 Parte 53.

Tutorial desarrollado por Grupo Libre y Extremo. Talavera de la Reina (Toledo) Spain.

No comments:

Post a Comment