Puutesisestus Windows Phone 7 mänguarenduses, 4. osa näputäis

Programmeerimine! - 4.Näputäis, venitage skaala spraitidesse

Selle proovi kohta

Kaasaegsed nutitelefonid, näiteks pildivaatlejad, võimaldavad teil pilti suurendada ja kahandada, kasutades sõrmede vahelise kauguse suurendamiseks või vähendamiseks kahte sõrme. Sama saate teha ka Windows Phone 7 Internet Exploreriga. Seda toimingut nimetatakse Windows Phone 7-s "näputäis, venitage".

Lisaks pigistamisele ja venitamisele saate kasutada ka selliseid toiminguid nagu "koputamine", et lühidalt puudutada (puudutada) ühte punkti ekraanil ja "libistada", et ekraani kiiresti jälgida. Neid tegevusi nimetatakse ühiselt žestideks.

Selles programmis tahaksin selle näpuliigutuse ja venitustoiminguga suurendada ja vähendada ekraanil kuvatavat spraidit. Samuti hankisin kuni viimase korrani otse puutepaneeli teabe ja töötlesin seda, kuid seekord tahaksin puutetoiminguid käsitleda žestidele pühendatud meetodite abil.

Selle näidisprogrammi eesmärgid

Näputäis ja venitage toiminguid spraidi suurendamiseks ja kahandamiseks.

Joonis 1: Venitus spraidi suurendamiseks

Programm - väljade deklareerimine

Väljadeklaratsioonis pole uut klassi, kuid sellel on "tekstuuri keskkoordinaat", "spraidi suurendus" ja "kahe viimase puuteasendi vaheline kaugus pigistamisel".

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

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

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

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

Programm – žestide lubamine

Seekord teostame ainult žestidega protsessi, kuid vaikeolekus ei saa ühtegi žesti kasutada. Iga žestiteabe toomiseks peate määrama žesti, mida kasutatakse atribuudi TouchPanel.EnabledGestures jaoks.

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

Kõigi žestide lubamine mõjutab jõudlust, seega veenduge, et määraksite ainult need žestid, mida soovite kasutada. Siin on "GestureType.Pinch" seatud näputoimingu teabe saamiseks ja "GestureType.PinchComplete" on seatud näitama, et näputäisprotsess on lõppenud. Seadistuse asukoht määratakse mängu konstruktoris.

Programm - tekstuuride laadimine

Tekstuuride laadimine on sama, mis varem, kuid seekord arvutame "tekstuuri keskkoordinaadistiku". Seda seetõttu, et spraidi skaleerimisel skaleerib see lähtekohaks keskkoordinaadistiku.

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

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

Programm – žestiteabe hankimine

Žestiteavet (näputäis siin) saame Game.Update meetodis. Žestide töötlemine toimub nii paljude žestide kordamise vormis, kui olete lubanud. "TouchCollection" struktuuri, mida kasutati kuni eelmise korrani, ei kasutata.

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

Kontrollige žestiteabe saamiseks while-silmuses atribuudi TouchPanel.IsGestureAvailable olekut ja kontrollige, kas järgmine žestiteave on olemas. Kui teil on järgmine žestiteave, kasutage žestiteabe hankimiseks meetodit "TouchPanel.ReadGesture".

"GestureSample.GestureType" salvestab teabe selle kohta, milline žestitüüp on kaasatud, seega harutage protsess sellel põhineva lüliti väljavõttega. Selles proovis määrab konstruktor "GestureType.Pinch" ja "GestureType.PinchComplete" numbrid atribuudile "TouchPanel.EnabledGestures", nii et need on vastavalt hargnenud.

Programm - näpuliigutuse käsitsemine

Kiirem on vaadata koodis olevaid kommentaare selle kohta, mida me teeme, kuid selleks, et kokku võtta, mida me teeme, leiame erinevuse kahe eelmise puutepunkti ja puutepunkti kauguse vahel kahe punkti vahel seekord ning kasutame seda erinevust skaala väärtuse suurendamiseks või vähendamiseks.

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;

Kaks puuteasendit saab vastavalt "GestureSample.Position" ja "GestureSample.Position2" abil. Saate lahutada kahe saadud vektori ja leida kahe punkti vahelise kauguse, helistades meetodile "Vector2.Length".

Muide, siin määratleme eelmise vahemaa 0-na, kui pigistamist ei teostata, nii et protsess hargneb pigistamise alustamisel ning teises ja järgnevas silmuses. Seda seetõttu, et esimesel pigistamise korral pole varasemat kaugust, seega pole vaja skaleerida.

Samuti kasutame seekord ainult kahte omadust, "GestureSample.Position" ja "GestureSample.Position2", kuid on ka omadusi "GestureSample.Delta" ja "GestureSample.Delta2", mis võivad saada erinevuse teavet eelmisest puuteasendist. Mõlemal on kaks omadust, kuid see on mõeldud mitme puudutusega ja žestide puhul, mis kasutavad ainult ühte puudutust, kasutate omadusi ilma "2".

Programm – käsitsemine näpuliigutuse lõpetamisel

Kui näpuliigutuse tegemine on lõpule viidud (vabastades kummagi sõrme puutepaneelilt), seatakse kahe eelmise punkti vaheline kaugus tagasi 0-le. Algselt võib olla parem kasutada eraldi lippu, kuid kuna kahe sõrmega on füüsiliselt võimatu sama asendit puudutada, on 0 kaugus määratletud kui mitte pigistamine. (Kui eraldusvõime on madal, võib olla võimalik puudutada sama asendit ...)

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

Programm - Spraitide joonistamine

Ma ei lasku siin liiga palju üksikasjadesse, sest see on lihtsalt spraidi joonistamine, kuid asetasin spraidi ekraani keskele ja joonistasin arvutatud skaala väärtuse, suurendades ja kahandades seda spraidi keskpunktiga kui päritolu.

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

Valimi kokkuvõte

Seekord selgitasime žestidele pühendatud protsessi. Proovis loome ainult näputäisprotsessi, kuid on ka "flicks" ja "holds". Et teada saada, millised žestid on saadaval, vaadake XNA Game Studio 4.0 abi GestureType enumsile.

Sama asja saate rakendada puutetundlikust teabest, mis on saadud TouchPanel.GetState'i meetodist ilma žestispetsiifilisi meetodeid või struktuure kasutamata, kuid sel juhul peate ise arvutama mitmikpuute ID haldamise kiiruse, puuteaja, libisemised jne. Žestispetsiifiliste meetodite abil saab neid rakendusi lihtsustada ning eeliseks on ka see, et kõiki mänge ja rakendusi saab kasutada samal viisil.

Kui loote puutepaneeli protsessi ise, kui saate sarnase protsessi žestina asendada, soovitame teil seda kasutada.

Programmeerimine! - 5.Näputäis spraidite pööramiseks

Selle proovi kohta

Pigistamine viitab tavaliselt "pigistamisele" ja "venitamisele", kuid XNA Game Studio 4.0 näputäisprotsess ei piira protsessi konkreetselt nende kahega, nii et saate teha ka toiminguid, mis tiirlevad ühe puutepunkti ümber teise puutepunkti.

Siinkohal tahaksin spraiti selle operatsioonimeetodiga pöörata. Muide, seekord ei ilmunud uusi meetodeid ega klasse ning see põhineb eelmisel skaleerimisel.

Selle artikli näidiskoodi kirjelduses jäetakse välja samad osad, mis eelmisel skaleerimisproovil.

Selle näidisprogrammi eesmärgid

Kahe puutepunkti pööramisel spraid pöörleb. Toimib ka eelmine skaleerimisoperatsioon.

Joonis 2: Spraidi pööramine puutepunkti keerates

Programm - väljade deklareerimine

"Spraidi pöörlemishulk" ja "Viimane pöördenurk" lisatakse eelmisele skaleerimisprogrammile. Kõik nurgad arvutatakse radiaanides.

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

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

Programm - pöörlemisprotsess

Pöörlemisprotsess viiakse läbi näpuliigutuste ajal samamoodi nagu mastaapimisel.

Ma ei lasku pöörlemise arvutamisse liiga üksikasjalikult, sest see on matemaatika lugu, kuid nurga radiaani saate "Math.Atan2" meetodiga, leides erinevusvektori puutepunktist 1 puutepunktini 2. Leidke erinevus saadud nurga ja varem omandatud nurga vahel ning lisage see spraidi pöördenurka.

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

Programm - Spraitide joonistamine

Spraitide joonistamisel suuri muudatusi ei ole. SpriteBacth.Draw meetodi viies argument on seatud arvutatud pöördenurgale.

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

Valimi kokkuvõte

Seekord proovisin spraidit näpuotsaga pöörata. Me ei kasuta eriti uusi klasse, kuid loodan, et mõistate, et saame rakendatud töötlemise realiseerida pakutavate funktsioonide põhjal.

Viimaks ometi

Käisime näidised läbi ja demonstreerisime puuteinteraktsioonide rakendamist Windows Phone 7 ja XNA Game Studio 4.0 abil. Sisu hõlmas ühe ja mitme puudutusega puudutuse omandamist ja puutetundliku teabe manipuleerimist ning töötlemist puutežestidega manipuleerimise teel, kasutades žestispetsiifilisi meetodeid.

Seekord olen keskendunud puutepaneelile, kuid on veel mõned funktsioonid, mida ma pole veel tutvustanud. Windows Phone 7 sisaldab XNA Game Studio 4.0 uusi sisestusfunktsioone, nagu kiirendusmõõturi sisend ja häälsisend. On mõned huvitavad funktsioonid, mida ma ei saanud seekord tutvustada, nii et palun nautige nende funktsioonide uurimist, mida soovite kasutada.