Windows Phone 7 için oyun geliştirmede dokunma etkileşimleri, Bölüm 3 Sürükleme işlemleri

Programlama! - 3.Kartı dokunmaya taşımayı deneyin

Bu örnek hakkında

Bu sefer ekrana dört kart yerleştiren ve kartları dokunuldukları yere yerleştiren ve sürükleyen bir progran oluşturmak istiyorum. Bu, programın ilk olarak Fare sınıfıyla bir hareketli grafik sürükleyen çoklu dokunmalı bir sürümüdür. Şimdiye kadar birçok açıklama yapıldı, bu yüzden bu sefer esas olarak program hakkında açıklama yapmak istiyorum.

Bu örnek programın hedefleri

Multi-touch ile dokunduğunuzda aynı anda birden fazla kartı sürükleyin.

Şekil 1: Çoklu dokunmatik sürükleme işlemi

Program - Kart Dersleri

Multi-touch söz konusu olduğunda, birden fazla nesneye sahip olmak gerekli hale gelir, bu yüzden burada "kart" olarak taşınacak hareketli grafikle bir "Card" sınıfı oluşturmak istiyorum.

/// <summary>
/// ドラッグできるカード
/// </summary>
public class Card
{
  /// <summary>
  /// タッチ ID
  /// </summary>
  public int Id { get; set; }

  /// <summary>
  /// カードの位置
  /// </summary>
  public Vector2 Position { get; set; }

  /// <summary>
  /// カードの色
  /// </summary>
  public Color Color { get; set; }
}

Kodu çok karmaşık hale getirmemek için, kart sınıfının üç özelliği vardır: touch ID, position ve color. Ayrıntılara girilecek belirli bir öğe yoktur, ancak hangi temas noktasının bağlantılı olduğunu kontrol etmek için "Touch ID" kullanılır.

Program - Alanların Bildirilmesi

Kart bilgilerini tutmak için bir dizi Kart sınıfına sahip olmaktan başka yeni bir şey yok. Bu kez, önceki örneklerin bir uygulaması gibi. Her biri farklı renkte dört kart yaptım, böylece çizim yaparken farkı görebilirsiniz.

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

/// <summary>
/// カードの一覧(4 枚分)
/// </summary>
Card[] cards = new Card[]
{
  new Card { Color = Color.White, },
  new Card { Color = Color.Yellow, },
  new Card { Color = Color.Fuchsia, },
  new Card { Color = Color.Aqua, },
};

Programatik - Dokunmatik Bilgi Alın

Game.Update yönteminin içinde. Bu alan formüle edilmiştir, bu nedenle özellikle yeni bir şey yoktur.

// タッチパネルの機能情報を取得
TouchPanelCapabilities capabilities = TouchPanel.GetCapabilities();

// タッチパネルが使用可能であるかチェック
if (capabilities.IsConnected)
{
  // 現在のタッチパネルの入力情報を取得
  TouchCollection touches = TouchPanel.GetState();

  //   :
  // ここに処理
  //   :
}

Program - Dokunulduğunda dokunmatik kimliği karta bağlama

Örnek programda, sipariş işleme maliyeti açısından tersine çevrilir, ancak buradan açıklarsanız anlamak daha kolaydır, bu yüzden önce bunu açıklayacağım.

İlk olarak, her bir bilgi parçasını almak için edinilen TouchCollection foreach arasında döngü yapın.

/// タッチ情報の処理を行う
foreach (TouchLocation tl in touches)
{
  // タッチ状態を調べる
  switch (tl.State)
  {
    case TouchLocationState.Pressed:
      // タッチされた瞬間は空いているカードを検索して紐づける
      Card card = cards.Where(c => c.Id == 0).FirstOrDefault();
      if (card != null)
      {
          card.Id = tl.Id;
          card.Position = tl.Position;
      }
      break;
  }
}

"TouchLocationState.Pressed"in dokunduğunuz an olduğunu belirtmek için "TouchLocation.State" özelliğini işaretleyin.

Bu örnekte, kartın kimliği "0" ise, kullanılmayan, yani "kartlar" olarak tanımlanır. Nerede(c => c.Id == 0). FirstOrDefault()" yazarak kart listesinden ID 0 olan bir kartı arayın ve bulunursa bu kartı geri alın. Bulunamazsa, null döndürülür. Burada, kodu basitleştirmek için uzantı yöntemleri LINQ tarafından çağrılır, ancak işleme maliyetleri konusunda endişeleriniz varsa, bunları bir for döngüsü ile tek tek arayabilirsiniz.

Kartı bulduğunuzda, dokunmatik kimliği ve kart üzerindeki dokunma konumunu ayarlayın.

Program - dokunma sırasında ve serbest bırakıldıklarında kartları kullanma

Kartı dokunurken her zaman sürükleme durumunda tutun ve serbest bıraktığınızda temas noktasından karta olan bağlantısı kesilir.

// 各カードの情報を調べる
foreach (Card card in cards)
{
  if (card.Id != 0)
  {
    // 紐づくタッチ情報がまだ存在するか ID で検索
    TouchLocation tl;
    if (touches.FindById(card.Id, out tl) == true)
    {
      // まだタッチされている場合は位置情報取得
      card.Position = tl.Position;
    }
    else
    {
      // すでにタッチ情報がなかったら紐付を外す
      card.Id = 0;
    }
  }
}

Kart listesini foreach ile döngüye alın ve her kartı işleyin. Kimlik 0'dan başka bir şeyse, temas noktasına bağlanır ve işlem devam eder.

TouchCollection yapısı, varsa belirtilen kimlik için dokunma bilgilerini almanıza olanak tanıyan bir "FindById" yöntemi sağlar. Card.Id özelliği 0 değilse, bazı temas noktalarıyla ilişkili olduğunu varsayabiliriz, bu nedenle dokunma bilgilerini FindById yöntemiyle almaya çalışacağız.

FindById yöntemi true değerini döndürürse, hala dokunma durumundadır, bu nedenle TouchLocation.Position özelliğinden dokunma konumunu alın ve kart sınıfında ayarlayın. FindById yöntemi false değerini döndürürse, dokunma serbest bırakılır, bu nedenle Card.ID 0 olarak ayarlayın ve kimse dokunmadığı şekilde ayarlayın.

Program - Çizim Kartları

Çizim için gereken parametreler zaten Card sınıfına ayarlanmış olmalıdır, bu nedenle yeni bir şey yoktur.

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

// 各カードを描画
foreach (Card card in cards)
{
  spriteBatch.Draw(texture, card.Position, card.Color);
}

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

Bu örneğin özeti

Bu kez, oyundaki nesneleri gerçekten hareket ettirmek için çoklu dokunma kullanan bir görüntü programı oluşturmaya çalıştım. Ayrıca, dokunma bilgilerinin kimliği kullanılarak aynı anda birden fazla kart sürüklendiğinde, diğer parmak kaldırılsa veya tekrar dokunulsa bile kartların hareketinin tutarlı olduğunu gözlemledik.

Bu örnek sadece bir örnektir ve sadece basit bir işlem gerçekleştirilir. Bununla birlikte, dokunmatik panel tarafından çoklu dokunma işleminin temel kısmı gerçek oyun programlaması ile kapsanmalıdır, bu nedenle lütfen buna dayanarak oyununuza uyan çoklu dokunmatik işleme uygulayın.