Touchinteraktioner i spelutveckling för Windows Phone 7 Part 2 Multitouch

Sidan uppdaterad :
Datum för skapande av sida :

Programmering! - 2.Prova multi-touch

Om det här exemplet

Här skulle jag vilja förklara programmet för att förverkliga multi-touch-inmatning. I Windows Phone 7 är multi-touch-inmatning via pekskärmen ett av de viktigaste objekten för användarinmatning. Detta beror på att huvudinmatningsgränssnittet, till skillnad från Windows och Xbox 360, är "pekskärmen". Det kan finnas Windows-telefoner med tangentbord, men naturligtvis har de inte alltid dem. Så för att spelet ska fungera på vilken Windows Phone som helst måste det vara beröringskompatibelt.

Om du begränsar pekskärmen till endast "single touch" kommer de typer av spel som kan göras oundvikligen att vara begränsade när det gäller att göra spel. Tänk på en handhållen spelkonsol (du kan lämna den stillastående). De flesta spelkonsoler kräver att du håller spelkontrollen (eller den faktiska konsolen) med båda händerna och trycker på flera knappar samtidigt.

Windows Phone 7 har inte lika många knappar som spelkontroller, och det har inte nödvändigtvis ett tangentbord. Därför kan virtuella tangenter och knappar placeras på skärmen, och när du trycker på dem är det obekvämt eftersom de inte kan tryckas samtidigt med bara en enda knapptryckning.

Naturligtvis, förutom det virtuella knappexemplet ovan, är multi-touch nödvändigt för spel där flera personer använder en skärm, till exempel "nypa och sträck (flytta två punkter närmare eller längre ifrån varandra)" som är vanligt vid multi-touch.

Förresten är introduktionen lång, men i det här exemplet skulle jag vilja skaffa multi-touch-information med en klass tillägnad pekskärmar. Det är kul att skapa ett prov som plötsligt kan spelas med multi-touch, men först vill jag ta reda på vilken typ av information som kan erhållas med multi-touch. Det finns vissa vanor, så genom att känna till dem först kan du minska tiden för att undersöka orsaken, till exempel när det inte fungerar bra i programmering senare.

Mål för detta exempelprogram

Visa och bekräfta informationen när multi-touch utförs.

図 1 :タッチしたときにタッチ情報がテキストで表示される
Bild 1: Pekinformation visas som text vid beröring

Program - Deklarera fält

Fälten måste märkas TouchPanelCapabilities Structure och TouchCollection Structure.

/// <summary>
///  スプライトでテキストを描画するためのフォント
/// </summary>
SpriteFont font;

/// <summary>
///  タッチパネルの機能情報
/// </summary>
TouchPanelCapabilities capabilities;

/// <summary>
///  取得したタッチ情報の一覧
/// </summary>
TouchCollection touches;

"TouchPanelCapabilities-strukturen" är en struktur som kan ha funktionerna på pekskärmen själv som parametrar. Den används för att kontrollera om pekskärmen kan användas under uppdateringen.

TouchCollection-strukturen innehåller en lista med information om det aktuella läget. Om flera beröringar upptäcks kan flera "TouchLocation-strukturer" hämtas. Mer om det senare.

Program - Ladda teckensnitt

Innan du ritar text på skärmen lägger du till teckensnittsdefinitionen i innehållsprojektet och läser in den med metoden Game.LoadContent. Detta är inte direkt relaterat till pekskärmar, så jag kommer att utelämna en detaljerad förklaring.

図 2 :コンテンツプロジェクトに「Font.spritefont」を追加しておく
Bild 2: Lägg till "Font.spritefont" i innehållsprojektet

// フォントをコンテンツパイプラインから読み込む
font = Content.Load<SpriteFont>("Font");

Program - Få information om pekskärmen

Hämta information på pekskärmen i Game.Update-metoden.

// タッチパネルの機能情報を取得
capabilities = TouchPanel.GetCapabilities();

// タッチパネルが使用可能であるかチェック
if (capabilities.IsConnected)
{
  // 現在のタッチパネルの入力情報を取得
  touches = TouchPanel.GetState();
}

Du kan ringa metoden "TouchPanel.GetCapabilities" för att få funktionsinformation på pekskärmen. Det finns två typer av information som kan förvärvas: "Kan pekskärmen användas?" och "Maximalt antal beröringspunkter som kan förvärvas av pekskärmen." Ingen av dem ändras under spelet, så jag tror att det inte finns några problem om du får det per Game.Initialize-metoden, men i framtiden visas enheter som kan ta bort pekskärmen (pekskärm som kan anslutas till USB eller andra faktiska enheter än Windows Phone) och det beskrivs i uppdateringsmetoden.

Det finns inte heller något behov av att kontrollera om pekskärmen kan användas eftersom den alltid kan användas på Windows Phone 7, men när du delar kod med Windows och Xbox 360 krävs inte dessa maskinvarugränssnitt och måste kontrolleras.

Om du kan bekräfta att pekskärmen är tillgänglig i egenskapen "TouchPanelCapabilities.IsConnected" får metoden "TouchPanel.GetState" det aktuella pekläget.

Ursprungligen utförs viss operationsbehandling efter att ha fått beröringsinformation, men i det här exemplet visas endast information, så ingen ytterligare bearbetning görs i Game.Update-metoden.

Program - Få maximalt antal beröringspunkter du kan få

Det maximala antalet beröringspunkter som kan hämtas är ungefär fast, så det är inte ofta nödvändigt att hämta dem under spelet, men du kan få det maximala antalet beröringspunkter som kan hämtas från egenskapen TouchPanelCapabilities.MaximumTouchCount. Om egenskapen MaximumTouchCount till exempel är "4" kan du inte få information om den femte positionen genom att trycka på pekskärmen med fem fingrar.

Antalet förvärv för smarttelefonen "HTC 7 Trophy" som användes i detta prov var "4". (Förresten, XNA Game Studio 4.0 definieras för att alltid returnera 4.) Windows Phone 7-specifikationen säger att den är mer än 4 poäng, så den returnerar inte mindre än 4.)

// タッチ可能な最大数を表示
spriteBatch.DrawString(font,  
                       "MaximumTouchCount : " +
                         capabilities.MaximumTouchCount,
                       new Vector2(20, 50),
                       Color.LightGreen);

図 3 :TouchPanelCapabilities.MaximumTouchCount プロパティの取得数
Bild 3: Antal hämtningar av TouchPanelCapabilities.MaximumTouchCount

Program - Få information om beröring

Den hämtade TouchCollection-strukturen innehåller information om flera pekfunktioner. Om du till exempel rör med två fingrar innehåller den vanligtvis två beröringar.

Antalet pekinformation kan hämtas i egenskapen TouchCollection.Count. Pekinformation visas upprepade gånger i for-satsen så många gånger som den erhålls. Ursprungligen är det inga problem att loopa med foreach, men eftersom vi kommer att använda arrayindexet (int-index) i den senare förklaringen, slingrar vi det med för.

// タッチ情報の数だけループする
for (int index = 0; index < touches.Count; index++)
{
  // 指定したインデックスのタッチ情報取得
  TouchLocation tl = touches[index];

  // タッチ情報を可視化
  string mes = "Index : " + index + Environment.NewLine +
               "Id : " + tl.Id + Environment.NewLine +
               "Position : " + tl.Position + Environment.NewLine +
               "State : " + tl.State;

  // 文字の描画
  spriteBatch.DrawString(font,
                         mes,
                         new Vector2(30 + (index % 4) * 10,
                                     80 + index * 140),
                         Color.White);
}

Nu erhålls varje beröringsinformation som en "TouchLocation" -struktur. Om det loopar med for kan det erhållas med "TouchCollection[index]". (Du kan också få strukturen "TouchLocation" direkt i foreach.)

Följande fyra typer av information kan erhållas från strukturen "TouchLocation", och varje information visas i exemplet.

När du faktiskt kör den visas pekinformationen enligt nedan. Eftersom du rör med tre fingrar kan du se tre beröringar. Förresten, om du rör med fem fingrar ser du bara upp till fyra. (Eftersom det maximala antalet förvärv är 4)

図 4 :3 本の指でタッチしているところ
Bild 4: Röra med tre fingrar

Program - Saker att se upp för när du hämtar pekinformation 1 (index och ID)

Jag nämnde ovan att det finns saker att tänka på när man hanterar beröringsinformation, men den första är "index" och "ID". Ett index refererar helt enkelt till ett matrisindex.

Jag tror att det är lättare att förstå om man provar det på en riktig maskin än att förklara det skriftligt. Låt oss till exempel säga att du arbetar med två fingrar, "pekfinger" och "långfinger", och rör med pekfingret först.

図 5 :人差し指でタッチ
Bild 5: Tryck med pekfingret

Som visas på skärmen kommer indexet att vara "0". Rör sedan vid den med långfingret.

図 6 :中指でタッチ
Bild 6: Tryck på långfingret

I det här läget rör du med två fingrar, så två bitar av information visas. Indexet som berörs med långfingret är "1".

Låt oss lyfta pekfingret här. Då kommer beröringsinformationen att se ut som följande.

図 7 :人差し指を放す
Bild 7: Släpp pekfingret

Som du kanske har märkt nu är indexet för den information du rör vid med långfingret "0". Om du hanterar tecknet efter index när du flyttar det leder åtgärden ovan till följande åtgärder.

・ Flytta tecknet "A" med pekfingret

・ Flytta tecknet "B" med långfingret i det tillståndet.

・ Släpp pekfingret medan du flyttar karaktären med långfingret

・ Tecknet som styrs av långfingret växlar plötsligt till "A"

Ett annat fenomen är att om du upprepade gånger släpper eller rör vid en av de två fingrarna medan du rör vid dem, kan ritningstexten för den första beröringsinformationen flimra. Detta beror på att det andra fingret avbryter indexet "0" i det ögonblick du rör vid eller släpper det.

Som nämnts ovan matchar indexet och ordningen på beröringsinformation när multi-touch inte den ordning i vilken de berörs. Om du vill utföra några åtgärder ska du därför inte hantera dem i TouchCollection-indexet.

Det som ska hanteras är att strukturen "TouchLocation" har en "Id"-egenskap, och Id skrivs om med ett nytt värde varje gång det berörs, men förhållandet mellan beröringspunkten och ID:t garanteras vid beröring, så vi kommer att hantera det.

Naturligtvis betyder det inte att du måste hantera det med ID, och i vissa fall är beröringspositionen ensam tillräcklig. Om du till exempel bara trycker på en knapp på skärmen kan du bestämma att du tryckte på en knapp genom att kontrollera pekpositionen oavsett ID. Men när man inkluderar dragbehandling ändras positionen alltid, så jag tycker att det fortfarande bör bestämmas av ID.

Program - Saker att tänka på när du skaffar beröringsinformation 2 (antal inhämtad beröringsinformation)

Även om det inte ingår i artikelns program, ritar provet strängen "GetMaxTouchCount" längst ner på skärmen och "det maximala antalet beröringsinformation som förvärvats samtidigt". Detta har visat det maximala antalet beröringsinformation som förvärvats av metoden "TouchPanel.GetState" tidigare, men i den här testmaskinen är egenskapen "TouchPanelCapabilities.MaximumTouchCount" 4, så det maximala värdet som visas här bör vanligtvis vara 4. Om du lägger fem fingrar på det kommer det fortfarande att vara 4.

図 8 :5 本の指を置いたときの数値
Bild 8: Femfingernummer

Låt oss göra ett litet experiment. Försök att upprepa pekskärmen med flera fingrar i hög hastighet. Det beror på testmaskinen, men antalet kan överstiga 4 innan du vet ordet av.

図 9 :GetMaxTouchCount が 4 を超えている
Bild 9: GetMaxTouchCount är större än 4

Faktum är att den beröringsinformation som förvärvats av metoden "TouchPanel.GetState" inte är beröringsinformationen när du ringer till "TouchPanel.GetState" -metoden, men det ögonblick du rör vid den och det ögonblick du släpper den från den senaste uppdateringstiden cachas. Därför, även om upp till fyra beröringar kan upptäckas samtidigt, behandlas beröring av samma finger igen som en separat beröring, så mer beröringsinformation kan erhållas än TouchPanelCapabilities.MaximumTouchCount.

Därför, även om TouchPanelCapabilities.MaximumTouchCount är 4, om antalet arrayelement i touchrelaterade data fixas med 4, kan ett indexöverförbrukningsfel uppstå beroende på bearbetningsmetoden.

Förresten, med hjälp av XNA Game Studio, beskrivs det maximala värdet av TouchCollection.Count-egenskapen som "8", så om du vill fixa antalet element i matrisen bör du ställa in antalet element till minst 8. (Om du tänker på framtida versionsuppgraderingar kanske du vill inkludera en skyddsklausul så att indexet inte går över.)

Sammanfattning av detta exempel

Den här gången undersökte vi olika parametrar för den information som erhållits från multi-touch. Vi bekräftade också att det finns några punkter att tänka på när du skaffar information om pekskärmen. Baserat på denna kunskap skulle jag vilja förklara ett prov som faktiskt använder multi-touch.