Interaccions tàctils en el desenvolupament de jocs per al Windows Phone 7 Part 4 Pessic
Programació! - 4.Pessigar, estirar a escala sprites
Sobre aquesta mostra
Els telèfons intel·ligents moderns, com ara els visors d'imatges, us permeten ampliar i reduir una imatge mitjançant l'ús de dos dits per augmentar o reduir la distància entre els dits. Pots fer el mateix amb l'Internet Explorer al Windows Phone 7. Aquesta acció s'anomena "pessigar, estirar" a Windows Phone 7.
A més de pessigar i estirar, també podeu utilitzar accions com ara "tocar" per tocar breument (tocar) un punt de la pantalla i "parpellejar" per rastrejar ràpidament la pantalla. Aquestes accions es denominen col·lectivament gestos.
En aquest programa, m'agradaria ampliar i reduir l'sprite que es mostra a la pantalla mitjançant aquesta operació de pessic i estirament. A més, fins a l'última vegada, obtenia directament la informació del panell tàctil i la processava, però aquesta vegada m'agradaria gestionar operacions tàctils mitjançant mètodes dedicats als gestos.
Objectius d'aquest programa de mostra
Operacions de pessic i estirament per engrandir i encongir l'sprite.
Figura 1: Estirar per engrandir l'sprite
Programa - Declaració de Camps
No hi ha nova classe en la declaració de camp, però té "la coordenada central de la textura", "l'ampliació de l'sprite" i "la distància entre les dues últimes posicions tàctils en pessigar".
<summary>
テクスチャー
</summary>
Texture2D texture;
<summary>
テクスチャーの中心座標
</summary>
Vector2 textureCenterPos;
<summary>
スプライトのスケール
</summary>
float scale = 1;
<summary>
前回の 2 点間の距離
</summary>
float previousLength = 0;
Programa - Habilitació de gestos
Aquesta vegada, realitzarem un procés només de gestos, però en l'estat predeterminat, no es pot utilitzar cap dels gestos. Per recuperar la informació de cada gest, heu d'establir el gest que s'utilitzarà per a la propietat TouchPanel.EnabledGestures.
// タッチパネルでピンチのジェスチャーを有効にする
TouchPanel.EnabledGestures = GestureType.Pinch | GestureType.PinchComplete;
L'activació de tots els gestos afecta el rendiment, així que assegureu-vos que només configureu els gestos que voleu utilitzar. Aquí, "GestureType.Pinch" està configurat per obtenir informació sobre l'operació de pessic i "GestureType.PinchComplete" està configurat per indicar que el procés de pessic s'ha completat. La ubicació de configuració es defineix al constructor de jocs.
Programa - Càrrega de textures
Carregar textures és el mateix que abans, però aquesta vegada estem calculant la "coordenada central de la textura". Això es deu al fet que quan s'escala un sprite, s'escala amb la coordenada central com a origen.
// テクスチャーをコンテンツパイプラインから読み込む
texture = Content.Load<Texture2D>("Texture");
// テクスチャーの中心座標を求める
textureCenterPos = new Vector2(texture.Width / 2, texture.Height / 2);
Programa - Obtenir informació gestual
Obtenim informació de gestos (pessigar aquí) al mètode Game.Update. El processament de gestos és en forma de repetir tants gestos com hàgiu habilitat. No s'utilitza l'estructura "TouchCollection" que s'utilitzava fins a l'última vegada.
// 次のジェスチャー情報が取得できる場合は true を返し続けます
while (TouchPanel.IsGestureAvailable)
{
// 次のジェスチャー情報を読み込みます
GestureSample gs = TouchPanel.ReadGesture();
switch (gs.GestureType)
{
case GestureType.Pinch:
// ここにピンチ処理を記述します
break;
case GestureType.PinchComplete:
// ここにピンチ完了処理を記述します
break;
}
}
Comproveu l'estat de la propietat TouchPanel.IsGestureAvailable al bucle de temps per obtenir informació sobre gestos i comproveu si hi ha la següent informació del gest: Si teniu la informació del gest següent, utilitzeu el mètode "TouchPanel.ReadGesture" per obtenir la informació del gest.
"GestureSample.GestureType" emmagatzema informació sobre quin tipus de gest s'inclou, de manera que ramifica el procés amb una declaració de commutació basada en ella. En aquesta mostra, el constructor estableix les entrades "GestureType.Pinch" i "GestureType.PinchComplete" a la propietat "TouchPanel.EnabledGestures", de manera que es ramifiquen respectivament.
Programa - Maneig de gestos de pessic
És més ràpid mirar els comentaris del codi del que estem fent, però per resumir el que estem fent, trobem la diferència entre la distància entre els dos punts de contacte anteriors i la distància del punt de contacte entre els dos punts aquesta vegada, i utilitzem aquesta diferència per augmentar o disminuir el valor de l'escala.
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;
Les dues posicions tàctils es poden obtenir amb "GestureSample.Position" i "GestureSample.Position2", respectivament. Podeu restar la diferència entre els dos vectors obtinguts i trobar la distància entre els dos punts anomenant el mètode "Vector2.Length".
Per cert, aquí definim la distància anterior com a 0 quan no es realitza el pessigatge, de manera que el procés es ramifica quan s'inicia el pessigolleig i en el segon i posteriors bucles. Això es deu al fet que la primera vegada que pessigar, no hi ha distància prèvia, de manera que no cal escalar.
A més, aquesta vegada només utilitzem dues propietats, "GestureSample.Position" i "GestureSample.Position2", però també hi ha propietats "GestureSample.Delta" i "GestureSample.Delta2", que poden obtenir la informació de la diferència des de la posició tàctil anterior. Hi ha dues propietats cadascuna, però això és per a multitàctils, i per a gestos que només utilitzen un sol toc, utilitzaràs propietats sense un "2".
Programa - Maneig quan es completa el gest de pessic
Quan el gest de pessic s'ha completat (alliberant qualsevol dit del tauler tàctil), la distància entre els dos punts anteriors es torna a establir a 0. Originalment, pot ser millor utilitzar una bandera separada, però com que és físicament impossible tocar la mateixa posició amb dos dits, la distància de 0 es defineix com no pessigar. (Si la resolució és baixa, pot ser possible tocar la mateixa posició ...)
case GestureType.PinchComplete:
// ピンチが終了した場合は保持している距離を 0 に戻して
// 完了したことにします
previousLength = 0;
break;
Programa - Dibuix Sprites
Aquí no entraré en massa detalls perquè es tracta només de dibuixar l'sprite, però vaig col·locar l'sprite al centre de la pantalla i vaig dibuixar el valor calculat de l'escala ampliant-lo i encongint-lo amb el centre de l'sprite com a origen.
// スプライトの描画準備
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();
Resum d'aquesta mostra
En aquesta ocasió, hem explicat el procés dedicat als gestos. A la mostra, només creem un procés de pessic, però també hi ha "follets" i "aguanta". Per saber quins gestos hi ha disponibles, consulteu l'ajuda de XNA Game Studio 4.0 per a les entrades de GestureType.
Podeu implementar el mateix a partir de la informació tàctil obtinguda del mètode TouchPanel.GetState sense utilitzar mètodes o estructures específiques del gest, però en aquest cas, haureu de calcular la velocitat de gestió d'identificadors multitàctils, temps de contacte, follets, etc. Mitjançant l'ús de mètodes específics del gest, aquestes implementacions es poden simplificar i també hi ha l'avantatge que tots els jocs i aplicacions es poden operar de la mateixa manera.
Quan creeu un procés de panell tàctil vosaltres mateixos, si podeu substituir un procés similar com a gest, us recomanem que l'utilitzeu.
Programació! - 5.Pessigar per girar sprites
Sobre aquesta mostra
Pessigar normalment es refereix a "pessigar" i "estirar", però el procés de pessic de XNA Game Studio 4.0 no limita específicament el procés a aquests dos, de manera que també podeu realitzar operacions que encerclin un punt de contacte al voltant d'un altre punt de contacte.
Aquí, m'agradaria girar l'sprite amb aquest mètode d'operació. Per cert, aquesta vegada no van aparèixer nous mètodes ni classes, i es basa en l'escalat anterior.
En la descripció del codi de mostra d'aquest article, s'ometen les mateixes parts que la mostra d'escala anterior.
Objectius d'aquest programa de mostra
En girar els dos punts de contacte, l'sprite gira. L'anterior operació d'escalat també funciona.
Figura 2: Girar l'sprite girant el punt de contacte
Programa - Declaració de Camps
"Quantitat de rotació Sprite" i "Últim angle de rotació" s'afegeixen al programa d'escalat anterior. Tots els angles es calculen en radians.
<summary>
スプライトの回転量(radian)
</summary>
float rotate;
<summary>
前回の回転角度(radian)
</summary>
float previousAngle;
Programa - Procés de Rotació
El procés de rotació es realitza durant els gestos de pessic de la mateixa manera que quan s'escala.
No entraré en massa detalls sobre el càlcul de la rotació perquè és una història matemàtica, però podeu obtenir l'angle radian amb el mètode "Math.Atan2" trobant el vector de diferència des del punt de contacte 1 fins al punt de contacte 2. Trobeu la diferència entre l'angle obtingut i l'angle adquirit prèviament i afegiu-lo a l'angle de rotació de l'sprite.
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;
}
Programa - Dibuix Sprites
No hi ha canvis importants en el dibuix d'sprites. El cinquè argument del mètode SpriteBacth.Draw s'estableix a l'angle de rotació calculat.
// スプライトの描画準備
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();
Resum d'aquesta mostra
Aquesta vegada, vaig intentar girar l'sprite mitjançant una operació de pessic. No utilitzem cap classe nova en particular, però espero que entengueu que podem realitzar un processament aplicat en funció de les funcions proporcionades.
Per fi
Vam recórrer mostres i vam demostrar la implementació d'interaccions tàctils mitjançant Windows Phone 7 i XNA Game Studio 4.0. El contingut incloïa l'adquisició i manipulació d'un sol tacte i multitàctil de la informació tàctil, i el processament mitjançant la manipulació de gestos tàctils mitjançant mètodes específics del gest.
Aquesta vegada, m'he centrat en el panell tàctil, però encara hi ha algunes funcions que encara no he introduït. Windows Phone 7 també inclou noves característiques d'entrada a XNA Game Studio 4.0, com ara l'entrada de l'acceleròmetre i l'entrada de veu. Hi ha algunes funcions interessants que no he pogut introduir aquesta vegada, així que gaudiu explorant les funcions que voleu utilitzar.