การโต้ตอบแบบสัมผัสในการพัฒนาเกมสําหรับ Windows Phone 7 ส่วนที่ 4 หยิก

โปรแกรม! - 4.หยิก, ยืดขนาดสไปรท์

เกี่ยวกับตัวอย่างนี้

สมาร์ทโฟนสมัยใหม่เช่นโปรแกรมดูรูปภาพช่วยให้คุณสามารถขยายและย่อขนาดภาพได้โดยใช้สองนิ้วเพื่อเพิ่มหรือลดระยะห่างระหว่างนิ้วของคุณ คุณสามารถทําเช่นเดียวกันกับอินเทอร์เน็ตเอ็กซ์พลอเรอร์บน Windows Phone 7 การกระทํานี้เรียกว่า "หยิก ยืด" ใน Windows Phone 7

นอกจากการบีบและยืดนิ้วแล้ว คุณยังสามารถใช้การกระทําต่างๆ เช่น "แตะ" เพื่อสัมผัส (แตะ) หนึ่งจุดบนหน้าจอสั้นๆ และ "ตวัดนิ้ว" เพื่อติดตามหน้าจอได้อย่างรวดเร็ว การกระทําเหล่านี้เรียกรวมกันว่าท่าทาง

ในโปรแกรมนี้ฉันต้องการขยายและลดสไปรท์ที่แสดงบนหน้าจอโดยการบีบและยืดนี้ นอกจากนี้จนถึงครั้งสุดท้ายฉันได้รับข้อมูลของหน้าจอสัมผัสโดยตรงและประมวลผล แต่คราวนี้ฉันต้องการจัดการการใช้งานระบบสัมผัสโดยใช้วิธีการที่ทุ่มเทให้กับท่าทางสัมผัส

เป้าหมายของโปรแกรมตัวอย่างนี้

หยิกและยืดการทํางานเพื่อขยายและหดสไปรท์

รูปที่ 1: ยืดตัวเพื่อขยายสไปรท์

โปรแกรม - ประกาศสาขา

ไม่มีคลาสใหม่ในการประกาศภาคสนาม แต่มี "พิกัดกึ่งกลางของพื้นผิว", "กําลังขยายของสไปรท์" และ "ระยะห่างระหว่างตําแหน่งสัมผัสสองตําแหน่งสุดท้ายเมื่อบีบ"

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

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

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

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

โปรแกรม -- การเปิดใช้งานท่าทางสัมผัส

คราวนี้เราจะทํากระบวนการท่าทางเท่านั้น แต่ในสถานะเริ่มต้นไม่สามารถใช้ท่าทางสัมผัสได้ เมื่อต้องการดึงข้อมูลท่าทางแต่ละรูปแบบ คุณต้องตั้งค่ารูปแบบลายเส้นที่จะใช้สําหรับคุณสมบัติ TouchPanel.EnabledGestures

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

การเปิดใช้งานรูปแบบลายเส้นทั้งหมดจะส่งผลต่อประสิทธิภาพการทํางาน ดังนั้นตรวจสอบให้แน่ใจว่าคุณตั้งค่าเฉพาะรูปแบบลายเส้นที่คุณต้องการใช้เท่านั้น ที่นี่ "GestureType.Pinch" ถูกตั้งค่าให้รับข้อมูลการดําเนินการบีบและ "GestureType.PinchComplete" ถูกตั้งค่าเพื่อระบุว่ากระบวนการบีบนิ้วเสร็จสมบูรณ์ ตําแหน่งการตั้งค่าถูกตั้งค่าในตัวสร้างเกม

โปรแกรม - กําลังโหลดพื้นผิว

การโหลดพื้นผิวเหมือนกับเมื่อก่อน แต่คราวนี้เรากําลังคํานวณ "พิกัดกึ่งกลางของพื้นผิว" นี่เป็นเพราะเมื่อปรับขนาดสไปรท์มันจะปรับขนาดด้วยพิกัดตรงกลางเป็นต้นกําเนิด

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

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

โปรแกรม - รับข้อมูลท่าทางสัมผัส

เราได้รับข้อมูลท่าทาง (หยิกที่นี่) ในวิธี Game.Update การประมวลผลท่าทางสัมผัสอยู่ในรูปแบบของการทําซ้ําท่าทางสัมผัสได้มากเท่าที่คุณเปิดใช้งาน โครงสร้าง "TouchCollection" ที่ใช้จนไม่ได้ใช้ครั้งสุดท้าย

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

ตรวจสอบสถานะของคุณสมบัติ TouchPanel.IsGestureAvailable ในขณะวนรอบสําหรับข้อมูลท่าทางสัมผัส และตรวจสอบว่ามีข้อมูลท่าทางสัมผัสต่อไปนี้หรือไม่: หากคุณมีข้อมูลท่าทางสัมผัสต่อไปนี้ให้ใช้วิธีการ "TouchPanel.ReadGesture" เพื่อรับข้อมูลท่าทางสัมผัส

"GestureSample.GestureType" จะเก็บข้อมูลเกี่ยวกับประเภทท่าทางสัมผัสที่รวมอยู่ดังนั้นให้แยกกระบวนการด้วยคําสั่งสวิตช์ตามนั้น ในตัวอย่างนี้ ตัวสร้างตั้งค่า enums "GestureType.Pinch" และ "GestureType.PinchComplete" เป็นคุณสมบัติ "TouchPanel.EnabledGestures" ดังนั้นจึงแตกแขนงตามลําดับ

โปรแกรม -- การจัดการท่าทางหยิก

การดูความคิดเห็นในโค้ดสําหรับสิ่งที่เรากําลังทําอยู่นั้นเร็วกว่า แต่เพื่อสรุปสิ่งที่เรากําลังทําอยู่เราจะพบความแตกต่างระหว่างระยะห่างระหว่างจุดสัมผัสสองจุดก่อนหน้านี้และระยะห่างระหว่างจุดสัมผัสระหว่างสองจุดในครั้งนี้และใช้ความแตกต่างนั้นเพื่อเพิ่มหรือลดค่ามาตราส่วน

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;

ตําแหน่งสัมผัสสองตําแหน่งสามารถรับได้ด้วย "GestureSample.Position" และ "GestureSample.Position2" ตามลําดับ คุณสามารถลบความแตกต่างระหว่างเวกเตอร์ที่ได้รับทั้งสองและค้นหาระยะห่างระหว่างจุดสองจุดโดยเรียกวิธี "Vector2.Length"

โดยวิธีการที่นี่เรากําหนดระยะทางก่อนหน้าเป็น 0 เมื่อไม่ได้ทําการบีบดังนั้นกระบวนการจะแตกแขนงเมื่อเริ่มการบีบและในลูปที่สองและต่อมา นี่เป็นเพราะครั้งแรกของการบีบไม่มีระยะทางก่อนหน้านี้ดังนั้นจึงไม่จําเป็นต้องปรับขนาด

นอกจากนี้คราวนี้เราใช้คุณสมบัติเพียงสองอย่างคือ "GestureSample.Position" และ "GestureSample.Position2" แต่ยังมีคุณสมบัติ "GestureSample.Delta" และ "GestureSample.Delta2" ซึ่งสามารถรับข้อมูลความแตกต่างจากตําแหน่งสัมผัสก่อนหน้าได้ มีคุณสมบัติสองอย่างในแต่ละคุณสมบัติ แต่สําหรับมัลติทัชและสําหรับท่าทางสัมผัสที่ใช้การสัมผัสเพียงครั้งเดียวคุณจะใช้คุณสมบัติที่ไม่มี "2"

โปรแกรม -- การจัดการเมื่อท่าทางหยิกเสร็จสมบูรณ์

เมื่อรูปแบบการบีบนิ้วเสร็จสมบูรณ์ (ปล่อยนิ้วใดนิ้วหนึ่งออกจากหน้าจอสัมผัส) ระยะห่างระหว่างจุดสองจุดก่อนหน้าจะถูกตั้งค่าเป็น 0 เดิมทีมันอาจจะดีกว่าถ้าใช้ธงแยกต่างหาก แต่เนื่องจากเป็นไปไม่ได้ที่จะสัมผัสตําแหน่งเดียวกันด้วยสองนิ้วระยะห่างของ 0 จึงถูกกําหนดให้ไม่บีบ (หากความละเอียดต่ําอาจเป็นไปได้ที่จะสัมผัสตําแหน่งเดียวกัน ... )

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

โปรแกรม - สไปรท์วาดภาพ

ฉันจะไม่ไปลงในรายละเอียดมากเกินไปที่นี่เพราะมันเป็นเพียงเกี่ยวกับการวาดสไปรท์ แต่ฉันวางสไปรท์ในใจกลางของหน้าจอและดึงค่ามาตราส่วนที่คํานวณได้โดยการขยายและหดตัวด้วยศูนย์กลางของสไปรท์เป็นแหล่งกําเนิด

// スプライトの描画準備
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();

สรุปตัวอย่างนี้

คราวนี้เราอธิบายกระบวนการที่ทุ่มเทให้กับท่าทางสัมผัส ในตัวอย่างเราสร้างกระบวนการหยิกเท่านั้น แต่ยังมี "การสะบัด" และ "ถือ" หากต้องการทราบว่ามีรูปแบบลายเส้นใดบ้าง โปรดดูวิธีใช้ XNA Game Studio 4.0 สําหรับ GestureType enums

คุณสามารถใช้สิ่งเดียวกันจากข้อมูลการสัมผัสที่ได้รับจากวิธีการ TouchPanel.GetState โดยไม่ต้องใช้วิธีการหรือโครงสร้างเฉพาะท่าทาง แต่ในกรณีนี้คุณจะต้องคํานวณความเร็วของการจัดการ ID แบบมัลติทัชเวลาสัมผัสการตวัด ฯลฯ ด้วยตัวคุณเอง ด้วยการใช้วิธีการเฉพาะท่าทางการใช้งานเหล่านี้สามารถทําให้ง่ายขึ้นและยังมีข้อได้เปรียบที่เกมและแอปพลิเคชันทั้งหมดสามารถดําเนินการในลักษณะเดียวกันได้

เมื่อคุณสร้างกระบวนการแผงสัมผัสด้วยตัวคุณเองหากคุณสามารถแทนที่กระบวนการที่คล้ายกันเป็นท่าทางสัมผัสเราขอแนะนําให้คุณใช้สิ่งนี้

โปรแกรม! - 5.หยิกเพื่อหมุนสไปรท์

เกี่ยวกับตัวอย่างนี้

การบีบมักจะหมายถึง "การบีบ" และ "การยืด" แต่กระบวนการหยิกของ XNA Game Studio 4.0 ไม่ได้จํากัดกระบวนการไว้เฉพาะสองจุดนั้น ดังนั้น คุณจึงสามารถดําเนินการที่วนรอบจุดสัมผัสหนึ่งจุดรอบจุดสัมผัสอื่นได้

ที่นี่ฉันต้องการหมุนสไปรท์ด้วยวิธีการใช้งานนั้น อย่างไรก็ตามไม่มีวิธีการหรือชั้นเรียนใหม่ ๆ ปรากฏขึ้นในครั้งนี้และขึ้นอยู่กับการปรับขนาดก่อนหน้านี้

ในคําอธิบายของโค้ดตัวอย่างในบทความนี้ ชิ้นส่วนเดียวกันกับตัวอย่างมาตราส่วนก่อนหน้านี้จะถูกละไว้

เป้าหมายของโปรแกรมตัวอย่างนี้

เมื่อหมุนจุดสัมผัสสองจุดสไปรท์จะหมุน การดําเนินการปรับขนาดก่อนหน้านี้ยังใช้งานได้

รูปที่ 2: หมุนสไปรท์โดยการหมุนจุดสัมผัส

โปรแกรม - ประกาศสาขา

"จํานวนการหมุนของสไปรท์" และ "มุมการหมุนล่าสุด" จะถูกเพิ่มเข้าไปในโปรแกรมมาตราส่วนก่อนหน้า มุมทั้งหมดคํานวณเป็นเรเดียน

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

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

โปรแกรม - กระบวนการหมุน

กระบวนการหมุนจะดําเนินการระหว่างท่าทางการบีบในลักษณะเดียวกับเมื่อปรับขนาด

ฉันจะไม่ลงรายละเอียดมากเกินไปเกี่ยวกับการคํานวณการหมุนเพราะเป็นเรื่องทางคณิตศาสตร์ แต่คุณสามารถรับเรเดียนมุมด้วยวิธี "Math.Atan2" โดยการค้นหาเวกเตอร์ความแตกต่างจากจุดสัมผัส 1 ถึงจุดสัมผัส 2 ค้นหาความแตกต่างระหว่างมุมที่ได้รับและมุมที่ได้มาก่อนหน้านี้และเพิ่มลงในมุมการหมุนของสไปรท์

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;
}

โปรแกรม - สไปรท์วาดภาพ

ไม่มีการเปลี่ยนแปลงที่สําคัญในการวาดสไปรท์ อาร์กิวเมนต์ที่ห้าของวิธี SpriteBacth.Draw ถูกตั้งค่าเป็นมุมการหมุนที่คํานวณได้

// スプライトの描画準備
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();

สรุปตัวอย่างนี้

คราวนี้ฉันพยายามหมุนสไปรท์โดยการดําเนินการหยิก เราไม่ได้ใช้ชั้นเรียนใหม่ ๆ โดยเฉพาะ แต่ฉันหวังว่าคุณจะเข้าใจว่าเราสามารถตระหนักถึงการประมวลผลที่ใช้ตามฟังก์ชั่นที่มีให้

ในที่สุด

เราเดินผ่านตัวอย่างและสาธิตการใช้งานการโต้ตอบแบบสัมผัสโดยใช้ Windows Phone 7 และ XNA Game Studio 4.0 เนื้อหาประกอบด้วยการได้มาแบบสัมผัสเดียวและมัลติทัชและการจัดการข้อมูลการสัมผัสและการประมวลผลโดยการจัดการท่าทางสัมผัสโดยใช้วิธีการเฉพาะท่าทางสัมผัส

คราวนี้ฉันได้มุ่งเน้นไปที่หน้าจอสัมผัส แต่ก็ยังมีฟังก์ชั่นบางอย่างที่ฉันยังไม่ได้แนะนํา นอกจากนี้ Windows Phone 7 ยังมีคุณลักษณะการป้อนข้อมูลใหม่ใน XNA Game Studio 4.0 เช่น การป้อนข้อมูลมาตรความเร่งและการป้อนข้อมูลด้วยเสียง มีคุณสมบัติที่น่าสนใจบางอย่างที่ฉันไม่สามารถแนะนําได้ในครั้งนี้ดังนั้นโปรดสนุกกับการสํารวจฟังก์ชั่นที่คุณต้องการใช้