การโต้ตอบแบบสัมผัสในการพัฒนาเกมสําหรับ Windows Phone 7 ส่วนที่ 2 มัลติทัช

โปรแกรม! - 2. ลองใช้มัลติทัช

เกี่ยวกับตัวอย่างนี้

ที่นี่ฉันต้องการอธิบายโปรแกรมสําหรับการตระหนักถึงการป้อนข้อมูลแบบมัลติทัช ใน Windows Phone 7 การป้อนข้อมูลแบบมัลติทัชผ่านแผงสัมผัสเป็นหนึ่งในรายการที่สําคัญที่สุดสําหรับการป้อนข้อมูลของผู้ใช้ นี่เป็นเพราะไม่เหมือนกับ Windows และ Xbox 360 อินเทอร์เฟซอินพุตหลักคือ "หน้าจอสัมผัส" อาจมีโทรศัพท์ Windows ที่มีแป้นพิมพ์ แต่แน่นอนว่าพวกเขาไม่ได้มีพวกเขาเสมอไป ดังนั้นเพื่อให้เกมทํางานบน Windows Phone ใด ๆ ได้จะต้องมีความสามารถในการสัมผัส

หากคุณ จํากัด หน้าจอสัมผัสไว้ที่ "สัมผัสเดียว" เท่านั้นประเภทของเกมที่สามารถทําได้จะถูก จํากัด อย่างหลีกเลี่ยงไม่ได้เมื่อพูดถึงการสร้างเกม ลองนึกถึงเครื่องเล่นเกมมือถือ (คุณสามารถทิ้งไว้นิ่ง ๆ ได้) คอนโซลเกมส่วนใหญ่กําหนดให้คุณต้องถือตัวควบคุมเกม (หรือคอนโซลจริง) ด้วยมือทั้งสองข้างแล้วกดปุ่มหลายปุ่มพร้อมกัน

Windows Phone 7 ไม่มีปุ่มมากเท่ากับตัวควบคุมเกม และไม่จําเป็นต้องมีแป้นพิมพ์ ดังนั้นปุ่มและปุ่มเสมือนอาจถูกวางไว้บนหน้าจอและเมื่อกดมันไม่สะดวกเพราะไม่สามารถกดพร้อมกันได้ด้วยการสัมผัสเพียงครั้งเดียว

แน่นอนว่านอกเหนือจากตัวอย่างปุ่มเสมือนด้านบนมัลติทัชเป็นสิ่งจําเป็นสําหรับเกมที่หลายคนใช้งานหน้าจอเดียวเช่น "หยิกและยืด (ย้ายสองจุดใกล้หรือไกลออกไป)" ซึ่งเป็นเรื่องปกติในมัลติทัช

อย่างไรก็ตามการแนะนํานั้นยาว แต่ในตัวอย่างนี้ฉันต้องการรับข้อมูลแบบมัลติทัชโดยใช้คลาสที่ทุ่มเทให้กับแผงสัมผัส การสร้างตัวอย่างที่สามารถเล่นด้วยมัลติทัชได้ทันทีเป็นเรื่องสนุก แต่ก่อนอื่นฉันต้องการค้นหาว่าข้อมูลประเภทใดที่สามารถรับได้ด้วยมัลติทัช มีนิสัยบางอย่างดังนั้นการรู้จักพวกเขาก่อนคุณสามารถลดเวลาที่ใช้ในการตรวจสอบสาเหตุเช่นเมื่อมันทํางานได้ไม่ดีในการเขียนโปรแกรมในภายหลัง

เป้าหมายของโปรแกรมตัวอย่างนี้

แสดงและยืนยันข้อมูลเมื่อดําเนินการมัลติทัช

รูปที่ 1: ข้อมูลการสัมผัสจะแสดงเป็นข้อความเมื่อสัมผัส

โปรแกรม - ประกาศสาขา

ฟิลด์ต้องมีป้ายกํากับว่า โครงสร้าง TouchPanelCapabilities และโครงสร้าง TouchCollection

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

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

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

"โครงสร้าง TouchPanelCapabilities" เป็นโครงสร้างที่สามารถมีฟังก์ชั่นของหน้าจอสัมผัสเป็นพารามิเตอร์ได้ ใช้เพื่อตรวจสอบว่าสามารถใช้แผงสัมผัสระหว่างการอัปเดตได้หรือไม่

โครงสร้าง TouchCollection ประกอบด้วยรายการข้อมูลเกี่ยวกับสถานะที่สัมผัสในปัจจุบัน หากตรวจพบการสัมผัสหลายครั้ง จะสามารถเรียกข้อมูล "โครงสร้าง TouchLocation" หลายรายการได้ เพิ่มเติมเกี่ยวกับที่ในภายหลัง

โปรแกรม - กําลังโหลดแบบอักษร

ก่อนที่จะวาดข้อความบนหน้าจอให้เพิ่มคําจํากัดความแบบอักษรลงในโครงการเนื้อหาของคุณและโหลดด้วยวิธี Game.LoadContent สิ่งนี้ไม่เกี่ยวข้องโดยตรงกับแผงสัมผัสดังนั้นฉันจะละเว้นคําอธิบายโดยละเอียด

รูปที่ 2: เพิ่ม "Font.spritefont" ลงในโปรเจ็กต์เนื้อหาของคุณ

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

โปรแกรม - รับข้อมูลแผงสัมผัส

รับข้อมูลแผงสัมผัสภายในวิธี Game.Update

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

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

คุณสามารถเรียกวิธีการ "TouchPanel.GetCapabilities" เพื่อรับข้อมูลการทํางานของแผงสัมผัส มีข้อมูลสองประเภทที่สามารถรับได้: "สามารถใช้แผงสัมผัสได้หรือไม่" และ "จํานวนจุดสัมผัสสูงสุดที่แผงสัมผัสสามารถรับได้" ไม่มีการเปลี่ยนแปลงระหว่างเกมดังนั้นฉันคิดว่าไม่มีปัญหาหากคุณได้รับตามวิธี Game.Initialize แต่ในอนาคตอุปกรณ์ที่สามารถลบแผงสัมผัส (แผงสัมผัสที่สามารถเชื่อมต่อกับ USB หรืออุปกรณ์จริงอื่นที่ไม่ใช่ Windows Phone) ปรากฏขึ้นและอธิบายไว้ในวิธีอัปเดต

นอกจากนี้ยังไม่จําเป็นต้องตรวจสอบว่าสามารถใช้แผงสัมผัสได้หรือไม่เนื่องจากสามารถใช้กับ Windows Phone 7 ได้ตลอดเวลา แต่เมื่อแชร์รหัสกับ Windows และ Xbox 360 ฮาร์ดแวร์เหล่านี้ไม่จําเป็นต้องใช้อินเทอร์เฟซอินพุตและจําเป็นต้องตรวจสอบ

ถ้าคุณสามารถยืนยันว่า แผงสัมผัสพร้อมใช้งานในคุณสมบัติ "TouchPanelCapabilities.IsConnected" วิธีการ "TouchPanel.GetState" ได้รับสถานะการสัมผัสปัจจุบัน

ในขั้นต้นการประมวลผลการดําเนินการบางอย่างจะดําเนินการหลังจากได้รับข้อมูลการสัมผัส แต่ในตัวอย่างนี้ข้อมูลจะปรากฏขึ้นเท่านั้นดังนั้นจึงไม่มีการประมวลผลเพิ่มเติมในวิธี Game.Update

โปรแกรม -- รับจํานวนสูงสุดของจุดสัมผัสที่คุณจะได้รับ

จํานวนจุดสัมผัสสูงสุดที่สามารถดึงออกมาได้นั้นได้รับการแก้ไขโดยประมาณดังนั้นจึงไม่จําเป็นต้องดึงข้อมูลเหล่านั้นในระหว่างเกม แต่คุณสามารถรับจํานวนจุดสัมผัสสูงสุดที่สามารถดึงได้จากคุณสมบัติ TouchPanelCapabilities.MaximumTouchCount ตัวอย่างเช่น หากคุณสมบัติ MaximumTouchCount เป็น "4" คุณจะไม่สามารถรับข้อมูลตําแหน่งที่ห้าได้โดยการสัมผัสหน้าจอสัมผัสด้วยห้านิ้ว

จํานวนการซื้อกิจการสําหรับสมาร์ทโฟน "HTC 7 Trophy" ที่ใช้ในตัวอย่างนี้คือ "4" (อย่างไรก็ตาม XNA Game Studio 4.0 ถูกกําหนดให้ส่งคืน 4 เสมอ) ข้อมูลจําเพาะของ Windows Phone 7 บอกว่ามีมากกว่า 4 คะแนน ดังนั้นจึงไม่ส่งคืนน้อยกว่า 4)

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

รูปที่ 3: TouchPanelCapabilities.จํานวนการดึงข้อมูลคุณสมบัติสูงสุดTouchCount

โปรแกรม - รับข้อมูลการสัมผัส

โครงสร้าง TouchCollection ที่ดึงมาประกอบด้วยข้อมูลการสัมผัสหลายรายการ ตัวอย่างเช่นหากคุณสัมผัสด้วยสองนิ้วโดยปกติจะมีการสัมผัสสองครั้ง

จํานวนของข้อมูลการสัมผัสสามารถเรียกค้นได้ในคุณสมบัติ TouchCollection.Count ข้อมูลการสัมผัสจะแสดงซ้ําๆ ในคําสั่ง for กี่ครั้งก็ได้ตามที่ได้รับ เดิมทีไม่มีปัญหาในการวนซ้ํากับ foreach แต่เนื่องจากเราจะใช้ดัชนีอาร์เรย์ (ดัชนี int) ในคําอธิบายในภายหลังเราจึงวนซ้ําด้วย

// タッチ情報の数だけループする
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);
}

ตอนนี้ข้อมูลการสัมผัสแต่ละครั้งจะได้รับเป็นโครงสร้าง "TouchLocation" หากวนซ้ําด้วยสําหรับสามารถรับได้ด้วย "TouchCollection [ดัชนี]" (คุณยังสามารถรับโครงสร้าง "TouchLocation" ได้โดยตรงใน foreach)

ข้อมูลสี่ประเภทต่อไปนี้สามารถรับได้จากโครงสร้าง "TouchLocation" และแต่ละข้อมูลจะแสดงในตัวอย่าง

เมื่อคุณเรียกใช้จริงข้อมูลการสัมผัสจะแสดงขึ้นดังที่แสดงด้านล่าง เมื่อคุณสัมผัสด้วยสามนิ้วคุณสามารถเห็นสามสัมผัส ถ้าคุณแตะด้วยห้านิ้วคุณจะเห็นได้เพียงสี่นิ้วเท่านั้น (เนื่องจากจํานวนการซื้อกิจการสูงสุดคือ 4)

รูปที่ 4: สัมผัสด้วยสามนิ้ว

โปรแกรม - สิ่งที่ต้องระวังเมื่อดึงข้อมูลการสัมผัส 1 (ดัชนีและ ID)

ฉันได้กล่าวไว้ข้างต้นว่ามีบางสิ่งที่ต้องจําไว้เมื่อจัดการกับข้อมูลการสัมผัส แต่อย่างแรกคือ "ดัชนี" และ "ID" ดัชนีหมายถึงดัชนีอาร์เรย์

ฉันคิดว่ามันง่ายกว่าที่จะเข้าใจถ้าคุณลองบนเครื่องจริงมากกว่าอธิบายเป็นลายลักษณ์อักษร ตัวอย่างเช่น สมมติว่าคุณใช้สองนิ้ว "นิ้วชี้" และ "นิ้วกลาง" และแตะด้วยนิ้วชี้ก่อน

รูปที่ 5: สัมผัสด้วยนิ้วชี้

ดังที่แสดงบนหน้าจอดัชนีจะเป็น "0" จากนั้นแตะด้วยนิ้วกลางของคุณ

รูปที่ 6: นิ้วกลางสัมผัส

ในสถานะนี้คุณกําลังสัมผัสด้วยสองนิ้วดังนั้นข้อมูลสองชิ้นจะปรากฏขึ้น ดัชนีที่สัมผัสด้วยนิ้วกลางคือ "1"

ลองยกนิ้วชี้ของเราที่นี่ จากนั้นข้อมูลการสัมผัสจะมีลักษณะดังต่อไปนี้

รูปที่ 7: ปล่อยนิ้วชี้

ดังที่คุณอาจสังเกตเห็นในตอนนี้ดัชนีของข้อมูลที่คุณสัมผัสด้วยนิ้วกลางของคุณคือ "0" หากคุณจัดการอักขระตามดัชนีเมื่อคุณย้ายการดําเนินการด้านบนจะนําไปสู่การดําเนินการต่อไปนี้

・ เลื่อนตัวละคร "A" ด้วยนิ้วชี้ของคุณ
↓
・ เลื่อนอักขระ "B" ด้วยนิ้วกลางในสถานะนั้น
↓
・ ปล่อยนิ้วชี้ในขณะที่ขยับตัวละครด้วยนิ้วกลาง
↓
・ ตัวละครที่ควบคุมโดยนิ้วกลางก็เปลี่ยนเป็น" A"

ปรากฏการณ์อีกประการหนึ่งคือหากคุณปล่อยหรือสัมผัสนิ้วใดนิ้วหนึ่งในสองนิ้วซ้ํา ๆ ในขณะที่สัมผัสข้อความรูปวาดของข้อมูลการสัมผัสครั้งแรกอาจกะพริบ นี่เป็นเพราะนิ้วที่สองขัดจังหวะดัชนี "0" ทันทีที่คุณสัมผัสหรือปล่อย

ดังที่ได้กล่าวมาแล้วดัชนีและลําดับของข้อมูลการสัมผัสเมื่อมัลติทัชไม่ตรงกับลําดับที่สัมผัส ถ้าคุณต้องการดําเนินการใด ๆ อย่าจัดการพวกเขาในดัชนี TouchCollection

สิ่งที่ควรจัดการคือโครงสร้าง "TouchLocation" มีคุณสมบัติ "Id" และ Id จะถูกเขียนใหม่ด้วยค่าใหม่ทุกครั้งที่สัมผัส แต่ความสัมพันธ์ระหว่างจุดสัมผัสและ ID จะรับประกันในขณะที่สัมผัสดังนั้นเราจะจัดการ

แน่นอนว่านี่ไม่ได้หมายความว่าคุณต้องจัดการด้วย ID และในบางกรณีตําแหน่งการสัมผัสเพียงอย่างเดียวก็เพียงพอแล้ว ตัวอย่างเช่นหากคุณเพียงแค่แตะปุ่มบนหน้าจอคุณสามารถตรวจสอบว่าคุณกดปุ่มโดยตรวจสอบตําแหน่งการสัมผัสโดยไม่คํานึงถึง ID อย่างไรก็ตามเมื่อรวมการประมวลผลการลากตําแหน่งจะเปลี่ยนไปเสมอดังนั้นฉันคิดว่ามันควรถูกกําหนดโดย ID

โปรแกรม -- สิ่งที่เก็บไว้ในใจเมื่อได้รับข้อมูลการสัมผัส 2 (จํานวนของข้อมูลการสัมผัสที่ได้รับ)

แม้ว่าจะไม่ได้รวมอยู่ในโปรแกรมของบทความ แต่ตัวอย่างจะดึงสตริง "GetMaxTouchCount" ที่ด้านล่างของหน้าจอและ "จํานวนข้อมูลการสัมผัสสูงสุดที่ได้รับในเวลาเดียวกัน" สิ่งนี้ได้แสดงจํานวนสูงสุดของข้อมูลการสัมผัสที่ได้รับจากวิธี "TouchPanel.GetState" ในอดีต แต่ในเครื่องทดสอบนี้คุณสมบัติ "TouchPanelCapabilities.MaximumTouchCount" คือ 4 ดังนั้นค่าสูงสุดที่แสดงที่นี่ควรเป็น 4 หากคุณใส่ห้านิ้วลงไปมันจะยังคงเป็น 4

รูปที่ 8: หมายเลขห้านิ้ว

ลองทําการทดลองเล็กน้อย ลองทําซ้ําหน้าจอสัมผัสด้วยหลายนิ้วด้วยความเร็วสูง ขึ้นอยู่กับเครื่องทดสอบ แต่จํานวนอาจเกิน 4 ก่อนที่คุณจะรู้

รูปที่ 9: GetMaxTouchCount มากกว่า 4

ในความเป็นจริงข้อมูลการสัมผัสที่ได้รับจากวิธีการ "TouchPanel.GetState" ไม่ใช่ข้อมูลการสัมผัสในขณะที่เรียกวิธีการ "TouchPanel.GetState" แต่ช่วงเวลาที่คุณสัมผัสและช่วงเวลาที่คุณปล่อยจากเวลาอัปเดตล่าสุดจะถูกแคช ดังนั้นแม้ว่าจะสามารถตรวจจับการสัมผัสได้ถึงสี่ครั้งในเวลาเดียวกันการสัมผัสนิ้วเดียวกันอีกครั้งจะถือว่าเป็นการสัมผัสที่แยกจากกันดังนั้นจึงอาจได้รับข้อมูลการสัมผัสมากกว่า TouchPanelCapabilities.MaximumTouchCount

ดังนั้นแม้ว่า TouchPanelCapabilities.MaximumTouchCount คือ 4 ถ้าจํานวนขององค์ประกอบอาร์เรย์ของข้อมูลที่เกี่ยวข้องกับการสัมผัสได้รับการแก้ไขโดย 4 ข้อผิดพลาด overage ดัชนีอาจเกิดขึ้นขึ้นอยู่กับวิธีการประมวลผล

อย่างไรก็ตามในความช่วยเหลือของ XNA Game Studio ค่าสูงสุดของคุณสมบัติ TouchCollection.Count ถูกอธิบายว่าเป็น "8" ดังนั้นหากคุณต้องการแก้ไขจํานวนองค์ประกอบในอาร์เรย์คุณควรตั้งค่าจํานวนองค์ประกอบเป็นอย่างน้อย 8 (ถ้าคุณคิดเกี่ยวกับการอัพเกรดรุ่นในอนาคตคุณอาจต้องการที่จะรวมประโยคยามเพื่อให้ดัชนีไม่ได้ไปมากกว่า.)

สรุปตัวอย่างนี้

คราวนี้เราตรวจสอบพารามิเตอร์ต่าง ๆ สําหรับข้อมูลที่ได้จากมัลติทัช นอกจากนี้เรายังยืนยันว่ามีบางจุดที่ควรคํานึงถึงเมื่อได้รับข้อมูลแผงสัมผัส จากความรู้นี้ฉันอยากจะอธิบายตัวอย่างที่ใช้มัลติทัชจริง ๆ