Dotykové interakce při vývoji her pro Windows Phone 7 Část 4 Stažení prstů
Programování! - 4.Pinch, roztažení na šupinaté skřítky
O této ukázce
Moderní smartphony, jako jsou prohlížeče obrázků, umožňují zvětšit a zmenšit obrázek pomocí dvou prstů ke zvětšení nebo zmenšení vzdálenosti mezi prsty. Totéž můžete provést s aplikací Internet Explorer v systému Windows Phone 7. Tato akce se ve Windows Phone 7 nazývá "stažení, roztažení".
Kromě sevření a roztažení můžete také použít akce, jako je "klepnutí" pro krátký dotyk (klepnutí) jednoho bodu na obrazovce a "rychlé" pro rychlé vysledování obrazovky. Tyto akce jsou souhrnně označovány jako gesta.
V tomto programu bych chtěl zvětšit a zmenšit sprite zobrazený na obrazovce touto operací sevření a roztažení. Také jsem až do minula přímo získával informace o dotykovém panelu a zpracovával je, ale tentokrát bych rád zvládal dotykové operace metodami určenými pro gesta.
Cíle tohoto ukázkového programu
Operace sevření a roztažení prstů zvětšují a zmenšují.
Obrázek 1: Roztažení pro zvětšení pohyblivého symbolu
Program - deklarování polí
V deklaraci pole není žádná nová třída, ale má "středovou souřadnici textury", "zvětšení pohyblivého symbolu" a "vzdálenost mezi posledními dvěma dotykovými pozicemi při sevření".
<summary>
テクスチャー
</summary>
Texture2D texture;
<summary>
テクスチャーの中心座標
</summary>
Vector2 textureCenterPos;
<summary>
スプライトのスケール
</summary>
float scale = 1;
<summary>
前回の 2 点間の距離
</summary>
float previousLength = 0;
Program - Povolení gest
Tentokrát provedeme proces pouze gesta, ale ve výchozím stavu nelze použít žádné z gest. Chcete-li načíst informace o každém gestu, musíte nastavit gesto, které má být použito pro vlastnost TouchPanel.EnabledGestures.
// タッチパネルでピンチのジェスチャーを有効にする
TouchPanel.EnabledGestures = GestureType.Pinch | GestureType.PinchComplete;
Povolení všech gest má vliv na výkon, proto se ujistěte, že jste nastavili pouze gesta, která chcete použít. Zde je nastaven "GestureType.Pinch" pro získání informací o operaci stažení prstů a "GestureType.PinchComplete" je nastaven tak, aby indikoval, že proces stažení prstů je dokončen. Umístění nastavení se nastavuje v konstruktoru Game.
Program - Načítání textur
Načítání textur je stejné jako dříve, ale tentokrát počítáme "středovou souřadnici textury". Je to proto, že při změně měřítka pohyblivého symbolu se mění se středovou souřadnicí jako počátkem.
// テクスチャーをコンテンツパイプラインから読み込む
texture = Content.Load<Texture2D>("Texture");
// テクスチャーの中心座標を求める
textureCenterPos = new Vector2(texture.Width / 2, texture.Height / 2);
Program - Získání informací o gestech
Informace o gestech (zde sevřete) získáme v metodě Game.Update. Zpracování gest je ve formě opakování tolika gest, kolik jste povolili. Struktura "TouchCollection", která byla použita až do minule, se nepoužívá.
// 次のジェスチャー情報が取得できる場合は true を返し続けます
while (TouchPanel.IsGestureAvailable)
{
// 次のジェスチャー情報を読み込みます
GestureSample gs = TouchPanel.ReadGesture();
switch (gs.GestureType)
{
case GestureType.Pinch:
// ここにピンチ処理を記述します
break;
case GestureType.PinchComplete:
// ここにピンチ完了処理を記述します
break;
}
}
Zkontrolujte stav vlastnosti TouchPanel.IsGestureAvailable ve smyčce while pro informace o gestech a zkontrolujte, zda jsou k dispozici následující informace o gestech: Pokud máte následující informace o gestech, použijte metodu "TouchPanel.ReadGesture" k získání informací o gestu.
"GestureSample.GestureType" ukládá informace o tom, který typ gesta je zahrnut, takže proces rozvětvte pomocí příkazu switch založeného na něm. V této ukázce konstruktor nastaví výčty "GestureType.Pinch" a "GestureType.PinchComplete" na vlastnost "TouchPanel.EnabledGestures", takže jsou rozvětvené.
Program - Ovládání gest stažením prstů
Je rychlejší podívat se na komentáře v kódu pro to, co děláme, ale abychom shrnuli, co děláme, najdeme rozdíl mezi vzdáleností mezi předchozími dvěma dotykovými body a vzdáleností dotykového bodu mezi dvěma body tentokrát a použijeme tento rozdíl ke zvýšení nebo snížení hodnoty měřítka.
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;
Dvě dotykové pozice lze získat pomocí "GestureSample.Position" a "GestureSample.Position2". Můžete odečíst rozdíl mezi dvěma získanými vektory a najít vzdálenost mezi dvěma body voláním metody "Vector2.Length".
Mimochodem, zde definujeme předchozí vzdálenost jako 0, když se neprovádí svírání, takže proces je rozvětvený při zahájení svírání a ve druhé a následující smyčce. Je to proto, že při prvním sevření neexistuje žádná předchozí vzdálenost, takže není třeba měřítko.
Tentokrát také používáme pouze dvě vlastnosti, "GestureSample.Position" a "GestureSample.Position2", ale existují také vlastnosti "GestureSample.Delta" a "GestureSample.Delta2", které mohou získat informace o rozdílu od předchozí dotykové pozice. K dispozici jsou dvě vlastnosti, ale toto je pro vícedotykové ovládání a pro gesta, která používají pouze jeden dotyk, použijete vlastnosti bez "2".
Program - Zpracování po dokončení gesta stažení prstů
Po dokončení gesta stažení prstů (uvolnění jednoho prstu z dotykového panelu) se vzdálenost mezi předchozími dvěma body vrátí zpět na hodnotu 0. Původně může být lepší použít samostatnou vlajku, ale protože je fyzicky nemožné dotknout se stejné polohy dvěma prsty, vzdálenost 0 je definována jako neštípnutí. (Pokud je rozlišení nízké, může být možné dotknout se stejné polohy ...)
case GestureType.PinchComplete:
// ピンチが終了した場合は保持している距離を 0 に戻して
// 完了したことにします
previousLength = 0;
break;
Program - kreslení Sprites
Nebudu zde zacházet do přílišných podrobností, protože je to jen o kreslení sprite, ale umístil jsem sprite do středu obrazovky a nakreslil vypočtenou hodnotu měřítka zvětšením a zmenšením se středem sprite jako počátkem.
// スプライトの描画準備
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();
Shrnutí této ukázky
Tentokrát jsme vysvětlili proces věnovaný gestům. Ve vzorku vytvoříme pouze proces špetky, ale existují také "pohyby" a "držení". Chcete-li zjistit, jaká gesta jsou k dispozici, podívejte se na nápovědu XNA Game Studio 4.0 pro výčty GestureType.
Totéž můžete implementovat z dotykových informací získaných z metody TouchPanel.GetState bez použití metod nebo struktur specifických pro gesta, ale v takovém případě budete muset vypočítat rychlost správy vícedotykových ID, dotykového času, pohybů pohybů atd. sami. Pomocí metod specifických pro gesta lze tyto implementace zjednodušit a je zde také výhoda, že všechny hry a aplikace lze ovládat stejným způsobem.
Pokud vytváříte proces dotykového panelu sami a můžete podobný proces nahradit gestem, doporučujeme použít tento postup.
Programování! - 5.Sevření pro otočení skřítků
O této ukázce
Sevření obvykle odkazuje na "sevření" a "roztažení", ale proces sevření prstů XNA Game Studio 4.0 specificky neomezuje proces na tyto dva, takže můžete také provádět operace, které krouží kolem jednoho dotykového bodu kolem jiného dotykového bodu.
Zde bych chtěl otočit sprite touto provozní metodou. Mimochodem, tentokrát se neobjevily žádné nové metody ani třídy a je založeno na předchozím škálování.
V popisu ukázkového kódu v tomto článku jsou vynechány stejné části jako předchozí ukázka škálování.
Cíle tohoto ukázkového programu
Otáčením dvou dotykových bodů se pohyblivý symbol otáčí. Předchozí operace škálování také funguje.
Obrázek 2: Otáčení pohyblivého symbolu otočením dotykového bodu
Program - deklarování polí
"Množství natočení pohyblivého symbolu" a "Poslední úhel natočení" jsou přidány do předchozího programu škálování. Všechny úhly se počítají v radiánech.
<summary>
スプライトの回転量(radian)
</summary>
float rotate;
<summary>
前回の回転角度(radian)
</summary>
float previousAngle;
Program - rotační proces
Proces otáčení se provádí během gest sevření prstů stejným způsobem jako při změně měřítka.
Nebudu zacházet do přílišných podrobností o výpočtu rotace, protože je to matematický příběh, ale můžete získat úhlový radián metodou "Math.Atan2" nalezením rozdílového vektoru z dotykového bodu 1 do dotykového bodu 2. Najděte rozdíl mezi získaným úhlem a dříve získaným úhlem a přidejte jej k úhlu natočení pohyblivého symbolu.
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 - kreslení Sprites
Na kreslení skřítků nejsou žádné zásadní změny. Pátý argument metody SpriteBacth.Draw je nastaven na vypočtený úhel natočení.
// スプライトの描画準備
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();
Shrnutí této ukázky
Tentokrát jsem se pokusil otočit skřípkem sevřením. Nepoužíváme žádné nové třídy, ale doufám, že chápete, že můžeme realizovat aplikované zpracování založené na poskytovaných funkcích.
Konečně
Prošli jsme si ukázky a předvedli implementaci dotykových interakcí pomocí Windows Phone 7 a XNA Game Studio 4.0. Obsah zahrnoval snímání dotyků jedním dotykem a vícedotykovým dotykem a manipulaci s dotykovými informacemi a zpracování dotykovými gesty pomocí metod specifických pro gesta.
Tentokrát jsem se zaměřil na dotykový panel, ale stále existují některé funkce, které jsem ještě nezavedl. Windows Phone 7 také obsahuje nové vstupní funkce v XNA Game Studio 4.0, jako je vstup akcelerometru a hlasový vstup. Existuje několik zajímavých funkcí, které jsem tentokrát nemohl představit, takže si prosím užijte zkoumání funkcí, které chcete použít.