Seleccionador de Colores en Texturas – XNA


Si han visto algún color de una imagen y quieren usarlo, pero no saben que combinación RGB es la que pertenece a dicho color, este Post puede servirte.

Voy a crear una aplicación donde podemos con el Mouse recorrer cada pixel de la imagen y verificar que Color es el pixel que estamos seleccionando.

Para empezar, creamos un proyecto en XNA, luego cargamos una imagen cualquiera, entre más colorida mejor, yo voy a usar la siguiente (Ya saben como cargar imágenes):


No es tan colorida pero me gusta :P.

Ahora, como vamos a usar el Mouse, y si no se han dado cuenta, cuando movemos el Mouse dentro de la aplicación, no aparece nada, esto es porque el Mouse por defecto está escondido, para mostrarlo en el Initialize escribimos lo siguiente:

this.IsMouseVisible = true;

Ahora el Mouse va a aparecer!, creamos un objeto Vector2 para guardar la posición del Mouse y un objeto tipo MouseState, que va a contener el estado del Mouse y de sus botones, además de la posición:

Vector2 posicionMouse = new Vector2(0, 0);
MouseState estadoMouseActual;

Creamos una función que va a obtener la posición del Mouse y la va a guardar en el Vector posicionMouse:

protected void ActualizarMouse()
{
   MouseState estadoMouseAnterior = estadoMouseActual;
   estadoMouseActual = Mouse.GetState();
   posicionMouse = new Vector2(estadoMouseActual.X ,   estadoMouseActual.Y );
}

Esta función debe ser llamada en la función Update.

Para poder visualizar la posición del Mouse en pantalla:

–          Adicionamos un SpriteFont

–          Creamos un String donde guardaremos la posición del Mouse

–          Creamos un Vector2D donde inicializaremos la posición del Texto

Modificamos la función de ActualizarMouse, para que cada vez que se mueva, guarde la posición en el String y luego sea dibujada:

protected void ActualizarMouse()
{
MouseState estadoMouseAnterior = estadoMouseActual;
estadoMouseActual = Mouse.GetState();
posicionMouse = new Vector2(estadoMouseActual.X , estadoMouseActual.Y );
sposicionMouse = posicionMouse.ToString();
}

En la función Draw:

spriteBatch.DrawString(s_texto, sposicionMouse, posiciontexto, Color.Black);

Ahora la aplicación se ve así:

Para obtener el Color de cada pixel de la imagen, creamos un array de Colores y un objeto Color donde se va a guardar el color del pixel, y una cadena donde se va a guardar el Color:

Color[] texturaColorArray;
Color colortextura;
String sColor = "";

Y para inicializarlo, el tamaño lo obtenemos de multiplicar el ancho por alto de la textura, luego con el método GetData de la textura, llenamos el array con los colores de cada pixel, en la función Initialize:

protected override void Initialize()
{
this.IsMouseVisible = true;
s_texto = Content.Load<SpriteFont>("texto");
elfo = Content.Load<Texture2D>("drizzt");
texturaColorArray = new Color[elfo.Width * elfo.Height];
elfo.GetData(texturaColorArray);
base.Initialize();
}

Modificamos la función ActualizarMouse para obtener el Color del pixel y asignarlo a la cadena:

colortextura = texturaColorArray[(int)posicionMouse.X + (int)posicionMouse.Y * (int)elfo.Width];
sColor = colortextura.ToString();

Para obtener el Color de cada pixel, lo hacemos con la posición delMouse multiplicada por el ancho de la imagen, luego la asignamos a la cadena.

Dibujamos la cadena de texto justo debajo de la cadena de la posición del Mouse:

Pero si seleccionamos una posición fuera de la pantalla, ocurrirá una excepción:

Para corregirla, debemos limitar la asignación de los colores solo cuando el Mouse este dentro de la pantalla, modificamos la función ActualizarMouse:

protected void ActualizarMouse()
{
MouseState estadoMouseAnterior = estadoMouseActual;
estadoMouseActual = Mouse.GetState();
posicionMouse = new Vector2(estadoMouseActual.X , estadoMouseActual.Y );
sposicionMouse = posicionMouse.ToString();
if (((posicionMouse.X) < (elfo.Width)) &&
((posicionMouse.Y) < (elfo.Height)))
{
if ((posicionMouse.X) >= 0 && (posicionMouse.Y) >= 0)
{
colortextura = texturaColorArray[(int)posicionMouse.X + (int)posicionMouse.Y * (int)elfo.Width];
sColor = colortextura.ToString();
}
}
}

Ahora no saldrá el error, y saldrá el código RGBA de cada pixel, para mejorar aún más las cosas, vamos a crear un cuadrado pequeño del Color del pixel que hayamos seleccionado.

public Texture2D CrearRectangulo(int ancho, int alto)
{
Texture2D rectanguloTextura = new Texture2D(GraphicsDevice, ancho, alto, 1, TextureUsage.None,
SurfaceFormat.Color);
Color[] color = new Color[ancho * alto];
for (int i = 0; i < color.Length; i++)
{
   color[i] = new Color(255, 255, 255, 255);
}
rectanguloTextura.SetData(color);
return rectanguloTextura;
}

Este método, creara una textura que tendrá un ancho y un alto definido, al crear la textura, está quedará sin color, por eso se recorre cada pixel y se le asigna el color Blanco a la textura con el método SetData.

Creamos la textura, luego en la función LoadContent la inicializamos:

cuadroColor = CrearRectangulo(50, 50);

Y la dibujamos, pero en el parámetro color, le vamos a enviar la variable que contiene el color del pixel seleccionado:

spriteBatch.Draw(cuadroColor, new Vector2(0,80), colortextura);

Al ejecutar la aplicación:

El puntero del Mouse desaparece cada vez que tomo un Print Screen, pero estoy seleccionando una parte del hombro de “Drizzt”.

Bien, eso es todo, el código aquí.

Anuncios

Un pensamiento en “Seleccionador de Colores en Texturas – XNA

  1. Pingback: De Colores a Texturas – XNA « Escarbando Código

Deseas comentar o sugerir algo?

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s