Interakcije na dotik pri razvoju igre za Windows Phone 7 Part 4 Pinch
Programiranje! - 4.Ščipni, raztegni na lestvico sprites
O tem vzorcu
Sodobni pametni telefoni, kot so gledalci slik, omogočajo, da povečate in skrčite sliko z dvema prstoma, da povečate ali skrčite razdaljo med prsti. Enako lahko storite z Internet Explorerjem v telefonu Windows Phone 7. To dejanje se imenuje "ščipni, raztegni" v telefonu Windows Phone 7.
Poleg ščipanja in raztezanja lahko uporabite tudi dejanja, kot so »tapnite« za kratek dotik (tapnite) eno točko na zaslonu in »flick« za hitro sledenje zaslonu. Ti ukrepi se skupaj imenujejo geste.
V tem programu bi rad povečati in zmanjšati sprite prikazan na zaslonu s tem ščip in raztezanje operacije. Prav tako sem do zadnjega časa neposredno pridobil informacije na dotik plošči in jo obdelal, tokrat pa bi rad ravnal z operacijami na dotik z metodami, namenjenim gestam.
Cilji tega vzorčne programa
Ščipni in raztegni operacije za povečanje in krčenje sprite.
Slika 1: Raztezanje za povečanje sprite
Program – deklariranje polj
V deklaraciji polja ni novega razreda, ima pa »centersko koordinato tekstura«, »povečavo sprita« in »razdaljo med zadnjima dvema dotikoma položaja pri ščipanju«.
<summary>
テクスチャー
</summary>
Texture2D texture;
<summary>
テクスチャーの中心座標
</summary>
Vector2 textureCenterPos;
<summary>
スプライトのスケール
</summary>
float scale = 1;
<summary>
前回の 2 点間の距離
</summary>
float previousLength = 0;
Program – Omogočanje gest
Tokrat bomo izvedli proces samo z gestami, vendar v privzetem stanju ni mogoče uporabiti nobene poteze. Če želite pridobiti vse informacije o potezi, morate nastaviti potezo, ki jo želite uporabiti za lastnost TouchPanel.EnabledGestures.
// タッチパネルでピンチのジェスチャーを有効にする
TouchPanel.EnabledGestures = GestureType.Pinch | GestureType.PinchComplete;
Omogočanje vseh potez vpliva na učinkovitost delovanja, zato poskrbite, da nastavite le kretnje, ki jih želite uporabiti. Tukaj je »GestureType.Pinch« nastavljeno tako, da pridobi informacije o operaciji ščipanja, »GestureType.PinchComplete« pa je nastavljena tako, da označuje, da je postopek ščipanja končan. Nastavitev je nastavljena v konstruktorju igre.
Program – Nalaganje teksture
Nalaganje teksture je enako kot prej, tokrat pa računamo »centerno koordinato teksture«. To je zato, ker pri skaliranje sprite, tehta s središčem koordinato kot izvor.
// テクスチャーをコンテンツパイプラインから読み込む
texture = Content.Load<Texture2D>("Texture");
// テクスチャーの中心座標を求める
textureCenterPos = new Vector2(texture.Width / 2, texture.Height / 2);
Program - Dobi informacije o potezah
Informacije o gestah (ščipni tukaj) smo dobili v načinu Game.Update. Obdelava potez je v obliki ponavljanja toliko potez, kot ste jih omogočili. Struktura "TouchCollection", ki je bila uporabljena do zadnjega časa, se ne uporablja.
// 次のジェスチャー情報が取得できる場合は true を返し続けます
while (TouchPanel.IsGestureAvailable)
{
// 次のジェスチャー情報を読み込みます
GestureSample gs = TouchPanel.ReadGesture();
switch (gs.GestureType)
{
case GestureType.Pinch:
// ここにピンチ処理を記述します
break;
case GestureType.PinchComplete:
// ここにピンチ完了処理を記述します
break;
}
}
Preverite stanje lastnosti TouchPanel.IsGestureAvailable v zanki za informacije o potezah in preverite, ali so prisotni naslednji podatki o potezi: Če imate naslednje informacije o potezi, uporabite metodo »TouchPanel.ReadGesture« za informacije o potezi.
»GestureSample.GestureType« shranjuje informacije o tem, katera vrsta geste je vključena, zato postopek razvejajte s stikalom, ki temelji na njem. V tem vzorcu konstruktor nastavi lastnosti »GestureType.Pinch« in »GestureType.PinchComplete« na lastnost »TouchPanel.EnabledGestures«.
Program – ravnanje z potezami ščipanja
Hitreje je pogledati komentarje v kodi za to, kar počnemo, vendar za povzetek tega, kar počnemo, najdemo razliko med razdaljo med prejšnjima dvema dotikoma in razdaljo dotika med obema točkama tokrat in s to razliko povečamo ali zmanjšamo vrednost tehtnice.
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;
Položaja na dotik lahko dobite z »GestureSample.Position« oziroma »GestureSample.Position2«. Razliko med dobljenima vektorjema lahko odštejete in poiščete razdaljo med točkama tako, da imenujete metodo "Vektor2.Dolžina".
Mimogrede, tukaj definiramo prejšnjo razdaljo kot 0, ko se ščipnje ne izvaja, zato je postopek razvejan ob začetku ščipnja in v drugi in naslednji zaoki. To je zato, ker prvič ščipnje, ni prejšnje razdalje, tako da ni potrebe po tehtanju.
Prav tako tokrat uporabljamo le dve lastnosti, "GestureSample.Position" in "GestureSample.Position2", vendar obstajajo tudi "GestureSample.Delta" in "GestureSample.Delta2" lastnosti, ki lahko dobijo informacije o razliki iz prejšnjega položaja na dotik. Obstajata dve lastnosti, vendar je to za več dotikov, in za poteze, ki uporabljajo samo en dotik, boste uporabili lastnosti brez "2".
Program – ravnanje, ko se poteza stisne dokonča
Ko je poteza ščipanja končana (izpuščanje prsta s plošče na dotik), je razdalja med prejšnjima dvema točkama nastavljena nazaj na 0. Prvotno je morda bolje uporabiti ločeno zastavo, ker pa se je fizično nemogoče dotikati istega položaja z dvema prstoma, je razdalja 0 opredeljena kot ne ščipanje. (Če je ločljivost nizka, se lahko dotaknete istega položaja ...)
case GestureType.PinchComplete:
// ピンチが終了した場合は保持している距離を 0 に戻して
// 完了したことにします
previousLength = 0;
break;
Program - Risba sprites
Tukaj ne bom šel preveč podrobno, ker gre samo za risanje sprita, sem pa sprit v sredino zaslona narisal in narisal izračunano vrednost tehtnice s povečanjem in krčenjem s središčem sprita kot izvorom.
// スプライトの描画準備
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();
Povzetek tega vzorca
Tokrat smo razložili postopek, posvečen gestam. V vzorcu ustvarimo le ščipni proces, obstajajo pa tudi "flicks" in "holds". Če želite izvedeti, katere poteze so na voljo, si oglejte XNA Game Studio 4.0 Help for GestureType enums.
Enako lahko izvedete iz podatkov o dotiku, pridobljenih iz metode TouchPanel.GetState brez uporabe metod ali struktur, specifičnih za poteze, vendar boste morali v tem primeru sami izračunati hitrost upravljanja ID-jev z več dotiki, časa dotika, flikov itd. Z uporabo metod, specifičnih za geste, je te implementacije mogoče poenostaviti, poleg tega pa obstaja tudi prednost, da se lahko vse igre in aplikacije upravljajo na enak način.
Ko sami ustvarite proces na dotik, če lahko zamenjate podoben postopek kot potezo, vam priporočamo, da to uporabite.
Programiranje! - 5.Ščipni za vrtenje šprica
O tem vzorcu
Ščipanje se običajno nanaša na "ščipanje" in "raztezanje", vendar XNA Game Studio 4.0's ščip postopek ne omejuje posebej na ta dva, tako da lahko izvajate tudi operacije, ki obkrožijo eno dotikno točko okoli druge dotikne točke.
Tukaj bi rad vrteti sprite s to metodo operacije. Mimogrede, tokrat se niso pojavile nove metode ali razredi, ki temeljijo na prejšnjem razvrščaju.
V opisu vzorčne kode v tem članku se izostavijo enaki deli kot prejšnji vzorec.
Cilji tega vzorčne programa
Z vrtenju dveh dotiknih točk se sprit zavrti. Deluje tudi prejšnja operacija za razmnožje.
Slika 2: Vrtenje sprita z obračanjem dotikne točke
Program – deklariranje polj
"Količina vrtenja sprita" in "Zadnji kot vrtenja" sta dodana v prejšnji program za razsežnost. Vsi koti so izračunani v radianih.
<summary>
スプライトの回転量(radian)
</summary>
float rotate;
<summary>
前回の回転角度(radian)
</summary>
float previousAngle;
Program – postopek vrtenja
Postopek vrtenja poteka med potezami ščipa na enak način kot pri razmahu.
Ne bom šel v preveč podrobnosti o izračunu vrtenja, ker je matematično zgodbo, vendar lahko dobiš kot radian z metodo "Math.Atan2" z iskanjem vektor razlike od touchpoint 1 do touchpoint 2. Poiščite razliko med pridobljenim kotom in prej pridobljenim kotom in ga dodajte kotu vrtenja sprita.
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;
}
Program - Risba sprites
Ni večjih sprememb pri risanje sprites. Peti argument metode SpriteBacth.Draw je nastavljen na izračunani kot vrtenja.
// スプライトの描画準備
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();
Povzetek tega vzorca
Tokrat sem poskušal zavrteti sprit z operacijo ščipanja. Ne uporabljamo novih razredov, vendar upam, da razumete, da lahko realiziramo uporabljeno obdelavo na podlagi zagotovljenih funkcij.
Končno
Sprehodila sva se po vzorcih in dokazala izvajanje interakcij na dotik s sistemoma Windows Phone 7 in XNA Game Studio 4.0. Vsebina je vključevala pridobivanje in manipulacijo z informacijami o dotiku z enim dotikom in več dotiki ter obdelavo z manipulacijo potez na dotik z metodami, specifičnimi za poteze.
Tokrat sem se osredotočil na ploščo na dotik, vendar še vedno obstajajo nekatere funkcije, ki jih še nisem uvedel. Windows Phone 7 vključuje tudi nove vhodne funkcije v XNA Game Studio 4.0, kot sta vnos merilnika pomika in glasovni vnos. Obstaja nekaj zanimivih funkcij, ki jih tokrat nisem mogel uvesti, zato uživajte v raziskovanju funkcij, ki jih želite uporabiti.