Touchinteraktionen in der Spieleentwicklung für Windows Phone 7 Teil 4 Pinch
Programmieren! - 4.Pinch, dehnen Sie sich, um Sprites zu skalieren
Informationen zu diesem Beispiel
Moderne Smartphones wie Bildbetrachter ermöglichen es Ihnen, ein Bild zu vergrößern und zu verkleinern, indem Sie mit zwei Fingern den Abstand zwischen Ihren Fingern vergrößern oder verkleinern. Sie können dasselbe mit Internet Explorer unter Windows Phone 7 tun. Diese Aktion wird in Windows Phone 7 als "Pinch, Stretch" bezeichnet.
Zusätzlich zum Zusammendrücken und Dehnen können Sie auch Aktionen wie "Tippen" verwenden, um einen Punkt auf dem Bildschirm kurz zu berühren (zu tippen), und "Streichen", um den Bildschirm schnell zu verfolgen. Diese Aktionen werden zusammenfassend als Gesten bezeichnet.
In diesem Programm möchte ich das auf dem Bildschirm angezeigte Sprite durch diese Pinch- und Stretch-Operation vergrößern und verkleinern. Außerdem habe ich bis zum letzten Mal direkt die Informationen des Touchpanels erhalten und verarbeitet, aber diesmal möchte ich Touch-Operationen mit Methoden behandeln, die Gesten gewidmet sind.
Ziele dieses Beispielprogramms
Kneif- und Dehnoperationen, um den Sprite zu vergrößern und zu verkleinern.
Abbildung 1: Strecken zum Vergrößern des Sprites
Programm - Deklarieren von Feldern
Es gibt keine neue Klasse in der Felddeklaration, aber sie hat "die Mittenkoordinate der Textur", "die Vergrößerung des Sprites" und "den Abstand zwischen den letzten beiden Berührungspositionen beim Zusammendrücken".
<summary>
テクスチャー
</summary>
Texture2D texture;
<summary>
テクスチャーの中心座標
</summary>
Vector2 textureCenterPos;
<summary>
スプライトのスケール
</summary>
float scale = 1;
<summary>
前回の 2 点間の距離
</summary>
float previousLength = 0;
Programm - Aktivieren von Gesten
Dieses Mal führen wir einen reinen Gestenprozess aus, aber im Standardzustand kann keine der Gesten verwendet werden. Zum Abrufen der einzelnen Gesteninformationen müssen Sie die Geste festlegen, die für die TouchPanel.EnabledGestures-Eigenschaft verwendet werden soll.
// タッチパネルでピンチのジェスチャーを有効にする
TouchPanel.EnabledGestures = GestureType.Pinch | GestureType.PinchComplete;
Das Aktivieren aller Gesten wirkt sich auf die Leistung aus, stellen Sie daher sicher, dass Sie nur die Gesten festlegen, die Sie verwenden möchten. Hier wird "GestureType.Pinch" festgelegt, um Informationen zum Pinchvorgang abzurufen, und "GestureType.PinchComplete" wird festgelegt, um anzuzeigen, dass der Pinchvorgang abgeschlossen ist. Der Einstellungsort wird im Game-Konstruktor festgelegt.
Programm - Texturen laden
Das Laden von Texturen ist das gleiche wie zuvor, aber diesmal berechnen wir die "Mittenkoordinate der Textur". Dies liegt daran, dass beim Skalieren eines Sprites mit der Mittelpunktskoordinate als Ursprung skaliert wird.
// テクスチャーをコンテンツパイプラインから読み込む
texture = Content.Load<Texture2D>("Texture");
// テクスチャーの中心座標を求める
textureCenterPos = new Vector2(texture.Width / 2, texture.Height / 2);
Programm - Gesteninformationen abrufen
Wir erhalten Gesteninformationen (Zusammendrücken hier) in der Game.Update-Methode. Die Gestenverarbeitung besteht darin, so viele Gesten zu wiederholen, wie Sie aktiviert haben. Die Struktur "TouchCollection", die bis zum letzten Mal verwendet wurde, wird nicht verwendet.
// 次のジェスチャー情報が取得できる場合は true を返し続けます
while (TouchPanel.IsGestureAvailable)
{
// 次のジェスチャー情報を読み込みます
GestureSample gs = TouchPanel.ReadGesture();
switch (gs.GestureType)
{
case GestureType.Pinch:
// ここにピンチ処理を記述します
break;
case GestureType.PinchComplete:
// ここにピンチ完了処理を記述します
break;
}
}
Überprüfen Sie den Status der TouchPanel.IsGestureAvailable-Eigenschaft in der while-Schleife auf Gesteninformationen, und überprüfen Sie, ob die folgenden Gesteninformationen vorhanden sind: Wenn Sie über die folgenden Gesteninformationen verfügen, verwenden Sie die Methode "TouchPanel.ReadGesture", um die Gesteninformationen abzurufen.
"GestureSample.GestureType" speichert Informationen darüber, welcher Gestentyp enthalten ist, und verzweigt den Prozess daher mit einer darauf basierenden switch-Anweisung. In diesem Beispiel legt der Konstruktor die Enumerationen "GestureType.Pinch" und "GestureType.PinchComplete" auf die Eigenschaft "TouchPanel.EnabledGestures" fest, sodass sie entsprechend verzweigt sind.
Programm - Handhabung von Pinch-Gesten
Es ist schneller, die Kommentare im Code für das, was wir tun, zu betrachten, aber um zusammenzufassen, was wir tun, finden wir den Unterschied zwischen dem Abstand zwischen den vorherigen beiden Berührungspunkten und dem Berührungspunktabstand zwischen den beiden Punkten dieses Mal und verwenden diesen Unterschied, um den Skalierungswert zu erhöhen oder zu verringern.
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;
Die beiden Touchpositionen können mit "GestureSample.Position" bzw. "GestureSample.Position2" ermittelt werden. Sie können die Differenz zwischen den beiden erhaltenen Vektoren subtrahieren und den Abstand zwischen den beiden Punkten ermitteln, indem Sie die Methode "Vector2.Length" aufrufen.
Übrigens definieren wir hier den vorherigen Abstand als 0, wenn nicht gekneift wird, so dass der Prozess verzweigt ist, wenn das Kneifen gestartet wird und in der zweiten und nachfolgenden Schleife. Dies liegt daran, dass es beim ersten Kneifen keine vorherige Entfernung gibt, so dass keine Skalierung erforderlich ist.
Außerdem verwenden wir diesmal nur zwei Eigenschaften, "GestureSample.Position" und "GestureSample.Position2", aber es gibt auch die Eigenschaften "GestureSample.Delta" und "GestureSample.Delta2", die die Unterschiedsinformationen von der vorherigen Fingereingabeposition abrufen können. Es gibt jeweils zwei Eigenschaften, aber dies ist für Multi-Touch, und für Gesten, die nur eine einzelne Berührung verwenden, verwenden Sie Eigenschaften ohne "2".
Programm - Handhabung nach Abschluss der Zusammenknickgeste
Wenn die Zusammendrückgeste abgeschlossen ist (indem Sie einen Finger vom Touchpanel loslassen), wird der Abstand zwischen den beiden vorherigen Punkten wieder auf 0 gesetzt. Ursprünglich kann es besser sein, eine separate Flagge zu verwenden, aber da es physikalisch unmöglich ist, die gleiche Position mit zwei Fingern zu berühren, ist der Abstand von 0 als nicht kneifend definiert. (Wenn die Auflösung niedrig ist, kann es möglich sein, die gleiche Position zu berühren ...)
case GestureType.PinchComplete:
// ピンチが終了した場合は保持している距離を 0 に戻して
// 完了したことにします
previousLength = 0;
break;
Programm - Zeichnen von Sprites
Ich werde hier nicht zu sehr ins Detail gehen, weil es nur darum geht, das Sprite zu zeichnen, aber ich habe das Sprite in der Mitte des Bildschirms platziert und den berechneten Skalierungswert gezeichnet, indem ich es mit der Mitte des Sprites als Ursprung vergrößert und verkleinert habe.
// スプライトの描画準備
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();
Zusammenfassung dieses Beispiels
Dieses Mal haben wir den Prozess erklärt, der Gesten gewidmet ist. Im Beispiel erstellen wir nur einen Pinch-Prozess, aber es gibt auch "Flicks" und "Holds". Welche Gesten verfügbar sind, finden Sie in der XNA Game Studio 4.0-Hilfe für GestureType-Enumerationen.
Sie können dasselbe aus den Fingereingabeinformationen implementieren, die Sie von der TouchPanel.GetState-Methode erhalten, ohne gestenspezifische Methoden oder Strukturen zu verwenden, aber in diesem Fall müssen Sie die Geschwindigkeit der Multitouch-ID-Verwaltung, die Touchzeit, die Bewegungen usw. selbst berechnen. Durch den Einsatz gestenspezifischer Methoden können diese Implementierungen vereinfacht werden, zudem besteht der Vorteil, dass alle Spiele und Anwendungen auf die gleiche Weise bedient werden können.
Wenn Sie selbst einen Touchpanelprozess erstellen und einen ähnlichen Prozess als Geste ersetzen können, empfehlen wir Ihnen, diesen zu verwenden.
Programmieren! - 5.Pinch zum Drehen von Sprites
Informationen zu diesem Beispiel
Pinching bezieht sich normalerweise auf "Pinching" und "Stretching", aber der Pinch-Prozess von XNA Game Studio 4.0 beschränkt den Prozess nicht speziell auf diese beiden, sodass Sie auch Vorgänge ausführen können, die einen Berührungspunkt um einen anderen Touchpoint kreisen.
Hier möchte ich das Sprite mit dieser Operationsmethode drehen. Übrigens sind diesmal keine neuen Methoden oder Klassen aufgetaucht, und es basiert auf der vorherigen Skalierung.
In der Beschreibung des Beispielcodes in diesem Artikel werden dieselben Teile wie im vorherigen Skalierungsbeispiel weggelassen.
Ziele dieses Beispielprogramms
Durch Drehen der beiden Touchpoints dreht sich das Sprite. Der vorherige Skalierungsvorgang funktioniert ebenfalls.
Abbildung 2: Drehen des Sprites durch Drehen des Berührungspunkts
Programm - Deklarieren von Feldern
"Sprite-Rotationsbetrag" und "Letzter Drehwinkel" werden dem vorherigen Skalierungsprogramm hinzugefügt. Alle Winkel werden im Bogenmaß berechnet.
<summary>
スプライトの回転量(radian)
</summary>
float rotate;
<summary>
前回の回転角度(radian)
</summary>
float previousAngle;
Programm - Rotationsprozess
Der Drehvorgang wird bei Pinch-Gesten auf die gleiche Weise wie beim Skalieren durchgeführt.
Ich werde nicht zu sehr auf die Berechnung der Drehung eingehen, da es sich um eine mathematische Geschichte handelt, aber Sie können den Winkelradiant mit der Methode "Math.Atan2" erhalten, indem Sie den Differenzvektor von Berührungspunkt 1 zu Berührungspunkt 2 finden. Finden Sie die Differenz zwischen dem erhaltenen Winkel und dem zuvor erfassten Winkel und addieren Sie ihn zum Drehwinkel des Sprites.
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 - Zeichnen von Sprites
Es gibt keine größeren Änderungen beim Zeichnen von Sprites. Das fünfte Argument der SpriteBacth.Draw-Methode wird auf den berechneten Drehwinkel festgelegt.
// スプライトの描画準備
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();
Zusammenfassung dieses Beispiels
Dieses Mal habe ich versucht, den Sprite per Pinch-Operation zu drehen. Wir verwenden keine neuen Klassen im Besonderen, aber ich hoffe, Sie verstehen, dass wir die angewandte Verarbeitung basierend auf den bereitgestellten Funktionen realisieren können.
Endlich
Wir haben Beispiele durchgesehen und die Implementierung von Fingereingabeinteraktionen mit Windows Phone 7 und XNA Game Studio 4.0 demonstriert. Der Inhalt umfasste Single-Touch- und Multi-Touch-Touch-Erfassung und -Manipulation von Touch-Informationen sowie die Verarbeitung durch Touch-Gestenmanipulation mit gestenspezifischen Methoden.
Dieses Mal habe ich mich auf das Touchpanel konzentriert, aber es gibt noch einige Funktionen, die ich noch nicht eingeführt habe. Windows Phone 7 enthält auch neue Eingabefeatures in XNA Game Studio 4.0, z. B. Beschleunigungsmessereingabe und Spracheingabe. Es gibt einige interessante Funktionen, die ich dieses Mal nicht vorstellen konnte, also genießen Sie bitte die Funktionen, die Sie verwenden möchten.