Viendo y Cambiando el Color de la Pantalla

Si creamos un nuevo proyecto de XNA y lo hacemos correr, veremos una pantalla de color azul, nada muy excitante o que haga algo interesante. Pero lo que haremos en este tutorial será cambiar el color de la pantalla. Para esto nos debemos fijar en el método Draw():

protected override void Draw(GameTime gameTime)
{
GraphicsDevice.Clear(Color.CornflowerBlue);
// TODO: Add your drawing code here
base.Draw(gameTime);
}

Si vemos bien, estamos usando una de las propiedades del objeto GraphicsDeviceManager, que es GraphicsDevice y a su vez usamos el método de este último, el cual es Clear(). Este de método de GraphicsDevice limpia la pantalla y además lo hace de un color que puede ser especificado en los parámetros. Por tanto si queremos cambiar el color de la pantalla podemos usar este método para hacerlo.

Si miran a fondo en el método Clear() verán que el argumento que acepta es el siguiente: Color.CornflowerBlue. Estamos entrando a una propiedad del objeto Color, que es CornflowerBlue, que es exactamente el color con que la pantalla es limpiada. Así que por tanto, podríamos cambiar la propiedad del objeto Color en orden para cambiar el color de la pantalla. Hagámoslo, usemos Color.Red, para poder pintar la pantalla de rojo.

Como notarán… No es nada muy excitante la verdad. Así que hagamos algo más dinámico. Para esto necesitamos una variable de tipo Color, la cual debemos declarar como variable de clase de Game1.

Para esto creamos una variable de tipo Color en la zona de declaración de variables de clase:

public class Game1 : Microsoft.Xna.Framework.Game
{
GraphicsDeviceManager graphics;
SpriteBatch spriteBatch;
Color color;

Después de esto, debemos colocar la variable de tipo Color en el argumento del método clear(), de la siguiente forma;

GraphicsDevice.Clear(color);

Los colores en la computación están formados por distintas combinaciones de valores entre rojo, verde y azul. Estos valores van desde 0 a 255 (teniendo 256 valores en total). Ahora, si lo notamos, podemos usar una variable tipo byte puesto que ella va desde 0 a 255 y en cuanto sobre pasa este último valor vuelve a 0. Ahora, teniendo esto en cuenta, podemos crear 3 variables de tipo byte: rojo, verde, azul. Finalmente deberíamos asociarlas a la variable Color que utilizaremos.

Esto se puede lograr tanto en el método Draw() como en Update(), usando la siguiente porción de código:

color = new Color(rojo, verde, azul);

De esta manera estamos logrando que los valores que usemos de rojo, verde y azul hagan que la variable color, cambie sus parámetros y por tanto su color en si. Con esto cambiamos el color de la pantalla. Si hacemos correr el programa, veremos que la pantalla se torna negra, pues por defecto los valores de rojo, verde y azul son 0 (por tanto, ausencia de color = Negro).

No se preocupen, aun no hemos hecho la parte interesante del programa. Ahora debemos añadir el siguiente código en el método Uptade():

protected override void Update(GameTime gameTime)
{
// Allows the game to exit
if (GamePad.GetState(PlayerIndex.One).Buttons.Back == ButtonState.Pressed)
this.Exit();
rojo++;
verde++;
azul++;
base.Update(gameTime);
}

Si hacemos correr el programa veremos que la pantalla de estar totalmente negra se va tornando lentamente blanca hasta que llega a su cúspide… Y vuelve a ser negra.

¿Como podemos arreglar esto? Simplemente con una o tres variables booleanas o algún flag. En el caso de las variables booleanas, podemos usar una puesto que los valores del rojo, verde y azul cambian al mismo tiempo y son inicialmente el mismo. Podemos usar tres para optimizar el código en el caso de que los valores iniciales de cada uno fueran diferentes. Y el caso del flag es el mismo que usar una variable booleana.

Veamos la opción con tres booleanos, primero debemos declararlos en la zona de declaracion de las variables de clase:

public class Game1 : Microsoft.Xna.Framework.Game
{
GraphicsDeviceManager graphics;
SpriteBatch spriteBatch;
Color color;
byte rojo, verde, azul;
bool red, green, blue;

Luego de iniciarlos, debemos usarlos de manera apropiada en el método Update(). Asi, si el valor de red, green o blue es true, deberia incrementar el valor de rojo, verde o azul. Y si el valor de red, green o blue es false, deberia decrementar el valor de rojo, verde o azul. Y ademas, debemos aclarar cuando red, green o blue son true o false. De la siguiente forma:

protected override void Update(GameTime gameTime)
{
// Allows the game to exit
if (GamePad.GetState(PlayerIndex.One).Buttons.Back == ButtonState.Pressed)
this.Exit();
// TODO: Add your update logic here
if (red == true) rojo++; else rojo--;
if (green) verde++; else verde--;
if (blue == true) azul++; else azul--;
if (rojo == 0) red = true;
if (rojo == 255) red = false;
if (verde == 0) green = true;
if (verde == 255) green = false;
if (azul == 0) blue = true;
if (azul == 255) blue = false;
base.Update(gameTime);
}

De esta forma podemos hacer cambiar el color de la pantalla de totalmente negro a totalmente blanco y totalmente blanco a totalmente negro en el mismo programa. Si hacen correr el programa, podran darse cuenta de esto. Ahora intenten cambiar losvalores iniciales de rojo, verde y azul. ¿Qué pasara? Averiguenlo ustedes mismos tratando.

Atentamente,

ConceXNA

Anuncios

Creando el Primer Proyecto en XNA y Explicacion

Para crear un nuevo proyecto en XNA deben de mover el cursor hacia Archivo -> Nuevo Proyecto -> Windows Game 4.0, Asignar el nombre del proyecto y la localización de este.

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;

namespace ProyectoPrueba
{
    ///
<summary> /// This is the main type for your game
 /// </summary>
    public class Game1 : Microsoft.Xna.Framework.Game
    {
        GraphicsDeviceManager graphics;
        SpriteBatch spriteBatch;
        Color color;
        byte rojo, verde, azul;

        public Game1()
        {
            graphics = new GraphicsDeviceManager(this);
            Content.RootDirectory = "Content";
        }

        ///
<summary> /// Allows the game to perform any initialization it needs to before starting to run.
 /// This is where it can query for any required services and load any non-graphic
 /// related content. Calling base.Initialize will enumerate through any components
 /// and initialize them as well.
 /// </summary>
        protected override void Initialize()
        {
            // TODO: Add your initialization logic here

            base.Initialize();
        }

        ///
<summary> /// LoadContent will be called once per game and is the place to load
 /// all of your content.
 /// </summary>
        protected override void LoadContent()
        {
            // Create a new SpriteBatch, which can be used to draw textures.
            spriteBatch = new SpriteBatch(GraphicsDevice);

            // TODO: use this.Content to load your game content here
        }

        ///
<summary> /// UnloadContent will be called once per game and is the place to unload
 /// all content.
 /// </summary>
        protected override void UnloadContent()
        {
            // TODO: Unload any non ContentManager content here
        }

        ///
<summary> /// Allows the game to run logic such as updating the world,
 /// checking for collisions, gathering input, and playing audio.
 /// </summary>
        ///Provides a snapshot of timing values.
        protected override void Update(GameTime gameTime)
        {
            // Allows the game to exit
            if (GamePad.GetState(PlayerIndex.One).Buttons.Back == ButtonState.Pressed)
                this.Exit();

            // TODO: Add your update logic here

            base.Update(gameTime);
        }

        ///
<summary> /// This is called when the game should draw itself.
 /// </summary>
        ///Provides a snapshot of timing values.
        protected override void Draw(GameTime gameTime)
        {
            GraphicsDevice.Clear(color);
            color = new Color(rojo, verde, azul);
            // TODO: Add your drawing code here

            base.Draw(gameTime);
        }
    }
}

Por defecto al crear una nueva aplicación de XNA, nos entrega 2 variables de clase, el constructor de la clase Game1 y 5 métodos que nos permiten trabajar. Mirando a fondo veremos que las 2 variables de de clase son graphics y spriteBatch, de tipo GraphicsDeviceManager y SpriteBatch respectivamente. El primer objeto (GraphicsDeviceManager) porque te permite acceder al dispositivo grafico en tu maquina. Además contiene una propiedad llamada GraphicsDevice que representa a tu dispositivo grafico actual.

La segunda variable es una instancia de la clase SpriteBatch. Este es el objeto nucleo que usarás para dibujar sprites. En términos gráficos computacionales, un sprite como una imagen 2D o 3D.

El método inicializate() es usado para inicializar variables y otros objetos asociados con el objeto Game1.

El método LoadContent() es llamado después de inicilizate(), tantas veces como los graficos de tu juego necesitan ser recargados. LoadContent() es donde tu cargarás todos los graficos y otro contenido requerido por tu juego, así como imágenes, modelos, sonido, etc.

Después de que LoadContent() termine, el objeto Game1 entra en un loop conocido como Game Loop. Casi todos los juegos usan un alguna forma de loop sean o no escritos en XNA.

Esencialmente, un Game Loop es una serie de métodos llamados una y otra vez hasta que el juego termine. En XNA este loop consiste en solo dos métodos: Update() y Draw(). El método Draw() sirve para poder, sorprendentemente, dibujar cosas en pantalla. Todo lo que tenga que ver con actualizar contenido de tu juego, como por ejemplo, el puntaje que llevas, el movimiento de algún sprite, etc es realizado en Update().

 

Atentamente,

ConceXNA

Antes de Empezar

Bienvenidos sean a Torres de XNA, un compilado de diferentes libros sobre progrmación en XNA de los cuales usaremos codigos y ejemplos. Tambien explicaremos a fondo los metodos de programación que significa cada codigo y mucha MUCHA orientación a objetos. Para esto último necesitamos conocer un poco sobre el tipo de lenguaje que se usa en orientado a objetos, asi que daremos algunas de las definiciones fundamentales:

  • Clase: Es la representacion abstracta (modelo) de una entidad. Tambien se puede definir como un patron para construir un objeto. La clase define las caracteristicas de un objeto
  • Objeto: Es una unidad que engloba en si mismo datos y procedimientos necesarios para el tratamiento de los datos.
  • Mensaje: Es el modo que se interrelacionan y comunican los objetos entre si.
  • Metodo: Se puede entender como una funcion del objeto, un procedimiento o una operacion del mismo. (Ejemplo: Mario –  uno de sus metodos es saltar).
  • Atributos: Son las diferentes variables que puede tener una clase, consta de dos partes: nombre y valor. Ademas, definen el estado de un objeto.
  • Estado: Son los valores de las diferentes variables dadas en un determinado tiempo pertenecientes a un objeto.

Con esto hemos cubierto parcialmente algunos conceptos de la programación orientada a objetos (POO). Ahora, si bien con esto podemos trabajar en XNA, aun nos falta mucho para poder entenderlo.

Antes de comenzar, deben saber que usaremos una maquina con Windows Vista o Windows 7 y necesitaremos una tarjeta de video que soporte DirectX 9 o superior.

Ahora deben saber que trabajaremos con la ultima version de XNA hasta el momento, asi que tendremos que bajar dos programas. Primero, Microsoft Visual C# 2010 Express Edition (Descargar Aqui =D). Segundo Microsoft XNA 4.0 (Descargar Aqui xD). En ese mismo orden deben de instalarlos, puesto que XNA es un framework de Microsoft Visual C#. No me siento con la obligación de explicarles como instalarlos exactamente, porque es muy facil xD. Así que espero que ustedes mismos puedan hacerlo.

Con esto terminamos el primer post del blog de Torres de XNA. Hope to see you again !

Atentamente,

ConceXNA