Interacciones táctiles en el desarrollo de juegos para Windows Phone 7 Parte 4 Pellizco

¡Programación! - 4.Pellizcar, estirar a escala sprites

Acerca de este ejemplo

Los teléfonos inteligentes modernos, como los visores de imágenes, le permiten ampliar y reducir una imagen usando dos dedos para aumentar o reducir la distancia entre sus dedos. Puede hacer lo mismo con Internet Explorer en Windows Phone 7. Esta acción se denomina "pellizcar, estirar" en Windows Phone 7.

Además de pellizcar y estirar, también puede usar acciones como "tocar" para tocar brevemente (tocar) un punto de la pantalla y "mover" para rastrear rápidamente la pantalla. Estas acciones se conocen colectivamente como gestos.

En este programa, me gustaría ampliar y reducir el sprite que se muestra en la pantalla mediante esta operación de pellizcar y estirar. Además, hasta la última vez, obtuve directamente la información del panel táctil y la procesé, pero esta vez me gustaría manejar las operaciones táctiles utilizando métodos dedicados a los gestos.

Objetivos de este programa de muestra

Operaciones de pellizco y estiramiento para agrandar y reducir el sprite.

Figura 1: Estirar para agrandar el sprite

Programa - Declaración de campos

No hay una nueva clase en la declaración de campo, pero tiene "la coordenada central de la textura", "la ampliación del sprite" y "la distancia entre las dos últimas posiciones de contacto al pellizcar".

/// <summary>
/// テクスチャー
/// </summary>
Texture2D texture;

/// <summary>
/// テクスチャーの中心座標
/// </summary>
Vector2 textureCenterPos;

/// <summary>
/// スプライトのスケール
/// </summary>
float scale = 1;

/// <summary>
/// 前回の 2 点間の距離
/// </summary>
float previousLength = 0;

Programa - Habilitación de gestos

Esta vez, realizaremos un proceso de solo gestos, pero en el estado predeterminado, no se puede usar ninguno de los gestos. Para recuperar cada información de gestos, debe establecer el gesto que se utilizará para la propiedad TouchPanel.EnabledGestures.

// タッチパネルでピンチのジェスチャーを有効にする
TouchPanel.EnabledGestures = GestureType.Pinch | GestureType.PinchComplete;

Habilitar todos los gestos afecta al rendimiento, así que asegúrese de establecer solo los gestos que desea usar. Aquí, "GestureType.Pinch" se establece para obtener información de operación de pellizco y "GestureType.PinchComplete" se establece para indicar que el proceso de pellizco se ha completado. La ubicación de la configuración se establece en el constructor Game.

Programa - Carga de texturas

La carga de texturas es la misma que antes, pero esta vez estamos calculando la "coordenada central de la textura". Esto se debe a que al escalar un sprite, escala con la coordenada central como origen.

// テクスチャーをコンテンツパイプラインから読み込む
texture = Content.Load<Texture2D>("Texture");

// テクスチャーの中心座標を求める
textureCenterPos = new Vector2(texture.Width / 2, texture.Height / 2);

Programa - Obtener información de gestos

Obtenemos información de gestos (pellizcar aquí) en el método Game.Update. El procesamiento de gestos consiste en repetir tantos gestos como haya habilitado. La estructura "TouchCollection" que se utilizó hasta la última vez no se utiliza.

// 次のジェスチャー情報が取得できる場合は true を返し続けます
while (TouchPanel.IsGestureAvailable)
{
  // 次のジェスチャー情報を読み込みます
  GestureSample gs = TouchPanel.ReadGesture();
  
  switch (gs.GestureType)
  {
    case GestureType.Pinch:
      // ここにピンチ処理を記述します
      break;
    case GestureType.PinchComplete:
      // ここにピンチ完了処理を記述します
      break;
  }
}

Compruebe el estado de la propiedad TouchPanel.IsGestureAvailable en el bucle while para obtener información de gestos y compruebe si la siguiente información de gestos está presente: Si tiene la siguiente información de gestos, utilice el método "TouchPanel.ReadGesture" para obtener la información de gestos.

"GestureSample.GestureType" almacena información sobre qué tipo de gesto se incluye, así que bifurque el proceso con una instrucción switch basada en él. En este ejemplo, el constructor establece las enumeraciones "GestureType.Pinch" y "GestureType.PinchComplete" en la propiedad "TouchPanel.EnabledGestures", por lo que se ramifican respectivamente.

Programa - Manejo de gestos de pellizco

Es más rápido mirar los comentarios en el código para lo que estamos haciendo, pero para resumir lo que estamos haciendo, encontramos la diferencia entre la distancia entre los dos puntos de contacto anteriores y la distancia del punto de contacto entre los dos puntos esta vez, y usamos esa diferencia para aumentar o disminuir el valor de la escala.

case GestureType.Pinch:
  // 現在の２点間の距離を求めます
  float nowLength = (gs.Position - gs.Position2).Length();

  if (previousLength == 0)
  {
    // 前回の２点間の距離が 0 の場合は
    // 現在の２点間の距離を設定します
    // 初回はスケール計算を行いません
    previousLength = nowLength;
  }
  else
  {
    // 前回の２点間の距離との差分を計算します
    float diffLength = nowLength - previousLength;
    
    // ピンチ、ストレッチした距離に応じて
    // スケールを変化させています
    // 補正値は適当に設定します
    scale = MathHelper.Max(scale + diffLength / 150, 0);
    
    // 今回の距離を次の計算のために保持します
    previousLength = nowLength;
  }
  break;

Las dos posiciones táctiles se pueden obtener con "GestureSample.Position" y "GestureSample.Position2", respectivamente. Puede restar la diferencia entre los dos vectores obtenidos y encontrar la distancia entre los dos puntos llamando al método "Vector2.Length".

Por cierto, aquí definimos la distancia anterior como 0 cuando no se realiza el pellizco, por lo que el proceso se ramifica cuando se inicia el pellizco y en el segundo y posteriores bucles. Esto se debe a que la primera vez que pellizca, no hay distancia previa, por lo que no hay necesidad de escalar.

Además, esta vez usamos solo dos propiedades, "GestureSample.Position" y "GestureSample.Position2", pero también hay propiedades "GestureSample.Delta" y "GestureSample.Delta2", que pueden obtener la información de diferencia de la posición táctil anterior. Hay dos propiedades cada una, pero esto es para multitáctil, y para gestos que usan solo un toque, usará propiedades sin un "2".

Programa - Manejo cuando se completa el gesto de pellizcar

Cuando se completa el gesto de pellizcar (soltando cualquiera de los dedos del panel táctil), la distancia entre los dos puntos anteriores se establece en 0. Originalmente, puede ser mejor usar una bandera separada, pero como es físicamente imposible tocar la misma posición con dos dedos, la distancia de 0 se define como no pellizcar. (Si la resolución es baja, puede ser posible tocar la misma posición ...)

case GestureType.PinchComplete:
  // ピンチが終了した場合は保持している距離を 0 に戻して
  // 完了したことにします
  previousLength = 0;
  break;

Programa - Drawing Sprites

No entraré en demasiados detalles aquí porque solo se trata de dibujar el sprite, pero coloqué el sprite en el centro de la pantalla y dibujé el valor de escala calculado ampliándolo y reduciéndolo con el centro del sprite como origen.

// スプライトの描画準備
spriteBatch.Begin();

// スプライトを描画する
spriteBatch.Draw(texture,
                 new Vector2(graphics.PreferredBackBufferWidth / 2,
                             graphics.PreferredBackBufferHeight / 2),
                 null,
                 Color.White,
                 0.0f,
                 textureCenterPos,
                 scale,
                 SpriteEffects.None,
                 0.0f);

// スプライトの一括描画
spriteBatch.End();

Resumen de este ejemplo

En esta ocasión, explicamos el proceso dedicado a los gestos. En el ejemplo, solo creamos un proceso de pellizco, pero también hay "movimientos" y "retenciones". Para averiguar qué gestos están disponibles, consulte la Ayuda de XNA Game Studio 4.0 para las enumeraciones GestureType.

Puede implementar lo mismo a partir de la información táctil obtenida del método TouchPanel.GetState sin usar métodos o estructuras específicos de gestos, pero en ese caso, deberá calcular la velocidad de administración de ID multitáctil, el tiempo táctil, los movimientos, etc. usted mismo. Mediante el uso de métodos específicos de gestos, estas implementaciones se pueden simplificar, y también existe la ventaja de que todos los juegos y aplicaciones se pueden operar de la misma manera.

Cuando cree usted mismo un proceso de panel táctil, si puede sustituir un proceso similar como un gesto, le recomendamos que lo utilice.

¡Programación! - 5.Pellizcar para rotar sprites

Acerca de este ejemplo

El pellizco generalmente se refiere a "pellizcar" y "estirar", pero el proceso de pellizco de XNA Game Studio 4.0 no limita específicamente el proceso a esos dos, por lo que también puede realizar operaciones que rodeen un punto de contacto alrededor de otro punto de contacto.

Aquí, me gustaría rotar el sprite con ese método de operación. Por cierto, esta vez no aparecieron nuevos métodos o clases, y se basa en la escala anterior.

En la descripción del código de ejemplo de este artículo, se omiten las mismas partes que el ejemplo de escala anterior.

Objetivos de este programa de muestra

Al rotar los dos puntos de contacto, el sprite gira. La operación de escalado anterior también funciona.

Figura 2: Rotación del sprite girando el punto de contacto

Programa - Declaración de campos

"Cantidad de rotación de Sprite" y "Last rotation angle" se agregan al programa de escalado anterior. Todos los ángulos se calculan en radianes.

/// <summary>
/// スプライトの回転量(radian)
/// </summary>
float rotate;

/// <summary>
/// 前回の回転角度(radian)
/// </summary>
float previousAngle;

Programa - Proceso de rotación

El proceso de rotación se realiza durante los gestos de pellizco de la misma manera que cuando se escala.

No entraré en demasiados detalles sobre el cálculo de la rotación porque es una historia matemática, pero puedes obtener el ángulo radiante con el método "Math.Atan2" encontrando el vector de diferencia del punto de contacto 1 al punto de contacto 2. Encuentra la diferencia entre el ángulo obtenido y el ángulo previamente adquirido y agrégalo al ángulo de rotación del sprite.

switch (gs.GestureType)
{
  case GestureType.Pinch:
    //===== スケール計算 =====//
    // 前回と同じなので省略

    //===== 回転計算 =====//

    // ２点間のベクトルを求めます
    Vector2 pinchVector = gs.Position2 - gs.Position;

    // Atan2 で角度を求めます
    float nowAngle = (float)Math.Atan2(pinchVector.Y,
                                       pinchVector.X);

    if (previousAngle == 0)
    {
      // 前回の角度が 0 の場合は
      // 現在の角度を設定します
      // 初回は回転計算を行いません
      previousAngle = nowAngle;
    }
    else
    {
      // 前回の角度との差分をスプライトの回転角度に加算します
      rotate += nowAngle - previousAngle;

      // 今回の距離を次の計算のために保持します
      previousAngle = nowAngle;
    }
    break;
  case GestureType.PinchComplete:
    // ピンチが終了した場合は保持している距離、角度を 0 に戻して
    // 完了したことにします
    previousLength = 0;
    previousAngle = 0;
    break;
}

Programa - Drawing Sprites

No hay cambios importantes en los sprites de dibujo. El quinto argumento del método SpriteBacth.Draw se establece en el ángulo de rotación calculado.

// スプライトの描画準備
spriteBatch.Begin();

// スプライトを描画する
spriteBatch.Draw(texture,
                 new Vector2(graphics.PreferredBackBufferWidth / 2,
                             graphics.PreferredBackBufferHeight / 2),
                 null,
                 Color.White,
                 rotate,
                 textureCenterPos,
                 scale,
                 SpriteEffects.None,
                 0.0f);

// スプライトの一括描画
spriteBatch.End();

Resumen de este ejemplo

Esta vez, traté de rotar el sprite mediante la operación de pellizco. No utilizamos ninguna clase nueva en particular, pero espero que entienda que podemos realizar un procesamiento aplicado basado en las funciones proporcionadas.

Finalmente

Recorrimos ejemplos y demostramos la implementación de interacciones táctiles con Windows Phone 7 y XNA Game Studio 4.0. El contenido incluía la adquisición táctil de un solo toque y multitáctil y la manipulación de la información táctil, y el procesamiento mediante la manipulación de gestos táctiles utilizando métodos específicos de gestos.

Esta vez, me he centrado en el panel táctil, pero todavía hay algunas funciones que aún no he introducido. Windows Phone 7 también incluye nuevas características de entrada en XNA Game Studio 4.0, como la entrada de acelerómetro y la entrada de voz. Hay algunas características interesantes que no pude presentar esta vez, así que disfrute explorando las funciones que desea usar.