A pesar de la comodidad que nos brinda el framework XNA para reconocer gestos de manera sencilla, a veces podemos encontrarnos en la situación que queremos tener mas control sobre el manejo de eventos en la pantalla táctil del teléfono. Es por esto que existe otra forma de realizar captura de datos de la pantalla por parte del usuario. Hagamos un ejemplo para que veas este camino de interactividad con la pantalla táctil de un Windows Phone.
Ejemplo de captura de eventos táctiles
Abre Visual Studio 2010, y crea un proyecto Windows Phone Game (4.0), nómbralo «TouchXNA». Ahora para este proyecto, implementaremos una lógica para desplegar una imagen donde el usuario este «tocando» la pantalla, y además muestre las coordenadas y el ID del punto detectado.
Ahora busca cualquier imagen que deseas que no pase los 80×80 pixeles, y descárgala. En este ejemplo se usará la siguiente imagen del planeta marte.
Preparando el Content
Ahora dale clic-derecho sobre el Content del proyecto, y selecciona «agregar->ítem existente» y busca la imagen que deseas agregar. Ahora agrega un nuevo ítem en el Content, pero esta vez tipo «Sprite Font», y nómbralo «SpriteFont1»
Implementando la lógica
Regresa a la clase Game1.cs, en la región de la declaración de los atributos, agrega lo siguiente justo debajo de la línea «SpriteBatch spriteBatch;«:
SpriteFont spriteFont; TouchCollection touchCollection; Texture2D planetaTextura; Vector2 planetaPosicion; Vector2 textoPosicion;
Usaremos el spriteFont para el formato del string que imprimiremos la información del punto de contacto encontrado. planetaTextura resguarda la textura de la imagen que deseamos desplegar en el punto de contacto. planetaPosicion se utilizará para designar la posición donde queremos desplegar planetaTextura. touchCollection es de tipo TouchCollection, y funciona como una lista que almacena los puntos de contacto detectados en cada instante de tiempo.
Dirígete al método LoadContent para cargar la fuente y la textura que habíamos agregado previamente a nuestro Content del proyecto:
protected override void LoadContent()
{
spriteBatch = new SpriteBatch(GraphicsDevice);
planetaTextura = Content.Load<Texture2D>("planet-mars");
spriteFont = Content.Load("SpriteFont1");
}
Ya con nuestro contenido cargado a nuestra aplicación, proseguimos a realizar el proceso de detección de puntos de contacto por parte del usuario, donde asignaremos la posición del planeta y del texto a desplegar en la pantalla. Esto se realiza en el método Update:
protected override void Update(GameTime gameTime)
{
if (GamePad.GetState(PlayerIndex.One).Buttons.Back == ButtonState.Pressed)
this.Exit();
touchCollection = TouchPanel.GetState();
if(touchCollection.Count >= 1){
planetaPosicion.X = touchCollection[0].Position.X - planetaTextura.Width / 2;
planetaPosicion.Y = touchCollection[0].Position.Y - planetaTextura.Height / 2;
textoPosicion.X = touchCollection[0].Position.X + 35;
textoPosicion.Y = touchCollection[0].Position.Y + 10;
}
base.Update(gameTime);
}
Puedes observar que a planetaPosicion le asignamos la posición del punto encontrado, restándole la mitad del ancho y alto para los ejes X e Y. Si no hacemos esto, donde nosotros toquemos la pantalla, la imagen se mostrará pero no centrada en el punto. Esto es porque la posición de una imagen es con respecto a la esquina izquierda superior. Esto se puede ajustar sencillamente restándole la mitad del ancho y alto de la imagen a la posición del punto de contacto.
Ahora, en cuanto al método Draw, agrega las siguientes líneas de instrucciones:
protected override void Draw(GameTime gameTime)
{
GraphicsDevice.Clear(Color.CornflowerBlue);
spriteBatch.Begin();
foreach (TouchLocation touch in touchCollection)
{
spriteBatch.Draw(planetaTextura, planetaPosicion, Color.White);
spriteBatch.DrawString(spriteFont,
"ID: " + touch.Id.ToString() + " (" + (int)touch.Position.X +
"," + (int)touch.Position.Y + ")", textoPosicion, Color.White);
}
spriteBatch.End();
base.Draw(gameTime);
}
Ahora es momento de compilar y ejecutar tu aplicación. Si todo funciona correctamente, veras el emulador de Windows Phone con tu aplicación ejecutándose, y cuando hagas clic en la pantalla y arrastres el cursor, veras la imagen moviéndose junto a su mouse. A continuación una captura de la aplicación:
Sencillo, no crees? Unas cuantas líneas de código y puedes conseguir los puntos de contacto detectados en la pantalla táctil del Windows Phone. Si tu proyecto presenta errores de compilación, puedes descargarte el ejemplo:





